@wordpress/block-editor 9.4.0 → 9.5.0

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;

package/src/layouts/flow.js

@@ -13,7 +13,7 @@ import { Icon, positionCenter, stretchWide } from '@wordpress/icons';
  * Internal dependencies
  */
 import useSetting from '../components/use-setting';
-import { appendSelectors } from './utils';
+import { appendSelectors, getBlockGapCSS } from './utils';
 import { getGapBoxControlValueFromStyle } from '../hooks/gap';
 import { shouldSkipSerialization } from '../hooks/utils';
 
@@ -107,15 +107,15 @@ export default {
 	toolBarControls: function DefaultLayoutToolbarControls() {
 		return null;
 	},
-	save: function DefaultLayoutStyle( {
+	getLayoutStyle: function getLayoutStyle( {
 		selector,
 		layout = {},
 		style,
 		blockName,
+		hasBlockGapSupport,
+		layoutDefinitions,
 	} ) {
 		const { contentSize, wideSize } = layout;
-		const blockGapSupport = useSetting( 'spacing.blockGap' );
-		const hasBlockGapStylesSupport = blockGapSupport !== null;
 		const blockGapStyleValue = getGapBoxControlValueFromStyle(
 			style?.spacing?.blockGap
 		);
@@ -125,7 +125,7 @@ export default {
 			blockGapStyleValue?.top &&
 			! shouldSkipSerialization( blockName, 'spacing', 'blockGap' )
 				? blockGapStyleValue?.top
-				: 'var( --wp--style--block-gap )';
+				: '';
 
 		let output =
 			!! contentSize || !! wideSize
@@ -147,37 +147,16 @@ export default {
 				`
 				: '';
 
-		output += `
-			${ appendSelectors( selector, '> .alignleft' ) } {
-				float: left;
-				margin-inline-start: 0;
-				margin-inline-end: 2em;
-			}
-			${ appendSelectors( selector, '> .alignright' ) } {
-				float: right;
-				margin-inline-start: 2em;
-				margin-inline-end: 0;
-			}
-
-			${ appendSelectors( selector, '> .aligncenter' ) } {
-				margin-left: auto !important;
-				margin-right: auto !important;
-			}
-		`;
-
-		if ( hasBlockGapStylesSupport ) {
-			output += `
-				${ appendSelectors( selector, '> *' ) } {
-					margin-block-start: 0;
-					margin-block-end: 0;
-				}
-				${ appendSelectors( selector, '> * + *' ) } {
-					margin-block-start: ${ blockGapValue };
-				}
-			`;
+		// Output blockGap styles based on rules contained in layout definitions in theme.json.
+		if ( hasBlockGapSupport && blockGapValue ) {
+			output += getBlockGapCSS(
+				selector,
+				layoutDefinitions,
+				'default',
+				blockGapValue
+			);
 		}
-
-		return <style>{ output }</style>;
+		return output;
 	},
 	getOrientation() {
 		return 'vertical';

package/src/layouts/test/flex.js

@@ -0,0 +1,21 @@
+/**
+ * Internal dependencies
+ */
+import flex from '../flex';
+
+describe( 'getLayoutStyle', () => {
+	it( 'should return an empty string if no non-default params are provided', () => {
+		const expected = '';
+
+		const result = flex.getLayoutStyle( {
+			selector: '.my-container',
+			layout: {},
+			style: {},
+			blockName: 'test-block',
+			hasBlockGapSupport: false,
+			layoutDefinitions: undefined,
+		} );
+
+		expect( result ).toBe( expected );
+	} );
+} );

package/src/layouts/test/flow.js

@@ -0,0 +1,21 @@
+/**
+ * Internal dependencies
+ */
+import flow from '../flow';
+
+describe( 'getLayoutStyle', () => {
+	it( 'should return an empty string if no non-default params are provided', () => {
+		const expected = '';
+
+		const result = flow.getLayoutStyle( {
+			selector: '.my-container',
+			layout: {},
+			style: {},
+			blockName: 'test-block',
+			hasBlockGapSupport: false,
+			layoutDefinitions: undefined,
+		} );
+
+		expect( result ).toBe( expected );
+	} );
+} );

package/src/layouts/test/utils.js

@@ -0,0 +1,138 @@
+/**
+ * Internal dependencies
+ */
+import { appendSelectors, getBlockGapCSS } from '../utils';
+
+const layoutDefinitions = {
+	default: {
+		spacingStyles: [
+			{
+				selector: ' > *',
+				rules: {
+					'margin-block-start': '0',
+					'margin-block-end': '0',
+				},
+			},
+			{
+				selector: ' > * + *',
+				rules: {
+					'margin-block-start': null,
+					'margin-block-end': '0',
+				},
+			},
+		],
+	},
+	flex: {
+		spacingStyles: [
+			{
+				selector: '',
+				rules: {
+					gap: null,
+				},
+			},
+		],
+	},
+};
+
+describe( 'getBlockGapCSS', () => {
+	it( 'should output default blockGap rules', () => {
+		const expected =
+			'.editor-styles-wrapper .my-container > * { margin-block-start: 0; margin-block-end: 0; }.editor-styles-wrapper .my-container > * + * { margin-block-start: 3em; margin-block-end: 0; }';
+
+		const result = getBlockGapCSS(
+			'.my-container',
+			layoutDefinitions,
+			'default',
+			'3em'
+		);
+
+		expect( result ).toBe( expected );
+	} );
+
+	it( 'should output flex blockGap rules', () => {
+		const expected = '.editor-styles-wrapper .my-container { gap: 3em; }';
+
+		const result = getBlockGapCSS(
+			'.my-container',
+			layoutDefinitions,
+			'flex',
+			'3em'
+		);
+
+		expect( result ).toBe( expected );
+	} );
+
+	it( 'should return an empty string if layout type cannot be found', () => {
+		const expected = '';
+
+		const result = getBlockGapCSS(
+			'.my-container',
+			layoutDefinitions,
+			'aTypeThatDoesNotExist',
+			'3em'
+		);
+
+		expect( result ).toBe( expected );
+	} );
+
+	it( 'should return an empty string if layout definitions cannot be found', () => {
+		const expected = '';
+
+		const result = getBlockGapCSS(
+			'.my-container',
+			undefined,
+			'flex',
+			'3em'
+		);
+
+		expect( result ).toBe( expected );
+	} );
+
+	it( 'should return an empty string if blockGap is empty', () => {
+		const expected = '';
+
+		const result = getBlockGapCSS(
+			'.my-container',
+			layoutDefinitions,
+			'flex',
+			null
+		);
+
+		expect( result ).toBe( expected );
+	} );
+
+	it( 'should treat a blockGap string containing 0 as a valid value', () => {
+		const expected = '.editor-styles-wrapper .my-container { gap: 0; }';
+
+		const result = getBlockGapCSS(
+			'.my-container',
+			layoutDefinitions,
+			'flex',
+			'0'
+		);
+
+		expect( result ).toBe( expected );
+	} );
+} );
+
+describe( 'appendSelectors', () => {
+	it( 'should append a subselector without an appended selector', () => {
+		expect( appendSelectors( '.original-selector' ) ).toBe(
+			'.editor-styles-wrapper .original-selector'
+		);
+	} );
+
+	it( 'should append a subselector to a single selector', () => {
+		expect( appendSelectors( '.original-selector', '.appended' ) ).toBe(
+			'.editor-styles-wrapper .original-selector .appended'
+		);
+	} );
+
+	it( 'should append a subselector to multiple selectors', () => {
+		expect(
+			appendSelectors( '.first-selector,.second-selector', '.appended' )
+		).toBe(
+			'.editor-styles-wrapper .first-selector .appended,.editor-styles-wrapper .second-selector .appended'
+		);
+	} );
+} );

package/src/layouts/utils.js

@@ -1,8 +1,8 @@
 /**
  * Utility to generate the proper CSS selector for layout styles.
  *
- * @param {string|string[]} selectors - CSS selectors
- * @param {boolean}         append    - string to append.
+ * @param {string} selectors CSS selector, also supports multiple comma-separated selectors.
+ * @param {string} append    The string to append.
  *
  * @return {string} - CSS selector.
  */
@@ -17,7 +17,48 @@ export function appendSelectors( selectors, append = '' ) {
 		.split( ',' )
 		.map(
 			( subselector ) =>
-				`.editor-styles-wrapper ${ subselector } ${ append }`
+				`.editor-styles-wrapper ${ subselector }${
+					append ? ` ${ append }` : ''
+				}`
 		)
 		.join( ',' );
 }
+
+/**
+ * Get generated blockGap CSS rules based on layout definitions provided in theme.json
+ * Falsy values in the layout definition's spacingStyles rules will be swapped out
+ * with the provided `blockGapValue`.
+ *
+ * @param {string} selector          The CSS selector to target for the generated rules.
+ * @param {Object} layoutDefinitions Layout definitions object from theme.json.
+ * @param {string} layoutType        The layout type (e.g. `default` or `flex`).
+ * @param {string} blockGapValue     The current blockGap value to be applied.
+ * @return {string} The generated CSS rules.
+ */
+export function getBlockGapCSS(
+	selector,
+	layoutDefinitions,
+	layoutType,
+	blockGapValue
+) {
+	let output = '';
+	if (
+		layoutDefinitions?.[ layoutType ]?.spacingStyles?.length &&
+		blockGapValue
+	) {
+		layoutDefinitions[ layoutType ].spacingStyles.forEach( ( gapStyle ) => {
+			output += `${ appendSelectors(
+				selector,
+				gapStyle.selector.trim()
+			) } { `;
+			output += Object.entries( gapStyle.rules )
+				.map(
+					( [ cssProperty, value ] ) =>
+						`${ cssProperty }: ${ value ? value : blockGapValue }`
+				)
+				.join( '; ' );
+			output += '; }';
+		} );
+	}
+	return output;
+}

package/src/store/actions.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { castArray, first, isObject, last, some } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -31,6 +26,9 @@ import {
 	START_OF_SELECTED_AREA,
 } from '../utils/selection';
 
+const castArray = ( maybeArray ) =>
+	Array.isArray( maybeArray ) ? maybeArray : [ maybeArray ];
+
 /**
  * Action which will insert a default block insert action if there
  * are no other blocks at the root of the editor. This action should be used
@@ -396,7 +394,7 @@ export const replaceBlocks =
 			castArray( blocks ),
 			select.getSettings()
 		);
-		const rootClientId = select.getBlockRootClientId( first( clientIds ) );
+		const rootClientId = select.getBlockRootClientId( clientIds[ 0 ] );
 		// Replace is valid if the new blocks can be inserted in the root block.
 		for ( let index = 0; index < blocks.length; index++ ) {
 			const block = blocks[ index ];
@@ -583,7 +581,7 @@ export const insertBlocks =
 	) =>
 	( { select, dispatch } ) => {
 		/* eslint-enable jsdoc/valid-types */
-		if ( isObject( initialPosition ) ) {
+		if ( initialPosition !== null && typeof initialPosition === 'object' ) {
 			meta = initialPosition;
 			initialPosition = 0;
 			deprecated(
@@ -1504,7 +1502,7 @@ export const duplicateBlocks =
 
 		// Return early if blocks don't exist.
 		const blocks = select.getBlocksByClientId( clientIds );
-		if ( some( blocks, ( block ) => ! block ) ) {
+		if ( blocks.some( ( block ) => ! block ) ) {
 			return;
 		}
 
@@ -1520,8 +1518,9 @@ export const duplicateBlocks =
 		}
 
 		const rootClientId = select.getBlockRootClientId( clientIds[ 0 ] );
+		const clientIdsArray = castArray( clientIds );
 		const lastSelectedIndex = select.getBlockIndex(
-			last( castArray( clientIds ) )
+			clientIdsArray[ clientIdsArray.length - 1 ]
 		);
 		const clonedBlocks = blocks.map( ( block ) =>
 			__experimentalCloneSanitizedBlock( block )
@@ -1534,8 +1533,8 @@ export const duplicateBlocks =
 		);
 		if ( clonedBlocks.length > 1 && updateSelection ) {
 			dispatch.multiSelect(
-				first( clonedBlocks ).clientId,
-				last( clonedBlocks ).clientId
+				clonedBlocks[ 0 ].clientId,
+				clonedBlocks[ clonedBlocks.length - 1 ].clientId
 			);
 		}
 		return clonedBlocks.map( ( block ) => block.clientId );

package/src/store/index.js

@@ -15,8 +15,6 @@ import { STORE_NAME } from './constants';
  * Block editor data store configuration.
  *
  * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/data/README.md#registerStore
- *
- * @type {Object}
  */
 export const storeConfig = {
 	reducer,
@@ -28,8 +26,6 @@ export const storeConfig = {
  * Store definition for the block editor namespace.
  *
  * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/data/README.md#createReduxStore
- *
- * @type {Object}
  */
 export const store = createReduxStore( STORE_NAME, {
 	...storeConfig,

package/src/store/reducer.js

@@ -11,7 +11,6 @@ import {
 	mapValues,
 	isEqual,
 	isEmpty,
-	identity,
 	omitBy,
 } from 'lodash';
 
@@ -26,6 +25,8 @@ import { store as blocksStore } from '@wordpress/blocks';
 import { PREFERENCES_DEFAULTS, SETTINGS_DEFAULTS } from './defaults';
 import { insertAt, moveTo } from './array';
 
+const identity = ( x ) => x;
+
 /**
  * Given an array of blocks, returns an object where each key is a nesting
  * context, the value of which is an array of block client IDs existing within
@@ -1690,7 +1691,7 @@ export function lastBlockAttributesChange( state, action ) {
 /**
  * Reducer returning automatic change state.
  *
- * @param {boolean} state  Current state.
+ * @param {?string} state  Current state.
  * @param {Object}  action Dispatched action.
  *
  * @return {string} Updated state.

package/src/store/selectors.js

@@ -4,7 +4,6 @@
 import {
 	castArray,
 	first,
-	isBoolean,
 	last,
 	map,
 	reduce,
@@ -1382,7 +1381,7 @@ export function getBlockInsertionPoint( state ) {
 
 	if ( clientId ) {
 		rootClientId = getBlockRootClientId( state, clientId ) || undefined;
-		index = getBlockIndex( state, selectionEnd.clientId, rootClientId ) + 1;
+		index = getBlockIndex( state, selectionEnd.clientId ) + 1;
 	} else {
 		index = getBlockOrder( state ).length;
 	}
@@ -1445,7 +1444,7 @@ export function getTemplateLock( state, rootClientId ) {
 }
 
 const checkAllowList = ( list, item, defaultResult = null ) => {
-	if ( isBoolean( list ) ) {
+	if ( typeof list === 'boolean' ) {
 		return list;
 	}
 	if ( Array.isArray( list ) ) {
@@ -2218,7 +2217,7 @@ export const __experimentalGetDirectInsertBlock = createSelector(
 );
 
 const checkAllowListRecursive = ( blocks, allowedBlockTypes ) => {
-	if ( isBoolean( allowedBlockTypes ) ) {
+	if ( typeof allowedBlockTypes === 'boolean' ) {
 		return allowedBlockTypes;
 	}
 

package/tsconfig.json

@@ -7,7 +7,8 @@
 	"references": [
 		{ "path": "../deprecated" },
 		{ "path": "../element" },
-		{ "path": "../hooks" }
+		{ "path": "../hooks" },
+		{ "path": "../data" }
 	],
 	// NOTE: This package is being progressively typed. You are encouraged to
 	// expand this array with files which can be type-checked. At some point in