@wordpress/block-editor 9.3.0 → 9.4.0

package/src/hooks/duotone.js

@@ -2,14 +2,13 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { colord, extend } from 'colord';
+import { extend } from 'colord';
 import namesPlugin from 'colord/plugins/names';
 
 /**
  * WordPress dependencies
  */
 import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks';
-import { SVG } from '@wordpress/components';
 import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose';
 import { addFilter } from '@wordpress/hooks';
 import { useMemo, useContext, createPortal } from '@wordpress/element';
@@ -23,145 +22,34 @@ import {
 	useSetting,
 } from '../components';
 import BlockList from '../components/block-list';
+import {
+	__unstableDuotoneFilter as DuotoneFilter,
+	__unstableDuotoneStylesheet as DuotoneStylesheet,
+	__unstableDuotoneUnsetStylesheet as DuotoneUnsetStylesheet,
+} from '../components/duotone';
 
 const EMPTY_ARRAY = [];
 
 extend( [ namesPlugin ] );
 
-/**
- * Convert a list of colors to an object of R, G, and B values.
- *
- * @param {string[]} colors Array of RBG color strings.
- *
- * @return {Object} R, G, and B values.
- */
-export function getValuesFromColors( colors = [] ) {
-	const values = { r: [], g: [], b: [], a: [] };
-
-	colors.forEach( ( color ) => {
-		const rgbColor = colord( color ).toRgb();
-		values.r.push( rgbColor.r / 255 );
-		values.g.push( rgbColor.g / 255 );
-		values.b.push( rgbColor.b / 255 );
-		values.a.push( rgbColor.a );
-	} );
-
-	return values;
-}
-
-/**
- * Values for the SVG `feComponentTransfer`.
- *
- * @typedef Values {Object}
- * @property {number[]} r Red values.
- * @property {number[]} g Green values.
- * @property {number[]} b Blue values.
- * @property {number[]} a Alpha values.
- */
-
-/**
- * Stylesheet for rendering the duotone filter.
- *
- * @param {Object} props          Duotone props.
- * @param {string} props.selector Selector to apply the filter to.
- * @param {string} props.id       Unique id for this duotone filter.
- *
- * @return {WPElement} Duotone element.
- */
-function DuotoneStylesheet( { selector, id } ) {
-	const css = `
-${ selector } {
-	filter: url( #${ id } );
-}
-`;
-	return <style>{ css }</style>;
-}
-
-/**
- * SVG for rendering the duotone filter.
- *
- * @param {Object} props        Duotone props.
- * @param {string} props.id     Unique id for this duotone filter.
- * @param {Values} props.values R, G, B, and A values to filter with.
- *
- * @return {WPElement} Duotone element.
- */
-function DuotoneFilter( { id, values } ) {
-	return (
-		<SVG
-			xmlnsXlink="http://www.w3.org/1999/xlink"
-			viewBox="0 0 0 0"
-			width="0"
-			height="0"
-			focusable="false"
-			role="none"
-			style={ {
-				visibility: 'hidden',
-				position: 'absolute',
-				left: '-9999px',
-				overflow: 'hidden',
-			} }
-		>
-			<defs>
-				<filter id={ id }>
-					<feColorMatrix
-						// Use sRGB instead of linearRGB so transparency looks correct.
-						colorInterpolationFilters="sRGB"
-						type="matrix"
-						// Use perceptual brightness to convert to grayscale.
-						values="
-							.299 .587 .114 0 0
-							.299 .587 .114 0 0
-							.299 .587 .114 0 0
-							.299 .587 .114 0 0
-						"
-					/>
-					<feComponentTransfer
-						// Use sRGB instead of linearRGB to be consistent with how CSS gradients work.
-						colorInterpolationFilters="sRGB"
-					>
-						<feFuncR
-							type="table"
-							tableValues={ values.r.join( ' ' ) }
-						/>
-						<feFuncG
-							type="table"
-							tableValues={ values.g.join( ' ' ) }
-						/>
-						<feFuncB
-							type="table"
-							tableValues={ values.b.join( ' ' ) }
-						/>
-						<feFuncA
-							type="table"
-							tableValues={ values.a.join( ' ' ) }
-						/>
-					</feComponentTransfer>
-					<feComposite
-						// Re-mask the image with the original transparency since the feColorMatrix above loses that information.
-						in2="SourceGraphic"
-						operator="in"
-					/>
-				</filter>
-			</defs>
-		</SVG>
-	);
-}
-
 /**
  * SVG and stylesheet needed for rendering the duotone filter.
  *
- * @param {Object} props          Duotone props.
+ * @param {Object} props Duotone props.
  * @param {string} props.selector Selector to apply the filter to.
- * @param {string} props.id       Unique id for this duotone filter.
- * @param {Values} props.values   R, G, B, and A values to filter with.
+ * @param {string} props.id Unique id for this duotone filter.
+ * @param {string[]|"unset"} props.colors Array of RGB color strings ordered from dark to light.
  *
  * @return {WPElement} Duotone element.
  */
