@wordpress/block-editor 9.1.0 → 9.4.0

package/src/hooks/layout.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { has } from 'lodash';
+import { has, kebabCase } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -32,6 +32,49 @@ 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 { Array } attributes Array of block attributes.
+ *
+ * @return { Array } Array of CSS classname strings.
+ */
+function getLayoutClasses( attributes ) {
+	const layoutClassnames = [];
+
+	if ( ! attributes.layout ) {
+		return layoutClassnames;
+	}
+
+	if ( attributes?.layout?.orientation ) {
+		layoutClassnames.push(
+			`is-${ kebabCase( attributes.layout.orientation ) }`
+		);
+	}
+
+	if ( attributes?.layout?.justifyContent ) {
+		layoutClassnames.push(
+			`is-content-justification-${ kebabCase(
+				attributes.layout.justifyContent
+			) }`
+		);
+	}
+
+	if (
+		attributes?.layout?.flexWrap &&
+		attributes.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,9 +266,16 @@ export const withLayoutStyles = createHigherOrderComponent(
 		const usedLayout = layout?.inherit
 			? defaultThemeLayout
 			: layout || defaultBlockLayout || {};
-		const className = classnames( props?.className, {
-			[ `wp-container-${ id }` ]: shouldRenderLayoutStyles,
-		} );
+		const layoutClasses = shouldRenderLayoutStyles
+			? getLayoutClasses( attributes )
+			: null;
+		const className = classnames(
+			props?.className,
+			{
+				[ `wp-container-${ id }` ]: shouldRenderLayoutStyles,
+			},
+			layoutClasses
+		);
 
 		return (
 			<>

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/index.js

@@ -3,7 +3,6 @@
  */
 import './hooks';
 export {
-	PresetDuotoneFilter as __unstablePresetDuotoneFilter,
 	getBorderClassesAndStyles as __experimentalGetBorderClassesAndStyles,
 	useBorderProps as __experimentalUseBorderProps,
 	getColorClassesAndStyles as __experimentalGetColorClassesAndStyles,
@@ -13,6 +12,7 @@ export {
 	useCachedTruthy,
 } from './hooks';
 export * from './components';
+export * from './elements';
 export * from './utils';
 export { storeConfig, store } from './store';
 export { SETTINGS_DEFAULTS } from './store/defaults';

package/src/layouts/flex.js

@@ -11,6 +11,7 @@ import {
 	arrowDown,
 } from '@wordpress/icons';
 import { Button, ToggleControl, Flex, FlexItem } from '@wordpress/components';
+import { getBlockSupport } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -109,14 +110,21 @@ export default {
 	save: function FlexLayoutStyle( { selector, layout, style, blockName } ) {
 		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, '0.5em' )
-				: 'var( --wp--style--block-gap, 0.5em )';
+				? getGapCSSValue( style?.spacing?.blockGap, fallbackValue )
+				: `var( --wp--style--block-gap, ${ fallbackValue } )`;
 		const justifyContent =
 			justifyContentMap[ layout.justifyContent ] ||
 			justifyContentMap.left;
@@ -143,7 +151,7 @@ export default {
 				${ appendSelectors( selector ) } {
 					display: flex;
 					flex-wrap: ${ flexWrap };
-					gap: ${ hasBlockGapStylesSupport ? blockGapValue : '0.5em' };
+					gap: ${ hasBlockGapStylesSupport ? blockGapValue : fallbackValue };
 					${ orientation === 'horizontal' ? rowOrientation : columnOrientation }
 				}
 
@@ -316,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={ () =>
@@ -327,7 +335,7 @@ function OrientationControl( { layout, onChange } ) {
 				}
 			/>
 			<Button
-				label={ 'vertical' }
+				label={ __( 'Vertical' ) }
 				icon={ arrowDown }
 				isPressed={ orientation === 'vertical' }
 				onClick={ () =>