@wordpress/block-editor 11.2.0 → 11.3.0

package/src/hooks/position.js

@@ -10,6 +10,7 @@ import { __, sprintf } from '@wordpress/i18n';
 import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks';
 import { BaseControl, CustomSelectControl } from '@wordpress/components';
 import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose';
+import { useSelect } from '@wordpress/data';
 import {
 	useContext,
 	useMemo,
@@ -25,6 +26,7 @@ import BlockList from '../components/block-list';
 import useSetting from '../components/use-setting';
 import InspectorControls from '../components/inspector-controls';
 import { cleanEmptyObject } from './utils';
+import { store as blockEditorStore } from '../store';
 
 const POSITION_SUPPORT_KEY = 'position';
 
@@ -196,15 +198,16 @@ export function useIsPositionDisabled( { name: blockName } = {} ) {
 }
 
 /*
- * Position controls to be rendered in an inspector control panel.
+ * Position controls rendered in an inspector control panel.
  *
  * @param {Object} props
  *
- * @return {WPElement} Padding edit element.
+ * @return {WPElement} Position panel.
  */
-export function PositionEdit( props ) {
+export function PositionPanel( props ) {
 	const {
 		attributes: { style = {} },
+		clientId,
 		name: blockName,
 		setAttributes,
 	} = props;
@@ -213,16 +216,32 @@ export function PositionEdit( props ) {
 	const allowSticky = hasStickyPositionSupport( blockName );
 	const value = style?.position?.type;
 
+	const { hasParents } = useSelect(
+		( select ) => {
+			const { getBlockParents } = select( blockEditorStore );
+			const parents = getBlockParents( clientId );
+			return {
+				hasParents: parents.length,
+			};
+		},
+		[ clientId ]
+	);
+
 	const options = useMemo( () => {
 		const availableOptions = [ DEFAULT_OPTION ];
-		if ( allowSticky || value === STICKY_OPTION.value ) {
+		// Only display sticky option if the block has no parents (is at the root of the document),
+		// or if the block already has a sticky position value set.
+		if (
+			( allowSticky && ! hasParents ) ||
+			value === STICKY_OPTION.value
+		) {
 			availableOptions.push( STICKY_OPTION );
 		}
 		if ( allowFixed || value === FIXED_OPTION.value ) {
 			availableOptions.push( FIXED_OPTION );
 		}
 		return availableOptions;
-	}, [ allowFixed, allowSticky, value ] );
+	}, [ allowFixed, allowSticky, hasParents, value ] );
 
 	const onChangeType = ( next ) => {
 		// For now, use a hard-coded `0px` value for the position.
@@ -251,32 +270,34 @@ export function PositionEdit( props ) {
 		? options.find( ( option ) => option.value === value ) || DEFAULT_OPTION
 		: DEFAULT_OPTION;
 
+	// Only display position controls if there is at least one option to choose from.
 	return Platform.select( {
-		web: (
-			<>
-				<BaseControl className="block-editor-hooks__position-selection">
-					<CustomSelectControl
-						__nextUnconstrainedWidth
-						__next36pxDefaultSize
-						className="block-editor-hooks__position-selection__select-control"
-						label={ __( 'Position' ) }
-						hideLabelFromVision
-						describedBy={ sprintf(
-							// translators: %s: Currently selected font size.
-							__( 'Currently selected position: %s' ),
-							selectedOption.name
-						) }
-						options={ options }
-						value={ selectedOption }
-						__experimentalShowSelectedHint
-						onChange={ ( { selectedItem } ) => {
-							onChangeType( selectedItem.value );
-						} }
-						size={ '__unstable-large' }
-					/>
-				</BaseControl>
-			</>
-		),
+		web:
+			options.length > 1 ? (
+				<InspectorControls group="position">
+					<BaseControl className="block-editor-hooks__position-selection">
+						<CustomSelectControl
+							__nextUnconstrainedWidth
+							__next36pxDefaultSize
+							className="block-editor-hooks__position-selection__select-control"
+							label={ __( 'Position' ) }
+							hideLabelFromVision
+							describedBy={ sprintf(
+								// translators: %s: Currently selected position.
+								__( 'Currently selected position: %s' ),
+								selectedOption.name
+							) }
+							options={ options }
+							value={ selectedOption }
+							__experimentalShowSelectedHint
+							onChange={ ( { selectedItem } ) => {
+								onChangeType( selectedItem.value );
+							} }
+							size={ '__unstable-large' }
+						/>
+					</BaseControl>
+				</InspectorControls>
+			) : null,
 		native: null,
 	} );
 }
@@ -300,12 +321,7 @@ export const withInspectorControls = createHigherOrderComponent(
 
 		return [
 			showPositionControls && (
-				<InspectorControls
-					key="position"
-					__experimentalGroup="position"
-				>
-					<PositionEdit { ...props } />
-				</InspectorControls>
+				<PositionPanel key="position" { ...props } />
 			),
 			<BlockEdit key="edit" { ...props } />,
 		];

package/src/hooks/test/align.native.js

@@ -83,7 +83,7 @@ describe( 'Align options', () => {
 					expect( paragraphBlock ).toBeVisible();
 
 					// Open alignments menu
-					const alignmentButtons = getByLabelText( 'Align' );
+					const alignmentButtons = getByLabelText( 'Align text' );
 					fireEvent.press( alignmentButtons );
 
 					// Select alignment option.

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 );