@wordpress/block-editor 7.0.1 → 8.0.0

package/src/hooks/layout.js

@@ -27,34 +27,45 @@ import { store as blockEditorStore } from '../store';
 import { InspectorControls } from '../components';
 import useSetting from '../components/use-setting';
 import { LayoutStyle } from '../components/block-list/layout';
-import { Head } from '../components/block-list/head';
+import BlockList from '../components/block-list';
 import { getLayoutType, getLayoutTypes } from '../layouts';
 
 const layoutBlockSupportKey = '__experimentalLayout';
 
-const canBlockSwitchLayout = ( blockTypeOrName ) => {
-	const layoutBlockSupportConfig = getBlockSupport(
-		blockTypeOrName,
-		layoutBlockSupportKey
-	);
-
-	return layoutBlockSupportConfig?.allowSwitching;
-};
-
 function LayoutPanel( { setAttributes, attributes, name: blockName } ) {
-	const { layout = {} } = attributes;
-	const defaultLayout = useSetting( 'layout' );
+	const { layout } = attributes;
+	const defaultThemeLayout = useSetting( 'layout' );
 	const themeSupportsLayout = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
 		return getSettings().supportsLayout;
 	}, [] );
 
-	if ( ! themeSupportsLayout ) {
+	const layoutBlockSupport = getBlockSupport(
+		blockName,
+		layoutBlockSupportKey,
+		{}
+	);
+	const {
+		allowSwitching,
+		allowEditing = true,
+		allowInheriting = true,
+		default: defaultBlockLayout,
+	} = layoutBlockSupport;
+
+	if ( ! allowEditing ) {
 		return null;
 	}
 
-	const allowLayoutSwitching = canBlockSwitchLayout( blockName );
-	const { inherit = false, type = 'default' } = layout;
+	const usedLayout = layout || defaultBlockLayout || {};
+	const { inherit = false, type = 'default' } = usedLayout;
+	/**
+	 * `themeSupportsLayout` is only relevant to the `default/flow`
+	 * layout and it should not be taken into account when other
+	 * `layout` types are used.
+	 */
+	if ( type === 'default' && ! themeSupportsLayout ) {
+		return null;
+	}
 	const layoutType = getLayoutType( type );
 
 	const onChangeType = ( newType ) =>
@@ -63,33 +74,45 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) {
 		setAttributes( { layout: newLayout } );
 
 	return (
-		<InspectorControls>
-			<PanelBody title={ __( 'Layout' ) }>
-				{ !! defaultLayout && (
-					<ToggleControl
-						label={ __( 'Inherit default layout' ) }
-						checked={ !! inherit }
-						onChange={ () =>
-							setAttributes( { layout: { inherit: ! inherit } } )
-						}
-					/>
-				) }
-
-				{ ! inherit && allowLayoutSwitching && (
-					<LayoutTypeSwitcher
-						type={ type }
-						onChange={ onChangeType }
-					/>
-				) }
-
-				{ ! inherit && layoutType && (
-					<layoutType.edit
-						layout={ layout }
-						onChange={ onChangeLayout }
-					/>
-				) }
-			</PanelBody>
-		</InspectorControls>
+		<>
+			<InspectorControls>
+				<PanelBody title={ __( 'Layout' ) }>
+					{ allowInheriting && !! defaultThemeLayout && (
+						<ToggleControl
+							label={ __( 'Inherit default layout' ) }
+							checked={ !! inherit }
+							onChange={ () =>
+								setAttributes( {
+									layout: { inherit: ! inherit },
+								} )
+							}
+						/>
+					) }
+
+					{ ! inherit && allowSwitching && (
+						<LayoutTypeSwitcher
+							type={ type }
+							onChange={ onChangeType }
+						/>
+					) }
+
+					{ ! inherit && layoutType && (
+						<layoutType.inspectorControls
+							layout={ usedLayout }
+							onChange={ onChangeLayout }
+							layoutBlockSupport={ layoutBlockSupport }
+						/>
+					) }
+				</PanelBody>
+			</InspectorControls>
+			{ ! inherit && layoutType && (
+				<layoutType.toolBarControls
+					layout={ usedLayout }
+					onChange={ onChangeLayout }
+					layoutBlockSupport={ layoutBlockSupport }
+				/>
+			) }
+		</>
 	);
 }
 
