@wordpress/block-editor 11.2.0 → 11.3.1

package/src/hooks/test/utils.js

@@ -7,9 +7,113 @@ 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

@@ -111,7 +111,7 @@ export function TypographyPanel( props ) {
 	} );
 
 	return (
-		<InspectorControls __experimentalGroup="typography">
+		<InspectorControls group="typography">
 			{ ! isFontFamilyDisabled && (
 				<ToolsPanelItem
 					hasValue={ () => hasFontFamilyValue( props ) }

package/src/hooks/use-color-props.js

@@ -92,9 +92,9 @@ export function useColorProps( attributes ) {
 	// Some color settings have a special handling for deprecated flags in `useSetting`,
 	// so we can't unwrap them by doing const { ... } = useSetting('color')
 	// until https://github.com/WordPress/gutenberg/issues/37094 is fixed.
-	const userPalette = useSetting( 'color.palette.custom' ) || [];
-	const themePalette = useSetting( 'color.palette.theme' ) || [];
-	const defaultPalette = useSetting( 'color.palette.default' ) || [];
+	const userPalette = useSetting( 'color.palette.custom' );
+	const themePalette = useSetting( 'color.palette.theme' );
+	const defaultPalette = useSetting( 'color.palette.default' );
 	const gradientsPerOrigin = useSetting( 'color.gradients' ) || EMPTY_OBJECT;
 	const colors = useMemo(
 		() => [

package/src/hooks/utils.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { isEmpty, mapValues, get, setWith, clone } from 'lodash';
+import { isEmpty, mapValues, get } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -30,8 +30,74 @@ 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 ) {
-	return setWith( object ? clone( object ) : {}, path, value, clone );
+	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(

package/src/index.js

@@ -20,3 +20,4 @@ export * from './elements';
 export * from './utils';
 export { storeConfig, store } from './store';
 export { SETTINGS_DEFAULTS } from './store/defaults';
+export { experiments } from './experiments';

package/src/layouts/constrained.js

@@ -71,6 +71,7 @@ export default {
 				<div className="block-editor-hooks__layout-controls">
 					<div className="block-editor-hooks__layout-controls-unit">
 						<UnitControl
+							className="block-editor-hooks__layout-controls-unit-input"
 							label={ __( 'Content' ) }
 							labelPosition="top"
 							__unstableInputWidth="80px"
@@ -91,6 +92,7 @@ export default {
 					</div>
 					<div className="block-editor-hooks__layout-controls-unit">
 						<UnitControl
+							className="block-editor-hooks__layout-controls-unit-input"
 							label={ __( 'Wide' ) }
 							labelPosition="top"
 							__unstableInputWidth="80px"
@@ -116,6 +118,7 @@ export default {
 					) }
 				</p>
 				<ToggleGroupControl
+					__nextHasNoMarginBottom
 					label={ __( 'Justification' ) }
 					value={ justifyContent }
 					onChange={ onJustificationChange }

package/src/layouts/flex.js

@@ -7,6 +7,7 @@ import {
 	justifyCenter,
 	justifyRight,
 	justifySpaceBetween,
+	justifyStretch,
 	arrowRight,
 	arrowDown,
 } from '@wordpress/icons';
@@ -44,12 +45,15 @@ const alignItemsMap = {
 	left: 'flex-start',
 	right: 'flex-end',
 	center: 'center',
+	stretch: 'stretch',
 };
 
 const verticalAlignmentMap = {
 	top: 'flex-start',
 	center: 'center',
 	bottom: 'flex-end',
+	stretch: 'stretch',
+	'space-between': 'space-between',
 };
 
 const flexWrapOptions = [ 'wrap', 'nowrap' ];
@@ -101,14 +105,13 @@ export default {
 					onChange={ onChange }
 					isToolbar
 				/>
-				{ allowVerticalAlignment &&
-					layout?.orientation !== 'vertical' && (
-						<FlexLayoutVerticalAlignmentControl
-							layout={ layout }
-							onChange={ onChange }
-							isToolbar
-						/>
-					) }
+				{ allowVerticalAlignment && (
+					<FlexLayoutVerticalAlignmentControl
+						layout={ layout }
+						onChange={ onChange }
+						isToolbar
+					/>
+				) }
 			</BlockControls>
 		);
 	},
@@ -153,6 +156,9 @@ export default {
 				rules.push( `justify-content: ${ justifyContent }` );
 			}
 		} else {
+			if ( verticalAlignment ) {
+				rules.push( `justify-content: ${ verticalAlignment }` );
+			}
 			rules.push( 'flex-direction: column' );
 			rules.push( `align-items: ${ alignItems }` );
 		}
@@ -188,7 +194,14 @@ function FlexLayoutVerticalAlignmentControl( {
 	onChange,
 	isToolbar = false,
 } ) {
-	const { verticalAlignment = verticalAlignmentMap.center } = layout;
+	const { orientation = 'horizontal' } = layout;
+
+	const defaultVerticalAlignment =
+		orientation === 'horizontal'
+			? verticalAlignmentMap.center
+			: verticalAlignmentMap.top;
+
+	const { verticalAlignment = defaultVerticalAlignment } = layout;
 
 	const onVerticalAlignmentChange = ( value ) => {
 		onChange( {
@@ -201,6 +214,11 @@ function FlexLayoutVerticalAlignmentControl( {
 			<BlockVerticalAlignmentControl
 				onChange={ onVerticalAlignmentChange }
 				value={ verticalAlignment }
+				controls={
+					orientation === 'horizontal'
+						? [ 'top', 'center', 'bottom', 'stretch' ]
+						: [ 'top', 'center', 'bottom', 'space-between' ]
+				}
 			/>
 		);
 	}
@@ -255,6 +273,8 @@ function FlexLayoutJustifyContentControl( {
 	const allowedControls = [ 'left', 'center', 'right' ];
 	if ( orientation === 'horizontal' ) {
 		allowedControls.push( 'space-between' );
+	} else {
+		allowedControls.push( 'stretch' );
 	}
 	if ( isToolbar ) {
 		return (
@@ -293,10 +313,17 @@ function FlexLayoutJustifyContentControl( {
 			icon: justifySpaceBetween,
 			label: __( 'Space between items' ),
 		} );
+	} else {
+		justificationOptions.push( {
+			value: 'stretch',
+			icon: justifyStretch,
+			label: __( 'Stretch items' ),
+		} );
 	}
 
 	return (
 		<ToggleGroupControl
+			__nextHasNoMarginBottom
 			label={ __( 'Justification' ) }
 			value={ justifyContent }
 			onChange={ onJustificationChange }
@@ -333,18 +360,43 @@ function FlexWrapControl( { layout, onChange } ) {
 }
 
 function OrientationControl( { layout, onChange } ) {
-	const { orientation = 'horizontal' } = layout;
+	const {
+		orientation = 'horizontal',
+		verticalAlignment,
+		justifyContent,
+	} = layout;
 	return (
 		<ToggleGroupControl
+			__nextHasNoMarginBottom
 			className="block-editor-hooks__flex-layout-orientation-controls"
 			label={ __( 'Orientation' ) }
 			value={ orientation }
-			onChange={ ( value ) =>
-				onChange( {
+			onChange={ ( value ) => {
+				// Make sure the vertical alignment and justification are compatible with the new orientation.
+				let newVerticalAlignment = verticalAlignment;
+				let newJustification = justifyContent;
+				if ( value === 'horizontal' ) {
+					if ( verticalAlignment === 'space-between' ) {
+						newVerticalAlignment = 'center';
+					}
+					if ( justifyContent === 'stretch' ) {
+						newJustification = 'left';
+					}
+				} else {
+					if ( verticalAlignment === 'stretch' ) {
+						newVerticalAlignment = 'top';
+					}
+					if ( justifyContent === 'space-between' ) {
+						newJustification = 'left';
+					}
+				}
+				return onChange( {
 					...layout,
 					orientation: value,
-				} )
-			}
+					verticalAlignment: newVerticalAlignment,
+					justifyContent: newJustification,
+				} );
+			} }
 		>
 			<ToggleGroupControlOptionIcon
 				icon={ arrowRight }

package/src/layouts/flow.js

@@ -67,7 +67,6 @@ export default {
 				info: alignmentInfo[ alignment ],
 			} ) );
 		}
-		const { contentSize, wideSize } = layout;
 
 		const alignments = [
 			{ name: 'left' },
@@ -75,14 +74,6 @@ export default {
 			{ name: 'right' },
 		];
 
-		if ( contentSize ) {
-			alignments.unshift( { name: 'full' } );
-		}
-
-		if ( wideSize ) {
-			alignments.unshift( { name: 'wide', info: alignmentInfo.wide } );
-		}
-
 		alignments.unshift( { name: 'none', info: alignmentInfo.none } );
 
 		return alignments;

package/src/store/actions.js

@@ -25,6 +25,7 @@ import {
 	retrieveSelectedAttribute,
 	START_OF_SELECTED_AREA,
 } from '../utils/selection';
+import { __experimentalUpdateSettings } from './private-actions';
 
 /** @typedef {import('../components/use-on-block-drop/types').WPDropOperation} WPDropOperation */
 
@@ -1263,28 +1264,6 @@ export function toggleBlockMode( clientId ) {
 	};
 }
 
-/**
- * Returns an action object used in signalling that the block interface, eg. toolbar, outline, etc. should be hidden.
- *
- * @return {Object} Action object.
- */
-export function __experimentalHideBlockInterface() {
-	return {
-		type: 'HIDE_BLOCK_INTERFACE',
-	};
-}
-
-/**
- * Returns an action object used in signalling that the block interface, eg. toolbar, outline, etc. should be shown.
- *
- * @return {Object} Action object.
- */
-export function __experimentalShowBlockInterface() {
-	return {
-		type: 'SHOW_BLOCK_INTERFACE',
-	};
-}
-
 /**
  * Returns an action object used in signalling that the user has begun to type.
  *
@@ -1442,10 +1421,7 @@ export function updateBlockListSettings( clientId, settings ) {
  * @return {Object} Action object
  */
 export function updateSettings( settings ) {
-	return {
-		type: 'UPDATE_SETTINGS',
-		settings,
-	};
+	return __experimentalUpdateSettings( settings, true );
 }
 
 /**

package/src/store/defaults.js

@@ -26,8 +26,9 @@ export const PREFERENCES_DEFAULTS = {
  * @property {boolean}       canLockBlocks                          Whether the user can manage Block Lock state
  * @property {boolean}       codeEditingEnabled                     Whether or not the user can switch to the code editor
  * @property {boolean}       generateAnchors                        Enable/Disable auto anchor generation for Heading blocks
+ * @property {boolean}       enableOpenverseMediaCategory           Enable/Disable the Openverse media category in the inserter.
+ * @property {boolean}       clearBlockSelection                    Whether the block editor should clear selection on mousedown when a block is not clicked.
  * @property {boolean}       __experimentalCanUserUseUnfilteredHTML Whether the user should be able to use unfiltered HTML or the HTML should be filtered e.g., to remove elements considered insecure like iframes.
- * @property {boolean}       __experimentalClearBlockSelection      Whether the block editor should clear selection on mousedown when a block is not clicked.
  * @property {boolean}       __experimentalBlockDirectory           Whether the user has enabled the Block Directory
  * @property {Array}         __experimentalBlockPatterns            Array of objects representing the block patterns
  * @property {Array}         __experimentalBlockPatternCategories   Array of objects representing the block pattern categories
@@ -156,8 +157,12 @@ export const SETTINGS_DEFAULTS = {
 	// Allows to disable block locking interface.
 	canLockBlocks: true,
 
+	// Allows to disable Openverse media category in the inserter.
+	enableOpenverseMediaCategory: true,
+
+	clearBlockSelection: true,
+
 	__experimentalCanUserUseUnfilteredHTML: false,
-	__experimentalClearBlockSelection: true,
 	__experimentalBlockDirectory: false,
 	__mobileEnablePageTemplates: false,
 	__experimentalBlockPatterns: [],

package/src/store/index.js

@@ -8,8 +8,11 @@ import { createReduxStore, registerStore } from '@wordpress/data';
  */
 import reducer from './reducer';
 import * as selectors from './selectors';
+import * as privateActions from './private-actions';
+import * as privateSelectors from './private-selectors';
 import * as actions from './actions';
 import { STORE_NAME } from './constants';
+import { unlock } from '../experiments';
 
 /**
  * Block editor data store configuration.
@@ -32,8 +35,11 @@ export const store = createReduxStore( STORE_NAME, {
 	persist: [ 'preferences' ],
 } );
 
-// Ideally we'd use register instead of register stores.
-registerStore( STORE_NAME, {
+// We will be able to use the `register` function once we switch
+// the "preferences" persistence to use the new preferences package.
+const registeredStore = registerStore( STORE_NAME, {
 	...storeConfig,
 	persist: [ 'preferences' ],
 } );
+unlock( registeredStore ).registerPrivateActions( privateActions );
+unlock( registeredStore ).registerPrivateSelectors( privateSelectors );

package/src/store/private-actions.js

@@ -0,0 +1,65 @@
+/**
+ * WordPress dependencies
+ */
+import { Platform } from '@wordpress/element';
+
+/**
+ * A list of private/experimental block editor settings that
+ * should not become a part of the WordPress public API.
+ * BlockEditorProvider will remove these settings from the
+ * settings object it receives.
+ *
+ * @see https://github.com/WordPress/gutenberg/pull/46131
+ */
+const privateSettings = [ 'inserterMediaCategories' ];
+
+/**
+ * Action that updates the block editor settings and
+ * conditionally preserves the experimental ones.
+ *
+ * @param {Object}  settings                  Updated settings
+ * @param {boolean} stripExperimentalSettings Whether to strip experimental settings.
+ * @return {Object} Action object
+ */
+export function __experimentalUpdateSettings(
+	settings,
+	stripExperimentalSettings = false
+) {
+	let cleanSettings = settings;
+	// There are no plugins in the mobile apps, so there is no
+	// need to strip the experimental settings:
+	if ( stripExperimentalSettings && Platform.OS === 'web' ) {
+		cleanSettings = {};
+		for ( const key in settings ) {
+			if ( ! privateSettings.includes( key ) ) {
+				cleanSettings[ key ] = settings[ key ];
+			}
+		}
+	}
+	return {
+		type: 'UPDATE_SETTINGS',
+		settings: cleanSettings,
+	};
+}
+
+/**
+ * Hides the block interface (eg. toolbar, outline, etc.)
+ *
+ * @return {Object} Action object.
+ */
+export function hideBlockInterface() {
+	return {
+		type: 'HIDE_BLOCK_INTERFACE',
+	};
+}
+
+/**
+ * Shows the block interface (eg. toolbar, outline, etc.)
+ *
+ * @return {Object} Action object.
+ */
+export function showBlockInterface() {
+	return {
+		type: 'SHOW_BLOCK_INTERFACE',
+	};
+}

package/src/store/private-selectors.js

@@ -0,0 +1,20 @@
+/**
+ * Returns true if the block interface is hidden, or false otherwise.
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {boolean} Whether the block toolbar is hidden.
+ */
+export function isBlockInterfaceHidden( state ) {
+	return state.isBlockInterfaceHidden;
+}
+
+/**
+ * Gets the client ids of the last inserted blocks.
+ *
+ * @param {Object} state Global application state.
+ * @return {Array|undefined} Client Ids of the last inserted block(s).
+ */
+export function getLastInsertedBlocksClientIds( state ) {
+	return state?.lastBlockInserted?.clientIds;
+}

package/src/store/reducer.js

@@ -1756,7 +1756,7 @@ export function lastBlockAttributesChange( state = null, action ) {
  * @param {?string} state  Current state.
  * @param {Object}  action Dispatched action.
  *
- * @return {string} Updated state.
+ * @return {string | undefined} Updated state.
  */
 export function automaticChangeStatus( state, action ) {
 	switch ( action.type ) {