@wordpress/block-editor 9.2.0 → 9.5.0

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;
+}