@@ -167,24 +190,27 @@ export const withInspectorControls = createHigherOrderComponent(
 export const withLayoutStyles = createHigherOrderComponent(
 	( BlockListBlock ) => ( props ) => {
 		const { name, attributes } = props;
-		const supportLayout = hasBlockSupport( name, layoutBlockSupportKey );
-		const id = useInstanceId( BlockListBlock );
-		const defaultLayout = useSetting( 'layout' ) || {};
-		if ( ! supportLayout ) {
-			return <BlockListBlock { ...props } />;
-		}
-		const { layout = {} } = attributes;
-		const usedLayout = !! layout && layout.inherit ? defaultLayout : layout;
-		const className = classnames(
-			props?.className,
-			`wp-container-${ id }`
+		const shouldRenderLayoutStyles = hasBlockSupport(
+			name,
+			layoutBlockSupportKey
 		);
-
-		const element = useContext( Head.context );
+		const id = useInstanceId( BlockListBlock );
+		const defaultThemeLayout = useSetting( 'layout' ) || {};
+		const element = useContext( BlockList.__unstableElementContext );
+		const { layout } = attributes;
+		const { default: defaultBlockLayout } =
+			getBlockSupport( name, layoutBlockSupportKey ) || {};
+		const usedLayout = layout?.inherit
+			? defaultThemeLayout
+			: layout || defaultBlockLayout || {};
+		const className = classnames( props?.className, {
+			[ `wp-container-${ id }` ]: shouldRenderLayoutStyles,
+		} );
 
 		return (
 			<>
-				{ element &&
+				{ shouldRenderLayoutStyles &&
+					element &&
 					createPortal(
 						<LayoutStyle
 							selector={ `.wp-container-${ id }` }

package/src/hooks/layout.scss

@@ -21,3 +21,11 @@
 .block-editor-hooks__layout-controls-helptext {
 	font-size: $helptext-font-size;
 }
+
+.block-editor-hooks__flex-layout-justification-controls,
+.block-editor-hooks__flex-layout-orientation-controls {
+	margin-bottom: $grid-unit-15;
+	legend {
+		margin-bottom: $grid-unit-10;
+	}
+}

package/src/hooks/letter-spacing.js

@@ -14,7 +14,8 @@ import { cleanEmptyObject } from './utils';
  * Key within block settings' supports array indicating support for letter-spacing
  * e.g. settings found in `block.json`.
  */
-export const LETTER_SPACING_SUPPORT_KEY = '__experimentalLetterSpacing';
+export const LETTER_SPACING_SUPPORT_KEY =
+	'typography.__experimentalLetterSpacing';
 
 /**
  * Inspector control panel containing the letter-spacing options.
@@ -28,12 +29,6 @@ export function LetterSpacingEdit( props ) {
 		setAttributes,
 	} = props;
 
-	const isDisabled = useIsLetterSpacingDisabled( props );
-
-	if ( isDisabled ) {
-		return null;
-	}
-
 	function onChange( newSpacing ) {
 		setAttributes( {
 			style: cleanEmptyObject( {
@@ -50,6 +45,7 @@ export function LetterSpacingEdit( props ) {
 		<LetterSpacingControl
 			value={ style?.typography?.letterSpacing }
 			onChange={ onChange }
+			__unstableInputWidth={ false }
 		/>
 	);
 }
@@ -65,7 +61,40 @@ export function useIsLetterSpacingDisabled( { name: blockName } = {} ) {
 		blockName,
 		LETTER_SPACING_SUPPORT_KEY
 	);
-	const hasLetterSpacing = useSetting( 'typography.customLetterSpacing' );
+	const hasLetterSpacing = useSetting( 'typography.letterSpacing' );
 
 	return notSupported || ! hasLetterSpacing;
 }
+
+/**
+ * Checks if there is a current value set for the letter spacing block support.
+ *
+ * @param {Object} props Block props.
+ * @return {boolean}     Whether or not the block has a letter spacing set.
+ */
+export function hasLetterSpacingValue( props ) {
+	return !! props.attributes.style?.typography?.letterSpacing;
+}
+
+/**
+ * Resets the letter spacing block support attribute. This can be used when
+ * disabling the letter spacing support controls for a block via a progressive
+ * discovery panel.
+ *
+ * @param {Object} props               Block props.
+ * @param {Object} props.attributes    Block's attributes.
+ * @param {Object} props.setAttributes Function to set block's attributes.
+ */
+export function resetLetterSpacing( { attributes = {}, setAttributes } ) {
+	const { style } = attributes;
+
+	setAttributes( {
+		style: cleanEmptyObject( {
+			...style,
+			typography: {
+				...style?.typography,
+				letterSpacing: undefined,
+			},
+		} ),
+	} );
+}

package/src/hooks/line-height.js

@@ -22,12 +22,8 @@ export const LINE_HEIGHT_SUPPORT_KEY = 'typography.lineHeight';
 export function LineHeightEdit( props ) {
 	const {
 		attributes: { style },
+		setAttributes,
 	} = props;
-	const isDisabled = useIsLineHeightDisabled( props );
-
-	if ( isDisabled ) {
-		return null;
-	}
 
 	const onChange = ( newLineHeightValue ) => {
 		const newStyle = {
@@ -37,9 +33,8 @@ export function LineHeightEdit( props ) {
 				lineHeight: newLineHeightValue,
 			},
 		};
-		props.setAttributes( {
-			style: cleanEmptyObject( newStyle ),
-		} );
+
+		setAttributes( { style: cleanEmptyObject( newStyle ) } );
 	};
 	return (
 		<LineHeightControl
@@ -56,9 +51,42 @@ export function LineHeightEdit( props ) {
  * @return {boolean} Whether setting is disabled.
  */
 export function useIsLineHeightDisabled( { name: blockName } = {} ) {
-	const isDisabled = ! useSetting( 'typography.customLineHeight' );
+	const isDisabled = ! useSetting( 'typography.lineHeight' );
 
 	return (
 		! hasBlockSupport( blockName, LINE_HEIGHT_SUPPORT_KEY ) || isDisabled
 	);
 }
+
+/**
+ * Checks if there is a current value set for the line height block support.
+ *
+ * @param {Object} props Block props.
+ * @return {boolean}     Whether or not the block has a line height value set.
+ */
+export function hasLineHeightValue( props ) {
+	return !! props.attributes.style?.typography?.lineHeight;
+}
+
+/**
+ * Resets the line height block support attribute. This can be used when
+ * disabling the line height support controls for a block via a progressive
+ * discovery panel.
+ *
+ * @param {Object} props               Block props.
+ * @param {Object} props.attributes    Block's attributes.
+ * @param {Object} props.setAttributes Function to set block's attributes.
+ */
+export function resetLineHeight( { attributes = {}, setAttributes } ) {
+	const { style } = attributes;
+
+	setAttributes( {
+		style: cleanEmptyObject( {
+			...style,
+			typography: {
+				...style?.typography,
+				lineHeight: undefined,
+			},
+		} ),
+	} );
+}

package/src/hooks/lock.js

@@ -0,0 +1,34 @@
+/**
+ * External dependencies
+ */
+import { has } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { addFilter } from '@wordpress/hooks';
+
+/**
+ * Filters registered block settings, extending attributes to include `lock`.
+ *
+ * @param {Object} settings Original block settings.
+ *
+ * @return {Object} Filtered block settings.
+ */
+export function addAttribute( settings ) {
+	// allow blocks to specify their own attribute definition with default values if needed.
+	if ( has( settings.attributes, [ 'lock', 'type' ] ) ) {
+		return settings;
+	}
+	// Gracefully handle if settings.attributes is undefined.
+	settings.attributes = {
+		...settings.attributes,
+		lock: {
+			type: 'object',
+		},
+	};
+
+	return settings;
+}
+
+addFilter( 'blocks.registerBlockType', 'core/lock/addAttribute', addAttribute );

package/src/hooks/margin.js

@@ -13,7 +13,12 @@ import {
  * Internal dependencies
  */
 import useSetting from '../components/use-setting';
-import { SPACING_SUPPORT_KEY, useCustomSides } from './dimensions';
+import {
+	AXIAL_SIDES,
+	SPACING_SUPPORT_KEY,
+	useCustomSides,
+	useIsDimensionsSupportValid,
+} from './dimensions';
 import { cleanEmptyObject } from './utils';
 
 /**
@@ -68,8 +73,10 @@ export function resetMargin( { attributes = {}, setAttributes } ) {
  * @return {boolean} Whether margin setting is disabled.
  */
 export function useIsMarginDisabled( { name: blockName } = {} ) {
-	const isDisabled = ! useSetting( 'spacing.customMargin' );
-	return ! hasMarginSupport( blockName ) || isDisabled;
+	const isDisabled = ! useSetting( 'spacing.margin' );
+	const isInvalid = ! useIsDimensionsSupportValid( blockName, 'margin' );
+
+	return ! hasMarginSupport( blockName ) || isDisabled || isInvalid;
 }
 
 /**
@@ -96,6 +103,8 @@ export function MarginEdit( props ) {
 		],
 	} );
 	const sides = useCustomSides( blockName, 'margin' );
+	const splitOnAxis =
+		sides && sides.some( ( side ) => AXIAL_SIDES.includes( side ) );
 
 	if ( useIsMarginDisabled( props ) ) {
 		return null;
@@ -139,6 +148,7 @@ export function MarginEdit( props ) {
 					sides={ sides }
 					units={ units }
 					allowReset={ false }
+					splitOnAxis={ splitOnAxis }
 				/>
 			</>
 		),

package/src/hooks/padding.js

@@ -13,7 +13,12 @@ import {
  * Internal dependencies
  */
 import useSetting from '../components/use-setting';
-import { SPACING_SUPPORT_KEY, useCustomSides } from './dimensions';
+import {
+	AXIAL_SIDES,
+	SPACING_SUPPORT_KEY,
+	useCustomSides,
+	useIsDimensionsSupportValid,
+} from './dimensions';
 import { cleanEmptyObject } from './utils';
 
 /**
@@ -68,8 +73,10 @@ export function resetPadding( { attributes = {}, setAttributes } ) {
  * @return {boolean} Whether padding setting is disabled.
  */
 export function useIsPaddingDisabled( { name: blockName } = {} ) {
-	const isDisabled = ! useSetting( 'spacing.customPadding' );
-	return ! hasPaddingSupport( blockName ) || isDisabled;
+	const isDisabled = ! useSetting( 'spacing.padding' );
+	const isInvalid = ! useIsDimensionsSupportValid( blockName, 'padding' );
+
+	return ! hasPaddingSupport( blockName ) || isDisabled || isInvalid;
 }
 
 /**
@@ -96,6 +103,8 @@ export function PaddingEdit( props ) {
 		],
 	} );
 	const sides = useCustomSides( blockName, 'padding' );
+	const splitOnAxis =
+		sides && sides.some( ( side ) => AXIAL_SIDES.includes( side ) );
 
 	if ( useIsPaddingDisabled( props ) ) {
 		return null;
@@ -139,6 +148,7 @@ export function PaddingEdit( props ) {
 					sides={ sides }
 					units={ units }
 					allowReset={ false }
+					splitOnAxis={ splitOnAxis }
 				/>
 			</>
 		),

package/src/hooks/style.js

@@ -18,6 +18,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
+import { useContext, createPortal } from '@wordpress/element';
 import { addFilter } from '@wordpress/hooks';
 import {
 	getBlockSupport,
@@ -30,6 +31,7 @@ import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
+import BlockList from '../components/block-list';
 import { BORDER_SUPPORT_KEY, BorderPanel } from './border';
 import { COLOR_SUPPORT_KEY, ColorEdit } from './color';
 import {
@@ -109,9 +111,7 @@ function compileElementsStyles( selector, elements = {} ) {
 				...map(
 					elementStyles,
 					( value, property ) =>
-						`\t${ kebabCase( property ) }: ${ value }${
-							element === 'link' ? '!important' : ''
-						};`
+						`\t${ kebabCase( property ) }: ${ value };`
 				),
 				'}',
 			].join( '\n' );
@@ -144,7 +144,14 @@ function addAttribute( settings ) {
 	return settings;
 }
 
-const skipSerializationPaths = {
+/**
+ * A dictionary of paths to flag skipping block support serialization as the key,
+ * with values providing the style paths to be omitted from serialization.
+ *
+ * @constant
+ * @type {Record<string, string[]>}
+ */
+const skipSerializationPathsEdit = {
 	[ `${ BORDER_SUPPORT_KEY }.__experimentalSkipSerialization` ]: [ 'border' ],
 	[ `${ COLOR_SUPPORT_KEY }.__experimentalSkipSerialization` ]: [
 		COLOR_SUPPORT_KEY,
@@ -157,23 +164,46 @@ const skipSerializationPaths = {
 	],
 };
 
+/**
+ * A dictionary of paths to flag skipping block support serialization as the key,
+ * with values providing the style paths to be omitted from serialization.
+ *
+ * Extends the Edit skip paths to enable skipping additional paths in just
+ * the Save component. This allows a block support to be serialized within the
+ * editor, while using an alternate approach, such as server-side rendering, when
+ * the support is saved.
+ *
+ * @constant
+ * @type {Record<string, string[]>}
+ */
+const skipSerializationPathsSave = {
+	...skipSerializationPathsEdit,
+	[ `${ SPACING_SUPPORT_KEY }` ]: [ 'spacing.blockGap' ],
+};
+
 /**
  * Override props assigned to save component to inject the CSS variables definition.
  *
- * @param {Object} props      Additional props applied to save element.
- * @param {Object} blockType  Block type.
- * @param {Object} attributes Block attributes.
+ * @param {Object}                    props      Additional props applied to save element.
+ * @param {Object}                    blockType  Block type.
+ * @param {Object}                    attributes Block attributes.
+ * @param {?Record<string, string[]>} skipPaths  An object of keys and paths to skip serialization.
  *
  * @return {Object} Filtered props applied to save element.
  */
-export function addSaveProps( props, blockType, attributes ) {
+export function addSaveProps(
+	props,
+	blockType,
+	attributes,
+	skipPaths = skipSerializationPathsSave
+) {
 	if ( ! hasStyleSupport( blockType ) ) {
 		return props;
 	}
 
 	let { style } = attributes;
 
-	forEach( skipSerializationPaths, ( path, indicator ) => {
+	forEach( skipPaths, ( path, indicator ) => {
 		if ( getBlockSupport( blockType, indicator ) ) {
 			style = omit( style, path );
 		}
@@ -207,7 +237,12 @@ export function addEditProps( settings ) {
 			props = existingGetEditWrapperProps( attributes );
 		}
 
-		return addSaveProps( props, settings, attributes );
+		return addSaveProps(
+			props,
+			settings,
+			attributes,
+			skipSerializationPathsEdit
+		);
 	};
 
 	return settings;
@@ -229,9 +264,9 @@ export const withBlockControls = createHigherOrderComponent(
 			<>
 				{ shouldDisplayControls && (
 					<>
+						<ColorEdit { ...props } />
 						<TypographyPanel { ...props } />
 						<BorderPanel { ...props } />
-						<ColorEdit { ...props } />
 						<DimensionsPanel { ...props } />
 					</>
 				) }
@@ -259,16 +294,20 @@ const withElementsStyles = createHigherOrderComponent(
 			blockElementsContainerIdentifier,
 			props.attributes.style?.elements
 		);
+		const element = useContext( BlockList.__unstableElementContext );
 
 		return (
 			<>
-				{ elements && (
-					<style
-						dangerouslySetInnerHTML={ {
-							__html: styles,
-						} }
-					/>
-				) }
+				{ elements &&
+					element &&
+					createPortal(
+						<style
+							dangerouslySetInnerHTML={ {
+								__html: styles,
+							} }
+						/>,
+						element
+					) }
 
 				<BlockListBlock
 					{ ...props }

package/src/hooks/test/style.js

@@ -24,11 +24,13 @@ describe( 'getInlineStyles', () => {
 					color: '#21759b',
 				},
 				spacing: {
+					blockGap: '1em',
 					padding: { top: '10px' },
 					margin: { bottom: '15px' },
 				},
 			} )
 		).toEqual( {
+			'--wp--style--block-gap': '1em',
 			backgroundColor: 'black',
 			borderColor: '#21759b',
 			borderRadius: '10px',
@@ -96,11 +98,13 @@ describe( 'getInlineStyles', () => {
 		expect(
 			getInlineStyles( {
 				spacing: {
+					blockGap: '1em',
 					margin: '10px',
 					padding: '20px',
 				},
 			} )
 		).toEqual( {
+			'--wp--style--block-gap': '1em',
 			margin: '10px',
 			padding: '20px',
 		} );

package/src/hooks/text-decoration.js

@@ -29,11 +29,6 @@ export function TextDecorationEdit( props ) {
 		attributes: { style },
 		setAttributes,
 	} = props;
-	const isDisabled = useIsTextDecorationDisabled( props );
-
-	if ( isDisabled ) {
-		return null;
-	}
 
 	function onChange( newDecoration ) {
 		setAttributes( {
@@ -67,7 +62,40 @@ export function useIsTextDecorationDisabled( { name: blockName } = {} ) {
 		blockName,
 		TEXT_DECORATION_SUPPORT_KEY
 	);
-	const hasTextDecoration = useSetting( 'typography.customTextDecorations' );
+	const hasTextDecoration = useSetting( 'typography.textDecoration' );
 
 	return notSupported || ! hasTextDecoration;
 }
+
+/**
+ * Checks if there is a current value set for the text decoration block support.
+ *
+ * @param {Object} props Block props.
+ * @return {boolean}     Whether or not the block has a text decoration set.
+ */
+export function hasTextDecorationValue( props ) {
+	return !! props.attributes.style?.typography?.textDecoration;
+}
+
+/**
+ * Resets the text decoration block support attribute. This can be used when
+ * disabling the text decoration support controls for a block via a progressive
+ * discovery panel.
+ *
+ * @param {Object} props               Block props.
+ * @param {Object} props.attributes    Block's attributes.
+ * @param {Object} props.setAttributes Function to set block's attributes.
+ */
+export function resetTextDecoration( { attributes = {}, setAttributes } ) {
+	const { style } = attributes;
+
+	setAttributes( {
+		style: cleanEmptyObject( {
+			...style,
+			typography: {
+				...style?.typography,
+				textDecoration: undefined,
+			},
+		} ),
+	} );
+}