diff --git a/packages/block-editor/src/hooks/custom-class-name.js b/packages/block-editor/src/hooks/custom-class-name.js index 91ef07506fd95..a7f8cab8c8223 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/archives/edit.js b/packages/block-library/src/archives/edit.js index d4f25da8507f3..81c5a735acf48 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' } ) } diff --git a/packages/block-library/src/categories/edit.js b/packages/block-library/src/categories/edit.js index 8bd2769b0ec71..d8ea455b9ba1f 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 && ( diff --git a/packages/block-library/src/embed/transforms.js b/packages/block-library/src/embed/transforms.js index cf29511fde7af..82c46da1fa7f9 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 ), } ); }, }, diff --git a/packages/block-library/src/latest-comments/edit.js b/packages/block-library/src/latest-comments/edit.js index 85e66cf2e9dc6..432cd389efacc 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 + /> + + - - { - 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 && ( <> diff --git a/packages/block-library/src/post-date/edit.js b/packages/block-library/src/post-date/edit.js index 36de2f7e5d725..0599e86090465 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 } ) diff --git a/packages/block-library/src/query-pagination-numbers/edit.js b/packages/block-library/src/query-pagination-numbers/edit.js index cf2f92f41791f..a03ed8419bb08 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 > diff --git a/packages/block-library/src/query-title/edit.js b/packages/block-library/src/query-title/edit.js index 3b739e2b20b4f..0da6da47ef614 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 } diff --git a/packages/block-library/src/spacer/controls.js b/packages/block-library/src/spacer/controls.js index fde06d3ee8c33..b5f73a259419d 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' && ( { /* 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.' ) }