Skip to content

RFC: Enable full customization of Query Loop block inspector controls #43675

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
sunyatasattva wants to merge 4 commits into from
Closed

RFC: Enable full customization of Query Loop block inspector controls #43675

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a7e25b5
Refactor Inspector Controls out of the Query Loop block
sunyatasattva Aug 29, 2022
de13cd4
Refactor `getIsPostTypeHierarchical` to utilities functions
sunyatasattva Aug 29, 2022
00c5d45
Refactor filter controls into own file and add WP filter
sunyatasattva Aug 29, 2022
2732a0d
Pass component `props` to the `QueryLoop.FilterControls` filter
sunyatasattva Aug 29, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Refactor filter controls into own file and add WP filter
  • Loading branch information
@sunyatasattva
sunyatasattva committed Aug 29, 2022
commit 00c5d4519f6e4d1bac7366504b9e3485c8884921
96 changes: 96 additions & 0 deletions packages/block-library/src/query/edit/inspector-controls/filter-controls.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
/**
* WordPress dependencies
*/
import {
TextControl,
__experimentalToolsPanelItem as ToolsPanelItem,
} from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { useState } from '@wordpress/element';
import { applyFilters } from '@wordpress/hooks';

/**
* Internal dependencies
*/
import { useIsPostTypeHierarchical } from '../../utils';
import AuthorControl from './author-control';
import ParentControl from './parent-control';
import { TaxonomyControls, useTaxonomiesInfo } from './taxonomy-controls';

export const FILTERS_CONTROLS = applyFilters( 'editor.QueryLoop.filters', {
Authors: ( {
attributes: {
query: { author: authorIds },
},
setQuery,
} ) => (
<ToolsPanelItem
hasValue={ () => !! authorIds }
label={ __( 'Authors' ) }
onDeselect={ () => setQuery( { author: '' } ) }
>
<AuthorControl value={ authorIds } onChange={ setQuery } />
</ToolsPanelItem>
),
Keyword: ( {
attributes: {
query: { search },
},
} ) => {
const [ querySearch, setQuerySearch ] = useState( search );

return (
<ToolsPanelItem
hasValue={ () => !! querySearch }
label={ __( 'Keyword' ) }
onDeselect={ () => setQuerySearch( '' ) }
>
<TextControl
label={ __( 'Keyword' ) }
value={ querySearch }
onChange={ setQuerySearch }
/>
</ToolsPanelItem>
);
},
Parents: ( {
attributes: {
query: { parents, postType },
},
setQuery,
} ) => {
const isPostTypeHierarchical = useIsPostTypeHierarchical( postType );

return isPostTypeHierarchical ? (
<ToolsPanelItem
hasValue={ () => !! parents?.length }
label={ __( 'Parents' ) }
onDeselect={ () => setQuery( { parents: [] } ) }
>
<ParentControl
parents={ parents }
postType={ postType }
onChange={ setQuery }
/>
</ToolsPanelItem>
) : null;
},
Taxonomies: ( { attributes: { query }, setQuery } ) => {
const { postType, taxQuery } = query;
const taxonomiesInfo = useTaxonomiesInfo( postType );

return !! taxonomiesInfo?.length ? (
<ToolsPanelItem
label={ __( 'Taxonomies' ) }
hasValue={ () =>
Object.values( taxQuery || {} ).some(
( terms ) => !! terms.length
)
}
onDeselect={ () => setQuery( { taxQuery: null } ) }
>
<TaxonomyControls onChange={ setQuery } query={ query } />
</ToolsPanelItem>
) : null;
},
} );
69 changes: 9 additions & 60 deletions packages/block-library/src/query/edit/inspector-controls/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,7 @@ import { debounce } from 'lodash';
*/
import {
PanelBody,
TextControl,
__experimentalToolsPanel as ToolsPanel,
__experimentalToolsPanelItem as ToolsPanelItem,
} from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { InspectorControls } from '@wordpress/block-editor';
Expand All @@ -19,14 +17,11 @@ import { useEffect, useState, useCallback } from '@wordpress/element';
/**
* Internal dependencies
*/
import { useIsPostTypeHierarchical } from '../../utils';
import AuthorControl from './author-control';
import { FILTERS_CONTROLS } from './filter-controls';
import { Columns } from './columns';
import { Order } from './order-control';
import { InheritFromTemplate } from './inherit-from-template';
import ParentControl from './parent-control';
import { PostType } from './post-type';
import { TaxonomyControls, useTaxonomiesInfo } from './taxonomy-controls';
import { Sticky } from './sticky-control';

const INSPECTOR_CONTROLS = {
Expand All @@ -43,9 +38,7 @@ export default function QueryInspectorControls( props ) {
setQuery,
} = props;

const { author: authorIds, postType, inherit, taxQuery, parents } = query;
const taxonomiesInfo = useTaxonomiesInfo( postType );
const isPostTypeHierarchical = useIsPostTypeHierarchical( postType );
const { inherit } = query;
const [ querySearch, setQuerySearch ] = useState( query.search );
const onChangeDebounced = useCallback(
debounce( () => {
Expand Down Expand Up @@ -88,57 +81,13 @@ export default function QueryInspectorControls( props ) {
setQuerySearch( '' );
} }
>
{ !! taxonomiesInfo?.length && (
<ToolsPanelItem
label={ __( 'Taxonomies' ) }
hasValue={ () =>
Object.values( taxQuery || {} ).some(
( terms ) => !! terms.length
)
}
onDeselect={ () =>
setQuery( { taxQuery: null } )
}
>
<TaxonomyControls
onChange={ setQuery }
query={ query }
/>
</ToolsPanelItem>
) }
<ToolsPanelItem
hasValue={ () => !! authorIds }
label={ __( 'Authors' ) }
onDeselect={ () => setQuery( { author: '' } ) }
>
<AuthorControl
value={ authorIds }
onChange={ setQuery }
/>
</ToolsPanelItem>
<ToolsPanelItem
hasValue={ () => !! querySearch }
label={ __( 'Keyword' ) }
onDeselect={ () => setQuerySearch( '' ) }
>
<TextControl
label={ __( 'Keyword' ) }
value={ querySearch }
onChange={ setQuerySearch }
/>
</ToolsPanelItem>
{ isPostTypeHierarchical && (
<ToolsPanelItem
hasValue={ () => !! parents?.length }
label={ __( 'Parents' ) }
onDeselect={ () => setQuery( { parents: [] } ) }
>
<ParentControl
parents={ parents }
postType={ postType }
onChange={ setQuery }
/>
</ToolsPanelItem>
{ Object.entries( FILTERS_CONTROLS ).map(
( [ key, Control ] ) =>
disabledInspectorControls?.includes?.(
key
) ? null : (
<Control { ...props } />
)
) }
</ToolsPanel>
</InspectorControls>
Expand Down