@wordpress/block-editor 11.6.0 → 11.8.0

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

@@ -9,17 +9,19 @@ 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';
 import { useSelect } from '@wordpress/data';
-import { useContext, useMemo } from '@wordpress/element';
+import { renderToString, useContext, useMemo } from '@wordpress/element';
 import { getCSSRules } from '@wordpress/style-engine';
 
 /**
  * Internal dependencies
  */
 import { PRESET_METADATA, ROOT_BLOCK_SELECTOR, scopeSelector } from './utils';
+import { getBlockCSSSelector } from './get-block-css-selector';
 import { getTypographyFontSizeValue } from './typography-utils';
 import { GlobalStylesContext } from './context';
 import { useGlobalSetting } from './hooks';
@@ -144,13 +146,16 @@ function getPresetsSvgFilters( blockPresets = {} ) {
 		return [ 'default', 'theme' ]
 			.filter( ( origin ) => presetByOrigin[ origin ] )
 			.flatMap( ( origin ) =>
-				presetByOrigin[ origin ].map( ( preset ) => (
-					<PresetDuotoneFilter
-						preset={ preset }
-						key={ preset.slug }
-					/>
-				) )
-			);
+				presetByOrigin[ origin ].map( ( preset ) =>
+					renderToString(
+						<PresetDuotoneFilter
+							preset={ preset }
+							key={ preset.slug }
+						/>
+					)
+				)
+			)
+			.join( '' );
 	} );
 }
 
@@ -193,6 +198,89 @@ function concatFeatureVariationSelectorString(
 	return combinedSelectors.join( ', ' );
 }
 
