@wordpress/block-editor 11.6.0 → 11.7.0

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/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

@@ -138,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,
@@ -222,6 +153,14 @@ export function useBlockSettings( name, parentLayout ) {
 	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 {
@@ -231,8 +170,18 @@ export function useBlockSettings( name, parentLayout ) {
 					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: {
@@ -299,6 +248,14 @@ export function useBlockSettings( name, parentLayout ) {
 		themeColors,
 		defaultColors,
 		defaultPalette,
+		userGradientPalette,
+		themeGradientPalette,
+		defaultGradientPalette,
+		defaultGradients,
+		areCustomGradientsEnabled,
+		isBackgroundEnabled,
+		isLinkEnabled,
+		isTextEnabled,
 	] );
 
 	return useSettingsForBlockElement( rawSettings, name );

package/src/layouts/grid.js

@@ -0,0 +1,172 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+import {
+	BaseControl,
+	Flex,
+	FlexItem,
+	RangeControl,
+	__experimentalUnitControl as UnitControl,
+	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { appendSelectors, getBlockGapCSS } from './utils';
+import { getGapCSSValue } from '../hooks/gap';
+import { shouldSkipSerialization } from '../hooks/utils';
+
+const RANGE_CONTROL_MAX_VALUES = {
+	px: 600,
+	'%': 100,
+	vw: 100,
+	vh: 100,
+	em: 38,
+	rem: 38,
+};
+
+export default {
+	name: 'grid',
+	label: __( 'Grid' ),
+	inspectorControls: function GridLayoutInspectorControls( {
+		layout = {},
+		onChange,
+	} ) {
+		return (
+			<GridLayoutMinimumWidthControl
+				layout={ layout }
+				onChange={ onChange }
+			/>
+		);
+	},
+	toolBarControls: function DefaultLayoutToolbarControls() {
+		return null;
+	},
+	getLayoutStyle: function getLayoutStyle( {
+		selector,
+		layout,
+		style,
+		blockName,
+		hasBlockGapSupport,
+		layoutDefinitions,
+	} ) {
+		const { minimumColumnWidth = '12rem' } = layout;
+
+		// If a block's block.json skips serialization for spacing or spacing.blockGap,
+		// don't apply the user-defined value to the styles.
+		const blockGapValue =
+			style?.spacing?.blockGap &&
+			! shouldSkipSerialization( blockName, 'spacing', 'blockGap' )
+				? getGapCSSValue( style?.spacing?.blockGap, '0.5em' )
+				: undefined;
+
+		let output = '';
+		const rules = [];
+
+		if ( minimumColumnWidth ) {
+			rules.push(
+				`grid-template-columns: repeat(auto-fill, minmax(min(${ minimumColumnWidth }, 100%), 1fr))`
+			);
+		}
+
+		if ( rules.length ) {
+			// Reason to disable: the extra line breaks added by prettier mess with the unit tests.
+			// eslint-disable-next-line prettier/prettier
+			output = `${ appendSelectors( selector ) } { ${ rules.join(
+				'; '
+			) }; }`;
+		}
+
+		// Output blockGap styles based on rules contained in layout definitions in theme.json.
+		if ( hasBlockGapSupport && blockGapValue ) {
+			output += getBlockGapCSS(
+				selector,
+				layoutDefinitions,
+				'grid',
+				blockGapValue
+			);
+		}
+		return output;
+	},
+	getOrientation() {
+		return 'horizontal';
+	},
+	getAlignments() {
+		return [];
+	},
+};
+
+// Enables setting minimum width of grid items.
+function GridLayoutMinimumWidthControl( { layout, onChange } ) {
+	const { minimumColumnWidth: value = '12rem' } = layout;
+	const [ quantity, unit ] = parseQuantityAndUnitFromRawValue( value );
+
+	const handleSliderChange = ( next ) => {
+		onChange( {
+			...layout,
+			minimumColumnWidth: [ next, unit ].join( '' ),
+		} );
+	};
+
+	// Mostly copied from HeightControl.
+	const handleUnitChange = ( newUnit ) => {
+		// Attempt to smooth over differences between currentUnit and newUnit.
+		// This should slightly improve the experience of switching between unit types.
+		let newValue;
+
+		if ( [ 'em', 'rem' ].includes( newUnit ) && unit === 'px' ) {
+			// Convert pixel value to an approximate of the new unit, assuming a root size of 16px.
+			newValue = ( quantity / 16 ).toFixed( 2 ) + newUnit;
+		} else if ( [ 'em', 'rem' ].includes( unit ) && newUnit === 'px' ) {
+			// Convert to pixel value assuming a root size of 16px.
+			newValue = Math.round( quantity * 16 ) + newUnit;
+		} else if (
+			[ 'vh', 'vw', '%' ].includes( newUnit ) &&
+			quantity > 100
+		) {
+			// When converting to `vh`, `vw`, or `%` units, cap the new value at 100.
+			newValue = 100 + newUnit;
+		}
+
+		onChange( {
+			...layout,
+			minimumColumnWidth: newValue,
+		} );
+	};
+
+	return (
+		<fieldset>
+			<BaseControl.VisualLabel as="legend">
+				{ __( 'Minimum column width' ) }
+			</BaseControl.VisualLabel>
+			<Flex gap={ 4 }>
+				<FlexItem isBlock>
+					<UnitControl
+						size={ '__unstable-large' }
+						onChange={ ( newValue ) => {
+							onChange( {
+								...layout,
+								minimumColumnWidth: newValue,
+							} );
+						} }
+						onUnitChange={ handleUnitChange }
+						value={ value }
+						min={ 0 }
+					/>
+				</FlexItem>
+				<FlexItem isBlock>
+					<RangeControl
+						onChange={ handleSliderChange }
+						value={ quantity }
+						min={ 0 }
+						max={ RANGE_CONTROL_MAX_VALUES[ unit ] || 600 }
+						withInputField={ false }
+					/>
+				</FlexItem>
+			</Flex>
+		</fieldset>
+	);
+}

package/src/layouts/index.js

@@ -4,8 +4,9 @@
 import flex from './flex';
 import flow from './flow';
 import constrained from './constrained';
+import grid from './grid';
 
-const layoutTypes = [ flow, flex, constrained ];
+const layoutTypes = [ flow, flex, constrained, grid ];
 
 /**
  * Retrieves a layout type by name.

package/src/layouts/test/grid.js

@@ -0,0 +1,21 @@
+/**
+ * Internal dependencies
+ */
+import grid from '../grid';
+
+describe( 'getLayoutStyle', () => {
+	it( 'should return a single `grid-template-columns` property if no non-default params are provided', () => {
+		const expected = `.editor-styles-wrapper .my-container { grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr)); }`;
+
+		const result = grid.getLayoutStyle( {
+			selector: '.my-container',
+			layout: {},
+			style: {},
+			blockName: 'test-block',
+			hasBlockGapSupport: false,
+			layoutDefinitions: undefined,
+		} );
+
+		expect( result ).toBe( expected );
+	} );
+} );

package/src/private-apis.js

@@ -7,6 +7,7 @@ import { lock } from './lock-unlock';
 import OffCanvasEditor from './components/off-canvas-editor';
 import LeafMoreMenu from './components/off-canvas-editor/leaf-more-menu';
 import { ComposedPrivateInserter as PrivateInserter } from './components/inserter';
+import { PrivateListView } from './components/list-view';
 
 /**
  * Private @wordpress/block-editor APIs.
@@ -18,4 +19,5 @@ lock( privateApis, {
 	LeafMoreMenu,
 	OffCanvasEditor,
 	PrivateInserter,
+	PrivateListView,
 } );

package/src/utils/object.js

@@ -0,0 +1,69 @@
+/**
+ * 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;
+}