@wordpress/block-editor 11.5.0 → 11.7.0

package/src/hooks/layout.js

@@ -35,11 +35,12 @@ const layoutBlockSupportKey = '__experimentalLayout';
 /**
  * Generates the utility classnames for the given block's layout attributes.
  *
- * @param { Object } block Block object.
+ * @param { Object } blockAttributes Block attributes.
+ * @param { string } blockName       Block name.
  *
  * @return { Array } Array of CSS classname strings.
  */
-export function useLayoutClasses( block = {} ) {
+export function useLayoutClasses( blockAttributes = {}, blockName = '' ) {
 	const rootPaddingAlignment = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
 		return getSettings().__experimentalFeatures
@@ -47,11 +48,10 @@ export function useLayoutClasses( block = {} ) {
 	}, [] );
 	const globalLayoutSettings = useSetting( 'layout' ) || {};
 
-	const { attributes = {}, name } = block;
-	const { layout } = attributes;
+	const { layout } = blockAttributes;
 
 	const { default: defaultBlockLayout } =
-		getBlockSupport( name, layoutBlockSupportKey ) || {};
+		getBlockSupport( blockName, layoutBlockSupportKey ) || {};
 	const usedLayout =
 		layout?.inherit || layout?.contentSize || layout?.wideSize
 			? { ...layout, type: 'constrained' }
@@ -63,10 +63,13 @@ export function useLayoutClasses( block = {} ) {
 		globalLayoutSettings?.definitions?.[ usedLayout?.type || 'default' ]
 			?.className
 	) {
-		layoutClassnames.push(
+		const baseClassName =
 			globalLayoutSettings?.definitions?.[ usedLayout?.type || 'default' ]
-				?.className
-		);
+				?.className;
+		const compoundClassName = `wp-block-${ blockName
+			.split( '/' )
+			.pop() }-${ baseClassName }`;
+		layoutClassnames.push( baseClassName, compoundClassName );
 	}
 
 	if (
@@ -100,14 +103,14 @@ export function useLayoutClasses( block = {} ) {
 /**
  * Generates a CSS rule with the given block's layout styles.
  *
- * @param { Object } block    Block object.
- * @param { string } selector A selector to use in generating the CSS rule.
+ * @param { Object } blockAttributes Block attributes.
+ * @param { string } blockName       Block name.
+ * @param { string } selector        A selector to use in generating the CSS rule.
  *
  * @return { string } CSS rule.
  */
-export function useLayoutStyles( block = {}, selector ) {
-	const { attributes = {}, name } = block;
-	const { layout = {}, style = {} } = attributes;
+export function useLayoutStyles( blockAttributes = {}, blockName, selector ) {
+	const { layout = {}, style = {} } = blockAttributes;
 	// Update type for blocks using legacy layouts.
 	const usedLayout =
 		layout?.inherit || layout?.contentSize || layout?.wideSize
@@ -118,7 +121,7 @@ export function useLayoutStyles( block = {}, selector ) {
 	const blockGapSupport = useSetting( 'spacing.blockGap' );
 	const hasBlockGapSupport = blockGapSupport !== null;
 	const css = fullLayoutType?.getLayoutStyle?.( {
-		blockName: name,
+		blockName,
 		selector,
 		layout,
 		layoutDefinitions: globalLayoutSettings?.definitions,
@@ -351,7 +354,7 @@ export const withInspectorControls = createHigherOrderComponent(
  */
 export const withLayoutStyles = createHigherOrderComponent(
 	( BlockListBlock ) => ( props ) => {
-		const { name, attributes, block } = props;
+		const { name, attributes } = props;
 		const hasLayoutBlockSupport = hasBlockSupport(
 			name,
 			layoutBlockSupportKey
@@ -373,7 +376,7 @@ export const withLayoutStyles = createHigherOrderComponent(
 				? { ...layout, type: 'constrained' }
 				: layout || defaultBlockLayout || {};
 		const layoutClasses = hasLayoutBlockSupport
-			? useLayoutClasses( block )
+			? useLayoutClasses( attributes, name )
 			: null;
 		// Higher specificity to override defaults from theme.json.
 		const selector = `.wp-container-${ id }.wp-container-${ id }`;

package/src/hooks/position.js

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { __, sprintf } from '@wordpress/i18n';
+import { __, _x, sprintf } from '@wordpress/i18n';
 import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks';
 import {
 	BaseControl,
@@ -49,7 +49,7 @@ const DEFAULT_OPTION = {
 const STICKY_OPTION = {
 	key: 'sticky',
 	value: 'sticky',
-	name: __( 'Sticky' ),
+	name: _x( 'Sticky', 'Name for the value of the CSS position property' ),
 	className: OPTION_CLASSNAME,
 	__experimentalHint: __(
 		'The block will stick to the top of the window instead of scrolling.'
@@ -59,7 +59,7 @@ const STICKY_OPTION = {
 const FIXED_OPTION = {
 	key: 'fixed',
 	value: 'fixed',
-	name: __( 'Fixed' ),
+	name: _x( 'Fixed', 'Name for the value of the CSS position property' ),
 	className: OPTION_CLASSNAME,
 	__experimentalHint: __(
 		'The block will not move when the page is scrolled.'

package/src/hooks/style.js

@@ -384,39 +384,40 @@ const withElementsStyles = createHigherOrderComponent(
 		);
 
 		const styles = useMemo( () => {
-			const rawElementsStyles = props.attributes.style?.elements;
+			// The .editor-styles-wrapper selector is required on elements styles. As it is
+			// added to all other editor styles, not providing it causes reset and global
+			// styles to override element styles because of higher specificity.
+			const elements = [
+				{
+					styles: ! skipLinkColorSerialization
+						? props.attributes.style?.elements?.link
+						: undefined,
+					selector: `.editor-styles-wrapper .${ blockElementsContainerIdentifier } ${ ELEMENTS.link }`,
+				},
+				{
+					styles: ! skipLinkColorSerialization
+						? props.attributes.style?.elements?.link?.[ ':hover' ]
+						: undefined,
+					selector: `.editor-styles-wrapper .${ blockElementsContainerIdentifier } ${ ELEMENTS.link }:hover`,
+				},
+			];
 			const elementCssRules = [];
-			if (
-				rawElementsStyles &&
-				Object.keys( rawElementsStyles ).length > 0
-			) {
-				// Remove values based on whether serialization has been skipped for a specific style.
-				const filteredElementsStyles = {
-					...rawElementsStyles,
-					link: {
-						...rawElementsStyles.link,
-						color: ! skipLinkColorSerialization
-							? rawElementsStyles.link?.color
-							: undefined,
-					},
-				};
-
-				for ( const [ elementName, elementStyles ] of Object.entries(
-					filteredElementsStyles
-				) ) {
+			for ( const { styles: elementStyles, selector } of elements ) {
+				if ( elementStyles ) {
 					const cssRule = compileCSS( elementStyles, {
-						// The .editor-styles-wrapper selector is required on elements styles. As it is
-						// added to all other editor styles, not providing it causes reset and global
-						// styles to override element styles because of higher specificity.
-						selector: `.editor-styles-wrapper .${ blockElementsContainerIdentifier } ${ ELEMENTS[ elementName ] }`,
+						selector,
 					} );
-					if ( !! cssRule ) {
-						elementCssRules.push( cssRule );
-					}
+					elementCssRules.push( cssRule );
 				}
 			}
-			return elementCssRules.length > 0 ? elementCssRules : undefined;
-		}, [ props.attributes.style?.elements ] );
+			return elementCssRules.length > 0
+				? elementCssRules.join( '' )
+				: undefined;
+		}, [
+			props.attributes.style?.elements,
+			blockElementsContainerIdentifier,
+			skipLinkColorSerialization,
+		] );
 
 		const element = useContext( BlockList.__unstableElementContext );
 

package/src/hooks/supports.js

@@ -20,6 +20,11 @@ const FONT_STYLE_SUPPORT_KEY = 'typography.__experimentalFontStyle';
  * Key within block settings' support array indicating support for font weight.
  */
 const FONT_WEIGHT_SUPPORT_KEY = 'typography.__experimentalFontWeight';
+/**
+ * Key within block settings' supports array indicating support for text
+ * columns e.g. settings found in `block.json`.
+ */
+const TEXT_COLUMNS_SUPPORT_KEY = 'typography.textColumns';
 /**
  * Key within block settings' supports array indicating support for text
  * decorations e.g. settings found in `block.json`.
@@ -42,6 +47,7 @@ const TYPOGRAPHY_SUPPORT_KEYS = [
 	FONT_STYLE_SUPPORT_KEY,
 	FONT_WEIGHT_SUPPORT_KEY,
 	FONT_FAMILY_SUPPORT_KEY,
+	TEXT_COLUMNS_SUPPORT_KEY,
 	TEXT_DECORATION_SUPPORT_KEY,
 	TEXT_TRANSFORM_SUPPORT_KEY,
 	LETTER_SPACING_SUPPORT_KEY,

package/src/hooks/test/style.js

@@ -21,7 +21,7 @@ describe( 'getInlineStyles', () => {
 		expect(
 			getInlineStyles( {
 				color: { text: 'red', background: 'black' },
-				typography: { lineHeight: 1.5, fontSize: 10 },
+				typography: { lineHeight: 1.5, fontSize: 10, textColumns: 2 },
 				border: {
 					radius: '10px',
 					width: '1em',
@@ -44,6 +44,7 @@ describe( 'getInlineStyles', () => {
 			borderStyle: 'dotted',
 			borderWidth: '1em',
 			color: 'red',
+			columnCount: 2,
 			lineHeight: 1.5,
 			fontSize: 10,
 			marginBottom: '15px',

package/src/hooks/test/use-typography-props.js

@@ -12,6 +12,7 @@ describe( 'getTypographyClassesAndStyles', () => {
 				typography: {
 					letterSpacing: '22px',
 					fontSize: '2rem',
+					textColumns: 3,
 					textTransform: 'uppercase',
 				},
 			},
@@ -19,6 +20,7 @@ describe( 'getTypographyClassesAndStyles', () => {
 		expect( getTypographyClassesAndStyles( attributes ) ).toEqual( {
 			className: 'has-tofu-font-family has-large-font-size',
 			style: {
+				columnCount: 3,
 				letterSpacing: '22px',
 				fontSize: '2rem',
 				textTransform: 'uppercase',

package/src/hooks/test/utils.js

@@ -7,113 +7,9 @@ import { applyFilters } from '@wordpress/hooks';
  * Internal dependencies
  */
 import '../anchor';
-import { immutableSet } from '../utils';
 
 const noop = () => {};
 
-describe( 'immutableSet', () => {
-	describe( 'handling falsy values properly', () => {
-		it( 'should create a new object if `undefined` is passed', () => {
-			const result = immutableSet( undefined, 'test', 1 );
-
-			expect( result ).toEqual( { test: 1 } );
-		} );
-
-		it( 'should create a new object if `null` is passed', () => {
-			const result = immutableSet( null, 'test', 1 );
-
-			expect( result ).toEqual( { test: 1 } );
-		} );
-
-		it( 'should create a new object if `false` is passed', () => {
-			const result = immutableSet( false, 'test', 1 );
-
-			expect( result ).toEqual( { test: 1 } );
-		} );
-
-		it( 'should create a new object if `0` is passed', () => {
-			const result = immutableSet( 0, 'test', 1 );
-
-			expect( result ).toEqual( { test: 1 } );
-		} );
-
-		it( 'should create a new object if an empty string is passed', () => {
-			const result = immutableSet( '', 'test', 1 );
-
-			expect( result ).toEqual( { test: 1 } );
-		} );
-
-		it( 'should create a new object if a NaN is passed', () => {
-			const result = immutableSet( NaN, 'test', 1 );
-
-			expect( result ).toEqual( { test: 1 } );
-		} );
-	} );
-
-	describe( 'manages data assignment properly', () => {
-		it( 'assigns value properly when it does not exist', () => {
-			const result = immutableSet( {}, 'test', 1 );
-
-			expect( result ).toEqual( { test: 1 } );
-		} );
-
-		it( 'overrides existing values', () => {
-			const result = immutableSet( { test: 1 }, 'test', 2 );
-
-			expect( result ).toEqual( { test: 2 } );
-		} );
-
-		describe( 'with array notation access', () => {
-			it( 'assigns values at deeper levels', () => {
-				const result = immutableSet( {}, [ 'foo', 'bar', 'baz' ], 5 );
-
-				expect( result ).toEqual( { foo: { bar: { baz: 5 } } } );
-			} );
-
-			it( 'overrides existing values at deeper levels', () => {
-				const result = immutableSet(
-					{ foo: { bar: { baz: 1 } } },
-					[ 'foo', 'bar', 'baz' ],
-					5
-				);
-
-				expect( result ).toEqual( { foo: { bar: { baz: 5 } } } );
-			} );
-
-			it( 'keeps other properties intact', () => {
-				const result = immutableSet(
-					{ foo: { bar: { baz: 1 } } },
-					[ 'foo', 'bar', 'test' ],
-					5
-				);
-
-				expect( result ).toEqual( {
-					foo: { bar: { baz: 1, test: 5 } },
-				} );
-			} );
-		} );
-	} );
-
-	describe( 'does not mutate the original object', () => {
-		it( 'clones the object at the first level', () => {
-			const input = {};
-			const result = immutableSet( input, 'test', 1 );
-
-			expect( result ).not.toBe( input );
-		} );
-
-		it( 'clones the object at deeper levels', () => {
-			const input = { foo: { bar: { baz: 1 } } };
-			const result = immutableSet( input, [ 'foo', 'bar', 'baz' ], 2 );
-
-			expect( result ).not.toBe( input );
-			expect( result.foo ).not.toBe( input.foo );
-			expect( result.foo.bar ).not.toBe( input.foo.bar );
-			expect( result.foo.bar.baz ).not.toBe( input.foo.bar.baz );
-		} );
-	} );
-} );
-
 describe( 'anchor', () => {
 	const blockSettings = {
 		save: noop,

package/src/hooks/typography.js

@@ -27,6 +27,7 @@ function omit( object, keys ) {
 const LETTER_SPACING_SUPPORT_KEY = 'typography.__experimentalLetterSpacing';
 const TEXT_TRANSFORM_SUPPORT_KEY = 'typography.__experimentalTextTransform';
 const TEXT_DECORATION_SUPPORT_KEY = 'typography.__experimentalTextDecoration';
+const TEXT_COLUMNS_SUPPORT_KEY = 'typography.textColumns';
 const FONT_STYLE_SUPPORT_KEY = 'typography.__experimentalFontStyle';
 const FONT_WEIGHT_SUPPORT_KEY = 'typography.__experimentalFontWeight';
 export const TYPOGRAPHY_SUPPORT_KEY = 'typography';
@@ -36,6 +37,7 @@ export const TYPOGRAPHY_SUPPORT_KEYS = [
 	FONT_STYLE_SUPPORT_KEY,
 	FONT_WEIGHT_SUPPORT_KEY,
 	FONT_FAMILY_SUPPORT_KEY,
+	TEXT_COLUMNS_SUPPORT_KEY,
 	TEXT_DECORATION_SUPPORT_KEY,
 	TEXT_TRANSFORM_SUPPORT_KEY,
 	LETTER_SPACING_SUPPORT_KEY,
@@ -136,7 +138,6 @@ export function TypographyPanel( {
 		<StylesTypographyPanel
 			as={ TypographyInspectorControl }
 			panelId={ clientId }
-			name={ name }
 			settings={ settings }
 			value={ value }
 			onChange={ onChange }

package/src/hooks/utils.js

@@ -14,6 +14,7 @@ import { useMemo } from '@wordpress/element';
  */
 import { useSetting } from '../components';
 import { useSettingsForBlockElement } from '../components/global-styles/hooks';
+import { immutableSet } from '../utils/object';
 
 /**
  * Removed falsy values from nested object.
@@ -37,76 +38,6 @@ export const cleanEmptyObject = ( object ) => {
 	return isEmpty( cleanedNestedObjects ) ? undefined : cleanedNestedObjects;
 };
 
-/**
- * Converts a path to an array of its fragments.
- * Supports strings, numbers and arrays:
- *
- * 'foo' => [ 'foo' ]
- * 2 => [ '2' ]
- * [ 'foo', 'bar' ] => [ 'foo', 'bar' ]
- *
- * @param {string|number|Array} path Path
- * @return {Array} Normalized path.
- */
-function normalizePath( path ) {
-	if ( Array.isArray( path ) ) {
-		return path;
-	} else if ( typeof path === 'number' ) {
-		return [ path.toString() ];
-	}
-
-	return [ path ];
-}
-
-/**
- * Clones an object.
- * Non-object values are returned unchanged.
- *
- * @param {*} object Object to clone.
- * @return {*} Cloned object, or original literal non-object value.
- */
-function cloneObject( object ) {
-	if ( typeof object === 'object' ) {
-		return {
-			...Object.fromEntries(
-				Object.entries( object ).map( ( [ key, value ] ) => [
-					key,
-					cloneObject( value ),
-				] )
-			),
-		};
-	}
-
-	return object;
-}
-
-/**
- * Perform an immutable set.
- * Handles nullish initial values.
- * Clones all nested objects in the specified object.
- *
- * @param {Object}              object Object to set a value in.
- * @param {number|string|Array} path   Path in the object to modify.
- * @param {*}                   value  New value to set.
- * @return {Object} Cloned object with the new value set.
- */
-export function immutableSet( object, path, value ) {
-	const normalizedPath = normalizePath( path );
-	const newObject = object ? cloneObject( object ) : {};
-
-	normalizedPath.reduce( ( acc, key, i ) => {
-		if ( acc[ key ] === undefined ) {
-			acc[ key ] = {};
-		}
-		if ( i === normalizedPath.length - 1 ) {
-			acc[ key ] = value;
-		}
-		return acc[ key ];
-	}, newObject );
-
-	return newObject;
-}
-
 export function transformStyles(
 	activeSupports,
 	migrationPaths,
@@ -202,6 +133,7 @@ export function useBlockSettings( name, parentLayout ) {
 	const fontStyle = useSetting( 'typography.fontStyle' );
 	const fontWeight = useSetting( 'typography.fontWeight' );
 	const lineHeight = useSetting( 'typography.lineHeight' );
+	const textColumns = useSetting( 'typography.textColumns' );
 	const textDecoration = useSetting( 'typography.textDecoration' );
 	const textTransform = useSetting( 'typography.textTransform' );
 	const letterSpacing = useSetting( 'typography.letterSpacing' );
@@ -212,9 +144,45 @@ export function useBlockSettings( name, parentLayout ) {
 	const units = useSetting( 'spacing.units' );
 	const minHeight = useSetting( 'dimensions.minHeight' );
 	const layout = useSetting( 'layout' );
+	const borderColor = useSetting( 'border.color' );
+	const borderRadius = useSetting( 'border.radius' );
+	const borderStyle = useSetting( 'border.style' );
+	const borderWidth = useSetting( 'border.width' );
+	const customColorsEnabled = useSetting( 'color.custom' );
+	const customColors = useSetting( 'color.palette.custom' );
+	const themeColors = useSetting( 'color.palette.theme' );
+	const defaultColors = useSetting( 'color.palette.default' );
+	const defaultPalette = useSetting( 'color.defaultPalette' );
+	const userGradientPalette = useSetting( 'color.gradients.custom' );
+	const themeGradientPalette = useSetting( 'color.gradients.theme' );
+	const defaultGradientPalette = useSetting( 'color.gradients.default' );
+	const defaultGradients = useSetting( 'color.defaultGradients' );
+	const areCustomGradientsEnabled = useSetting( 'color.customGradient' );
+	const isBackgroundEnabled = useSetting( 'color.background' );
+	const isLinkEnabled = useSetting( 'color.link' );
+	const isTextEnabled = useSetting( 'color.text' );
 
 	const rawSettings = useMemo( () => {
 		return {
+			color: {
+				palette: {
+					custom: customColors,
+					theme: themeColors,
+					default: defaultColors,
+				},
+				gradients: {
+					custom: userGradientPalette,
+					theme: themeGradientPalette,
+					default: defaultGradientPalette,
+				},
+				defaultGradients,
+				defaultPalette,
+				custom: customColorsEnabled,
+				customGradient: areCustomGradientsEnabled,
+				background: isBackgroundEnabled,
+				link: isLinkEnabled,
+				text: isTextEnabled,
+			},
 			typography: {
 				fontFamilies: {
 					custom: fontFamilies,
@@ -226,6 +194,7 @@ export function useBlockSettings( name, parentLayout ) {
 				fontStyle,
 				fontWeight,
 				lineHeight,
+				textColumns,
 				textDecoration,
 				textTransform,
 				letterSpacing,
@@ -239,6 +208,12 @@ export function useBlockSettings( name, parentLayout ) {
 				blockGap,
 				units,
 			},
+			border: {
+				color: borderColor,
+				radius: borderRadius,
+				style: borderStyle,
+				width: borderWidth,
+			},
 			dimensions: {
 				minHeight,
 			},
@@ -252,6 +227,7 @@ export function useBlockSettings( name, parentLayout ) {
 		fontStyle,
 		fontWeight,
 		lineHeight,
+		textColumns,
 		textDecoration,
 		textTransform,
 		letterSpacing,
@@ -263,6 +239,23 @@ export function useBlockSettings( name, parentLayout ) {
 		minHeight,
 		layout,
 		parentLayout,
+		borderColor,
+		borderRadius,
+		borderStyle,
+		borderWidth,
+		customColorsEnabled,
+		customColors,
+		themeColors,
+		defaultColors,
+		defaultPalette,
+		userGradientPalette,
+		themeGradientPalette,
+		defaultGradientPalette,
+		defaultGradients,
+		areCustomGradientsEnabled,
+		isBackgroundEnabled,
+		isLinkEnabled,
+		isTextEnabled,
 	] );
 
 	return useSettingsForBlockElement( rawSettings, name );

package/src/layouts/constrained.js

@@ -32,8 +32,10 @@ export default {
 	inspectorControls: function DefaultLayoutInspectorControls( {
 		layout,
 		onChange,
+		layoutBlockSupport = {},
 	} ) {
 		const { wideSize, contentSize, justifyContent = 'center' } = layout;
+		const { allowJustification = true } = layoutBlockSupport;
 		const onJustificationChange = ( value ) => {
 			onChange( {
 				...layout,
@@ -117,23 +119,27 @@ export default {
 						'Customize the width for all elements that are assigned to the center or wide columns.'
 					) }
 				</p>
-				<ToggleGroupControl
-					__nextHasNoMarginBottom
-					label={ __( 'Justification' ) }
-					value={ justifyContent }
-					onChange={ onJustificationChange }
-				>
-					{ justificationOptions.map( ( { value, icon, label } ) => {
-						return (
-							<ToggleGroupControlOptionIcon
-								key={ value }
-								value={ value }
-								icon={ icon }
-								label={ label }
-							/>
-						);
-					} ) }
-				</ToggleGroupControl>
+				{ allowJustification && (
+					<ToggleGroupControl
+						__nextHasNoMarginBottom
+						label={ __( 'Justification' ) }
+						value={ justifyContent }
+						onChange={ onJustificationChange }
+					>
+						{ justificationOptions.map(
+							( { value, icon, label } ) => {
+								return (
+									<ToggleGroupControlOptionIcon
+										key={ value }
+										value={ value }
+										icon={ icon }
+										label={ label }
+									/>
+								);
+							}
+						) }
+					</ToggleGroupControl>
+				) }
 			</>
 		);
 	},