@wordpress/block-editor 11.6.0 → 11.8.0

package/src/hooks/utils.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { isEmpty, mapValues, get } from 'lodash';
+import { isEmpty, get } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -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.
@@ -30,83 +31,13 @@ export const cleanEmptyObject = ( object ) => {
 		return object;
 	}
 	const cleanedNestedObjects = Object.fromEntries(
-		Object.entries( mapValues( object, cleanEmptyObject ) ).filter(
-			( [ , value ] ) => Boolean( value )
-		)
+		Object.entries( object )
+			.map( ( [ key, value ] ) => [ key, cleanEmptyObject( value ) ] )
+			.filter( ( [ , value ] ) => Boolean( value ) )
 	);
 	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/layouts/utils.js

@@ -83,10 +83,10 @@ export function getBlockGapCSS(
  * @return {Object} An object with contextual info per alignment.
  */
 export function getAlignmentsInfo( layout ) {
-	const { contentSize, wideSize } = layout;
+	const { contentSize, wideSize, type = 'default' } = layout;
 	const alignmentInfo = {};
 	const sizeRegex = /^(?!0)\d+(px|em|rem|vw|vh|%)?$/i;
-	if ( sizeRegex.test( contentSize ) ) {
+	if ( sizeRegex.test( contentSize ) && type === 'constrained' ) {
 		// translators: %s: container size (i.e. 600px etc)
 		alignmentInfo.none = sprintf( __( 'Max %s wide' ), contentSize );
 	}

package/src/private-apis.js

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

package/src/store/actions.js

@@ -75,7 +75,7 @@ export const resetBlocks =
 /**
  * Block validity is a function of blocks state (at the point of a
  * reset) and the template setting. As a compromise to its placement
- * across distinct parts of state, it is implemented here as a side-
+ * across distinct parts of state, it is implemented here as a side
  * effect of the block reset action.
  *
  * @param {Array} blocks Array of blocks.

package/src/style.scss

@@ -26,6 +26,7 @@
 @import "./components/date-format-picker/style.scss";
 @import "./components/duotone-control/style.scss";
 @import "./components/font-appearance-control/style.scss";
+@import "./components/global-styles/style.scss";
 @import "./components/height-control/style.scss";
 @import "./components/image-size-control/style.scss";
 @import "./components/inserter-list-item/style.scss";

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 ( object && 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;
+}

package/src/utils/test/object.js

@@ -0,0 +1,145 @@
+/**
+ * Internal dependencies
+ */
+import { immutableSet } from '../object';
+
+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( 'for nested falsey values', () => {
+			it( 'overwrites undefined values', () => {
+				const result = immutableSet( { test: undefined }, 'test', 1 );
+
+				expect( result ).toEqual( { test: 1 } );
+			} );
+
+			it( 'overwrites null values', () => {
+				const result = immutableSet( { test: null }, 'test', 1 );
+
+				expect( result ).toEqual( { test: 1 } );
+			} );
+
+			it( 'overwrites false values', () => {
+				const result = immutableSet( { test: false }, 'test', 1 );
+
+				expect( result ).toEqual( { test: 1 } );
+			} );
+
+			it( 'overwrites `0` values', () => {
+				const result = immutableSet( { test: 0 }, 'test', 1 );
+
+				expect( result ).toEqual( { test: 1 } );
+			} );
+
+			it( 'overwrites empty string values', () => {
+				const result = immutableSet( { test: '' }, 'test', 1 );
+
+				expect( result ).toEqual( { test: 1 } );
+			} );
+
+			it( 'overwrites NaN values', () => {
+				const result = immutableSet( { test: NaN }, 'test', 1 );
+
+				expect( result ).toEqual( { test: 1 } );
+			} );
+		} );
+	} );
+
+	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 );
+		} );
+	} );
+} );