Merge pull request #818 from alleyinteractive/feature/post-selector-filters

Feature/post selector filters

Author: mogmarsh

.changeset/seven-masks-admire.md

@@ -0,0 +1,5 @@
+---
+"@alleyinteractive/block-editor-tools": minor
+---
+
+Adds filters prop to PostSelector to allow custom filters or instructions in the modal.

packages/block-editor-tools/src/components/post-picker/README.md

@@ -25,6 +25,8 @@ results, and a custom function for fetching post data given a post ID.
 |----------------|----------------|----------|----------|-----------------------------------------------------------------------------------------------------------------|
 | allowedTypes   | `[]`         | No       | array    | Array with the post types to select from. Defaults to empty array (all types). |
 | className      | `''`           | No       | string   | Class name for the post picker container.                                                                      |
+| filters        |                | No       | JSX Node(s) | Optional JSX to display between the search field and post list in the modal, to add
+instructions or filters. It is up to the implementer to handle changes and adjust the other props (such as allowedTypes or params) accordingly. |
 | getPostType    |                | No       | function | Function to retrieve the post type for a post ID. This function must return a string. |
 | modalTitle     | `Select Post`  | No       | string   | Title of the modal that shows posts. |
 | onReset        |                | Yes      | function | Function to reset the post ID to 0.                          |

packages/block-editor-tools/src/components/post-picker/index.tsx

@@ -1,4 +1,4 @@
-import { useState, JSX } from 'react';
+import React, { useState, JSX } from 'react';
 import styled from 'styled-components';
 
 import {
@@ -20,6 +20,7 @@ import Post from './post';
 interface PostPickerProps {
   allowedTypes?: string[];
   className?: string;
+  filters?: React.ReactNode;
   getPostType?: (id: number) => string;
   modalTitle?: string;
   modalFormat?: 'grid' | 'list';
@@ -61,6 +62,7 @@ const StyledNotice = styled(Notice)`
 const PostPicker = ({
   allowedTypes,
   className,
+  filters,
   getPostType,
   modalTitle = __('Select Post', 'alley-scripts'),
   modalFormat = 'grid',
@@ -189,6 +191,7 @@ const PostPicker = ({
           onUpdate={onUpdate}
           searchRender={searchRender}
           suppressPostIds={suppressPostIds}
+          filters={filters}
         />
       ) : null}
     </Container>

packages/block-editor-tools/src/components/post-picker/post-list.tsx

@@ -1,5 +1,9 @@
-import {
-  useCallback, useEffect, useState, JSX,
+import React, {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  JSX,
 } from 'react';
 import styled, { css } from 'styled-components';
 import apiFetch from '@wordpress/api-fetch';
@@ -14,6 +18,7 @@ import Post from './post';
 
 interface PostListProps {
   baseUrl: string;
+  filters?: React.ReactNode;
   format?: 'grid' | 'list';
   searchRender?: (post: object) => JSX.Element;
   selected?: number;
@@ -27,15 +32,10 @@ interface Params {
 }
 
 const Container = styled.div`
-  height: calc(90vh - 220px);
   // Allow space for focus state.
   margin: 0 -0.5rem;
   overflow-y: auto;
   padding: 0 0.5rem;
-
-  @media (min-width: 600px) {
-    height: calc(70vh - 230px);
-  }
 `;
 
 const Wrapper = styled.div<{ $format?: string; }>`
@@ -126,6 +126,7 @@ const LoadMore = styled.div`
  */
 const PostList = ({
   baseUrl,
+  filters,
   format,
   searchRender,
   selected,
@@ -244,6 +245,12 @@ const PostList = ({
     };
   }, [getPosts, initialLoad, pathParams]);
 
+  useEffect(() => {
+    handleSearchTextChange(pathParams.searchValue);
+  }, [baseUrl]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const filterDiv = useRef<HTMLDivElement>(null);
+  const modalHeight = window.innerWidth < 600 ? '95vh' : '70vh';
   return (
     <>
       <TextControl
@@ -253,7 +260,8 @@ const PostList = ({
         // @ts-ignore
         onChange={handleSearchTextChange}
       />
-      <Container>
+      {filters ? <div ref={filterDiv}>{filters}</div> : null}
+      <Container style={{ height: filterDiv.current?.offsetHeight ? `calc(${modalHeight} - ${filterDiv.current?.offsetHeight}px - 254px)` : `calc(${modalHeight} - 254px)` }}>
         <Wrapper $format={format}>
           <h2 id="post-picker-results-heading" className="screen-reader-text">
             {__('Search Results', 'alley-scripts')}

packages/block-editor-tools/src/components/post-picker/search-modal.tsx

@@ -1,4 +1,4 @@
-import { useState, JSX } from 'react';
+import React, { useState, JSX } from 'react';
 import styled, { css } from 'styled-components';
 import { __ } from '@wordpress/i18n';
 import {
@@ -11,6 +11,7 @@ import PostList from './post-list';
 interface SearchModalProps {
   baseUrl: string;
   closeModal: () => void;
+  filters?: React.ReactNode;
   format?: 'grid' | 'list';
   modalTitle: string;
   onUpdate: (id: number) => void;
@@ -50,6 +51,7 @@ const Buttons = styled.div`
 const SearchModal = ({
   baseUrl,
   closeModal,
+  filters,
   format = 'grid',
   modalTitle,
   onUpdate,
@@ -81,6 +83,7 @@ const SearchModal = ({
         setSelected={setSelected}
         searchRender={searchRender}
         suppressPostIds={suppressPostIds}
+        filters={filters}
       />
       <Buttons>
         <Button

plugin/entries/slotfills/index.tsx

@@ -40,6 +40,10 @@ registerPlugin('alley-scripts-plugin-sidebar', {
     const [
       selectedCheckboxes, setSelectedCheckboxes,
     ] = useState<string[]>([]); // eslint-disable-line react-hooks/rules-of-hooks
+    const [
+      testFilterPostTypes,
+      setTestFilterPostTypes,
+    ] = useState<String[]>(['post']); // eslint-disable-line react-hooks/rules-of-hooks
 
     const {
       alley_scripts_audio_picker_id: audioPickerId = '',
@@ -51,6 +55,20 @@ registerPlugin('alley-scripts-plugin-sidebar', {
       alley_scripts_term_selector: termSelector = [],
     } = meta;
 
+    function TestFilter() {
+      return (
+        <Checkboxes
+          label={__('Filter Post Types', 'alley-scripts')}
+          value={testFilterPostTypes}
+          onChange={(newValue: string[]) => setTestFilterPostTypes(newValue.length ? newValue : ['post'])}
+          options={[
+            { value: 'post', label: __('Posts', 'alley-scripts') },
+            { value: 'page', label: __('Pages', 'alley-scripts') },
+          ]}
+        />
+      );
+    }
+
     return (
       <>
         <PluginSidebar
@@ -106,6 +124,8 @@ registerPlugin('alley-scripts-plugin-sidebar', {
               onUpdate={(id: number) => setMeta({ alley_scripts_post_picker_id: id })}
               onReset={() => setMeta({ alley_scripts_post_picker_id: 0 })}
               value={postId}
+              filters={<TestFilter />}
+              allowedTypes={testFilterPostTypes.length ? testFilterPostTypes : []}
             />
           </PanelBody>
           <PanelBody initialOpen title={__('Post Picker (List)', 'alley-scripts')}>