@wordpress/block-editor 9.7.0 → 9.8.1-next.957ca95e4c.0

package/src/layouts/constrained.js

@@ -0,0 +1,220 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	Button,
+	__experimentalUseCustomUnits as useCustomUnits,
+	__experimentalUnitControl as UnitControl,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { Icon, positionCenter, stretchWide } from '@wordpress/icons';
+import { getCSSRules } from '@wordpress/style-engine';
+
+/**
+ * Internal dependencies
+ */
+import useSetting from '../components/use-setting';
+import { appendSelectors, getBlockGapCSS, getAlignmentsInfo } from './utils';
+import { getGapCSSValue } from '../hooks/gap';
+import { shouldSkipSerialization } from '../hooks/utils';
+
+export default {
+	name: 'constrained',
+	label: __( 'Constrained' ),
+	inspectorControls: function DefaultLayoutInspectorControls( {
+		layout,
+		onChange,
+	} ) {
+		const { wideSize, contentSize } = layout;
+		const units = useCustomUnits( {
+			availableUnits: useSetting( 'spacing.units' ) || [
+				'%',
+				'px',
+				'em',
+				'rem',
+				'vw',
+			],
+		} );
+
+		return (
+			<>
+				<div className="block-editor-hooks__layout-controls">
+					<div className="block-editor-hooks__layout-controls-unit">
+						<UnitControl
+							label={ __( 'Content' ) }
+							labelPosition="top"
+							__unstableInputWidth="80px"
+							value={ contentSize || wideSize || '' }
+							onChange={ ( nextWidth ) => {
+								nextWidth =
+									0 > parseFloat( nextWidth )
+										? '0'
+										: nextWidth;
+								onChange( {
+									...layout,
+									contentSize: nextWidth,
+								} );
+							} }
+							units={ units }
+						/>
+						<Icon icon={ positionCenter } />
+					</div>
+					<div className="block-editor-hooks__layout-controls-unit">
+						<UnitControl
+							label={ __( 'Wide' ) }
+							labelPosition="top"
+							__unstableInputWidth="80px"
+							value={ wideSize || contentSize || '' }
+							onChange={ ( nextWidth ) => {
+								nextWidth =
+									0 > parseFloat( nextWidth )
+										? '0'
+										: nextWidth;
+								onChange( {
+									...layout,
+									wideSize: nextWidth,
+								} );
+							} }
+							units={ units }
+						/>
+						<Icon icon={ stretchWide } />
+					</div>
+				</div>
+				<div className="block-editor-hooks__layout-controls-reset">
+					<Button
+						variant="secondary"
+						isSmall
+						disabled={ ! contentSize && ! wideSize }
+						onClick={ () =>
+							onChange( {
+								contentSize: undefined,
+								wideSize: undefined,
+								inherit: false,
+							} )
+						}
+					>
+						{ __( 'Reset' ) }
+					</Button>
+				</div>
+
+				<p className="block-editor-hooks__layout-controls-helptext">
+					{ __(
+						'Customize the width for all elements that are assigned to the center or wide columns.'
+					) }
+				</p>
+			</>
+		);
+	},
+	toolBarControls: function DefaultLayoutToolbarControls() {
+		return null;
+	},
+	getLayoutStyle: function getLayoutStyle( {
+		selector,
+		layout = {},
+		style,
+		blockName,
+		hasBlockGapSupport,
+		layoutDefinitions,
+	} ) {
+		const { contentSize, wideSize } = layout;
+		const blockGapStyleValue = getGapCSSValue( style?.spacing?.blockGap );
+
+		// If a block's block.json skips serialization for spacing or
+		// spacing.blockGap, don't apply the user-defined value to the styles.
+		let blockGapValue = '';
+		if ( ! shouldSkipSerialization( blockName, 'spacing', 'blockGap' ) ) {
+			// If an object is provided only use the 'top' value for this kind of gap.
+			if ( blockGapStyleValue?.top ) {
+				blockGapValue = getGapCSSValue( blockGapStyleValue?.top );
+			} else if ( typeof blockGapStyleValue === 'string' ) {
+				blockGapValue = getGapCSSValue( blockGapStyleValue );
+			}
+		}
+
+		let output =
+			!! contentSize || !! wideSize
+				? `
+					${ appendSelectors(
+						selector,
+						'> :where(:not(.alignleft):not(.alignright):not(.alignfull))'
+					) } {
+						max-width: ${ contentSize ?? wideSize };
+						margin-left: auto !important;
+						margin-right: auto !important;
+					}
+					${ appendSelectors( selector, '> .alignwide' ) }  {
+						max-width: ${ wideSize ?? contentSize };
+					}
+					${ appendSelectors( selector, '> .alignfull' ) } {
+						max-width: none;
+					}
+				`
+				: '';
+
+		// If there is custom padding, add negative margins for alignfull blocks.
+		if ( style?.spacing?.padding ) {
+			// The style object might be storing a preset so we need to make sure we get a usable value.
+			const paddingValues = getCSSRules( style );
+			paddingValues.forEach( ( rule ) => {
+				if ( rule.key === 'paddingRight' ) {
+					output += `
+					${ appendSelectors( selector, '> .alignfull' ) } {
+						margin-right: calc(${ rule.value } * -1);
+					}
+					`;
+				} else if ( rule.key === 'paddingLeft' ) {
+					output += `
+					${ appendSelectors( selector, '> .alignfull' ) } {
+						margin-left: calc(${ rule.value } * -1);
+					}
+					`;
+				}
+			} );
+		}
+
+		// Output blockGap styles based on rules contained in layout definitions in theme.json.
+		if ( hasBlockGapSupport && blockGapValue ) {
+			output += getBlockGapCSS(
+				selector,
+				layoutDefinitions,
+				'constrained',
+				blockGapValue
+			);
+		}
+		return output;
+	},
+	getOrientation() {
+		return 'vertical';
+	},
+	getAlignments( layout ) {
+		const alignmentInfo = getAlignmentsInfo( layout );
+		if ( layout.alignments !== undefined ) {
+			if ( ! layout.alignments.includes( 'none' ) ) {
+				layout.alignments.unshift( 'none' );
+			}
+			return layout.alignments.map( ( alignment ) => ( {
+				name: alignment,
+				info: alignmentInfo[ alignment ],
+			} ) );
+		}
+		const { contentSize, wideSize } = layout;
+
+		const alignments = [
+			{ name: 'left' },
+			{ name: 'center' },
+			{ name: 'right' },
+		];
+
+		if ( contentSize ) {
+			alignments.unshift( { name: 'full' } );
+		}
+
+		if ( wideSize ) {
+			alignments.unshift( { name: 'wide', info: alignmentInfo.wide } );
+		}
+
+		alignments.unshift( { name: 'none', info: alignmentInfo.none } );
+
+		return alignments;
+	},
+};

