@wordpress/block-editor 9.2.0 → 9.5.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/font-family.js

@@ -111,8 +111,10 @@ export function FontFamilyEdit( {
 } ) {
 	const fontFamilies = useSetting( 'typography.fontFamilies' );
 
-	const value = find( fontFamilies, ( { slug } ) => fontFamily === slug )
-		?.fontFamily;
+	const value = find(
+		fontFamilies,
+		( { slug } ) => fontFamily === slug
+	)?.fontFamily;
 
 	function onChange( newValue ) {
 		const predefinedFontFamily = find(

package/src/hooks/gap.js

@@ -67,9 +67,8 @@ export function getGapBoxControlValueFromStyle( blockGapValue ) {
  * @return {string|null}                    The concatenated gap value (row and column).
  */
 export function getGapCSSValue( blockGapValue, defaultValue = '0' ) {
-	const blockGapBoxControlValue = getGapBoxControlValueFromStyle(
-		blockGapValue
-	);
+	const blockGapBoxControlValue =
+		getGapBoxControlValueFromStyle( blockGapValue );
 	if ( ! blockGapBoxControlValue ) {
 		return null;
 	}

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';
@@ -19,5 +20,5 @@ export { useCustomSides } from './dimensions';
 export { getBorderClassesAndStyles, useBorderProps } from './use-border-props';
 export { getColorClassesAndStyles, useColorProps } from './use-color-props';
 export { getSpacingClassesAndStyles } from './use-spacing-props';
+export { getGapCSSValue } from './gap';
 export { useCachedTruthy } from './use-cached-truthy';
-export { PresetDuotoneFilter } from './duotone';

package/src/hooks/layout.js

@@ -2,14 +2,18 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { has } from 'lodash';
+import { has, kebabCase } from 'lodash';
 
 /**
  * WordPress dependencies
  */
 import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose';
 import { addFilter } from '@wordpress/hooks';
-import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks';
+import {
+	getBlockDefaultClassName,
+	getBlockSupport,
+	hasBlockSupport,
+} from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
 import {
 	Button,
@@ -32,6 +36,45 @@ import { getLayoutType, getLayoutTypes } from '../layouts';
 
 const layoutBlockSupportKey = '__experimentalLayout';
 
+/**
+ * Generates the utility classnames for the given blocks layout attributes.
+ * This method was primarily added to reintroduce classnames that were removed
+ * in the 5.9 release (https://github.com/WordPress/gutenberg/issues/38719), rather
+ * than providing an extensive list of all possible layout classes. The plan is to
+ * have the style engine generate a more extensive list of utility classnames which
+ * will then replace this method.
+ *
+ * @param { Object } layout            Layout object.
+ * @param { Object } layoutDefinitions An object containing layout definitions, stored in theme.json.
+ *
+ * @return { Array } Array of CSS classname strings.
+ */
+function getLayoutClasses( layout, layoutDefinitions ) {
+	const layoutClassnames = [];
+
+	if ( layoutDefinitions?.[ layout?.type || 'default' ]?.className ) {
+		layoutClassnames.push(
+			layoutDefinitions?.[ layout?.type || 'default' ]?.className
+		);
+	}
+
+	if ( layout?.orientation ) {
+		layoutClassnames.push( `is-${ kebabCase( layout.orientation ) }` );
+	}
+
+	if ( layout?.justifyContent ) {
+		layoutClassnames.push(
+			`is-content-justification-${ kebabCase( layout.justifyContent ) }`
+		);
+	}
+
+	if ( layout?.flexWrap && layout.flexWrap === 'nowrap' ) {
+		layoutClassnames.push( 'is-nowrap' );
+	}
+
+	return layoutClassnames;
+}
+
 function LayoutPanel( { setAttributes, attributes, name: blockName } ) {
 	const { layout } = attributes;
 	const defaultThemeLayout = useSetting( 'layout' );
@@ -87,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 && (
@@ -212,18 +266,51 @@ export const withLayoutStyles = createHigherOrderComponent(
 		const usedLayout = layout?.inherit
 			? defaultThemeLayout
 			: layout || defaultBlockLayout || {};
-		const className = classnames( props?.className, {
-			[ `wp-container-${ id }` ]: shouldRenderLayoutStyles,
-		} );
+		const layoutClasses = shouldRenderLayoutStyles
+			? getLayoutClasses( usedLayout, defaultThemeLayout?.definitions )
+			: null;
+		const selector = `.${ getBlockDefaultClassName(
+			name
+		) }.wp-container-${ id }`;
+		const blockGapSupport = useSetting( 'spacing.blockGap' );
+		const hasBlockGapSupport = blockGapSupport !== null;
+
+		// Get CSS string for the current layout type.
+		// The CSS and `style` element is only output if it is not empty.
+		let css;
+		if ( shouldRenderLayoutStyles ) {
+			const fullLayoutType = getLayoutType(
+				usedLayout?.type || 'default'
+			);
+			css = fullLayoutType?.getLayoutStyle?.( {
+				blockName: name,
+				selector,
+				layout: usedLayout,
+				layoutDefinitions: defaultThemeLayout?.definitions,
+				style: attributes?.style,
+				hasBlockGapSupport,
+			} );
+		}
+
+		// Attach a `wp-container-` id-based class name as well as a layout class name such as `is-layout-flex`.
+		const className = classnames(
+			props?.className,
+			{
+				[ `wp-container-${ id }` ]: shouldRenderLayoutStyles && !! css, // Only attach a container class if there is generated CSS to be attached.
+			},
+			layoutClasses
+		);
 
 		return (
 			<>
 				{ shouldRenderLayoutStyles &&
 					element &&
+					!! css &&
 					createPortal(
 						<LayoutStyle
 							blockName={ name }
-							selector={ `.wp-container-${ id }` }
+							selector={ selector }
+							css={ css }
 							layout={ usedLayout }
 							style={ attributes?.style }
 						/>,

package/src/hooks/test/align.js

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { noop } from 'lodash';
 import renderer, { act } from 'react-test-renderer';
 
 /**
@@ -25,6 +24,8 @@ import {
 	addAssignedAlign,
 } from '../align';
 
+const noop = () => {};
+
 describe( 'align', () => {
 	const blockSettings = {
 		save: noop,

package/src/hooks/test/generated-class-name.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { noop } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -13,6 +8,8 @@ import { applyFilters } from '@wordpress/hooks';
  */
 import '../generated-class-name';
 
+const noop = () => {};
+
 describe( 'generated className', () => {
 	const blockSettings = {
 		name: 'chicken/ribs',

package/src/hooks/test/utils.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { noop } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -13,6 +8,8 @@ import { applyFilters } from '@wordpress/hooks';
  */
 import '../anchor';
 
+const noop = () => {};
+
 describe( 'anchor', () => {
 	const blockSettings = {
 		save: noop,

package/src/hooks/utils.js

@@ -4,8 +4,6 @@
 import {
 	pickBy,
 	isEmpty,
-	isObject,
-	identity,
 	mapValues,
 	forEach,
 	get,
@@ -19,6 +17,8 @@ import {
  */
 import { getBlockSupport } from '@wordpress/blocks';
 
+const identity = ( x ) => x;
+
 /**
  * Removed falsy values from nested object.
  *
@@ -26,7 +26,11 @@ import { getBlockSupport } from '@wordpress/blocks';
  * @return {*} Object cleaned from falsy values
  */
 export const cleanEmptyObject = ( object ) => {
-	if ( ! isObject( object ) || Array.isArray( object ) ) {
+	if (
+		object === null ||
+		typeof object !== 'object' ||
+		Array.isArray( object )
+	) {
 		return object;
 	}
 	const cleanedNestedObjects = pickBy(

package/src/index.js

@@ -3,13 +3,13 @@
  */
 import './hooks';
 export {
-	PresetDuotoneFilter as __unstablePresetDuotoneFilter,
 	getBorderClassesAndStyles as __experimentalGetBorderClassesAndStyles,
 	useBorderProps as __experimentalUseBorderProps,
 	getColorClassesAndStyles as __experimentalGetColorClassesAndStyles,
 	useColorProps as __experimentalUseColorProps,
 	useCustomSides as __experimentalUseCustomSides,
 	getSpacingClassesAndStyles as __experimentalGetSpacingClassesAndStyles,
+	getGapCSSValue as __experimentalGetGapCSSValue,
 	useCachedTruthy,
 } from './hooks';
 export * from './components';

package/src/layouts/flex.js

@@ -11,14 +11,12 @@ import {
 	arrowDown,
 } from '@wordpress/icons';
 import { Button, ToggleControl, Flex, FlexItem } from '@wordpress/components';
-import { getBlockSupport } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
-import { appendSelectors } from './utils';
+import { appendSelectors, getBlockGapCSS } from './utils';
 import { getGapCSSValue } from '../hooks/gap';
-import useSetting from '../components/use-setting';
 import {
 	BlockControls,
 	JustifyContentControl,
@@ -107,59 +105,67 @@ export default {
 			</BlockControls>
 		);
 	},
-	save: function FlexLayoutStyle( { selector, layout, style, blockName } ) {
+	getLayoutStyle: function getLayoutStyle( {
+		selector,
+		layout,
+		style,
+		blockName,
+		hasBlockGapSupport,
+		layoutDefinitions,
+	} ) {
 		const { orientation = 'horizontal' } = layout;
-		const blockGapSupport = useSetting( 'spacing.blockGap' );
-		const fallbackValue =
-			getBlockSupport( blockName, [
-				'spacing',
-				'blockGap',
-				'__experimentalDefault',
-			] ) || '0.5em';
 
-		const hasBlockGapStylesSupport = blockGapSupport !== null;
 		// If a block's block.json skips serialization for spacing or spacing.blockGap,
 		// don't apply the user-defined value to the styles.
 		const blockGapValue =
 			style?.spacing?.blockGap &&
 			! shouldSkipSerialization( blockName, 'spacing', 'blockGap' )
-				? getGapCSSValue( style?.spacing?.blockGap, fallbackValue )
-				: `var( --wp--style--block-gap, ${ fallbackValue } )`;
-		const justifyContent =
-			justifyContentMap[ layout.justifyContent ] ||
-			justifyContentMap.left;
+				? getGapCSSValue( style?.spacing?.blockGap )
+				: undefined;
+		const justifyContent = justifyContentMap[ layout.justifyContent ];
 		const flexWrap = flexWrapOptions.includes( layout.flexWrap )
 			? layout.flexWrap
 			: 'wrap';
 		const verticalAlignment =
-			verticalAlignmentMap[ layout.verticalAlignment ] ||
-			verticalAlignmentMap.center;
-		const rowOrientation = `
-		flex-direction: row;
-		align-items: ${ verticalAlignment };
-		justify-content: ${ justifyContent };
-		`;
+			verticalAlignmentMap[ layout.verticalAlignment ];
 		const alignItems =
 			alignItemsMap[ layout.justifyContent ] || alignItemsMap.left;
-		const columnOrientation = `
-		flex-direction: column;
-		align-items: ${ alignItems };
-		`;
 
-		return (
-			<style>{ `
-				${ appendSelectors( selector ) } {
-					display: flex;
-					flex-wrap: ${ flexWrap };
-					gap: ${ hasBlockGapStylesSupport ? blockGapValue : fallbackValue };
-					${ orientation === 'horizontal' ? rowOrientation : columnOrientation }
-				}
+		let output = '';
+		const rules = [];
 
-				${ appendSelectors( selector, '> *' ) } {
-					margin: 0;
-				}
-			` }</style>
-		);
+		if ( flexWrap && flexWrap !== 'wrap' ) {
+			rules.push( `flex-wrap: ${ flexWrap }` );
+		}
+
+		if ( orientation === 'horizontal' ) {
+			if ( verticalAlignment ) {
+				rules.push( `align-items: ${ verticalAlignment }` );
+			}
+			if ( justifyContent ) {
+				rules.push( `justify-content: ${ justifyContent }` );
+			}
+		} else {
+			rules.push( 'flex-direction: column' );
+			rules.push( `align-items: ${ alignItems }` );
+		}
+
+		if ( rules.length ) {
+			output = `${ appendSelectors( selector ) } {
+				${ rules.join( '; ' ) };
+			}`;
+		}
+
+		// Output blockGap styles based on rules contained in layout definitions in theme.json.
+		if ( hasBlockGapSupport && blockGapValue ) {
+			output += getBlockGapCSS(
+				selector,
+				layoutDefinitions,
+				'flex',
+				blockGapValue
+			);
+		}
+		return output;
 	},
 	getOrientation( layout ) {
 		const { orientation = 'horizontal' } = layout;
@@ -324,7 +330,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 +341,7 @@ function OrientationControl( { layout, onChange } ) {
 				}
 			/>
 			<Button
-				label={ 'vertical' }
+				label={ __( 'Vertical' ) }
 				icon={ arrowDown }
 				isPressed={ orientation === 'vertical' }
 				onClick={ () =>