From 5661b57c031addcfe3f93739b01d5650b98ed85d Mon Sep 17 00:00:00 2001 From: Sukhendu Sekhar Guria Date: Sat, 18 Jan 2025 09:46:28 +0530 Subject: [PATCH 01/10] Term List Block: Refactor settings panel to use ToolsPanel (#67955) * Term List Block: Refactor settings panel to use ToolsPanel * Fix: Add dropdown menu props to ToolsPanel component * Update toolpanel settings Co-authored-by: Sukhendu2002 Co-authored-by: t-hamano Co-authored-by: fabiankaegy --- packages/block-library/src/categories/edit.js | 178 +++++++++++++----- 1 file changed, 133 insertions(+), 45 deletions(-) diff --git a/packages/block-library/src/categories/edit.js b/packages/block-library/src/categories/edit.js index 8bd2769b0ec711..d8ea455b9ba1f7 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 { @@ -25,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, @@ -180,72 +186,154 @@ export default function CategoriesEdit( { const blockProps = useBlockProps( { className: classes, } ); + const dropdownMenuProps = useToolsPanelDropdownMenuProps(); return ( - + { + setAttributes( { + taxonomy: 'category', + displayAsDropdown: false, + showHierarchy: false, + showPostCounts: false, + showOnlyTopLevel: false, + showEmpty: false, + showLabel: true, + } ); + } } + dropdownMenuProps={ dropdownMenuProps } + > { Array.isArray( taxonomies ) && ( - { + return taxonomySlug !== 'category'; + } } label={ __( 'Taxonomy' ) } - options={ taxonomies.map( ( t ) => ( { - label: t.name, - value: t.slug, - } ) ) } - value={ taxonomySlug } - onChange={ ( selectedTaxonomy ) => - setAttributes( { - taxonomy: selectedTaxonomy, - } ) - } - /> + onDeselect={ () => { + setAttributes( { taxonomy: 'category' } ); + } } + isShownByDefault + > + ( { + label: t.name, + value: t.slug, + } ) ) } + value={ taxonomySlug } + onChange={ ( selectedTaxonomy ) => + setAttributes( { + taxonomy: selectedTaxonomy, + } ) + } + /> + ) } - !! displayAsDropdown } label={ __( 'Display as dropdown' ) } - checked={ displayAsDropdown } - onChange={ toggleAttribute( 'displayAsDropdown' ) } - /> - { displayAsDropdown && ( + onDeselect={ () => + setAttributes( { displayAsDropdown: false } ) + } + isShownByDefault + > + + { displayAsDropdown && ( + ! showLabel } + label={ __( 'Show label' ) } + onDeselect={ () => + setAttributes( { showLabel: true } ) + } + isShownByDefault + > + + ) } - !! showPostCounts } label={ __( 'Show post counts' ) } - checked={ showPostCounts } - onChange={ toggleAttribute( 'showPostCounts' ) } - /> - { isHierarchicalTaxonomy && ( + onDeselect={ () => + setAttributes( { showPostCounts: false } ) + } + isShownByDefault + > + + { isHierarchicalTaxonomy && ( + !! showOnlyTopLevel } + label={ __( 'Show only top level terms' ) } + onDeselect={ () => + setAttributes( { showOnlyTopLevel: false } ) + } + isShownByDefault + > + + ) } - !! showEmpty } label={ __( 'Show empty terms' ) } - checked={ showEmpty } - onChange={ toggleAttribute( 'showEmpty' ) } - /> - { isHierarchicalTaxonomy && ! showOnlyTopLevel && ( + onDeselect={ () => + setAttributes( { showEmpty: false } ) + } + isShownByDefault + > + + { isHierarchicalTaxonomy && ! showOnlyTopLevel && ( + !! showHierarchy } + label={ __( 'Show hierarchy' ) } + onDeselect={ () => + setAttributes( { showHierarchy: false } ) + } + isShownByDefault + > + + ) } - + { isResolving && ( From dce84c2bafd484d92407e68bb8a94d477d4257dd Mon Sep 17 00:00:00 2001 From: Himanshu Pathak Date: Sat, 18 Jan 2025 10:06:06 +0530 Subject: [PATCH 02/10] Latest Comments: Refactor settings panel to use ToolsPanel (#67951) * Latest Comments: Refactor settings panel to use ToolsPanel * Latest Comments: Simplify the structure and increase readability * Latest Comments: Add dropdownMenuProps for consistency Co-authored-by: himanshupathak95 Co-authored-by: t-hamano Co-authored-by: fabiankaegy --- .../block-library/src/latest-comments/edit.js | 126 +++++++++++++----- 1 file changed, 93 insertions(+), 33 deletions(-) diff --git a/packages/block-library/src/latest-comments/edit.js b/packages/block-library/src/latest-comments/edit.js index 85e66cf2e9dc60..432cd389efacc3 100644 --- a/packages/block-library/src/latest-comments/edit.js +++ b/packages/block-library/src/latest-comments/edit.js @@ -4,13 +4,19 @@ import { InspectorControls, useBlockProps } from '@wordpress/block-editor'; import { Disabled, - PanelBody, RangeControl, ToggleControl, + __experimentalToolsPanel as ToolsPanel, + __experimentalToolsPanelItem as ToolsPanelItem, } from '@wordpress/components'; import ServerSideRender from '@wordpress/server-side-render'; import { __ } from '@wordpress/i18n'; +/** + * Internal dependencies + */ +import { useToolsPanelDropdownMenuProps } from '../utils/hooks'; + /** * Minimum number of comments a user can show using this block. * @@ -36,49 +42,103 @@ export default function LatestComments( { attributes, setAttributes } ) { }, }; + const dropdownMenuProps = useToolsPanelDropdownMenuProps(); + return (
- - { + setAttributes( { + commentsToShow: 5, + displayAvatar: true, + displayDate: true, + displayExcerpt: true, + } ); + } } + dropdownMenuProps={ dropdownMenuProps } + > + ! displayAvatar } label={ __( 'Display avatar' ) } - checked={ displayAvatar } - onChange={ () => - setAttributes( { displayAvatar: ! displayAvatar } ) + onDeselect={ () => + setAttributes( { displayAvatar: true } ) } - /> - + + setAttributes( { + displayAvatar: ! displayAvatar, + } ) + } + /> + + + ! displayDate } label={ __( 'Display date' ) } - checked={ displayDate } - onChange={ () => - setAttributes( { displayDate: ! displayDate } ) + onDeselect={ () => + setAttributes( { displayDate: true } ) } - /> - + + setAttributes( { displayDate: ! displayDate } ) + } + /> + + + ! displayExcerpt } label={ __( 'Display excerpt' ) } - checked={ displayExcerpt } - onChange={ () => - setAttributes( { - displayExcerpt: ! displayExcerpt, - } ) + onDeselect={ () => + setAttributes( { displayExcerpt: true } ) } - /> - + + setAttributes( { + displayExcerpt: ! displayExcerpt, + } ) + } + /> + + + commentsToShow !== 5 } label={ __( 'Number of comments' ) } - value={ commentsToShow } - onChange={ ( value ) => - setAttributes( { commentsToShow: value } ) + onDeselect={ () => + setAttributes( { commentsToShow: 5 } ) } - min={ MIN_COMMENTS } - max={ MAX_COMMENTS } - required - /> - + isShownByDefault + > + + setAttributes( { commentsToShow: value } ) + } + min={ MIN_COMMENTS } + max={ MAX_COMMENTS } + required + /> + + Date: Sat, 18 Jan 2025 15:52:39 +0900 Subject: [PATCH 03/10] Query Page Numbers Block: Fix reset button display state (#68759) Co-authored-by: t-hamano Co-authored-by: Mamaduka --- packages/block-library/src/query-pagination-numbers/edit.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/query-pagination-numbers/edit.js b/packages/block-library/src/query-pagination-numbers/edit.js index cf2f92f41791ff..a03ed8419bb086 100644 --- a/packages/block-library/src/query-pagination-numbers/edit.js +++ b/packages/block-library/src/query-pagination-numbers/edit.js @@ -67,7 +67,7 @@ export default function QueryPaginationNumbersEdit( { > midSize !== undefined } + hasValue={ () => midSize !== 2 } onDeselect={ () => setAttributes( { midSize: 2 } ) } isShownByDefault > From 1efe523eecae1401c7125c5e96b775256be2382f Mon Sep 17 00:00:00 2001 From: Aki Hamano <54422211+t-hamano@users.noreply.github.com> Date: Sat, 18 Jan 2025 15:53:00 +0900 Subject: [PATCH 04/10] Post Date Block: Fix reset button display state (#68758) Co-authored-by: t-hamano Co-authored-by: Mamaduka --- packages/block-library/src/post-date/edit.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/block-library/src/post-date/edit.js b/packages/block-library/src/post-date/edit.js index 36de2f7e5d7255..0599e860904652 100644 --- a/packages/block-library/src/post-date/edit.js +++ b/packages/block-library/src/post-date/edit.js @@ -179,9 +179,7 @@ export default function PostDateEdit( { dropdownMenuProps={ dropdownMenuProps } > - format !== undefined && format !== siteFormat - } + hasValue={ () => !! format } label={ __( 'Date Format' ) } onDeselect={ () => setAttributes( { format: undefined } ) From 05863122b0fe313a004a85ea060c3366bb3a4901 Mon Sep 17 00:00:00 2001 From: Aki Hamano <54422211+t-hamano@users.noreply.github.com> Date: Sat, 18 Jan 2025 15:53:21 +0900 Subject: [PATCH 05/10] Search Results Title Block: Add dropdown menu props to Tools Panel component (#68763) Co-authored-by: t-hamano Co-authored-by: Mamaduka --- packages/block-library/src/query-title/edit.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-library/src/query-title/edit.js b/packages/block-library/src/query-title/edit.js index 3b739e2b20b4f9..0da6da47ef6147 100644 --- a/packages/block-library/src/query-title/edit.js +++ b/packages/block-library/src/query-title/edit.js @@ -141,6 +141,7 @@ export default function QueryTitleEdit( { showSearchTerm: true, } ) } + dropdownMenuProps={ dropdownMenuProps } > ! showSearchTerm } From 441a7b5144f416f46b69f545b94401b2aa298997 Mon Sep 17 00:00:00 2001 From: Aki Hamano <54422211+t-hamano@users.noreply.github.com> Date: Sat, 18 Jan 2025 15:53:35 +0900 Subject: [PATCH 06/10] Spacer: Add dropdown menu props to Tools Panel component (#68761) Co-authored-by: t-hamano Co-authored-by: Mamaduka --- packages/block-library/src/spacer/controls.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/block-library/src/spacer/controls.js b/packages/block-library/src/spacer/controls.js index fde06d3ee8c339..b5f73a259419d2 100644 --- a/packages/block-library/src/spacer/controls.js +++ b/packages/block-library/src/spacer/controls.js @@ -24,6 +24,7 @@ import { View } from '@wordpress/primitives'; */ import { unlock } from '../lock-unlock'; import { MIN_SPACER_SIZE } from './constants'; +import { useToolsPanelDropdownMenuProps } from '../utils/hooks'; const { useSpacingSizes } = unlock( blockEditorPrivateApis ); @@ -93,6 +94,8 @@ export default function SpacerControls( { width, isResizing, } ) { + const dropdownMenuProps = useToolsPanelDropdownMenuProps(); + return ( { orientation === 'horizontal' && ( Date: Sat, 18 Jan 2025 15:53:48 +0900 Subject: [PATCH 07/10] Video: fix react component warning error (#68762) Co-authored-by: t-hamano Co-authored-by: Mamaduka --- packages/block-library/src/video/edit-common-settings.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/video/edit-common-settings.js b/packages/block-library/src/video/edit-common-settings.js index 4f85f929b07cfc..96d59d7e2f7269 100644 --- a/packages/block-library/src/video/edit-common-settings.js +++ b/packages/block-library/src/video/edit-common-settings.js @@ -125,7 +125,7 @@ const VideoSettings = ( { setAttributes, attributes } ) => { /* translators: Setting to play videos within the webpage on mobile browsers rather than opening in a fullscreen player. */ label={ __( 'Play inline' ) } onChange={ toggleFactory.playsInline } - checked={ playsInline } + checked={ !! playsInline } help={ __( 'When enabled, videos will play directly within the webpage on mobile browsers, instead of opening in a fullscreen player.' ) } From 63523f2ccce85f35d9ccf5de1f0e82d7496c848a Mon Sep 17 00:00:00 2001 From: Aki Hamano <54422211+t-hamano@users.noreply.github.com> Date: Sat, 18 Jan 2025 15:54:08 +0900 Subject: [PATCH 08/10] Page List Block: fix empty settings panel (#68756) Co-authored-by: t-hamano Co-authored-by: Mamaduka --- packages/block-library/src/page-list/edit.js | 102 ++++++++++--------- 1 file changed, 52 insertions(+), 50 deletions(-) diff --git a/packages/block-library/src/page-list/edit.js b/packages/block-library/src/page-list/edit.js index 8f1409f864f9b9..458b8075749e5d 100644 --- a/packages/block-library/src/page-list/edit.js +++ b/packages/block-library/src/page-list/edit.js @@ -322,58 +322,60 @@ export default function PageListEdit( { return ( <> - - { - setAttributes( { parentPageID: 0 } ); - } } - dropdownMenuProps={ dropdownMenuProps } - > - { pagesTree.length > 0 && ( - parentPageID !== 0 } - onDeselect={ () => - setAttributes( { parentPageID: 0 } ) - } - isShownByDefault - > - - setAttributes( { - parentPageID: value ?? 0, - } ) + { ( pagesTree.length > 0 || allowConvertToLinks ) && ( + + { + setAttributes( { parentPageID: 0 } ); + } } + dropdownMenuProps={ dropdownMenuProps } + > + { pagesTree.length > 0 && ( + parentPageID !== 0 } + onDeselect={ () => + setAttributes( { parentPageID: 0 } ) } - help={ __( - 'Choose a page to show only its subpages.' - ) } - /> - - ) } - - { allowConvertToLinks && ( -
-

{ convertDescription }

- -
- ) } - - + + setAttributes( { + parentPageID: value ?? 0, + } ) + } + help={ __( + 'Choose a page to show only its subpages.' + ) } + /> + + ) } + + { allowConvertToLinks && ( +
+

{ convertDescription }

+ +
+ ) } + + + ) } { allowConvertToLinks && ( <> From bd2c328996dfb7488b9825659201c27f443fa19f Mon Sep 17 00:00:00 2001 From: Aki Hamano <54422211+t-hamano@users.noreply.github.com> Date: Sat, 18 Jan 2025 15:54:23 +0900 Subject: [PATCH 09/10] Archives Block: Fix reset button display state (#68757) Co-authored-by: t-hamano Co-authored-by: Mamaduka --- packages/block-library/src/archives/edit.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/archives/edit.js b/packages/block-library/src/archives/edit.js index d4f25da8507f3e..81c5a735acf480 100644 --- a/packages/block-library/src/archives/edit.js +++ b/packages/block-library/src/archives/edit.js @@ -61,7 +61,7 @@ export default function ArchivesEdit( { attributes, setAttributes } ) { showLabel } + hasValue={ () => ! showLabel } onDeselect={ () => setAttributes( { showLabel: false } ) } @@ -102,7 +102,7 @@ export default function ArchivesEdit( { attributes, setAttributes } ) { !! type } + hasValue={ () => type !== 'monthly' } onDeselect={ () => setAttributes( { type: 'monthly' } ) } From 61d7b50dce3468454ccb975396382a4ffdb5935d Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Sat, 18 Jan 2025 11:46:23 +0400 Subject: [PATCH 10/10] Embed: Remove aspect ratio classes when transforming into Paragraph (#68721) Co-authored-by: Mamaduka Co-authored-by: t-hamano Co-authored-by: ZebulanStanphill Co-authored-by: kathrynwp Co-authored-by: ndiego Co-authored-by: jorgefilipecosta Co-authored-by: petitphp Co-authored-by: ts-mz --- packages/block-editor/src/hooks/custom-class-name.js | 3 ++- packages/block-library/src/embed/transforms.js | 4 +++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/hooks/custom-class-name.js b/packages/block-editor/src/hooks/custom-class-name.js index 91ef07506fd95c..a7f8cab8c82237 100644 --- a/packages/block-editor/src/hooks/custom-class-name.js +++ b/packages/block-editor/src/hooks/custom-class-name.js @@ -123,7 +123,8 @@ export function addTransforms( result, source, index, results ) { // if source N does not exists we do nothing. if ( source[ index ] ) { const originClassName = source[ index ]?.attributes.className; - if ( originClassName ) { + // Avoid overriding classes if the transformed block already includes them. + if ( originClassName && result.attributes.className === undefined ) { return { ...result, attributes: { diff --git a/packages/block-library/src/embed/transforms.js b/packages/block-library/src/embed/transforms.js index cf29511fde7af4..82c46da1fa7f94 100644 --- a/packages/block-library/src/embed/transforms.js +++ b/packages/block-library/src/embed/transforms.js @@ -7,6 +7,7 @@ import { createBlock } from '@wordpress/blocks'; * Internal dependencies */ import metadata from './block.json'; +import { removeAspectRatioClasses } from './util'; const { name: EMBED_BLOCK } = metadata; @@ -33,13 +34,14 @@ const transforms = { type: 'block', blocks: [ 'core/paragraph' ], isMatch: ( { url } ) => !! url, - transform: ( { url, caption } ) => { + transform: ( { url, caption, className } ) => { let value = `${ url }`; if ( caption?.trim() ) { value += `
${ caption }`; } return createBlock( 'core/paragraph', { content: value, + className: removeAspectRatioClasses( className ), } ); }, },