+/**
+ * Generate style declarations for a block's custom feature and subfeature
+ * selectors.
+ *
+ * NOTE: The passed `styles` object will be mutated by this function.
+ *
+ * @param {Object} selectors Custom selectors object for a block.
+ * @param {Object} styles    A block's styles object.
+ *
+ * @return {Object} Style declarations.
+ */
+const getFeatureDeclarations = ( selectors, styles ) => {
+	const declarations = {};
+
+	Object.entries( selectors ).forEach( ( [ feature, selector ] ) => {
+		// We're only processing features/subfeatures that have styles.
+		if ( feature === 'root' || ! styles?.[ feature ] ) {
+			return;
+		}
+
+		const isShorthand = typeof selector === 'string';
+
+		// If we have a selector object instead of shorthand process it.
+		if ( ! isShorthand ) {
+			Object.entries( selector ).forEach(
+				( [ subfeature, subfeatureSelector ] ) => {
+					// Don't process root feature selector yet or any
+					// subfeature that doesn't have a style.
+					if (
+						subfeature === 'root' ||
+						! styles?.[ feature ][ subfeature ]
+					) {
+						return;
+					}
+
+					// Create a temporary styles object and build
+					// declarations for subfeature.
+					const subfeatureStyles = {
+						[ feature ]: {
+							[ subfeature ]: styles[ feature ][ subfeature ],
+						},
+					};
+					const newDeclarations =
+						getStylesDeclarations( subfeatureStyles );
+
+					// Merge new declarations in with any others that
+					// share the same selector.
+					declarations[ subfeatureSelector ] = [
+						...( declarations[ subfeatureSelector ] || [] ),
+						...newDeclarations,
+					];
+
+					// Remove the subfeature's style now it will be
+					// included under its own selector not the block's.
+					delete styles[ feature ][ subfeature ];
+				}
+			);
+		}
+
+		// Now subfeatures have been processed and removed, we can
+		// process root, or shorthand, feature selectors.
+		if ( isShorthand || selector.root ) {
+			const featureSelector = isShorthand ? selector : selector.root;
+
+			// Create temporary style object and build declarations for feature.
+			const featureStyles = { [ feature ]: styles[ feature ] };
+			const newDeclarations = getStylesDeclarations( featureStyles );
+
+			// Merge new declarations with any others that share the selector.
+			declarations[ featureSelector ] = [
+				...( declarations[ featureSelector ] || [] ),
+				...newDeclarations,
+			];
+
+			// Remove the feature from the block's styles now as it will be
+			// included under its own selector not the block's.
+			delete styles[ feature ];
+		}
+	} );
+
+	return declarations;
+};
+
 /**
  * Transform given style tree into a set of style declarations.
  *
@@ -396,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 || ''
 										  }`;
 							}
@@ -692,23 +780,16 @@ export const toStyles = (
 			// Process styles for block support features with custom feature level
 			// CSS selectors set.
 			if ( featureSelectors ) {
-				Object.entries( featureSelectors ).forEach(
-					( [ featureName, featureSelector ] ) => {
-						if ( styles?.[ featureName ] ) {
-							const featureStyles = {
-								[ featureName ]: styles[ featureName ],
-							};
-							const featureDeclarations =
-								getStylesDeclarations( featureStyles );
-							delete styles[ featureName ];
-
-							if ( !! featureDeclarations.length ) {
-								ruleset =
-									ruleset +
-									`${ featureSelector }{${ featureDeclarations.join(
-										';'
-									) } }`;
-							}
+				const featureDeclarations = getFeatureDeclarations(
+					featureSelectors,
+					styles
+				);
+
+				Object.entries( featureDeclarations ).forEach(
+					( [ cssSelector, declarations ] ) => {
+						if ( !! declarations.length ) {
+							const rules = declarations.join( ';' );
+							ruleset = ruleset + `${ cssSelector }{${ rules }}`;
 						}
 					}
 				);
@@ -720,43 +801,32 @@ export const toStyles = (
 						if ( styles?.variations?.[ styleVariationName ] ) {
 							// If the block uses any custom selectors for block support, add those first.
 							if ( featureSelectors ) {
-								Object.entries( featureSelectors ).forEach(
-									( [ featureName, featureSelector ] ) => {
-										if (
-											styles?.variations?.[
-												styleVariationName
-											]?.[ featureName ]
-										) {
-											const featureStyles = {
-												[ featureName ]:
-													styles.variations[
-														styleVariationName
-													][ featureName ],
-											};
-											const featureDeclarations =
-												getStylesDeclarations(
-													featureStyles
+								const featureDeclarations =
+									getFeatureDeclarations(
+										featureSelectors,
+										styles?.variations?.[
+											styleVariationName
+										]
+									);
+
+								Object.entries( featureDeclarations ).forEach(
+									( [ baseSelector, declarations ] ) => {
+										if ( !! declarations.length ) {
+											const cssSelector =
+												concatFeatureVariationSelectorString(
+													baseSelector,
+													styleVariationSelector
 												);
-											delete styles.variations[
-												styleVariationName
-											][ featureName ];
-
-											if (
-												!! featureDeclarations.length
-											) {
-												ruleset =
-													ruleset +
-													`${ concatFeatureVariationSelectorString(
-														featureSelector,
-														styleVariationSelector
-													) }{${ featureDeclarations.join(
-														';'
-													) } }`;
-											}
+											const rules =
+												declarations.join( ';' );
+											ruleset =
+												ruleset +
+												`${ cssSelector }{${ rules }}`;
 										}
 									}
 								);
 							}
+
 							// Otherwise add regular selectors.
 							const styleVariationDeclarations =
 								getStylesDeclarations(
@@ -783,17 +853,16 @@ export const toStyles = (
 				delete styles.filter;
 			}
 
-			// Process duotone styles (they use color.__experimentalDuotone selector).
+			// Process duotone styles.
 			if ( duotoneSelector ) {
 				const duotoneDeclarations =
 					getStylesDeclarations( duotoneStyles );
 				if ( duotoneDeclarations.length > 0 ) {
 					ruleset =
 						ruleset +
-						`${ scopeSelector(
-							selector,
-							duotoneSelector
-						) }{${ duotoneDeclarations.join( ';' ) };}`;
+						`${ duotoneSelector }{${ duotoneDeclarations.join(
+							';'
+						) };}`;
 				}
 			}
 
@@ -879,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 +
-			`.wp-site-blocks > * + * { margin-block-start: ${ gapValue }; }`;
+			':where(.wp-site-blocks) > :first-child:first-child { margin-block-start: 0; }';
+		ruleset =
+			ruleset +
+			':where(.wp-site-blocks) > :last-child:last-child { margin-block-end: 0; }';
 	}
 
 	nodesWithSettings.forEach( ( { selector, presets } ) => {
@@ -907,15 +979,50 @@ export function toSvgFilters( tree, blockSelectors ) {
 	} );
 }
 
+const getSelectorsConfig = ( blockType, rootSelector ) => {
+	if ( ! isEmpty( blockType?.selectors ) ) {
+		return blockType.selectors;
+	}
+
+	const config = { root: rootSelector };
+	Object.entries( BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS ).forEach(
+		( [ featureKey, featureName ] ) => {
+			const featureSelector = getBlockCSSSelector(
+				blockType,
+				featureKey
+			);
+
+			if ( featureSelector ) {
+				config[ featureName ] = featureSelector;
+			}
+		}
+	);
+
+	return config;
+};
+
 export const getBlockSelectors = ( blockTypes, getBlockStyles ) => {
 	const result = {};
 	blockTypes.forEach( ( blockType ) => {
 		const name = blockType.name;
-		const selector =
-			blockType?.supports?.__experimentalSelector ??
-			'.wp-block-' + name.replace( 'core/', '' ).replace( '/', '-' );
-		const duotoneSelector =
-			blockType?.supports?.color?.__experimentalDuotone ?? null;
+		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;
@@ -930,20 +1037,7 @@ export const getBlockSelectors = ( blockTypes, getBlockStyles ) => {
 			} );
 		}
 		// For each block support feature add any custom selectors.
-		const featureSelectors = {};
-		Object.entries( BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS ).forEach(
-			( [ featureKey, featureName ] ) => {
-				const featureSelector =
-					blockType?.supports?.[ featureKey ]?.__experimentalSelector;
-
-				if ( featureSelector ) {
-					featureSelectors[ featureName ] = scopeSelector(
-						selector,
-						featureSelector
-					);
-				}
-			}
-		);
+		const featureSelectors = getSelectorsConfig( blockType, selector );
 
 		result[ name ] = {
 			duotoneSelector,
@@ -1049,9 +1143,9 @@ export function useGlobalStylesOutput() {
 			hasFallbackGapSupport,
 			disableLayoutStyles
 		);
+		const svgs = toSvgFilters( mergedConfig, blockSelectors );
 
-		const filters = toSvgFilters( mergedConfig, blockSelectors );
-		const stylesheets = [
+		const styles = [
 			{
 				css: customProperties,
 				isGlobalStyles: true,
@@ -1065,6 +1159,11 @@ export function useGlobalStylesOutput() {
 				css: mergedConfig.styles.css ?? '',
 				isGlobalStyles: true,
 			},
+			{
+				assets: svgs,
+				__unstableType: 'svg',
+				isGlobalStyles: true,
+			},
 		];
 
 		// Loop through the blocks to check if there are custom CSS values.
@@ -1073,7 +1172,7 @@ export function useGlobalStylesOutput() {
 		getBlockTypes().forEach( ( blockType ) => {
 			if ( mergedConfig.styles.blocks[ blockType.name ]?.css ) {
 				const selector = blockSelectors[ blockType.name ].selector;
-				stylesheets.push( {
+				styles.push( {
 					css: processCSSNesting(
 						mergedConfig.styles.blocks[ blockType.name ]?.css,
 						selector
@@ -1083,7 +1182,7 @@ export function useGlobalStylesOutput() {
 			}
 		} );
 
-		return [ stylesheets, mergedConfig.settings, filters ];
+		return [ styles, mergedConfig.settings ];
 	}, [
 		hasBlockGapSupport,
 		hasFallbackGapSupport,

package/src/components/global-styles/utils.js

@@ -16,7 +16,9 @@ export const ROOT_BLOCK_SUPPORTS = [
 	'backgroundColor',
 	'color',
 	'linkColor',
+	'captionColor',
 	'buttonColor',
+	'headingColor',
 	'fontFamily',
 	'fontSize',
 	'fontStyle',
@@ -103,6 +105,7 @@ export const STYLE_PATH_TO_CSS_VAR_INFIX = {
 	'elements.link.typography.fontSize': 'font-size',
 	'elements.button.color.text': 'color',
 	'elements.button.color.background': 'color',
+	'elements.caption.color.text': 'color',
 	'elements.button.typography.fontFamily': 'font-family',
 	'elements.button.typography.fontSize': 'font-size',
 	'elements.heading.color': 'color',

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/index.js

@@ -38,17 +38,16 @@ export default function ImageSizeControl( {
 			{ imageSizeOptions && imageSizeOptions.length > 0 && (
 				<SelectControl
 					__nextHasNoMarginBottom
-					label={ __( 'Image size' ) }
+					label={ __( 'Resolution' ) }
 					value={ slug }
 					options={ imageSizeOptions }
 					onChange={ onChangeImage }
 					help={ imageSizeHelp }
+					size="__unstable-large"
 				/>
 			) }
 			{ isResizable && (
 				<div className="block-editor-image-size-control">
-					<p>{ __( 'Image dimensions' ) }</p>
-
 					<HStack align="baseline" spacing="3">
 						<NumberControl
 							className="block-editor-image-size-control__width"
@@ -58,6 +57,7 @@ export default function ImageSizeControl( {
 							onChange={ ( value ) =>
 								updateDimension( 'width', value )
 							}
+							size="__unstable-large"
 						/>
 						<NumberControl
 							className="block-editor-image-size-control__height"
@@ -67,6 +67,7 @@ export default function ImageSizeControl( {
 							onChange={ ( value ) =>
 								updateDimension( 'height', value )
 							}
+							size="__unstable-large"
 						/>
 					</HStack>
 					<HStack>

package/src/components/image-size-control/test/index.js

@@ -334,7 +334,7 @@ describe( 'ImageSizeControl', () => {
 			);
 
 			expect(
-				screen.getByRole( 'combobox', { name: 'Image size' } )
+				screen.getByRole( 'combobox', { name: 'Resolution' } )
 			).toHaveValue( 'medium' );
 		} );
 
@@ -351,7 +351,7 @@ describe( 'ImageSizeControl', () => {
 			);
 
 			await user.selectOptions(
-				screen.getByRole( 'combobox', { name: 'Image size' } ),
+				screen.getByRole( 'combobox', { name: 'Resolution' } ),
 				'thumbnail'
 			);
 

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,10 @@ 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,
+} from './spacing-sizes-control/utils';
 /*
  * Content Related Components
  */

