@wordpress/block-editor 11.7.0 → 12.0.0

package/src/hooks/margin.js

@@ -1,43 +1,48 @@
 /**
  * WordPress dependencies
  */
-import { useMemo, useRef, useState, useEffect } from '@wordpress/element';
+import { useState, useRef, useEffect } from '@wordpress/element';
 import isShallowEqual from '@wordpress/is-shallow-equal';
 
 /**
  * Internal dependencies
  */
 import BlockPopover from '../components/block-popover';
-import { getSpacingPresetCssVar } from '../components/spacing-sizes-control/utils';
+import { __unstableUseBlockElement as useBlockElement } from '../components/block-list/use-block-props/use-block-refs';
+
+function getComputedCSS( element, property ) {
+	return element.ownerDocument.defaultView
+		.getComputedStyle( element )
+		.getPropertyValue( property );
+}
 
 export function MarginVisualizer( { clientId, attributes, forceShow } ) {
+	const blockElement = useBlockElement( clientId );
+	const [ style, setStyle ] = useState();
+
 	const margin = attributes?.style?.spacing?.margin;
 
-	const style = useMemo( () => {
-		const marginTop = margin?.top
-			? getSpacingPresetCssVar( margin?.top )
-			: 0;
-		const marginRight = margin?.right
-			? getSpacingPresetCssVar( margin?.right )
-			: 0;
-		const marginBottom = margin?.bottom
-			? getSpacingPresetCssVar( margin?.bottom )
-			: 0;
-		const marginLeft = margin?.left
-			? getSpacingPresetCssVar( margin?.left )
-			: 0;
+	useEffect( () => {
+		if ( ! blockElement ) {
+			return;
+		}
 
-		return {
-			borderTopWidth: marginTop,
-			borderRightWidth: marginRight,
-			borderBottomWidth: marginBottom,
-			borderLeftWidth: marginLeft,
-			top: marginTop ? `calc(${ marginTop } * -1)` : 0,
-			right: marginRight ? `calc(${ marginRight } * -1)` : 0,
-			bottom: marginBottom ? `calc(${ marginBottom } * -1)` : 0,
-			left: marginLeft ? `calc(${ marginLeft } * -1)` : 0,
-		};
-	}, [ margin ] );
+		const top = getComputedCSS( blockElement, 'margin-top' );
+		const right = getComputedCSS( blockElement, 'margin-right' );
+		const bottom = getComputedCSS( blockElement, 'margin-bottom' );
+		const left = getComputedCSS( blockElement, 'margin-left' );
+
+		setStyle( {
+			borderTopWidth: top,
+			borderRightWidth: right,
+			borderBottomWidth: bottom,
+			borderLeftWidth: left,
+			top: top ? `-${ top }` : 0,
+			right: right ? `-${ right }` : 0,
+			bottom: bottom ? `-${ bottom }` : 0,
+			left: left ? `-${ left }` : 0,
+		} );
+	}, [ blockElement, margin ] );
 
 	const [ isActive, setIsActive ] = useState( false );
 	const valueRef = useRef( margin );

package/src/hooks/padding.js

@@ -1,33 +1,39 @@
 /**
  * WordPress dependencies
  */
-import { useState, useRef, useEffect, useMemo } from '@wordpress/element';
+import { useState, useRef, useEffect } from '@wordpress/element';
 import isShallowEqual from '@wordpress/is-shallow-equal';
 
 /**
  * Internal dependencies
  */
 import BlockPopover from '../components/block-popover';
-import { getSpacingPresetCssVar } from '../components/spacing-sizes-control/utils';
+import { __unstableUseBlockElement as useBlockElement } from '../components/block-list/use-block-props/use-block-refs';
+
+function getComputedCSS( element, property ) {
+	return element.ownerDocument.defaultView
+		.getComputedStyle( element )
+		.getPropertyValue( property );
+}
 
 export function PaddingVisualizer( { clientId, attributes, forceShow } ) {
+	const blockElement = useBlockElement( clientId );
+	const [ style, setStyle ] = useState();
+
 	const padding = attributes?.style?.spacing?.padding;
-	const style = useMemo( () => {
-		return {
-			borderTopWidth: padding?.top
-				? getSpacingPresetCssVar( padding?.top )
-				: 0,
-			borderRightWidth: padding?.right
-				? getSpacingPresetCssVar( padding?.right )
-				: 0,
-			borderBottomWidth: padding?.bottom
-				? getSpacingPresetCssVar( padding?.bottom )
-				: 0,
-			borderLeftWidth: padding?.left
-				? getSpacingPresetCssVar( padding?.left )
-				: 0,
-		};
-	}, [ padding ] );
+
+	useEffect( () => {
+		if ( ! blockElement ) {
+			return;
+		}
+
+		setStyle( {
+			borderTopWidth: getComputedCSS( blockElement, 'padding-top' ),
+			borderRightWidth: getComputedCSS( blockElement, 'padding-right' ),
+			borderBottomWidth: getComputedCSS( blockElement, 'padding-bottom' ),
+			borderLeftWidth: getComputedCSS( blockElement, 'padding-left' ),
+		} );
+	}, [ blockElement, padding ] );
 
 	const [ isActive, setIsActive ] = useState( false );
 	const valueRef = useRef( padding );

package/src/hooks/test/anchor.js

@@ -0,0 +1,113 @@
+/**
+ * WordPress dependencies
+ */
+import { applyFilters } from '@wordpress/hooks';
+
+/**
+ * Internal dependencies
+ */
+import '../anchor';
+
+const noop = () => {};
+
+describe( 'anchor', () => {
+	const blockSettings = {
+		save: noop,
+		category: 'text',
+		title: 'block title',
+	};
+
+	describe( 'addAttribute()', () => {
+		const registerBlockType = applyFilters.bind(
+			null,
+			'blocks.registerBlockType'
+		);
+
+		it( 'should do nothing if the block settings do not define anchor support', () => {
+			const settings = registerBlockType( blockSettings );
+
+			expect( settings.attributes ).toBe( undefined );
+		} );
+
+		it( 'should assign a new anchor attribute', () => {
+			const settings = registerBlockType( {
+				...blockSettings,
+				supports: {
+					anchor: true,
+				},
+			} );
+
+			expect( settings.attributes ).toHaveProperty( 'anchor' );
+		} );
+
+		it( 'should not override attributes defined in settings', () => {
+			const settings = registerBlockType( {
+				...blockSettings,
+				supports: {
+					anchor: true,
+				},
+				attributes: {
+					anchor: {
+						type: 'string',
+						default: 'testAnchor',
+					},
+				},
+			} );
+
+			expect( settings.attributes.anchor ).toEqual( {
+				type: 'string',
+				default: 'testAnchor',
+			} );
+		} );
+	} );
+
+	describe( 'addSaveProps', () => {
+		const getSaveContentExtraProps = applyFilters.bind(
+			null,
+			'blocks.getSaveContent.extraProps'
+		);
+
+		it( 'should do nothing if the block settings do not define anchor support', () => {
+			const attributes = { anchor: 'foo' };
+			const extraProps = getSaveContentExtraProps(
+				{},
+				blockSettings,
+				attributes
+			);
+
+			expect( extraProps ).not.toHaveProperty( 'id' );
+		} );
+
+		it( 'should inject anchor attribute ID', () => {
+			const attributes = { anchor: 'foo' };
+			const extraProps = getSaveContentExtraProps(
+				{},
+				{
+					...blockSettings,
+					supports: {
+						anchor: true,
+					},
+				},
+				attributes
+			);
+
+			expect( extraProps.id ).toBe( 'foo' );
+		} );
+
+		it( 'should remove an anchor attribute ID when field is cleared', () => {
+			const attributes = { anchor: '' };
+			const extraProps = getSaveContentExtraProps(
+				{},
+				{
+					...blockSettings,
+					supports: {
+						anchor: true,
+					},
+				},
+				attributes
+			);
+
+			expect( extraProps.id ).toBe( null );
+		} );
+	} );
+} );

package/src/hooks/test/color.js

@@ -12,17 +12,8 @@ import { registerBlockType, unregisterBlockType } from '@wordpress/blocks';
  * Internal dependencies
  */
 import BlockEditorProvider from '../../components/provider';
-import { cleanEmptyObject } from '../utils';
 import { withColorPaletteStyles } from '../color';
 
-describe( 'cleanEmptyObject', () => {
-	it( 'should remove nested keys', () => {
-		expect( cleanEmptyObject( { color: { text: undefined } } ) ).toEqual(
-			undefined
-		);
-	} );
-} );
-
 describe( 'withColorPaletteStyles', () => {
 	const settings = {
 		__experimentalFeatures: {

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

@@ -44,7 +44,7 @@ describe( 'getTypographyClassesAndStyles', () => {
 			style: {
 				letterSpacing: '22px',
 				fontSize:
-					'clamp(1.5rem, 1.5rem + ((1vw - 0.48rem) * 0.962), 2rem)',
+					'clamp(1.25rem, 1.25rem + ((1vw - 0.2rem) * 0.938), 2rem)',
 				textTransform: 'uppercase',
 			},
 		} );
@@ -70,7 +70,7 @@ describe( 'getTypographyClassesAndStyles', () => {
 			style: {
 				textDecoration: 'underline',
 				fontSize:
-					'clamp(1.5rem, 1.5rem + ((1vw - 0.48rem) * 0.962), 2rem)',
+					'clamp(1.25rem, 1.25rem + ((1vw - 0.2rem) * 0.938), 2rem)',
 				textTransform: 'uppercase',
 			},
 		} );

package/src/hooks/test/utils.js

@@ -1,113 +1,32 @@
-/**
- * WordPress dependencies
- */
-import { applyFilters } from '@wordpress/hooks';
-
 /**
  * Internal dependencies
  */
-import '../anchor';
+import { cleanEmptyObject } from '../utils';
 
-const noop = () => {};
-
-describe( 'anchor', () => {
-	const blockSettings = {
-		save: noop,
-		category: 'text',
-		title: 'block title',
-	};
-
-	describe( 'addAttribute()', () => {
-		const registerBlockType = applyFilters.bind(
-			null,
-			'blocks.registerBlockType'
+describe( 'cleanEmptyObject', () => {
+	it( 'should remove nested keys', () => {
+		expect( cleanEmptyObject( { color: { text: undefined } } ) ).toEqual(
+			undefined
 		);
+	} );
 
-		it( 'should do nothing if the block settings do not define anchor support', () => {
-			const settings = registerBlockType( blockSettings );
-
-			expect( settings.attributes ).toBe( undefined );
-		} );
-
-		it( 'should assign a new anchor attribute', () => {
-			const settings = registerBlockType( {
-				...blockSettings,
-				supports: {
-					anchor: true,
-				},
-			} );
-
-			expect( settings.attributes ).toHaveProperty( 'anchor' );
-		} );
-
-		it( 'should not override attributes defined in settings', () => {
-			const settings = registerBlockType( {
-				...blockSettings,
-				supports: {
-					anchor: true,
-				},
-				attributes: {
-					anchor: {
-						type: 'string',
-						default: 'testAnchor',
-					},
-				},
-			} );
-
-			expect( settings.attributes.anchor ).toEqual( {
-				type: 'string',
-				default: 'testAnchor',
-			} );
+	it( 'should remove partial nested keys', () => {
+		expect(
+			cleanEmptyObject( {
+				color: { text: undefined },
+				typography: { fontSize: '10px' },
+			} )
+		).toEqual( {
+			typography: { fontSize: '10px' },
 		} );
 	} );
 
-	describe( 'addSaveProps', () => {
-		const getSaveContentExtraProps = applyFilters.bind(
-			null,
-			'blocks.getSaveContent.extraProps'
+	it( 'should not remove falsy nested keys', () => {
+		expect( cleanEmptyObject( { color: { text: false } } ) ).not.toEqual(
+			undefined
+		);
+		expect( cleanEmptyObject( { color: { text: '' } } ) ).not.toEqual(
+			undefined
 		);
-
-		it( 'should do nothing if the block settings do not define anchor support', () => {
-			const attributes = { anchor: 'foo' };
-			const extraProps = getSaveContentExtraProps(
-				{},
-				blockSettings,
-				attributes
-			);
-
-			expect( extraProps ).not.toHaveProperty( 'id' );
-		} );
-
-		it( 'should inject anchor attribute ID', () => {
-			const attributes = { anchor: 'foo' };
-			const extraProps = getSaveContentExtraProps(
-				{},
-				{
-					...blockSettings,
-					supports: {
-						anchor: true,
-					},
-				},
-				attributes
-			);
-
-			expect( extraProps.id ).toBe( 'foo' );
-		} );
-
-		it( 'should remove an anchor attribute ID when field is cleared', () => {
-			const attributes = { anchor: '' };
-			const extraProps = getSaveContentExtraProps(
-				{},
-				{
-					...blockSettings,
-					supports: {
-						anchor: true,
-					},
-				},
-				attributes
-			);
-
-			expect( extraProps.id ).toBe( null );
-		} );
 	} );
 } );

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,7 +14,7 @@ import { useMemo } from '@wordpress/element';
  */
 import { useSetting } from '../components';
 import { useSettingsForBlockElement } from '../components/global-styles/hooks';
-import { immutableSet } from '../utils/object';
+import { setImmutably } from '../utils/object';
 
 /**
  * Removed falsy values from nested object.
@@ -31,9 +31,9 @@ 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 ] ) => value !== undefined )
 	);
 	return isEmpty( cleanedNestedObjects ) ? undefined : cleanedNestedObjects;
 };
@@ -82,7 +82,7 @@ export function transformStyles(
 				if ( styleValue ) {
 					returnBlock = {
 						...returnBlock,
-						attributes: immutableSet(
+						attributes: setImmutably(
 							returnBlock.attributes,
 							path,
 							styleValue
@@ -150,9 +150,14 @@ export function useBlockSettings( name, parentLayout ) {
 	const borderWidth = useSetting( 'border.width' );
 	const customColorsEnabled = useSetting( 'color.custom' );
 	const customColors = useSetting( 'color.palette.custom' );
+	const customDuotone = useSetting( 'color.customDuotone' );
 	const themeColors = useSetting( 'color.palette.theme' );
 	const defaultColors = useSetting( 'color.palette.default' );
 	const defaultPalette = useSetting( 'color.defaultPalette' );
+	const defaultDuotone = useSetting( 'color.defaultDuotone' );
+	const userDuotonePalette = useSetting( 'color.duotone.custom' );
+	const themeDuotonePalette = useSetting( 'color.duotone.theme' );
+	const defaultDuotonePalette = useSetting( 'color.duotone.default' );
 	const userGradientPalette = useSetting( 'color.gradients.custom' );
 	const themeGradientPalette = useSetting( 'color.gradients.theme' );
 	const defaultGradientPalette = useSetting( 'color.gradients.default' );
@@ -175,10 +180,17 @@ export function useBlockSettings( name, parentLayout ) {
 					theme: themeGradientPalette,
 					default: defaultGradientPalette,
 				},
+				duotone: {
+					custom: userDuotonePalette,
+					theme: themeDuotonePalette,
+					default: defaultDuotonePalette,
+				},
 				defaultGradients,
 				defaultPalette,
+				defaultDuotone,
 				custom: customColorsEnabled,
 				customGradient: areCustomGradientsEnabled,
+				customDuotone,
 				background: isBackgroundEnabled,
 				link: isLinkEnabled,
 				text: isTextEnabled,
@@ -245,9 +257,14 @@ export function useBlockSettings( name, parentLayout ) {
 		borderWidth,
 		customColorsEnabled,
 		customColors,
+		customDuotone,
 		themeColors,
 		defaultColors,
 		defaultPalette,
+		defaultDuotone,
+		userDuotonePalette,
+		themeDuotonePalette,
+		defaultDuotonePalette,
 		userGradientPalette,
 		themeGradientPalette,
 		defaultGradientPalette,

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,8 +6,12 @@ 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';
+import BlockInfo from './components/block-info-slot-fill';
+import { useShouldContextualToolbarShow } from './utils/use-should-contextual-toolbar-show';
+import { cleanEmptyObject } from './hooks/utils';
 
 /**
  * Private @wordpress/block-editor APIs.
@@ -20,4 +24,8 @@ lock( privateApis, {
 	OffCanvasEditor,
 	PrivateInserter,
 	PrivateListView,
+	ResizableBoxPopover,
+	BlockInfo,
+	useShouldContextualToolbarShow,
+	cleanEmptyObject,
 } );

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.
@@ -543,6 +543,9 @@ export function moveBlockToPosition(
 /**
  * Action that inserts a single block, optionally at a specific index respective a root block list.
  *
+ * Only allowed blocks are inserted. The action may fail silently for blocks that are not allowed or if
+ * a templateLock is active on the block list.
+ *
  * @param {Object}   block           Block object to insert.
  * @param {?number}  index           Index at which block should be inserted.
  * @param {?string}  rootClientId    Optional root client ID of block list on which to insert.
@@ -572,12 +575,16 @@ export function insertBlock(
 /**
  * Action that inserts an array of blocks, optionally at a specific index respective a root block list.
  *
+ * Only allowed blocks are inserted. The action may fail silently for blocks that are not allowed or if
+ * a templateLock is active on the block list.
+ *
  * @param {Object[]}  blocks          Block objects to insert.
  * @param {?number}   index           Index at which block should be inserted.
  * @param {?string}   rootClientId    Optional root client ID of block list on which to insert.
  * @param {?boolean}  updateSelection If true block selection will be updated.  If false, block selection will not change. Defaults to true.
  * @param {0|-1|null} initialPosition Initial focus position. Setting it to null prevent focusing the inserted block.
  * @param {?Object}   meta            Optional Meta values to be passed to the action object.
+ *
  * @return {Object} Action object.
  */
 export const insertBlocks =

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

@@ -27,7 +27,7 @@ function normalizePath( path ) {
  * @return {*} Cloned object, or original literal non-object value.
  */
 function cloneObject( object ) {
-	if ( typeof object === 'object' ) {
+	if ( object && typeof object === 'object' ) {
 		return {
 			...Object.fromEntries(
 				Object.entries( object ).map( ( [ key, value ] ) => [
@@ -42,16 +42,16 @@ function cloneObject( object ) {
 }
 
 /**
- * Perform an immutable set.
- * Handles nullish initial values.
- * Clones all nested objects in the specified object.
+ * Immutably sets a value inside an object. Like `lodash#set`, but returning a
+ * new object. Treats nullish initial values as empty objects. Clones any
+ * nested objects.
  *
  * @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 ) {
+export function setImmutably( object, path, value ) {
 	const normalizedPath = normalizePath( path );
 	const newObject = object ? cloneObject( object ) : {};