@wordpress/block-editor 11.7.0 → 12.0.0

package/src/components/global-styles/use-global-styles-output.js

@@ -9,6 +9,7 @@ import { get, isEmpty, kebabCase, set } from 'lodash';
 import {
 	__EXPERIMENTAL_STYLE_PROPERTY as STYLE_PROPERTY,
 	__EXPERIMENTAL_ELEMENTS as ELEMENTS,
+	getBlockSupport,
 	getBlockTypes,
 	store as blocksStore,
 } from '@wordpress/blocks';
@@ -324,7 +325,7 @@ export function getStylesDeclarations(
 				return declarations;
 			}
 
-			if ( !! properties && typeof styleValue !== 'string' ) {
+			if ( properties && typeof styleValue !== 'string' ) {
 				Object.entries( properties ).forEach( ( entry ) => {
 					const [ name, prop ] = entry;
 
@@ -381,7 +382,7 @@ export function getStylesDeclarations(
 			ruleValue = get( tree, refPath );
 			// Presence of another ref indicates a reference to another dynamic value.
 			// Pointing to another dynamic value is not supported.
-			if ( ! ruleValue || !! ruleValue?.ref ) {
+			if ( ! ruleValue || ruleValue?.ref ) {
 				return;
 			}
 		}
@@ -483,10 +484,10 @@ export function getLayoutStyles( {
 							} else {
 								combinedSelector =
 									selector === ROOT_BLOCK_SELECTOR
-										? `${ selector } .${ className }${
+										? `:where(${ selector } .${ className })${
 												spacingStyle?.selector || ''
 										  }`
-										: `${ selector }-${ className }${ selector }-${ className }${
+										: `${ selector }-${ className }${
 												spacingStyle?.selector || ''
 										  }`;
 							}
@@ -550,6 +551,33 @@ export function getLayoutStyles( {
 	return ruleset;
 }
 
+const STYLE_KEYS = [
+	'border',
+	'color',
+	'dimensions',
+	'spacing',
+	'typography',
+	'filter',
+	'outline',
+	'shadow',
+];
+
+function pickStyleKeys( treeToPickFrom ) {
+	if ( ! treeToPickFrom ) {
+		return {};
+	}
+	const entries = Object.entries( treeToPickFrom );
+	const pickedEntries = entries.filter( ( [ key ] ) =>
+		STYLE_KEYS.includes( key )
+	);
+	// clone the style objects so that `getFeatureDeclarations` can remove consumed keys from it
+	const clonedEntries = pickedEntries.map( ( [ key, style ] ) => [
+		key,
+		JSON.parse( JSON.stringify( style ) ),
+	] );
+	return Object.fromEntries( clonedEntries );
+}
+
 export const getNodesWithStyles = ( tree, blockSelectors ) => {
 	const nodes = [];
 
@@ -557,25 +585,9 @@ export const getNodesWithStyles = ( tree, blockSelectors ) => {
 		return nodes;
 	}
 
-	const pickStyleKeys = ( treeToPickFrom ) =>
-		Object.fromEntries(
-			Object.entries( treeToPickFrom ?? {} ).filter( ( [ key ] ) =>
-				[
-					'border',
-					'color',
-					'dimensions',
-					'spacing',
-					'typography',
-					'filter',
-					'outline',
-					'shadow',
-				].includes( key )
-			)
-		);
-
 	// Top-level.
 	const styles = pickStyleKeys( tree.styles );
-	if ( !! styles ) {
+	if ( styles ) {
 		nodes.push( {
 			styles,
 			selector: ROOT_BLOCK_SELECTOR,
@@ -583,7 +595,7 @@ export const getNodesWithStyles = ( tree, blockSelectors ) => {
 	}
 
 	Object.entries( ELEMENTS ).forEach( ( [ name, selector ] ) => {
-		if ( !! tree.styles?.elements?.[ name ] ) {
+		if ( tree.styles?.elements?.[ name ] ) {
 			nodes.push( {
 				styles: tree.styles?.elements?.[ name ],
 				selector,
@@ -605,10 +617,7 @@ export const getNodesWithStyles = ( tree, blockSelectors ) => {
 				} );
 				blockStyles.variations = variations;
 			}
-			if (
-				!! blockStyles &&
-				!! blockSelectors?.[ blockName ]?.selector
-			) {
+			if ( blockStyles && blockSelectors?.[ blockName ]?.selector ) {
 				nodes.push( {
 					duotoneSelector:
 						blockSelectors[ blockName ].duotoneSelector,
@@ -616,7 +625,7 @@ export const getNodesWithStyles = ( tree, blockSelectors ) => {
 						blockSelectors[ blockName ].fallbackGapValue,
 					hasLayoutSupport:
 						blockSelectors[ blockName ].hasLayoutSupport,
-					selector: blockSelectors[ blockName ]?.selector,
+					selector: blockSelectors[ blockName ].selector,
 					styles: blockStyles,
 					featureSelectors:
 						blockSelectors[ blockName ].featureSelectors,
@@ -628,9 +637,9 @@ export const getNodesWithStyles = ( tree, blockSelectors ) => {
 			Object.entries( node?.elements ?? {} ).forEach(
 				( [ elementName, value ] ) => {
 					if (
-						!! value &&
-						!! blockSelectors?.[ blockName ] &&
-						!! ELEMENTS?.[ elementName ]
+						value &&
+						blockSelectors?.[ blockName ] &&
+						ELEMENTS[ elementName ]
 					) {
 						nodes.push( {
 							styles: value,
@@ -676,7 +685,7 @@ export const getNodesWithSettings = ( tree, blockSelectors ) => {
 	// Top-level.
 	const presets = pickPresets( tree.settings );
 	const custom = tree.settings?.custom;
-	if ( ! isEmpty( presets ) || !! custom ) {
+	if ( ! isEmpty( presets ) || custom ) {
 		nodes.push( {
 			presets,
 			custom,
@@ -689,7 +698,7 @@ export const getNodesWithSettings = ( tree, blockSelectors ) => {
 		( [ blockName, node ] ) => {
 			const blockPresets = pickPresets( node );
 			const blockCustom = node.custom;
-			if ( ! isEmpty( blockPresets ) || !! blockCustom ) {
+			if ( ! isEmpty( blockPresets ) || blockCustom ) {
 				nodes.push( {
 					presets: blockPresets,
 					custom: blockCustom,
@@ -713,7 +722,7 @@ export const toCustomProperties = ( tree, blockSelectors ) => {
 		}
 
 		if ( declarations.length > 0 ) {
-			ruleset = ruleset + `${ selector }{${ declarations.join( ';' ) };}`;
+			ruleset += `${ selector }{${ declarations.join( ';' ) };}`;
 		}
 	} );
 
@@ -786,9 +795,9 @@ export const toStyles = (
 
 				Object.entries( featureDeclarations ).forEach(
 					( [ cssSelector, declarations ] ) => {
-						if ( !! declarations.length ) {
+						if ( declarations.length ) {
 							const rules = declarations.join( ';' );
-							ruleset = ruleset + `${ cssSelector }{${ rules }}`;
+							ruleset += `${ cssSelector }{${ rules };}`;
 						}
 					}
 				);
@@ -797,20 +806,20 @@ export const toStyles = (
 			if ( styleVariationSelectors ) {
 				Object.entries( styleVariationSelectors ).forEach(
 					( [ styleVariationName, styleVariationSelector ] ) => {
-						if ( styles?.variations?.[ styleVariationName ] ) {
+						const styleVariations =
+							styles?.variations?.[ styleVariationName ];
+						if ( styleVariations ) {
 							// If the block uses any custom selectors for block support, add those first.
 							if ( featureSelectors ) {
 								const featureDeclarations =
 									getFeatureDeclarations(
 										featureSelectors,
-										styles?.variations?.[
-											styleVariationName
-										]
+										styleVariations
 									);
 
 								Object.entries( featureDeclarations ).forEach(
 									( [ baseSelector, declarations ] ) => {
-										if ( !! declarations.length ) {
+										if ( declarations.length ) {
 											const cssSelector =
 												concatFeatureVariationSelectorString(
 													baseSelector,
@@ -818,9 +827,7 @@ export const toStyles = (
 												);
 											const rules =
 												declarations.join( ';' );
-											ruleset =
-												ruleset +
-												`${ cssSelector }{${ rules }}`;
+											ruleset += `${ cssSelector }{${ rules };}`;
 										}
 									}
 								);
@@ -829,40 +836,34 @@ export const toStyles = (
 							// Otherwise add regular selectors.
 							const styleVariationDeclarations =
 								getStylesDeclarations(
-									styles?.variations?.[ styleVariationName ],
+									styleVariations,
 									styleVariationSelector,
 									useRootPaddingAlign,
 									tree
 								);
-							if ( !! styleVariationDeclarations.length ) {
-								ruleset =
-									ruleset +
-									`${ styleVariationSelector }{${ styleVariationDeclarations.join(
-										';'
-									) }}`;
+							if ( styleVariationDeclarations.length ) {
+								ruleset += `${ styleVariationSelector }{${ styleVariationDeclarations.join(
+									';'
+								) };}`;
 							}
 						}
 					}
 				);
 			}
 
-			const duotoneStyles = {};
-			if ( styles?.filter ) {
-				duotoneStyles.filter = styles.filter;
-				delete styles.filter;
-			}
-
-			// Process duotone styles (they use color.__experimentalDuotone selector).
+			// Process duotone styles.
 			if ( duotoneSelector ) {
+				const duotoneStyles = {};
+				if ( styles?.filter ) {
+					duotoneStyles.filter = styles.filter;
+					delete styles.filter;
+				}
 				const duotoneDeclarations =
 					getStylesDeclarations( duotoneStyles );
-				if ( duotoneDeclarations.length > 0 ) {
-					ruleset =
-						ruleset +
-						`${ scopeSelector(
-							selector,
-							duotoneSelector
-						) }{${ duotoneDeclarations.join( ';' ) };}`;
+				if ( duotoneDeclarations.length ) {
+					ruleset += `${ duotoneSelector }{${ duotoneDeclarations.join(
+						';'
+					) };}`;
 				}
 			}
 
@@ -889,8 +890,7 @@ export const toStyles = (
 				tree
 			);
 			if ( declarations?.length ) {
-				ruleset =
-					ruleset + `${ selector }{${ declarations.join( ';' ) };}`;
+				ruleset += `${ selector }{${ declarations.join( ';' ) };}`;
 			}
 
 			// Check for pseudo selector in `styles` and handle separately.
@@ -924,7 +924,7 @@ export const toStyles = (
 							';'
 						) };}`;
 
-						ruleset = ruleset + pseudoRule;
+						ruleset += pseudoRule;
 					}
 				);
 			}
@@ -948,10 +948,13 @@ export const toStyles = (
 			getGapCSSValue( tree?.styles?.spacing?.blockGap ) || '0.5em';
 		ruleset =
 			ruleset +
-			'.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }';
+			`:where(.wp-site-blocks) > * { margin-block-start: ${ gapValue }; margin-block-end: 0; }`;
+		ruleset =
+			ruleset +
+			':where(.wp-site-blocks) > :first-child:first-child { margin-block-start: 0; }';
 		ruleset =
 			ruleset +
-			`.wp-site-blocks > * + * { margin-block-start: ${ gapValue }; }`;
+			':where(.wp-site-blocks) > :last-child:last-child { margin-block-end: 0; }';
 	}
 
 	nodesWithSettings.forEach( ( { selector, presets } ) => {
@@ -962,7 +965,7 @@ export const toStyles = (
 
 		const classes = getPresetsClasses( selector, presets );
 		if ( ! isEmpty( classes ) ) {
-			ruleset = ruleset + classes;
+			ruleset += classes;
 		}
 	} );
 
@@ -1002,11 +1005,24 @@ export const getBlockSelectors = ( blockTypes, getBlockStyles ) => {
 	const result = {};
 	blockTypes.forEach( ( blockType ) => {
 		const name = blockType.name;
-		const selector = getBlockCSSSelector( blockType, 'root' );
-		const duotoneSelector = getBlockCSSSelector(
+		const selector = getBlockCSSSelector( blockType );
+		let duotoneSelector = getBlockCSSSelector(
 			blockType,
 			'filter.duotone'
 		);
+
+		// Keep backwards compatibility for support.color.__experimentalDuotone.
+		if ( ! duotoneSelector ) {
+			const rootSelector = getBlockCSSSelector( blockType );
+			const duotoneSupport = getBlockSupport(
+				blockType,
+				'color.__experimentalDuotone',
+				false
+			);
+			duotoneSelector =
+				duotoneSupport && scopeSelector( rootSelector, duotoneSupport );
+		}
+
 		const hasLayoutSupport = !! blockType?.supports?.__experimentalLayout;
 		const fallbackGapValue =
 			blockType?.supports?.spacing?.blockGap?.__experimentalDefault;

package/src/components/iframe/index.js

@@ -71,7 +71,7 @@ function bubbleEvents( doc ) {
 		}
 	}
 
-	const eventTypes = [ 'dragover' ];
+	const eventTypes = [ 'dragover', 'mousemove' ];
 
 	for ( const name of eventTypes ) {
 		doc.addEventListener( name, bubbleEvent );

package/src/components/image-size-control/use-dimension-handler.js

@@ -47,13 +47,14 @@ export default function useDimensionHandler(
 	}, [ customWidth, customHeight ] );
 
 	const updateDimension = ( dimension, value ) => {
+		const parsedValue = value === '' ? undefined : parseInt( value, 10 );
 		if ( dimension === 'width' ) {
-			setCurrentWidth( value );
+			setCurrentWidth( parsedValue );
 		} else {
-			setCurrentHeight( value );
+			setCurrentHeight( parsedValue );
 		}
 		onChange( {
-			[ dimension ]: value === '' ? undefined : parseInt( value, 10 ),
+			[ dimension ]: parsedValue,
 		} );
 	};
 

package/src/components/index.js

@@ -92,7 +92,11 @@ export { default as URLPopover } from './url-popover';
 export { __experimentalImageURLInputUI } from './url-popover/image-url-input-ui';
 export { default as withColorContext } from './color-palette/with-color-context';
 export { default as __experimentalSpacingSizesControl } from './spacing-sizes-control';
-
+export {
+	getSpacingPresetCssVar,
+	isValueSpacingPreset,
+	getCustomValueFromPreset,
+} from './spacing-sizes-control/utils';
 /*
  * Content Related Components
  */

package/src/components/inserter/block-patterns-tab.js

@@ -28,6 +28,8 @@ import BlockPatternList from '../block-patterns-list';
 import PatternsExplorerModal from './block-patterns-explorer/explorer';
 import MobileTabNavigation from './mobile-tab-navigation';
 
+const noop = () => {};
+
 // Preferred order of pattern categories. Any other categories should
 // be at the bottom without any re-ordering.
 const patternCategoriesOrder = [
@@ -134,7 +136,7 @@ export function BlockPatternsCategoryDialog( {
 export function BlockPatternsCategoryPanel( {
 	rootClientId,
 	onInsert,
-	onHover,
+	onHover = noop,
 	category,
 	showTitlesAsTooltip,
 } ) {

package/src/components/inserter/block-types-tab.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { groupBy } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -59,7 +54,15 @@ export function BlockTypesTab( {
 				itemList.filter(
 					( item ) => item.category && item.category !== 'reusable'
 				),
-			( itemList ) => groupBy( itemList, 'category' )
+			( itemList ) =>
+				itemList.reduce( ( acc, item ) => {
+					const { category } = item;
+					if ( ! acc[ category ] ) {
+						acc[ category ] = [];
+					}
+					acc[ category ].push( item );
+					return acc;
+				}, {} )
 		)( items );
 	}, [ items ] );
 

package/src/components/inserter/index.js

@@ -214,7 +214,7 @@ class PrivateInserter extends Component {
 					'block-editor-inserter__popover',
 					{ 'is-quick': isQuick }
 				) }
-				popoverProps={ { position } }
+				popoverProps={ { position, shift: true } }
 				onToggle={ this.onToggle }
 				expandOnMobile
 				headerTitle={ __( 'Add a block' ) }

package/src/components/inspector-controls/groups.js

@@ -7,6 +7,7 @@ const InspectorControlsDefault = createSlotFill( 'InspectorControls' );
 const InspectorControlsAdvanced = createSlotFill( 'InspectorAdvancedControls' );
 const InspectorControlsBorder = createSlotFill( 'InspectorControlsBorder' );
 const InspectorControlsColor = createSlotFill( 'InspectorControlsColor' );
+const InspectorControlsFilter = createSlotFill( 'InspectorControlsFilter' );
 const InspectorControlsDimensions = createSlotFill(
 	'InspectorControlsDimensions'
 );
@@ -22,6 +23,7 @@ const groups = {
 	advanced: InspectorControlsAdvanced,
 	border: InspectorControlsBorder,
 	color: InspectorControlsColor,
+	filter: InspectorControlsFilter,
 	dimensions: InspectorControlsDimensions,
 	list: InspectorControlsListView,
 	settings: InspectorControlsDefault, // Alias for default.

package/src/components/inspector-controls-tabs/styles-tab.js

@@ -32,6 +32,7 @@ const StylesTab = ( { blockName, clientId, hasBlockStyles } ) => {
 				label={ __( 'Color' ) }
 				className="color-block-support-panel__inner-wrapper"
 			/>
+			<InspectorControls.Slot group="filter" />
 			<InspectorControls.Slot
 				group="typography"
 				label={ __( 'Typography' ) }

package/src/components/inspector-controls-tabs/utils.js

@@ -2,10 +2,11 @@
  * WordPress dependencies
  */
 import { cog, styles, listView } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
 
 export const TAB_SETTINGS = {
 	name: 'settings',
-	title: 'Settings',
+	title: __( 'Settings' ),
 	value: 'settings',
 	icon: cog,
 	className: 'block-editor-block-inspector__tab-item',
@@ -13,7 +14,7 @@ export const TAB_SETTINGS = {
 
 export const TAB_STYLES = {
 	name: 'styles',
-	title: 'Styles',
+	title: __( 'Styles' ),
 	value: 'styles',
 	icon: styles,
 	className: 'block-editor-block-inspector__tab-item',
@@ -21,7 +22,7 @@ export const TAB_STYLES = {
 
 export const TAB_LIST_VIEW = {
 	name: 'list',
-	title: 'List View',
+	title: __( 'List View' ),
 	value: 'list-view',
 	icon: listView,
 	className: 'block-editor-block-inspector__tab-item',

package/src/components/list-view/README.md

@@ -2,6 +2,8 @@
 
 The ListView component provides an overview of the hierarchical structure of all blocks in the editor. The blocks are presented vertically one below the other.
 
+By providing the `rootClientId` prop you can restrict the blocks that are shown to only children of the block with that client id.
+
 Blocks that have child blocks (such as group or column blocks) are presented with the parent at the top and the nested children below.
 
 In addition to presenting the structure of the blocks in the editor, the ListView component lets users navigate to each block by clicking on its line in the hierarchy tree. Multiple blocks at the same level of nesting can be selected by holding down the `SHIFT` key and clicking blocks within the list.

package/src/components/list-view/block-select-button.js

@@ -35,6 +35,9 @@ function ListViewBlockSelectButton(
 		onDragStart,
 		onDragEnd,
 		draggable,
+		isExpanded,
+		ariaLabel,
+		ariaDescribedBy,
 	},
 	ref
 ) {
@@ -76,7 +79,9 @@ function ListViewBlockSelectButton(
 				onDragEnd={ onDragEnd }
 				draggable={ draggable }
 				href={ `#block-${ clientId }` }
-				aria-hidden={ true }
+				aria-label={ ariaLabel }
+				aria-describedby={ ariaDescribedBy }
+				aria-expanded={ isExpanded }
 			>
 				<ListViewExpander onClick={ onToggleExpanded } />
 				<BlockIcon icon={ blockInformation?.icon } showColors />

package/src/components/list-view/block.js

@@ -53,7 +53,6 @@ function ListViewBlock( {
 	path,
 	isExpanded,
 	selectedClientIds,
-	preventAnnouncement,
 	isSyncedBranch,
 } ) {
 	const cellRef = useRef( null );
@@ -90,6 +89,7 @@ function ListViewBlock( {
 	const { toggleBlockHighlight } = useDispatch( blockEditorStore );
 
 	const blockInformation = useBlockDisplayInformation( clientId );
+	const blockTitle = blockInformation?.title || __( 'Untitled' );
 	const blockName = useSelect(
 		( select ) => select( blockEditorStore ).getBlockName( clientId ),
 		[ clientId ]
@@ -111,31 +111,27 @@ function ListViewBlock( {
 		level
 	);
 
-	let blockAriaLabel = __( 'Link' );
-	if ( blockInformation ) {
-		blockAriaLabel = isLocked
-			? sprintf(
-					// translators: %s: The title of the block. This string indicates a link to select the locked block.
-					__( '%s link (locked)' ),
-					blockInformation.title
-			  )
-			: sprintf(
-					// translators: %s: The title of the block. This string indicates a link to select the block.
-					__( '%s link' ),
-					blockInformation.title
-			  );
-	}
-
-	const settingsAriaLabel = blockInformation
+	const blockAriaLabel = isLocked
 		? sprintf(
-				// translators: %s: The title of the block.
-				__( 'Options for %s block' ),
-				blockInformation.title
+				// translators: %s: The title of the block. This string indicates a link to select the locked block.
+				__( '%s (locked)' ),
+				blockTitle
 		  )
-		: __( 'Options' );
+		: blockTitle;
+
+	const settingsAriaLabel = sprintf(
+		// translators: %s: The title of the block.
+		__( 'Options for %s' ),
+		blockTitle
+	);
 
-	const { isTreeGridMounted, expand, collapse, BlockSettingsMenu } =
-		useListViewContext();
+	const {
+		isTreeGridMounted,
+		expand,
+		collapse,
+		BlockSettingsMenu,
+		listViewInstanceId,
+	} = useListViewContext();
 
 	const hasSiblings = siblingBlockCount > 0;
 	const hasRenderedMovers = showBlockMovers && hasSiblings;
@@ -246,20 +242,16 @@ function ListViewBlock( {
 			position={ position }
 			rowCount={ rowCount }
 			path={ path }
-			id={ `list-view-block-${ clientId }` }
+			id={ `list-view-${ listViewInstanceId }-block-${ clientId }` }
 			data-block={ clientId }
-			isExpanded={ canExpand ? isExpanded : undefined }
-			aria-selected={ !! isSelected || forceSelectionContentLock }
+			data-expanded={ canExpand ? isExpanded : undefined }
 			ref={ rowRef }
 		>
 			<TreeGridCell
 				className="block-editor-list-view-block__contents-cell"
 				colSpan={ colSpan }
 				ref={ cellRef }
-				aria-label={ blockAriaLabel }
 				aria-selected={ !! isSelected || forceSelectionContentLock }
-				aria-expanded={ canExpand ? isExpanded : undefined }
-				aria-describedby={ descriptionId }
 			>
 				{ ( { ref, tabIndex, onFocus } ) => (
 					<div className="block-editor-list-view-block__contents-container">
@@ -276,9 +268,10 @@ function ListViewBlock( {
 								currentlyEditingBlockInCanvas ? 0 : tabIndex
 							}
 							onFocus={ onFocus }
-							isExpanded={ isExpanded }
+							isExpanded={ canExpand ? isExpanded : undefined }
 							selectedClientIds={ selectedClientIds }
-							preventAnnouncement={ preventAnnouncement }
+							ariaLabel={ blockAriaLabel }
+							ariaDescribedBy={ descriptionId }
 						/>
 						<div
 							className="block-editor-list-view-block-select-button__description"