package/src/components/inner-blocks/README.md

@@ -130,7 +130,7 @@ _Options:_
 -   `'insert'` — prevents inserting or removing blocks, but allows moving existing ones.
 -   `false` — prevents locking from being applied to an `InnerBlocks` area even if a parent block contains locking. ( Boolean )
 
-If locking is not set in an `InnerBlocks` area: the locking of the parent `InnerBlocks` area is used. Note that `contentOnly` can't be overriden: it's present, the `templateLock` value of any children is ignored.
+If locking is not set in an `InnerBlocks` area: the locking of the parent `InnerBlocks` area is used. Note that `contentOnly` can't be overridden: it's present, the `templateLock` value of any children is ignored.
 
 If the block is a top level block: the locking of the Custom Post Type is used.
 

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/inspector-controls-tabs/position-controls-panel.js

@@ -5,6 +5,8 @@ import {
 	PanelBody,
 	__experimentalUseSlotFills as useSlotFills,
 } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { useLayoutEffect, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -12,26 +14,55 @@ import { __ } from '@wordpress/i18n';
  */
 import InspectorControlsGroups from '../inspector-controls/groups';
 import { default as InspectorControls } from '../inspector-controls';
+import { store as blockEditorStore } from '../../store';
 
-const PositionControls = () => {
-	const fills = useSlotFills(
-		InspectorControlsGroups.position.Slot.__unstableName
-	);
-	const hasFills = Boolean( fills && fills.length );
+const PositionControlsPanel = () => {
+	const [ initialOpen, setInitialOpen ] = useState();
 
-	if ( ! hasFills ) {
-		return null;
-	}
+	// Determine whether the panel should be expanded.
+	const { multiSelectedBlocks } = useSelect( ( select ) => {
+		const { getBlocksByClientId, getSelectedBlockClientIds } =
+			select( blockEditorStore );
+		const clientIds = getSelectedBlockClientIds();
+		return {
+			multiSelectedBlocks: getBlocksByClientId( clientIds ),
+		};
+	}, [] );
+
+	useLayoutEffect( () => {
+		// If any selected block has a position set, open the panel by default.
+		// The first block's value will still be used within the control though.
+		if ( initialOpen === undefined ) {
+			setInitialOpen(
+				multiSelectedBlocks.some(
+					( { attributes } ) => !! attributes?.style?.position?.type
+				)
+			);
+		}
+	}, [ initialOpen, multiSelectedBlocks, setInitialOpen ] );
 
 	return (
 		<PanelBody
 			className="block-editor-block-inspector__position"
 			title={ __( 'Position' ) }
-			initialOpen={ false }
+			initialOpen={ initialOpen ?? false }
 		>
 			<InspectorControls.Slot group="position" />
 		</PanelBody>
 	);
 };
 
+const PositionControls = () => {
+	const fills = useSlotFills(
+		InspectorControlsGroups.position.Slot.__unstableName
+	);
+	const hasFills = Boolean( fills && fills.length );
+
+	if ( ! hasFills ) {
+		return null;
+	}
+
+	return <PositionControlsPanel />;
+};
+
 export default PositionControls;

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/line-height-control/index.js

@@ -84,6 +84,15 @@ const LineHeightControl = ( {
 		? undefined
 		: { marginBottom: 24 };
 
+	const handleOnChange = ( nextValue, { event } ) => {
+		if ( event.type === 'click' ) {
+			onChange( adjustNextValue( nextValue, false ) );
+			return;
+		}
+
+		onChange( nextValue );
+	};
+
 	return (
 		<div
 			className="block-editor-line-height-control"
@@ -93,7 +102,7 @@ const LineHeightControl = ( {
 				{ ...otherProps }
 				__unstableInputWidth={ __unstableInputWidth }
 				__unstableStateReducer={ stateReducer }
-				onChange={ onChange }
+				onChange={ handleOnChange }
 				label={ __( 'Line height' ) }
 				placeholder={ BASE_DEFAULT_VALUE }
 				step={ STEP }

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.