From 11a83bb2c2fe51d636d094dde21c3b146f39c927 Mon Sep 17 00:00:00 2001 From: Sukhendu Sekhar Guria Date: Fri, 13 Dec 2024 13:44:40 +0530 Subject: [PATCH 1/3] Term List Block: Refactor settings panel to use ToolsPanel --- packages/block-library/src/categories/edit.js | 176 +++++++++++++----- 1 file changed, 131 insertions(+), 45 deletions(-) diff --git a/packages/block-library/src/categories/edit.js b/packages/block-library/src/categories/edit.js index 8bd2769b0ec71..cab765893dfbc 100644 --- a/packages/block-library/src/categories/edit.js +++ b/packages/block-library/src/categories/edit.js @@ -7,12 +7,13 @@ import clsx from 'clsx'; * WordPress dependencies */ import { - PanelBody, Placeholder, SelectControl, Spinner, ToggleControl, VisuallyHidden, + __experimentalToolsPanel as ToolsPanel, + __experimentalToolsPanelItem as ToolsPanelItem, } from '@wordpress/components'; import { useInstanceId } from '@wordpress/compose'; import { @@ -184,68 +185,153 @@ export default function CategoriesEdit( { return ( - + { + setAttributes( { + displayAsDropdown: false, + showHierarchy: false, + showPostCounts: false, + showOnlyTopLevel: false, + showEmpty: false, + showLabel: true, + } ); + } } + > { Array.isArray( taxonomies ) && ( - { + return taxonomySlug !== 'category' + ? taxonomySlug !== 'post_tag' + : taxonomySlug !== 'category'; + } } label={ __( 'Taxonomy' ) } - options={ taxonomies.map( ( t ) => ( { - label: t.name, - value: t.slug, - } ) ) } - value={ taxonomySlug } - onChange={ ( selectedTaxonomy ) => - setAttributes( { - taxonomy: selectedTaxonomy, - } ) - } - /> + onDeselect={ () => { + const defaultTaxonomy = + taxonomySlug !== 'category' + ? 'post_tag' + : 'category'; + setAttributes( { taxonomy: defaultTaxonomy } ); + } } + isShownByDefault + > + ( { + label: t.name, + value: t.slug, + } ) ) } + value={ taxonomySlug } + onChange={ ( selectedTaxonomy ) => + setAttributes( { + taxonomy: selectedTaxonomy, + } ) + } + /> + ) } - displayAsDropdown !== false } label={ __( 'Display as dropdown' ) } - checked={ displayAsDropdown } - onChange={ toggleAttribute( 'displayAsDropdown' ) } - /> - { displayAsDropdown && ( + onDeselect={ () => + setAttributes( { displayAsDropdown: false } ) + } + isShownByDefault + > + + { displayAsDropdown && ( + showLabel !== true } + label={ __( 'Show label' ) } + onDeselect={ () => + setAttributes( { showLabel: true } ) + } + isShownByDefault + > + + ) } - showPostCounts !== false } label={ __( 'Show post counts' ) } - checked={ showPostCounts } - onChange={ toggleAttribute( 'showPostCounts' ) } - /> - { isHierarchicalTaxonomy && ( + onDeselect={ () => + setAttributes( { showPostCounts: false } ) + } + isShownByDefault + > + + { isHierarchicalTaxonomy && ( + showOnlyTopLevel !== false } + label={ __( 'Show only top level terms' ) } + onDeselect={ () => + setAttributes( { showOnlyTopLevel: false } ) + } + isShownByDefault + > + + ) } - showEmpty !== false } label={ __( 'Show empty terms' ) } - checked={ showEmpty } - onChange={ toggleAttribute( 'showEmpty' ) } - /> - { isHierarchicalTaxonomy && ! showOnlyTopLevel && ( + onDeselect={ () => + setAttributes( { showEmpty: false } ) + } + isShownByDefault + > + + { isHierarchicalTaxonomy && ! showOnlyTopLevel && ( + showHierarchy !== false } + label={ __( 'Show hierarchy' ) } + onDeselect={ () => + setAttributes( { showHierarchy: false } ) + } + isShownByDefault + > + + ) } - + { isResolving && ( From b153f217ebded46a267590b459be84990e784279 Mon Sep 17 00:00:00 2001 From: Sukhendu Sekhar Guria Date: Tue, 17 Dec 2024 13:01:09 +0530 Subject: [PATCH 2/3] Fix: Add dropdown menu props to ToolsPanel component --- packages/block-library/src/categories/edit.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/block-library/src/categories/edit.js b/packages/block-library/src/categories/edit.js index cab765893dfbc..ff12a31a2cd10 100644 --- a/packages/block-library/src/categories/edit.js +++ b/packages/block-library/src/categories/edit.js @@ -26,6 +26,11 @@ import { __, sprintf } from '@wordpress/i18n'; import { pin } from '@wordpress/icons'; import { useEntityRecords } from '@wordpress/core-data'; +/** + * Internal dependencies + */ +import { useToolsPanelDropdownMenuProps } from '../utils/hooks'; + export default function CategoriesEdit( { attributes: { displayAsDropdown, @@ -181,6 +186,7 @@ export default function CategoriesEdit( { const blockProps = useBlockProps( { className: classes, } ); + const dropdownMenuProps = useToolsPanelDropdownMenuProps(); return ( @@ -197,6 +203,7 @@ export default function CategoriesEdit( { showLabel: true, } ); } } + dropdownMenuProps={ dropdownMenuProps } > { Array.isArray( taxonomies ) && ( Date: Mon, 13 Jan 2025 11:56:53 +0530 Subject: [PATCH 3/3] Update toolpanel setings --- packages/block-library/src/categories/edit.js | 23 ++++++++----------- 1 file changed, 9 insertions(+), 14 deletions(-) diff --git a/packages/block-library/src/categories/edit.js b/packages/block-library/src/categories/edit.js index ff12a31a2cd10..d8ea455b9ba1f 100644 --- a/packages/block-library/src/categories/edit.js +++ b/packages/block-library/src/categories/edit.js @@ -195,6 +195,7 @@ export default function CategoriesEdit( { label={ __( 'Settings' ) } resetAll={ () => { setAttributes( { + taxonomy: 'category', displayAsDropdown: false, showHierarchy: false, showPostCounts: false, @@ -208,17 +209,11 @@ export default function CategoriesEdit( { { Array.isArray( taxonomies ) && ( { - return taxonomySlug !== 'category' - ? taxonomySlug !== 'post_tag' - : taxonomySlug !== 'category'; + return taxonomySlug !== 'category'; } } label={ __( 'Taxonomy' ) } onDeselect={ () => { - const defaultTaxonomy = - taxonomySlug !== 'category' - ? 'post_tag' - : 'category'; - setAttributes( { taxonomy: defaultTaxonomy } ); + setAttributes( { taxonomy: 'category' } ); } } isShownByDefault > @@ -240,7 +235,7 @@ export default function CategoriesEdit( { ) } displayAsDropdown !== false } + hasValue={ () => !! displayAsDropdown } label={ __( 'Display as dropdown' ) } onDeselect={ () => setAttributes( { displayAsDropdown: false } ) @@ -256,7 +251,7 @@ export default function CategoriesEdit( { { displayAsDropdown && ( showLabel !== true } + hasValue={ () => ! showLabel } label={ __( 'Show label' ) } onDeselect={ () => setAttributes( { showLabel: true } ) @@ -273,7 +268,7 @@ export default function CategoriesEdit( { ) } showPostCounts !== false } + hasValue={ () => !! showPostCounts } label={ __( 'Show post counts' ) } onDeselect={ () => setAttributes( { showPostCounts: false } ) @@ -289,7 +284,7 @@ export default function CategoriesEdit( { { isHierarchicalTaxonomy && ( showOnlyTopLevel !== false } + hasValue={ () => !! showOnlyTopLevel } label={ __( 'Show only top level terms' ) } onDeselect={ () => setAttributes( { showOnlyTopLevel: false } ) @@ -307,7 +302,7 @@ export default function CategoriesEdit( { ) } showEmpty !== false } + hasValue={ () => !! showEmpty } label={ __( 'Show empty terms' ) } onDeselect={ () => setAttributes( { showEmpty: false } ) @@ -323,7 +318,7 @@ export default function CategoriesEdit( { { isHierarchicalTaxonomy && ! showOnlyTopLevel && ( showHierarchy !== false } + hasValue={ () => !! showHierarchy } label={ __( 'Show hierarchy' ) } onDeselect={ () => setAttributes( { showHierarchy: false } )