@wordpress/block-editor 11.4.0 → 11.6.0

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

@@ -10,6 +10,7 @@ import { get, set } from 'lodash';
 import { useContext, useCallback, useMemo } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { store as blocksStore } from '@wordpress/blocks';
+import { _x } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -55,7 +56,7 @@ const VALID_SETTINGS = [
 	'spacing.margin',
 	'spacing.padding',
 	'spacing.units',
-	'typography.fuild',
+	'typography.fluid',
 	'typography.customFontSize',
 	'typography.dropCap',
 	'typography.fontFamilies',
@@ -64,6 +65,7 @@ const VALID_SETTINGS = [
 	'typography.fontWeight',
 	'typography.letterSpacing',
 	'typography.lineHeight',
+	'typography.textColumns',
 	'typography.textDecoration',
 	'typography.textTransform',
 ];
@@ -177,7 +179,7 @@ export function useGlobalStyle(
 	switch ( source ) {
 		case 'all':
 			rawResult =
-				// The stlyes.css path is allowed to be empty, so don't revert to base if undefined.
+				// The styles.css path is allowed to be empty, so don't revert to base if undefined.
 				finalPath === 'styles.css'
 					? get( userConfig, finalPath )
 					: get( mergedConfig, finalPath );
@@ -204,62 +206,176 @@ export function useGlobalStyle(
 	return [ result, setStyle ];
 }
 
-export function useSupportedStyles( name, element ) {
-	const { supportedPanels } = useSelect(
+/**
+ * React hook that overrides a global settings object with block and element specific settings.
+ *
+ * @param {Object}     parentSettings Settings object.
+ * @param {blockName?} blockName      Block name.
+ * @param {element?}   element        Element name.
+ *
+ * @return {Object} Merge of settings and supports.
+ */
+export function useSettingsForBlockElement(
+	parentSettings,
+	blockName,
+	element
+) {
+	const { supportedStyles, supports } = useSelect(
 		( select ) => {
 			return {
-				supportedPanels: unlock(
+				supportedStyles: unlock(
 					select( blocksStore )
-				).getSupportedStyles( name, element ),
+				).getSupportedStyles( blockName, element ),
+				supports:
+					select( blocksStore ).getBlockType( blockName )?.supports,
 			};
 		},
-		[ name, element ]
+		[ blockName, element ]
 	);
 
-	return supportedPanels;
-}
+	return useMemo( () => {
+		const updatedSettings = { ...parentSettings };
 
-/**
- * Given a settings object and a list of supported panels,
- * returns a new settings object with the unsupported panels removed.
- *
- * @param {Object}   settings Settings object.
- * @param {string[]} supports Supported style panels.
- *
- * @return {Object} Merge of settings and supports.
- */
-export function overrideSettingsWithSupports( settings, supports ) {
-	const updatedSettings = { ...settings };
+		if ( ! supportedStyles.includes( 'fontSize' ) ) {
+			updatedSettings.typography = {
+				...updatedSettings.typography,
+				fontSizes: {},
+				customFontSize: false,
+			};
+		}
 
-	if ( ! supports.includes( 'fontSize' ) ) {
-		updatedSettings.typography = {
-			...updatedSettings.typography,
-			fontSizes: {},
-			customFontSize: false,
-		};
-	}
+		if ( ! supportedStyles.includes( 'fontFamily' ) ) {
+			updatedSettings.typography = {
+				...updatedSettings.typography,
+				fontFamilies: {},
+			};
+		}
 
-	if ( ! supports.includes( 'fontFamily' ) ) {
-		updatedSettings.typography = {
-			...updatedSettings.typography,
-			fontFamilies: {},
-		};
-	}
+		[
+			'lineHeight',
+			'fontStyle',
+			'fontWeight',
+			'letterSpacing',
+			'textTransform',
+			'textDecoration',
+		].forEach( ( key ) => {
+			if ( ! supportedStyles.includes( key ) ) {
+				updatedSettings.typography = {
+					...updatedSettings.typography,
+					[ key ]: false,
+				};
+			}
+		} );
 
-	[
-		'lineHeight',
-		'fontStyle',
-		'fontWeight',
-		'letterSpacing',
-		'textTransform',
-	].forEach( ( key ) => {
-		if ( ! supports.includes( key ) ) {
+		// The column-count style is named text column to reduce confusion with
+		// the columns block and manage expectations from the support.
+		// See: https://github.com/WordPress/gutenberg/pull/33587
+		if ( ! supportedStyles.includes( 'columnCount' ) ) {
 			updatedSettings.typography = {
 				...updatedSettings.typography,
-				[ key ]: false,
+				textColumns: false,
+			};
+		}
+
+		[ 'contentSize', 'wideSize' ].forEach( ( key ) => {
+			if ( ! supportedStyles.includes( key ) ) {
+				updatedSettings.layout = {
+					...updatedSettings.layout,
+					[ key ]: false,
+				};
+			}
+		} );
+
+		[ 'padding', 'margin', 'blockGap' ].forEach( ( key ) => {
+			if ( ! supportedStyles.includes( key ) ) {
+				updatedSettings.spacing = {
+					...updatedSettings.spacing,
+					[ key ]: false,
+				};
+			}
+
+			const sides = Array.isArray( supports?.spacing?.[ key ] )
+				? supports?.spacing?.[ key ]
+				: supports?.spacing?.[ key ]?.sides;
+			if ( sides?.length ) {
+				updatedSettings.spacing = {
+					...updatedSettings.spacing,
+					[ key ]: {
+						...updatedSettings.spacing?.[ key ],
+						sides,
+					},
+				};
+			}
+		} );
+
+		if ( ! supportedStyles.includes( 'minHeight' ) ) {
+			updatedSettings.dimensions = {
+				...updatedSettings.dimensions,
+				minHeight: false,
 			};
 		}
-	} );
 
-	return updatedSettings;
+		[ 'radius', 'color', 'style', 'width' ].forEach( ( key ) => {
+			if (
+				! supportedStyles.includes(
+					'border' + key.charAt( 0 ).toUpperCase() + key.slice( 1 )
+				)
+			) {
+				updatedSettings.border = {
+					...updatedSettings.border,
+					[ key ]: false,
+				};
+			}
+		} );
+
+		return updatedSettings;
+	}, [ parentSettings, supportedStyles, supports ] );
+}
+
+export function useColorsPerOrigin( settings ) {
+	const customColors = settings?.color?.palette?.custom;
+	const themeColors = settings?.color?.palette?.theme;
+	const defaultColors = settings?.color?.palette?.default;
+	const shouldDisplayDefaultColors = settings?.color?.defaultPalette;
+
+	return useMemo( () => {
+		const result = [];
+		if ( themeColors && themeColors.length ) {
+			result.push( {
+				name: _x(
+					'Theme',
+					'Indicates this palette comes from the theme.'
+				),
+				colors: themeColors,
+			} );
+		}
+		if (
+			shouldDisplayDefaultColors &&
+			defaultColors &&
+			defaultColors.length
+		) {
+			result.push( {
+				name: _x(
+					'Default',
+					'Indicates this palette comes from WordPress.'
+				),
+				colors: defaultColors,
+			} );
+		}
+		if ( customColors && customColors.length ) {
+			result.push( {
+				name: _x(
+					'Custom',
+					'Indicates this palette is created by the user.'
+				),
+				colors: customColors,
+			} );
+		}
+		return result;
+	}, [
+		customColors,
+		themeColors,
+		defaultColors,
+		shouldDisplayDefaultColors,
+	] );
 }

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

@@ -2,7 +2,8 @@ export {
 	useGlobalStylesReset,
 	useGlobalSetting,
 	useGlobalStyle,
-	overrideSettingsWithSupports,
+	useSettingsForBlockElement,
+	useColorsPerOrigin,
 } from './hooks';
 export { useGlobalStylesOutput } from './use-global-styles-output';
 export { GlobalStylesContext } from './context';
@@ -10,3 +11,8 @@ export {
 	default as TypographyPanel,
 	useHasTypographyPanel,
 } from './typography-panel';
+export {
+	default as DimensionsPanel,
+	useHasDimensionsPanel,
+} from './dimensions-panel';
+export { default as BorderPanel, useHasBorderPanel } from './border-panel';

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

@@ -644,7 +644,7 @@ describe( 'global styles renderer', () => {
 			} );
 
 			expect( layoutStyles ).toEqual(
-				'.wp-block-group.is-layout-flow > * { margin-block-start: 0; margin-block-end: 0; }.wp-block-group.is-layout-flow > * + * { margin-block-start: 12px; margin-block-end: 0; }.wp-block-group.is-layout-flex { gap: 12px; }'
+				'.wp-block-group-is-layout-flow.wp-block-group-is-layout-flow > * { margin-block-start: 0; margin-block-end: 0; }.wp-block-group-is-layout-flow.wp-block-group-is-layout-flow > * + * { margin-block-start: 12px; margin-block-end: 0; }.wp-block-group-is-layout-flex.wp-block-group-is-layout-flex { gap: 12px; }'
 			);
 		} );
 

package/src/components/global-styles/typography-panel.js

@@ -3,10 +3,12 @@
  */
 import {
 	FontSizePicker,
+	__experimentalNumberControl as NumberControl,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { useCallback } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -19,6 +21,9 @@ import TextTransformControl from '../text-transform-control';
 import TextDecorationControl from '../text-decoration-control';
 import { getValueFromVariable } from './utils';
 
+const MIN_TEXT_COLUMNS = 1;
+const MAX_TEXT_COLUMNS = 6;
+
 export function useHasTypographyPanel( settings ) {
 	const hasFontFamily = useHasFontFamilyControl( settings );
 	const hasLineHeight = useHasLineHeightControl( settings );
@@ -26,6 +31,7 @@ export function useHasTypographyPanel( settings ) {
 	const hasLetterSpacing = useHasLetterSpacingControl( settings );
 	const hasTextTransform = useHasTextTransformControl( settings );
 	const hasTextDecoration = useHasTextDecorationControl( settings );
+	const hasTextColumns = useHasTextColumnsControl( settings );
 	const hasFontSize = useHasFontSizeControl( settings );
 
 	return (
@@ -35,7 +41,8 @@ export function useHasTypographyPanel( settings ) {
 		hasLetterSpacing ||
 		hasTextTransform ||
 		hasFontSize ||
-		hasTextDecoration
+		hasTextDecoration ||
+		hasTextColumns
 	);
 }
 
@@ -92,8 +99,31 @@ function useHasTextDecorationControl( settings ) {
 	return settings?.typography?.textDecoration;
 }
 
-function TypographyToolsPanel( { ...props } ) {
-	return <ToolsPanel label={ __( 'Typography' ) } { ...props } />;
+function useHasTextColumnsControl( settings ) {
+	return settings?.typography?.textColumns;
+}
+
+function TypographyToolsPanel( {
+	resetAllFilter,
+	onChange,
+	value,
+	panelId,
+	children,
+} ) {
+	const resetAll = () => {
+		const updatedValue = resetAllFilter( value );
+		onChange( updatedValue );
+	};
+
+	return (
+		<ToolsPanel
+			label={ __( 'Typography' ) }
+			resetAll={ resetAll }
+			panelId={ panelId }
+		>
+			{ children }
+		</ToolsPanel>
+	);
 }
 
 const DEFAULT_CONTROLS = {
@@ -104,6 +134,7 @@ const DEFAULT_CONTROLS = {
 	letterSpacing: true,
 	textTransform: true,
 	textDecoration: true,
+	textColumns: true,
 };
 
 export default function TypographyPanel( {
@@ -226,6 +257,21 @@ export default function TypographyPanel( {
 	const hasLetterSpacing = () => !! value?.typography?.letterSpacing;
 	const resetLetterSpacing = () => setLetterSpacing( undefined );
 
+	// Text Columns
+	const hasTextColumnsControl = useHasTextColumnsControl( settings );
+	const textColumns = decodeValue( inheritedValue?.typography?.textColumns );
+	const setTextColumns = ( newValue ) => {
+		onChange( {
+			...value,
+			typography: {
+				...value?.typography,
+				textColumns: newValue,
+			},
+		} );
+	};
+	const hasTextColumns = () => !! value?.typography?.textColumns;
+	const resetTextColumns = () => setTextColumns( undefined );
+
 	// Text Transform
 	const hasTextTransformControl = useHasTextTransformControl( settings );
 	const textTransform = decodeValue(
@@ -260,15 +306,20 @@ export default function TypographyPanel( {
 	const hasTextDecoration = () => !! value?.typography?.textDecoration;
 	const resetTextDecoration = () => setTextDecoration( undefined );
 
-	const resetAll = () => {
-		onChange( {
-			...value,
+	const resetAllFilter = useCallback( ( previousValue ) => {
+		return {
+			...previousValue,
 			typography: {},
-		} );
-	};
+		};
+	}, [] );
 
 	return (
-		<Wrapper resetAll={ resetAll }>
+		<Wrapper
+			resetAllFilter={ resetAllFilter }
+			value={ value }
+			onChange={ onChange }
+			panelId={ panelId }
+		>
 			{ hasFontFamilyEnabled && (
 				<ToolsPanelItem
 					label={ __( 'Font family' ) }
@@ -363,6 +414,27 @@ export default function TypographyPanel( {
 					/>
 				</ToolsPanelItem>
 			) }
+			{ hasTextColumnsControl && (
+				<ToolsPanelItem
+					className="single-column"
+					label={ __( 'Text columns' ) }
+					hasValue={ hasTextColumns }
+					onDeselect={ resetTextColumns }
+					isShownByDefault={ defaultControls.textColumns }
+					panelId={ panelId }
+				>
+					<NumberControl
+						label={ __( 'Text columns' ) }
+						max={ MAX_TEXT_COLUMNS }
+						min={ MIN_TEXT_COLUMNS }
+						onChange={ setTextColumns }
+						size="__unstable-large"
+						spinControls="custom"
+						value={ textColumns }
+						initialPosition={ 1 }
+					/>
+				</ToolsPanelItem>
+			) }
 			{ hasTextDecorationControl && (
 				<ToolsPanelItem
 					className="single-column"

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

@@ -95,11 +95,11 @@ function getPresetsDeclarations( blockPresets = {}, mergedSettings ) {
 /**
  * Transform given preset tree into a set of preset class declarations.
  *
- * @param {string} blockSelector
- * @param {Object} blockPresets
+ * @param {?string} blockSelector
+ * @param {Object}  blockPresets
  * @return {string} CSS declarations for the preset classes.
  */
-function getPresetsClasses( blockSelector, blockPresets = {} ) {
+function getPresetsClasses( blockSelector = '*', blockPresets = {} ) {
 	return PRESET_METADATA.reduce(
 		( declarations, { path, cssVarInfix, classes } ) => {
 			if ( ! classes ) {
@@ -399,7 +399,7 @@ export function getLayoutStyles( {
 										? `${ selector } .${ className }${
 												spacingStyle?.selector || ''
 										  }`
-										: `${ selector }.${ className }${
+										: `${ selector }-${ className }${ selector }-${ className }${
 												spacingStyle?.selector || ''
 										  }`;
 							}
@@ -496,9 +496,9 @@ 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 ],
+				styles: tree.styles?.elements?.[ name ],
 				selector,
 			} );
 		}
@@ -529,7 +529,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,
@@ -547,7 +547,7 @@ export const getNodesWithStyles = ( tree, blockSelectors ) => {
 					) {
 						nodes.push( {
 							styles: value,
-							selector: blockSelectors[ blockName ].selector
+							selector: blockSelectors[ blockName ]?.selector
 								.split( ',' )
 								.map( ( sel ) => {
 									const elementSelectors =
@@ -606,7 +606,7 @@ export const getNodesWithSettings = ( tree, blockSelectors ) => {
 				nodes.push( {
 					presets: blockPresets,
 					custom: blockCustom,
-					selector: blockSelectors[ blockName ].selector,
+					selector: blockSelectors[ blockName ]?.selector,
 				} );
 			}
 		}
@@ -790,9 +790,10 @@ export const toStyles = (
 				if ( duotoneDeclarations.length > 0 ) {
 					ruleset =
 						ruleset +
-						`${ duotoneSelector }{${ duotoneDeclarations.join(
-							';'
-						) };}`;
+						`${ scopeSelector(
+							selector,
+							duotoneSelector
+						) }{${ duotoneDeclarations.join( ';' ) };}`;
 				}
 			}
 
@@ -972,10 +973,10 @@ export const getBlockSelectors = ( blockTypes, getBlockStyles ) => {
  */
 function updateConfigWithSeparator( config ) {
 	const needsSeparatorStyleUpdate =
-		config.styles?.blocks[ 'core/separator' ] &&
-		config.styles?.blocks[ 'core/separator' ].color?.background &&
-		! config.styles?.blocks[ 'core/separator' ].color?.text &&
-		! config.styles?.blocks[ 'core/separator' ].border?.color;
+		config.styles?.blocks?.[ 'core/separator' ] &&
+		config.styles?.blocks?.[ 'core/separator' ].color?.background &&
+		! config.styles?.blocks?.[ 'core/separator' ].color?.text &&
+		! config.styles?.blocks?.[ 'core/separator' ].border?.color;
 	if ( needsSeparatorStyleUpdate ) {
 		return {
 			...config,

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

@@ -57,6 +57,7 @@ export const PRESET_METADATA = [
 	},
 	{
 		path: [ 'color', 'duotone' ],
+		valueKey: 'colors',
 		cssVarInfix: 'duotone',
 		valueFunc: ( { slug } ) => `url( '#wp-duotone-${ slug }' )`,
 		classes: [],
@@ -95,6 +96,7 @@ export const PRESET_METADATA = [
 export const STYLE_PATH_TO_CSS_VAR_INFIX = {
 	'color.background': 'color',
 	'color.text': 'color',
+	'filter.duotone': 'duotone',
 	'elements.link.color.text': 'color',
 	'elements.link.:hover.color.text': 'color',
 	'elements.link.typography.fontFamily': 'font-family',

package/src/components/index.native.js

@@ -74,6 +74,11 @@ export {
 } from './block-settings';
 export { default as VideoPlayer, VIDEO_ASPECT_RATIO } from './video-player';
 
+export {
+	getSpacingPresetCssVar,
+	getCustomValueFromPreset,
+	isValueSpacingPreset,
+} from './spacing-sizes-control/utils';
 // Content Related Components.
 export { default as BlockList } from './block-list';
 export { default as BlockMover } from './block-mover';

package/src/components/inner-blocks/test/__snapshots__/index.js.snap

@@ -9,7 +9,7 @@ exports[`InnerBlocks should force serialize for invalid block with inner blocks
 `;
 
 exports[`InnerBlocks should return element as string, with inner blocks 1`] = `
-"<div>Bananas<!-- wp:fruit {\\"fruit\\":\\"Apples\\"} -->
+"<div>Bananas<!-- wp:fruit {"fruit":"Apples"} -->
 <div>Apples</div>
 <!-- /wp:fruit --></div>"
 `;

package/src/components/inserter/index.js

@@ -9,7 +9,7 @@ import classnames from 'classnames';
 import { speak } from '@wordpress/a11y';
 import { __, _x, sprintf } from '@wordpress/i18n';
 import { Dropdown, Button } from '@wordpress/components';
-import { Component } from '@wordpress/element';
+import { forwardRef, Component } from '@wordpress/element';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { compose, ifCondition } from '@wordpress/compose';
 import { createBlock, store as blocksStore } from '@wordpress/blocks';
@@ -31,21 +31,26 @@ const defaultRenderToggle = ( {
 	toggleProps = {},
 	prioritizePatterns,
 } ) => {
-	let label;
-	if ( hasSingleBlockType ) {
+	const {
+		as: Wrapper = Button,
+		label: labelProp,
+		onClick,
+		...rest
+	} = toggleProps;
+
+	let label = labelProp;
+	if ( ! label && hasSingleBlockType ) {
 		label = sprintf(
 			// translators: %s: the name of the block when there is only one
 			_x( 'Add %s', 'directly add the only allowed block' ),
 			blockTitle
 		);
-	} else if ( prioritizePatterns ) {
+	} else if ( ! label && prioritizePatterns ) {
 		label = __( 'Add pattern' );
-	} else {
+	} else if ( ! label ) {
 		label = _x( 'Add block', 'Generic label for block inserter button' );
 	}
 
-	const { onClick, ...rest } = toggleProps;
-
 	// Handle both onClick functions from the toggle and the parent component.
 	function handleClick( event ) {
 		if ( onToggle ) {
@@ -57,7 +62,7 @@ const defaultRenderToggle = ( {
 	}
 
 	return (
-		<Button
+		<Wrapper
 			icon={ plus }
 			label={ label }
 			tooltipPosition="bottom"
@@ -71,7 +76,7 @@ const defaultRenderToggle = ( {
 	);
 };
 
-class Inserter extends Component {
+class PrivateInserter extends Component {
 	constructor() {
 		super( ...arguments );
 
@@ -145,6 +150,7 @@ class Inserter extends Component {
 			prioritizePatterns,
 			onSelectOrClose,
 			selectBlockOnInsert,
+			orderInitialBlockItems,
 		} = this.props;
 
 		if ( isQuick ) {
@@ -168,6 +174,7 @@ class Inserter extends Component {
 					isAppender={ isAppender }
 					prioritizePatterns={ prioritizePatterns }
 					selectBlockOnInsert={ selectBlockOnInsert }
+					orderInitialBlockItems={ orderInitialBlockItems }
 				/>
 			);
 		}
@@ -219,7 +226,7 @@ class Inserter extends Component {
 	}
 }
 
-export default compose( [
+export const ComposedPrivateInserter = compose( [
 	withSelect(
 		( select, { clientId, rootClientId, shouldDirectInsert = true } ) => {
 			const {
@@ -416,4 +423,16 @@ export default compose( [
 		( { hasItems, isAppender, rootClientId, clientId } ) =>
 			hasItems || ( ! isAppender && ! rootClientId && ! clientId )
 	),
-] )( Inserter );
+] )( PrivateInserter );
+
+const Inserter = forwardRef( ( props, ref ) => {
+	return (
+		<ComposedPrivateInserter
+			ref={ ref }
+			{ ...props }
+			orderInitialBlockItems={ undefined }
+		/>
+	);
+} );
+
+export default Inserter;