@wordpress/block-editor 11.8.0 → 12.0.0

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

@@ -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.
@@ -33,7 +33,7 @@ export const cleanEmptyObject = ( object ) => {
 	const cleanedNestedObjects = Object.fromEntries(
 		Object.entries( object )
 			.map( ( [ key, value ] ) => [ key, cleanEmptyObject( value ) ] )
-			.filter( ( [ , value ] ) => Boolean( 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/private-apis.js

@@ -9,6 +9,9 @@ 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.
@@ -22,4 +25,7 @@ lock( privateApis, {
 	PrivateInserter,
 	PrivateListView,
 	ResizableBoxPopover,
+	BlockInfo,
+	useShouldContextualToolbarShow,
+	cleanEmptyObject,
 } );

package/src/store/actions.js

@@ -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/utils/object.js

@@ -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 ) : {};
 

package/src/utils/test/object.js

@@ -1,42 +1,42 @@
 /**
  * Internal dependencies
  */
-import { immutableSet } from '../object';
+import { setImmutably } from '../object';
 
-describe( 'immutableSet', () => {
+describe( 'setImmutably', () => {
 	describe( 'handling falsy values properly', () => {
 		it( 'should create a new object if `undefined` is passed', () => {
-			const result = immutableSet( undefined, 'test', 1 );
+			const result = setImmutably( undefined, 'test', 1 );
 
 			expect( result ).toEqual( { test: 1 } );
 		} );
 
 		it( 'should create a new object if `null` is passed', () => {
-			const result = immutableSet( null, 'test', 1 );
+			const result = setImmutably( null, 'test', 1 );
 
 			expect( result ).toEqual( { test: 1 } );
 		} );
 
 		it( 'should create a new object if `false` is passed', () => {
-			const result = immutableSet( false, 'test', 1 );
+			const result = setImmutably( false, 'test', 1 );
 
 			expect( result ).toEqual( { test: 1 } );
 		} );
 
 		it( 'should create a new object if `0` is passed', () => {
-			const result = immutableSet( 0, 'test', 1 );
+			const result = setImmutably( 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 );
+			const result = setImmutably( '', 'test', 1 );
 
 			expect( result ).toEqual( { test: 1 } );
 		} );
 
 		it( 'should create a new object if a NaN is passed', () => {
-			const result = immutableSet( NaN, 'test', 1 );
+			const result = setImmutably( NaN, 'test', 1 );
 
 			expect( result ).toEqual( { test: 1 } );
 		} );
@@ -44,26 +44,26 @@ describe( 'immutableSet', () => {
 
 	describe( 'manages data assignment properly', () => {
 		it( 'assigns value properly when it does not exist', () => {
-			const result = immutableSet( {}, 'test', 1 );
+			const result = setImmutably( {}, 'test', 1 );
 
 			expect( result ).toEqual( { test: 1 } );
 		} );
 
 		it( 'overrides existing values', () => {
-			const result = immutableSet( { test: 1 }, 'test', 2 );
+			const result = setImmutably( { 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 );
+				const result = setImmutably( {}, [ 'foo', 'bar', 'baz' ], 5 );
 
 				expect( result ).toEqual( { foo: { bar: { baz: 5 } } } );
 			} );
 
 			it( 'overrides existing values at deeper levels', () => {
-				const result = immutableSet(
+				const result = setImmutably(
 					{ foo: { bar: { baz: 1 } } },
 					[ 'foo', 'bar', 'baz' ],
 					5
@@ -73,7 +73,7 @@ describe( 'immutableSet', () => {
 			} );
 
 			it( 'keeps other properties intact', () => {
-				const result = immutableSet(
+				const result = setImmutably(
 					{ foo: { bar: { baz: 1 } } },
 					[ 'foo', 'bar', 'test' ],
 					5
@@ -87,37 +87,37 @@ describe( 'immutableSet', () => {
 
 		describe( 'for nested falsey values', () => {
 			it( 'overwrites undefined values', () => {
-				const result = immutableSet( { test: undefined }, 'test', 1 );
+				const result = setImmutably( { test: undefined }, 'test', 1 );
 
 				expect( result ).toEqual( { test: 1 } );
 			} );
 
 			it( 'overwrites null values', () => {
-				const result = immutableSet( { test: null }, 'test', 1 );
+				const result = setImmutably( { test: null }, 'test', 1 );
 
 				expect( result ).toEqual( { test: 1 } );
 			} );
 
 			it( 'overwrites false values', () => {
-				const result = immutableSet( { test: false }, 'test', 1 );
+				const result = setImmutably( { test: false }, 'test', 1 );
 
 				expect( result ).toEqual( { test: 1 } );
 			} );
 
 			it( 'overwrites `0` values', () => {
-				const result = immutableSet( { test: 0 }, 'test', 1 );
+				const result = setImmutably( { test: 0 }, 'test', 1 );
 
 				expect( result ).toEqual( { test: 1 } );
 			} );
 
 			it( 'overwrites empty string values', () => {
-				const result = immutableSet( { test: '' }, 'test', 1 );
+				const result = setImmutably( { test: '' }, 'test', 1 );
 
 				expect( result ).toEqual( { test: 1 } );
 			} );
 
 			it( 'overwrites NaN values', () => {
-				const result = immutableSet( { test: NaN }, 'test', 1 );
+				const result = setImmutably( { test: NaN }, 'test', 1 );
 
 				expect( result ).toEqual( { test: 1 } );
 			} );
@@ -127,14 +127,14 @@ describe( 'immutableSet', () => {
 	describe( 'does not mutate the original object', () => {
 		it( 'clones the object at the first level', () => {
 			const input = {};
-			const result = immutableSet( input, 'test', 1 );
+			const result = setImmutably( 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 );
+			const result = setImmutably( input, [ 'foo', 'bar', 'baz' ], 2 );
 
 			expect( result ).not.toBe( input );
 			expect( result.foo ).not.toBe( input.foo );

package/src/utils/transform-styles/index.js

@@ -13,8 +13,8 @@ import wrap from './transforms/wrap';
 /**
  * Applies a series of CSS rule transforms to wrap selectors inside a given class and/or rewrite URLs depending on the parameters passed.
  *
- * @param {Array}  styles           CSS rules.
- * @param {string} wrapperClassName Wrapper Class Name.
+ * @param {Object|Array} styles           CSS rules.
+ * @param {string}       wrapperClassName Wrapper Class Name.
  * @return {Array} converted rules.
  */
 const transformStyles = ( styles, wrapperClassName = '' ) => {

package/src/utils/use-should-contextual-toolbar-show.js

@@ -0,0 +1,75 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { isUnmodifiedDefaultBlock } from '@wordpress/blocks';
+import { useViewportMatch } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../store';
+import { unlock } from '../lock-unlock';
+
+/**
+ * Returns true if the contextual block toolbar should show, or false if it should be hidden.
+ *
+ * @param {string} clientId The client ID of the block.
+ *
+ * @return {boolean} Whether the block toolbar is hidden.
+ */
+export function useShouldContextualToolbarShow( clientId ) {
+	const isLargeViewport = useViewportMatch( 'medium' );
+
+	const { shouldShowContextualToolbar, canFocusHiddenToolbar } = useSelect(
+		( select ) => {
+			const {
+				__unstableGetEditorMode,
+				isMultiSelecting,
+				isTyping,
+				isBlockInterfaceHidden,
+				getBlock,
+				getSettings,
+				isNavigationMode,
+			} = unlock( select( blockEditorStore ) );
+
+			const isEditMode = __unstableGetEditorMode() === 'edit';
+			const hasFixedToolbar = getSettings().hasFixedToolbar;
+			const isDistractionFree = getSettings().isDistractionFree;
+			const hasClientId = !! clientId;
+			const isEmptyDefaultBlock = isUnmodifiedDefaultBlock(
+				getBlock( clientId ) || {}
+			);
+
+			const _shouldShowContextualToolbar =
+				isEditMode &&
+				! hasFixedToolbar &&
+				( ! isDistractionFree || isNavigationMode() ) &&
+				isLargeViewport &&
+				! isMultiSelecting() &&
+				! isTyping() &&
+				hasClientId &&
+				! isEmptyDefaultBlock &&
+				! isBlockInterfaceHidden();
+
+			const _canFocusHiddenToolbar =
+				isEditMode &&
+				hasClientId &&
+				! _shouldShowContextualToolbar &&
+				! hasFixedToolbar &&
+				! isDistractionFree &&
+				! isEmptyDefaultBlock;
+
+			return {
+				shouldShowContextualToolbar: _shouldShowContextualToolbar,
+				canFocusHiddenToolbar: _canFocusHiddenToolbar,
+			};
+		},
+		[ clientId, isLargeViewport ]
+	);
+
+	return {
+		shouldShowContextualToolbar,
+		canFocusHiddenToolbar,
+	};
+}

package/tsconfig.json

@@ -23,6 +23,7 @@
 		{ "path": "../icons" },
 		{ "path": "../is-shallow-equal" },
 		{ "path": "../keycodes" },
+		{ "path": "../notices" },
 		{ "path": "../style-engine" },
 		{ "path": "../token-list" },
 		{ "path": "../url" },