-function InlineDuotone( { selector, id, values } ) {
+function InlineDuotone( { selector, id, colors } ) {
+	if ( colors === 'unset' ) {
+		return <DuotoneUnsetStylesheet selector={ selector } />;
+	}
+
 	return (
 		<>
-			<DuotoneFilter id={ id } values={ values } />
+			<DuotoneFilter id={ id } colors={ colors } />
 			<DuotoneStylesheet id={ id } selector={ selector } />
 		</>
 	);
@@ -324,9 +212,9 @@ const withDuotoneStyles = createHigherOrderComponent(
 			props.name,
 			'color.__experimentalDuotone'
 		);
-		const values = props?.attributes?.style?.color?.duotone;
+		const colors = props?.attributes?.style?.color?.duotone;
 
-		if ( ! duotoneSupport || ! values ) {
+		if ( ! duotoneSupport || ! colors ) {
 			return <BlockListBlock { ...props } />;
 		}
 
@@ -351,7 +239,7 @@ const withDuotoneStyles = createHigherOrderComponent(
 						<InlineDuotone
 							selector={ selectorsGroup }
 							id={ id }
-							values={ getValuesFromColors( values ) }
+							colors={ colors }
 						/>,
 						element
 					) }
@@ -362,15 +250,6 @@ const withDuotoneStyles = createHigherOrderComponent(
 	'withDuotoneStyles'
 );
 
-export function PresetDuotoneFilter( { preset } ) {
-	return (
-		<DuotoneFilter
-			id={ `wp-duotone-${ preset.slug }` }
-			values={ getValuesFromColors( preset.colors ) }
-		/>
-	);
-}
-
 addFilter(
 	'blocks.registerBlockType',
 	'core/editor/duotone/add-attributes',

package/src/hooks/index.js

@@ -5,6 +5,7 @@ import './compat';
 import './align';
 import './lock';
 import './anchor';
+import './aria-label';
 import './custom-class-name';
 import './generated-class-name';
 import './style';
@@ -20,4 +21,3 @@ export { getBorderClassesAndStyles, useBorderProps } from './use-border-props';
 export { getColorClassesAndStyles, useColorProps } from './use-color-props';
 export { getSpacingClassesAndStyles } from './use-spacing-props';
 export { useCachedTruthy } from './use-cached-truthy';
-export { PresetDuotoneFilter } from './duotone';

package/src/hooks/layout.js

@@ -130,15 +130,26 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) {
 			<InspectorControls>
 				<PanelBody title={ __( 'Layout' ) }>
 					{ showInheritToggle && (
-						<ToggleControl
-							label={ __( 'Inherit default layout' ) }
-							checked={ !! inherit }
-							onChange={ () =>
-								setAttributes( {
-									layout: { inherit: ! inherit },
-								} )
-							}
-						/>
+						<>
+							<ToggleControl
+								label={ __( 'Inner blocks use full width' ) }
+								checked={ ! inherit }
+								onChange={ () =>
+									setAttributes( {
+										layout: { inherit: ! inherit },
+									} )
+								}
+							/>
+							<p className="block-editor-hooks__layout-controls-helptext">
+								{ !! inherit
+									? __(
+											'Nested blocks use theme content width with options for full and wide widths.'
+									  )
+									: __(
+											'Nested blocks will fill the width of this container.'
+									  ) }
+							</p>
+						</>
 					) }
 
 					{ ! inherit && allowSwitching && (

package/src/index.js

@@ -3,7 +3,6 @@
  */
 import './hooks';
 export {
-	PresetDuotoneFilter as __unstablePresetDuotoneFilter,
 	getBorderClassesAndStyles as __experimentalGetBorderClassesAndStyles,
 	useBorderProps as __experimentalUseBorderProps,
 	getColorClassesAndStyles as __experimentalGetColorClassesAndStyles,

package/src/layouts/flex.js

@@ -324,7 +324,7 @@ function OrientationControl( { layout, onChange } ) {
 		<fieldset className="block-editor-hooks__flex-layout-orientation-controls">
 			<legend>{ __( 'Orientation' ) }</legend>
 			<Button
-				label={ 'horizontal' }
+				label={ __( 'Horizontal' ) }
 				icon={ arrowRight }
 				isPressed={ orientation === 'horizontal' }
 				onClick={ () =>
@@ -335,7 +335,7 @@ function OrientationControl( { layout, onChange } ) {
 				}
 			/>
 			<Button
-				label={ 'vertical' }
+				label={ __( 'Vertical' ) }
 				icon={ arrowDown }
 				isPressed={ orientation === 'vertical' }
 				onClick={ () =>

package/src/store/actions.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { castArray, findKey, first, isObject, last, some } from 'lodash';
+import { castArray, first, isObject, last, some } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -26,6 +26,10 @@ import deprecated from '@wordpress/deprecated';
  * Internal dependencies
  */
 import { mapRichTextSettings } from './utils';
+import {
+	retrieveSelectedAttribute,
+	START_OF_SELECTED_AREA,
+} from '../utils/selection';
 
 /**
  * Action which will insert a default block insert action if there
@@ -771,10 +775,6 @@ export const __unstableDeleteSelection =
 			...mapRichTextSettings( attributeDefinitionB ),
 		} );
 
-		// A robust way to retain selection position through various transforms
-		// is to insert a special character at the position and then recover it.
-		const START_OF_SELECTED_AREA = '\u0086';
-
 		valueA = remove( valueA, selectionA.offset, valueA.text.length );
 		valueB = insert( valueB, START_OF_SELECTED_AREA, 0, selectionB.offset );
 
@@ -822,12 +822,7 @@ export const __unstableDeleteSelection =
 			);
 		}
 
-		const newAttributeKey = findKey(
-			updatedAttributes,
-			( v ) =>
-				typeof v === 'string' &&
-				v.indexOf( START_OF_SELECTED_AREA ) !== -1
-		);
+		const newAttributeKey = retrieveSelectedAttribute( updatedAttributes );
 
 		const convertedHtml = updatedAttributes[ newAttributeKey ];
 		const convertedValue = create( {
@@ -1052,10 +1047,6 @@ export const mergeBlocks =
 			}
 		}
 
-		// A robust way to retain selection position through various transforms
-		// is to insert a special character at the position and then recover it.
-		const START_OF_SELECTED_AREA = '\u0086';
-
 		// Clone the blocks so we don't insert the character in a "live" block.
 		const cloneA = cloneBlock( blockA );
 		const cloneB = cloneBlock( blockB );
@@ -1098,12 +1089,8 @@ export const mergeBlocks =
 		);
 
 		if ( canRestoreTextSelection ) {
-			const newAttributeKey = findKey(
-				updatedAttributes,
-				( v ) =>
-					typeof v === 'string' &&
-					v.indexOf( START_OF_SELECTED_AREA ) !== -1
-			);
+			const newAttributeKey =
+				retrieveSelectedAttribute( updatedAttributes );
 			const convertedHtml = updatedAttributes[ newAttributeKey ];
 			const convertedValue = create( {
 				html: convertedHtml,

package/src/store/reducer.js

@@ -9,7 +9,6 @@ import {
 	omit,
 	without,
 	mapValues,
-	keys,
 	isEqual,
 	isEmpty,
 	identity,
@@ -148,7 +147,7 @@ function getMutateSafeObject( original, working ) {
  * @return {boolean} Whether the two objects have the same keys.
  */
 export function hasSameKeys( a, b ) {
-	return isEqual( keys( a ), keys( b ) );
+	return isEqual( Object.keys( a ), Object.keys( b ) );
 }
 
 /**
@@ -399,13 +398,12 @@ const withBlockTree =
 				const updatedBlockUids = [];
 				if ( action.fromRootClientId ) {
 					updatedBlockUids.push( action.fromRootClientId );
+				} else {
+					updatedBlockUids.push( '' );
 				}
 				if ( action.toRootClientId ) {
 					updatedBlockUids.push( action.toRootClientId );
 				}
-				if ( ! action.fromRootClientId || ! action.fromRootClientId ) {
-					updatedBlockUids.push( '' );
-				}
 				newState.tree = updateParentInnerBlocksInTree(
 					newState,
 					newState.tree,
@@ -428,7 +426,7 @@ const withBlockTree =
 				break;
 			}
 			case 'SAVE_REUSABLE_BLOCK_SUCCESS': {
-				const updatedBlockUids = keys(
+				const updatedBlockUids = Object.keys(
 					omitBy( newState.attributes, ( attributes, clientId ) => {
 						return (
 							newState.byClientId[ clientId ].name !==
@@ -690,9 +688,9 @@ const withReplaceInnerBlocks = ( reducer ) => ( state, action ) => {
 			index: 0,
 		} );
 
-		// We need to re-attach the block order of the controlled inner blocks.
-		// Otherwise, an inner block controller's blocks will be deleted entirely
-		// from its entity..
+		// We need to re-attach the controlled inner blocks to the blocks tree and
+		// preserve their block order. Otherwise, an inner block controller's blocks
+		// will be deleted entirely from its entity.
 		stateAfterInsert.order = {
 			...stateAfterInsert.order,
 			...reduce(
@@ -706,6 +704,20 @@ const withReplaceInnerBlocks = ( reducer ) => ( state, action ) => {
 				{}
 			),
 		};
+		stateAfterInsert.tree = {
+			...stateAfterInsert.tree,
+			...reduce(
+				nestedControllers,
+				( result, value, _key ) => {
+					const key = `controlled||${ _key }`;
+					if ( state.tree[ key ] ) {
+						result[ key ] = state.tree[ key ];
+					}
+					return result;
+				},
+				{}
+			),
+		};
 	}
 	return stateAfterInsert;
 };

package/src/store/test/reducer.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { values, omit } from 'lodash';
+import { omit } from 'lodash';
 import deepFreeze from 'deep-freeze';
 
 /**
@@ -666,7 +666,7 @@ describe( 'state', () => {
 				} );
 
 				expect( Object.keys( state.byClientId ) ).toHaveLength( 1 );
-				expect( values( state.byClientId )[ 0 ].clientId ).toBe(
+				expect( Object.values( state.byClientId )[ 0 ].clientId ).toBe(
 					'bananas'
 				);
 				expect( state.order ).toEqual( {
@@ -729,7 +729,9 @@ describe( 'state', () => {
 			} );
 
 			expect( Object.keys( state.byClientId ) ).toHaveLength( 2 );
-			expect( values( state.byClientId )[ 1 ].clientId ).toBe( 'ribs' );
+			expect( Object.values( state.byClientId )[ 1 ].clientId ).toBe(
+				'ribs'
+			);
 			expect( state.order ).toEqual( {
 				'': [ 'chicken', 'ribs' ],
 				chicken: [],
@@ -773,10 +775,12 @@ describe( 'state', () => {
 			} );
 
 			expect( Object.keys( state.byClientId ) ).toHaveLength( 1 );
-			expect( values( state.byClientId )[ 0 ].name ).toBe(
+			expect( Object.values( state.byClientId )[ 0 ].name ).toBe(
 				'core/freeform'
 			);
-			expect( values( state.byClientId )[ 0 ].clientId ).toBe( 'wings' );
+			expect( Object.values( state.byClientId )[ 0 ].clientId ).toBe(
+				'wings'
+			);
 			expect( state.order ).toEqual( {
 				'': [ 'wings' ],
 				wings: [],
@@ -930,15 +934,15 @@ describe( 'state', () => {
 			} );
 
 			expect( Object.keys( replacedState.byClientId ) ).toHaveLength( 1 );
-			expect( values( originalState.byClientId )[ 0 ].name ).toBe(
+			expect( Object.values( originalState.byClientId )[ 0 ].name ).toBe(
 				'core/test-block'
 			);
-			expect( values( replacedState.byClientId )[ 0 ].name ).toBe(
+			expect( Object.values( replacedState.byClientId )[ 0 ].name ).toBe(
 				'core/freeform'
 			);
-			expect( values( replacedState.byClientId )[ 0 ].clientId ).toBe(
-				'chicken'
-			);
+			expect(
+				Object.values( replacedState.byClientId )[ 0 ].clientId
+			).toBe( 'chicken' );
 			expect( replacedState.order ).toEqual( {
 				'': [ 'chicken' ],
 				chicken: [],
@@ -2090,6 +2094,130 @@ describe( 'state', () => {
 					expect( state.tree.child ).toBeUndefined();
 					expect( state.tree.chicken.innerBlocks ).toEqual( [] );
 				} );
+				it( 'should preserve the controlled blocks in state and re-attach them in other pieces of state(order, tree, etc..), when we replace inner blocks', () => {
+					const initialState = {
+						byClientId: {
+							'group-id': {
+								clientId: 'group-id',
+								name: 'core/group',
+								isValid: true,
+							},
+							'reusable-id': {
+								clientId: 'reusable-id',
+								name: 'core/block',
+								isValid: true,
+							},
+							'paragraph-id': {
+								clientId: 'paragraph-id',
+								name: 'core/paragraph',
+								isValid: true,
+							},
+						},
+						order: {
+							'': [ 'group-id' ],
+							'group-id': [ 'reusable-id' ],
+							'reusable-id': [ 'paragraph-id' ],
+							'paragraph-id': [],
+						},
+						controlledInnerBlocks: {
+							'reusable-id': true,
+						},
+						parents: {
+							'group-id': '',
+							'reusable-id': 'group-id',
+							'paragraph-id': 'reusable-id',
+						},
+						tree: {
+							'group-id': {
+								clientId: 'group-id',
+								name: 'core/group',
+								isValid: true,
+								innerBlocks: [
+									{
+										clientId: 'reusable-id',
+										name: 'core/block',
+										isValid: true,
+										attributes: {
+											ref: 687,
+										},
+										innerBlocks: [],
+									},
+								],
+							},
+							'reusable-id': {
+								clientId: 'reusable-id',
+								name: 'core/block',
+								isValid: true,
+								attributes: {
+									ref: 687,
+								},
+								innerBlocks: [],
+							},
+							'': {
+								innerBlocks: [
+									{
+										clientId: 'group-id',
+										name: 'core/group',
+										isValid: true,
+										innerBlocks: [
+											{
+												clientId: 'reusable-id',
+												name: 'core/block',
+												isValid: true,
+												attributes: {
+													ref: 687,
+												},
+												innerBlocks: [],
+											},
+										],
+									},
+								],
+							},
+							'paragraph-id': {
+								clientId: 'paragraph-id',
+								name: 'core/paragraph',
+								isValid: true,
+								innerBlocks: [],
+							},
+							'controlled||reusable-id': {
+								innerBlocks: [
+									{
+										clientId: 'paragraph-id',
+										name: 'core/paragraph',
+										isValid: true,
+										innerBlocks: [],
+									},
+								],
+							},
+						},
+					};
+					// We will dispatch an action that replaces the inner
+					// blocks with the same inner blocks, which contain
+					// a controlled block (`reusable-id`).
+					const action = {
+						type: 'REPLACE_INNER_BLOCKS',
+						rootClientId: 'group-id',
+						blocks: [
+							{
+								clientId: 'reusable-id',
+								name: 'core/block',
+								isValid: true,
+								attributes: {
+									ref: 687,
+								},
+								innerBlocks: [],
+							},
+						],
+						updateSelection: false,
+					};
+					const state = blocks( initialState, action );
+					expect( state.order ).toEqual(
+						expect.objectContaining( initialState.order )
+					);
+					expect( state.tree ).toEqual(
+						expect.objectContaining( initialState.tree )
+					);
+				} );
 			} );
 		} );
 	} );

package/src/store/test/selectors.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { filter } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -83,7 +78,9 @@ describe( 'selectors', () => {
 	let cachedSelectors;
 
 	beforeAll( () => {
-		cachedSelectors = filter( selectors, ( selector ) => selector.clear );
+		cachedSelectors = Object.entries( selectors )
+			.filter( ( [ , selector ] ) => selector.clear )
+			.map( ( [ , selector ] ) => selector );
 	} );
 
 	beforeEach( () => {

package/src/utils/selection.js

@@ -0,0 +1,26 @@
+/**
+ * A robust way to retain selection position through various
+ * transforms is to insert a special character at the position and
+ * then recover it.
+ */
+export const START_OF_SELECTED_AREA = '\u0086';
+
+/**
+ * Retrieve the block attribute that contains the selection position.
+ *
+ * @param {Object} blockAttributes Block attributes.
+ * @return {string|void} The name of the block attribute that was previously selected.
+ */
+export function retrieveSelectedAttribute( blockAttributes ) {
+	if ( ! blockAttributes ) {
+		return;
+	}
+
+	return Object.keys( blockAttributes ).find( ( name ) => {
+		const value = blockAttributes[ name ];
+		return (
+			typeof value === 'string' &&
+			value.indexOf( START_OF_SELECTED_AREA ) !== -1
+		);
+	} );
+}