package/src/layouts/flex.js

@@ -120,7 +120,7 @@ export default {
 		const blockGapValue =
 			style?.spacing?.blockGap &&
 			! shouldSkipSerialization( blockName, 'spacing', 'blockGap' )
-				? getGapCSSValue( style?.spacing?.blockGap )
+				? getGapCSSValue( style?.spacing?.blockGap, '0.5em' )
 				: undefined;
 		const justifyContent = justifyContentMap[ layout.justifyContent ];
 		const flexWrap = flexWrapOptions.includes( layout.flexWrap )

package/src/layouts/flow.js

@@ -1,174 +1,47 @@
 /**
  * WordPress dependencies
  */
-import {
-	Button,
-	__experimentalUseCustomUnits as useCustomUnits,
-	__experimentalUnitControl as UnitControl,
-} from '@wordpress/components';
-import { __, sprintf } from '@wordpress/i18n';
-import { Icon, positionCenter, stretchWide } from '@wordpress/icons';
-import { getCSSRules } from '@wordpress/style-engine';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import useSetting from '../components/use-setting';
-import { appendSelectors, getBlockGapCSS } from './utils';
-import { getGapBoxControlValueFromStyle } from '../hooks/gap';
+import { getBlockGapCSS, getAlignmentsInfo } from './utils';
+import { getGapCSSValue } from '../hooks/gap';
 import { shouldSkipSerialization } from '../hooks/utils';
 
 export default {
 	name: 'default',
 	label: __( 'Flow' ),
-	inspectorControls: function DefaultLayoutInspectorControls( {
-		layout,
-		onChange,
-	} ) {
-		const { wideSize, contentSize } = layout;
-		const units = useCustomUnits( {
-			availableUnits: useSetting( 'spacing.units' ) || [
-				'%',
-				'px',
-				'em',
-				'rem',
-				'vw',
-			],
-		} );
-
-		return (
-			<>
-				<div className="block-editor-hooks__layout-controls">
-					<div className="block-editor-hooks__layout-controls-unit">
-						<UnitControl
-							label={ __( 'Content' ) }
-							labelPosition="top"
-							__unstableInputWidth="80px"
-							value={ contentSize || wideSize || '' }
-							onChange={ ( nextWidth ) => {
-								nextWidth =
-									0 > parseFloat( nextWidth )
-										? '0'
-										: nextWidth;
-								onChange( {
-									...layout,
-									contentSize: nextWidth,
-								} );
-							} }
-							units={ units }
-						/>
-						<Icon icon={ positionCenter } />
-					</div>
-					<div className="block-editor-hooks__layout-controls-unit">
-						<UnitControl
-							label={ __( 'Wide' ) }
-							labelPosition="top"
-							__unstableInputWidth="80px"
-							value={ wideSize || contentSize || '' }
-							onChange={ ( nextWidth ) => {
-								nextWidth =
-									0 > parseFloat( nextWidth )
-										? '0'
-										: nextWidth;
-								onChange( {
-									...layout,
-									wideSize: nextWidth,
-								} );
-							} }
-							units={ units }
-						/>
-						<Icon icon={ stretchWide } />
-					</div>
-				</div>
-				<div className="block-editor-hooks__layout-controls-reset">
-					<Button
-						variant="secondary"
-						isSmall
-						disabled={ ! contentSize && ! wideSize }
-						onClick={ () =>
-							onChange( {
-								contentSize: undefined,
-								wideSize: undefined,
-								inherit: false,
-							} )
-						}
-					>
-						{ __( 'Reset' ) }
-					</Button>
-				</div>
-
-				<p className="block-editor-hooks__layout-controls-helptext">
-					{ __(
-						'Customize the width for all elements that are assigned to the center or wide columns.'
-					) }
-				</p>
-			</>
-		);
+	inspectorControls: function DefaultLayoutInspectorControls() {
+		return null;
 	},
 	toolBarControls: function DefaultLayoutToolbarControls() {
 		return null;
 	},
 	getLayoutStyle: function getLayoutStyle( {
 		selector,
-		layout = {},
 		style,
 		blockName,
 		hasBlockGapSupport,
 		layoutDefinitions,
 	} ) {
-		const { contentSize, wideSize } = layout;
-		const blockGapStyleValue = getGapBoxControlValueFromStyle(
-			style?.spacing?.blockGap
-		);
+		const blockGapStyleValue = getGapCSSValue( style?.spacing?.blockGap );
+
 		// 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 =
-			blockGapStyleValue?.top &&
-			! shouldSkipSerialization( blockName, 'spacing', 'blockGap' )
-				? blockGapStyleValue?.top
-				: '';
-
-		let output =
-			!! contentSize || !! wideSize
-				? `
-					${ appendSelectors(
-						selector,
-						'> :where(:not(.alignleft):not(.alignright):not(.alignfull))'
-					) } {
-						max-width: ${ contentSize ?? wideSize };
-						margin-left: auto !important;
-						margin-right: auto !important;
-					}
-					${ appendSelectors( selector, '> .alignwide' ) }  {
-						max-width: ${ wideSize ?? contentSize };
-					}
-					${ appendSelectors( selector, '> .alignfull' ) } {
-						max-width: none;
-					}
-				`
-				: '';
-
-		// If there is custom padding, add negative margins for alignfull blocks.
-		if ( style?.spacing?.padding ) {
-			// The style object might be storing a preset so we need to make sure we get a usable value.
-			const paddingValues = getCSSRules( style );
-			paddingValues.forEach( ( rule ) => {
-				if ( rule.key === 'paddingRight' ) {
-					output += `
-					${ appendSelectors( selector, '> .alignfull' ) } {
-						margin-right: calc(${ rule.value } * -1);
-					}
-					`;
-				} else if ( rule.key === 'paddingLeft' ) {
-					output += `
-					${ appendSelectors( selector, '> .alignfull' ) } {
-						margin-left: calc(${ rule.value } * -1);
-					}
-					`;
-				}
-			} );
+		let blockGapValue = '';
+		if ( ! shouldSkipSerialization( blockName, 'spacing', 'blockGap' ) ) {
+			// If an object is provided only use the 'top' value for this kind of gap.
+			if ( blockGapStyleValue?.top ) {
+				blockGapValue = getGapCSSValue( blockGapStyleValue?.top );
+			} else if ( typeof blockGapStyleValue === 'string' ) {
+				blockGapValue = getGapCSSValue( blockGapStyleValue );
+			}
 		}
 
+		let output = '';
+
 		// Output blockGap styles based on rules contained in layout definitions in theme.json.
 		if ( hasBlockGapSupport && blockGapValue ) {
 			output += getBlockGapCSS(
@@ -215,32 +88,3 @@ export default {
 		return alignments;
 	},
 };
-
-/**
- * Helper method to assign contextual info to clarify
- * alignment settings.
- *
- * Besides checking if `contentSize` and `wideSize` have a
- * value, we now show this information only if their values
- * are not a `css var`. This needs to change when parsing
- * css variables land.
- *
- * @see https://github.com/WordPress/gutenberg/pull/34710#issuecomment-918000752
- *
- * @param {Object} layout The layout object.
- * @return {Object} An object with contextual info per alignment.
- */
-function getAlignmentsInfo( layout ) {
-	const { contentSize, wideSize } = layout;
-	const alignmentInfo = {};
-	const sizeRegex = /^(?!0)\d+(px|em|rem|vw|vh|%)?$/i;
-	if ( sizeRegex.test( contentSize ) ) {
-		// translators: %s: container size (i.e. 600px etc)
-		alignmentInfo.none = sprintf( __( 'Max %s wide' ), contentSize );
-	}
-	if ( sizeRegex.test( wideSize ) ) {
-		// translators: %s: container size (i.e. 600px etc)
-		alignmentInfo.wide = sprintf( __( 'Max %s wide' ), wideSize );
-	}
-	return alignmentInfo;
-}

package/src/layouts/index.js

@@ -3,8 +3,9 @@
  */
 import flex from './flex';
 import flow from './flow';
+import constrained from './constrained';
 
-const layoutTypes = [ flow, flex ];
+const layoutTypes = [ flow, flex, constrained ];
 
 /**
  * Retrieves a layout type by name.

package/src/layouts/test/constrained.js

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

package/src/layouts/utils.js

@@ -1,3 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+
 /**
  * Utility to generate the proper CSS selector for layout styles.
  *
@@ -62,3 +67,32 @@ export function getBlockGapCSS(
 	}
 	return output;
 }
+
+/**
+ * Helper method to assign contextual info to clarify
+ * alignment settings.
+ *
+ * Besides checking if `contentSize` and `wideSize` have a
+ * value, we now show this information only if their values
+ * are not a `css var`. This needs to change when parsing
+ * css variables land.
+ *
+ * @see https://github.com/WordPress/gutenberg/pull/34710#issuecomment-918000752
+ *
+ * @param {Object} layout The layout object.
+ * @return {Object} An object with contextual info per alignment.
+ */
+export function getAlignmentsInfo( layout ) {
+	const { contentSize, wideSize } = layout;
+	const alignmentInfo = {};
+	const sizeRegex = /^(?!0)\d+(px|em|rem|vw|vh|%)?$/i;
+	if ( sizeRegex.test( contentSize ) ) {
+		// translators: %s: container size (i.e. 600px etc)
+		alignmentInfo.none = sprintf( __( 'Max %s wide' ), contentSize );
+	}
+	if ( sizeRegex.test( wideSize ) ) {
+		// translators: %s: container size (i.e. 600px etc)
+		alignmentInfo.wide = sprintf( __( 'Max %s wide' ), wideSize );
+	}
+	return alignmentInfo;
+}

package/src/store/actions.js

@@ -1002,7 +1002,7 @@ export const __unstableExpandSelection =
  */
 export const mergeBlocks =
 	( firstBlockClientId, secondBlockClientId ) =>
-	( { select, dispatch } ) => {
+	( { registry, select, dispatch } ) => {
 		const blocks = [ firstBlockClientId, secondBlockClientId ];
 		dispatch( { type: 'MERGE_BLOCKS', blocks } );
 
@@ -1010,13 +1010,41 @@ export const mergeBlocks =
 		const blockA = select.getBlock( clientIdA );
 		const blockAType = getBlockType( blockA.name );
 
-		// Only focus the previous block if it's not mergeable.
+		if ( ! blockAType ) return;
+
+		const blockB = select.getBlock( clientIdB );
+
 		if ( blockAType && ! blockAType.merge ) {
-			dispatch.selectBlock( blockA.clientId );
+			// If there's no merge function defined, attempt merging inner
+			// blocks.
+			const blocksWithTheSameType = switchToBlockType(
+				blockB,
+				blockAType.name
+			);
+			// Only focus the previous block if it's not mergeable.
+			if ( blocksWithTheSameType?.length !== 1 ) {
+				dispatch.selectBlock( blockA.clientId );
+				return;
+			}
+			const [ blockWithSameType ] = blocksWithTheSameType;
+			if ( blockWithSameType.innerBlocks.length < 1 ) {
+				dispatch.selectBlock( blockA.clientId );
+				return;
+			}
+			registry.batch( () => {
+				dispatch.insertBlocks(
+					blockWithSameType.innerBlocks,
+					undefined,
+					clientIdA
+				);
+				dispatch.removeBlock( clientIdB );
+				dispatch.selectBlock(
+					blockWithSameType.innerBlocks[ 0 ].clientId
+				);
+			} );
 			return;
 		}
 
-		const blockB = select.getBlock( clientIdB );
 		const blockBType = getBlockType( blockB.name );
 		const { clientId, attributeKey, offset } = select.getSelectionStart();
 		const selectedBlockType =

package/src/store/selectors.js

@@ -10,7 +10,6 @@ import {
 	some,
 	find,
 	filter,
-	mapKeys,
 	orderBy,
 } from 'lodash';
 import createSelector from 'rememo';
@@ -2078,9 +2077,11 @@ export const getBlockTransformItems = createSelector(
 			)
 			.map( buildBlockTypeTransformItem );
 
-		const itemsByName = mapKeys(
-			blockTypeTransformItems,
-			( { name } ) => name
+		const itemsByName = Object.fromEntries(
+			Object.entries( blockTypeTransformItems ).map( ( [ , value ] ) => [
+				value.name,
+				value,
+			] )
 		);
 
 		// Consider unwraping the highest priority.

package/src/style.scss

@@ -46,8 +46,6 @@
 @import "./components/responsive-block-control/style.scss";
 @import "./components/rich-text/style.scss";
 @import "./components/skip-to-selected-block/style.scss";
-@import "./components/text-transform-control/style.scss";
-@import "./components/text-decoration-control/style.scss";
 @import "./components/tool-selector/style.scss";
 @import "./components/url-input/style.scss";
 @import "./components/url-popover/style.scss";
@@ -63,5 +61,6 @@
 @import "./components/block-toolbar/style.scss";
 @import "./components/inserter/style.scss";
 @import "./components/preview-options/style.scss";
+@import "./components/spacing-sizes-control/style.scss";
 
 @include wordpress-admin-schemes();

package/build/components/block-settings-menu/block-edit-visually-button.js

@@ -1,70 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = BlockEditVisuallyButton;
-
-var _element = require("@wordpress/element");
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _blocks = require("@wordpress/blocks");
-
-var _components = require("@wordpress/components");
-
-var _i18n = require("@wordpress/i18n");
-
-var _data = require("@wordpress/data");
-
-var _store = require("../../store");
-
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-function BlockEditVisuallyButton(_ref) {
-  let {
-    clientIds,
-    ...props
-  } = _ref;
-  const {
-    block,
-    shouldRender
-  } = (0, _data.useSelect)(select => {
-    const firstBlockClientId = clientIds[0];
-    const {
-      isBlockMultiSelected,
-      getBlockMode,
-      getBlock
-    } = select(_store.store);
-    const isSingleSelected = !isBlockMultiSelected(firstBlockClientId);
-    const isHtmlMode = getBlockMode(firstBlockClientId) === 'html';
-    return {
-      block: getBlock(firstBlockClientId),
-      shouldRender: isSingleSelected && isHtmlMode
-    };
-  }, [clientIds[0]]);
-  const {
-    replaceBlocks
-  } = (0, _data.useDispatch)(_store.store);
-  const onClick = (0, _element.useCallback)(() => {
-    replaceBlocks(block.clientId, (0, _blocks.rawHandler)({
-      HTML: (0, _blocks.getBlockContent)(block)
-    }));
-  }, [block]);
-
-  if (!shouldRender) {
-    return null;
-  }
-
-  return (0, _element.createElement)(_components.ToolbarGroup, null, (0, _element.createElement)(_components.ToolbarButton, (0, _extends2.default)({
-    onClick: onClick
-  }, props), (0, _i18n.__)('Edit visually')));
-}
-//# sourceMappingURL=block-edit-visually-button.js.map