@wordpress/block-editor 11.4.0 → 11.6.0

package/src/hooks/gap.js

@@ -1,50 +1,7 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { Platform } from '@wordpress/element';
-import { getBlockSupport } from '@wordpress/blocks';
-import {
-	__experimentalUseCustomUnits as useCustomUnits,
-	__experimentalBoxControl as BoxControl,
-	__experimentalUnitControl as UnitControl,
-} from '@wordpress/components';
-
 /**
  * Internal dependencies
  */
-import { __unstableUseBlockRef as useBlockRef } from '../components/block-list/use-block-props/use-block-refs';
 import { getSpacingPresetCssVar } from '../components/spacing-sizes-control/utils';
-import SpacingSizesControl from '../components/spacing-sizes-control';
-import useSetting from '../components/use-setting';
-import {
-	AXIAL_SIDES,
-	SPACING_SUPPORT_KEY,
-	useCustomSides,
-	useIsDimensionsSupportValid,
-} from './dimensions';
-import { cleanEmptyObject } from './utils';
-
-/**
- * Determines if there is gap support.
- *
- * @param {string|Object} blockType Block name or Block Type object.
- * @return {boolean}                Whether there is support.
- */
-export function hasGapSupport( blockType ) {
-	const support = getBlockSupport( blockType, SPACING_SUPPORT_KEY );
-	return !! ( true === support || support?.blockGap );
-}
-
-/**
- * Checks if there is a current value in the gap block support attributes.
- *
- * @param {Object} props Block props.
- * @return {boolean}      Whether or not the block has a gap value set.
- */
-export function hasGapValue( props ) {
-	return props.attributes.style?.spacing?.blockGap !== undefined;
-}
 
 /**
  * Returns a BoxControl object value from a given blockGap style value.
@@ -87,168 +44,3 @@ export function getGapCSSValue( blockGapValue, defaultValue = '0' ) {
 
 	return row === column ? row : `${ row } ${ column }`;
 }
-
-/**
- * Resets the gap block support attribute. This can be used when disabling
- * the gap 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 resetGap( { attributes = {}, setAttributes } ) {
-	const { style } = attributes;
-
-	setAttributes( {
-		style: {
-			...style,
-			spacing: {
-				...style?.spacing,
-				blockGap: undefined,
-			},
-		},
-	} );
-}
-
-/**
- * Custom hook that checks if gap settings have been disabled.
- *
- * @param {string} name The name of the block.
- * @return {boolean}     Whether the gap setting is disabled.
- */
-export function useIsGapDisabled( { name: blockName } = {} ) {
-	const isDisabled = ! useSetting( 'spacing.blockGap' );
-	const isInvalid = ! useIsDimensionsSupportValid( blockName, 'blockGap' );
-
-	return ! hasGapSupport( blockName ) || isDisabled || isInvalid;
-}
-
-/**
- * Inspector control panel containing the gap related configuration
- *
- * @param {Object} props
- *
- * @return {WPElement} Gap edit element.
- */
-export function GapEdit( props ) {
-	const {
-		clientId,
-		attributes: { style },
-		name: blockName,
-		setAttributes,
-	} = props;
-
-	const spacingSizes = useSetting( 'spacing.spacingSizes' );
-
-	const units = useCustomUnits( {
-		availableUnits: useSetting( 'spacing.units' ) || [
-			'%',
-			'px',
-			'em',
-			'rem',
-			'vw',
-		],
-	} );
-	const sides = useCustomSides( blockName, 'blockGap' );
-	const ref = useBlockRef( clientId );
-
-	if ( useIsGapDisabled( props ) ) {
-		return null;
-	}
-
-	const splitOnAxis =
-		sides && sides.some( ( side ) => AXIAL_SIDES.includes( side ) );
-
-	const onChange = ( next ) => {
-		let blockGap = next;
-
-		// If splitOnAxis activated we need to return a BoxControl object to the BoxControl component.
-		if ( !! next && splitOnAxis ) {
-			blockGap = { ...getGapBoxControlValueFromStyle( next ) };
-		} else if ( next?.hasOwnProperty( 'top' ) ) {
-			// If splitOnAxis is not enabled, treat the 'top' value as the shorthand gap value.
-			blockGap = next.top;
-		}
-
-		const newStyle = {
-			...style,
-			spacing: {
-				...style?.spacing,
-				blockGap,
-			},
-		};
-
-		setAttributes( {
-			style: cleanEmptyObject( newStyle ),
-		} );
-
-		// In Safari, changing the `gap` CSS value on its own will not trigger the layout
-		// to be recalculated / re-rendered. To force the updated gap to re-render, here
-		// we replace the block's node with itself.
-		const isSafari =
-			window?.navigator.userAgent &&
-			window.navigator.userAgent.includes( 'Safari' ) &&
-			! window.navigator.userAgent.includes( 'Chrome ' ) &&
-			! window.navigator.userAgent.includes( 'Chromium ' );
-
-		if ( ref.current && isSafari ) {
-			ref.current.parentNode?.replaceChild( ref.current, ref.current );
-		}
-	};
-
-	const gapValue = getGapBoxControlValueFromStyle( style?.spacing?.blockGap );
-
-	// The BoxControl component expects a full complement of side values.
-	// Gap row and column values translate to top/bottom and left/right respectively.
-	const boxControlGapValue = splitOnAxis
-		? {
-				...gapValue,
-				right: gapValue?.left,
-				bottom: gapValue?.top,
-		  }
-		: {
-				top: gapValue?.top,
-		  };
-
-	return Platform.select( {
-		web: (
-			<>
-				{ ( ! spacingSizes || spacingSizes?.length === 0 ) &&
-					( splitOnAxis ? (
-						<BoxControl
-							label={ __( 'Block spacing' ) }
-							min={ 0 }
-							onChange={ onChange }
-							units={ units }
-							sides={ sides }
-							values={ boxControlGapValue }
-							allowReset={ false }
-							splitOnAxis={ splitOnAxis }
-						/>
-					) : (
-						<UnitControl
-							label={ __( 'Block spacing' ) }
-							__unstableInputWidth="80px"
-							min={ 0 }
-							onChange={ onChange }
-							units={ units }
-							// Default to `row` for combined values.
-							value={ boxControlGapValue }
-						/>
-					) ) }
-				{ spacingSizes?.length > 0 && (
-					<SpacingSizesControl
-						values={ boxControlGapValue }
-						onChange={ onChange }
-						label={ __( 'Block spacing' ) }
-						sides={ splitOnAxis ? sides : [ 'top' ] } // Use 'top' as the shorthand property in non-axial configurations.
-						units={ units }
-						allowReset={ false }
-						splitOnAxis={ splitOnAxis }
-					/>
-				) }
-			</>
-		),
-		native: null,
-	} );
-}

package/src/hooks/layout.js

@@ -35,11 +35,12 @@ const layoutBlockSupportKey = '__experimentalLayout';
 /**
  * Generates the utility classnames for the given block's layout attributes.
  *
- * @param { Object } block Block object.
+ * @param { Object } blockAttributes Block attributes.
+ * @param { string } blockName       Block name.
  *
  * @return { Array } Array of CSS classname strings.
  */
-export function useLayoutClasses( block = {} ) {
+export function useLayoutClasses( blockAttributes = {}, blockName = '' ) {
 	const rootPaddingAlignment = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
 		return getSettings().__experimentalFeatures
@@ -47,11 +48,10 @@ export function useLayoutClasses( block = {} ) {
 	}, [] );
 	const globalLayoutSettings = useSetting( 'layout' ) || {};
 
-	const { attributes = {}, name } = block;
-	const { layout } = attributes;
+	const { layout } = blockAttributes;
 
 	const { default: defaultBlockLayout } =
-		getBlockSupport( name, layoutBlockSupportKey ) || {};
+		getBlockSupport( blockName, layoutBlockSupportKey ) || {};
 	const usedLayout =
 		layout?.inherit || layout?.contentSize || layout?.wideSize
 			? { ...layout, type: 'constrained' }
@@ -63,10 +63,13 @@ export function useLayoutClasses( block = {} ) {
 		globalLayoutSettings?.definitions?.[ usedLayout?.type || 'default' ]
 			?.className
 	) {
-		layoutClassnames.push(
+		const baseClassName =
 			globalLayoutSettings?.definitions?.[ usedLayout?.type || 'default' ]
-				?.className
-		);
+				?.className;
+		const compoundClassName = `wp-block-${ blockName
+			.split( '/' )
+			.pop() }-${ baseClassName }`;
+		layoutClassnames.push( baseClassName, compoundClassName );
 	}
 
 	if (
@@ -100,14 +103,14 @@ export function useLayoutClasses( block = {} ) {
 /**
  * Generates a CSS rule with the given block's layout styles.
  *
- * @param { Object } block    Block object.
- * @param { string } selector A selector to use in generating the CSS rule.
+ * @param { Object } blockAttributes Block attributes.
+ * @param { string } blockName       Block name.
+ * @param { string } selector        A selector to use in generating the CSS rule.
  *
  * @return { string } CSS rule.
  */
-export function useLayoutStyles( block = {}, selector ) {
-	const { attributes = {}, name } = block;
-	const { layout = {}, style = {} } = attributes;
+export function useLayoutStyles( blockAttributes = {}, blockName, selector ) {
+	const { layout = {}, style = {} } = blockAttributes;
 	// Update type for blocks using legacy layouts.
 	const usedLayout =
 		layout?.inherit || layout?.contentSize || layout?.wideSize
@@ -118,7 +121,7 @@ export function useLayoutStyles( block = {}, selector ) {
 	const blockGapSupport = useSetting( 'spacing.blockGap' );
 	const hasBlockGapSupport = blockGapSupport !== null;
 	const css = fullLayoutType?.getLayoutStyle?.( {
-		blockName: name,
+		blockName,
 		selector,
 		layout,
 		layoutDefinitions: globalLayoutSettings?.definitions,
@@ -128,13 +131,25 @@ export function useLayoutStyles( block = {}, selector ) {
 	return css;
 }
 
-function LayoutPanel( { setAttributes, attributes, name: blockName } ) {
+function LayoutPanel( {
+	clientId,
+	setAttributes,
+	attributes,
+	name: blockName,
+} ) {
 	const { layout } = attributes;
 	const defaultThemeLayout = useSetting( 'layout' );
-	const themeSupportsLayout = useSelect( ( select ) => {
-		const { getSettings } = select( blockEditorStore );
-		return getSettings().supportsLayout;
-	}, [] );
+	const { themeSupportsLayout, isContentLocked } = useSelect(
+		( select ) => {
+			const { getSettings, __unstableGetContentLockingParent } =
+				select( blockEditorStore );
+			return {
+				themeSupportsLayout: getSettings().supportsLayout,
+				isContentLocked: __unstableGetContentLockingParent( clientId ),
+			};
+		},
+		[ clientId ]
+	);
 
 	const layoutBlockSupport = getBlockSupport(
 		blockName,
@@ -199,6 +214,7 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) {
 					{ showInheritToggle && (
 						<>
 							<ToggleControl
+								__nextHasNoMarginBottom
 								className="block-editor-hooks__toggle-control"
 								label={ __( 'Inner blocks use content width' ) }
 								checked={
@@ -254,7 +270,7 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) {
 					) }
 				</PanelBody>
 			</InspectorControls>
-			{ ! inherit && layoutType && (
+			{ ! inherit && ! isContentLocked && layoutType && (
 				<layoutType.toolBarControls
 					layout={ usedLayout }
 					onChange={ onChangeLayout }
@@ -338,7 +354,7 @@ export const withInspectorControls = createHigherOrderComponent(
  */
 export const withLayoutStyles = createHigherOrderComponent(
 	( BlockListBlock ) => ( props ) => {
-		const { name, attributes, block } = props;
+		const { name, attributes } = props;
 		const hasLayoutBlockSupport = hasBlockSupport(
 			name,
 			layoutBlockSupportKey
@@ -360,7 +376,7 @@ export const withLayoutStyles = createHigherOrderComponent(
 				? { ...layout, type: 'constrained' }
 				: layout || defaultBlockLayout || {};
 		const layoutClasses = hasLayoutBlockSupport
-			? useLayoutClasses( block )
+			? useLayoutClasses( attributes, name )
 			: null;
 		// Higher specificity to override defaults from theme.json.
 		const selector = `.wp-container-${ id }.wp-container-${ id }`;

package/src/hooks/margin.js

@@ -1,178 +1,15 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
-import {
-	Platform,
-	useMemo,
-	useRef,
-	useState,
-	useEffect,
-} from '@wordpress/element';
-import { getBlockSupport } from '@wordpress/blocks';
-import {
-	__experimentalUseCustomUnits as useCustomUnits,
-	__experimentalBoxControl as BoxControl,
-} from '@wordpress/components';
+import { useMemo, useRef, useState, useEffect } from '@wordpress/element';
 import isShallowEqual from '@wordpress/is-shallow-equal';
 
 /**
  * Internal dependencies
  */
-import useSetting from '../components/use-setting';
-import {
-	AXIAL_SIDES,
-	SPACING_SUPPORT_KEY,
-	useCustomSides,
-	useIsDimensionsSupportValid,
-} from './dimensions';
-import { cleanEmptyObject } from './utils';
 import BlockPopover from '../components/block-popover';
-import SpacingSizesControl from '../components/spacing-sizes-control';
 import { getSpacingPresetCssVar } from '../components/spacing-sizes-control/utils';
 
-/**
- * Determines if there is margin support.
- *
- * @param {string|Object} blockType Block name or Block Type object.
- *
- * @return {boolean} Whether there is support.
- */
-export function hasMarginSupport( blockType ) {
-	const support = getBlockSupport( blockType, SPACING_SUPPORT_KEY );
-	return !! ( true === support || support?.margin );
-}
-
-/**
- * Checks if there is a current value in the margin block support attributes.
- *
- * @param {Object} props Block props.
- * @return {boolean}      Whether or not the block has a margin value set.
- */
-export function hasMarginValue( props ) {
-	return props.attributes.style?.spacing?.margin !== undefined;
-}
-
-/**
- * Resets the margin block support attributes. This can be used when disabling
- * the margin support controls for a block via a `ToolsPanel`.
- *
- * @param {Object} props               Block props.
- * @param {Object} props.attributes    Block's attributes.
- * @param {Object} props.setAttributes Function to set block's attributes.
- */
-export function resetMargin( { attributes = {}, setAttributes } ) {
-	const { style } = attributes;
-
-	setAttributes( {
-		style: cleanEmptyObject( {
-			...style,
-			spacing: {
-				...style?.spacing,
-				margin: undefined,
-			},
-		} ),
-	} );
-}
-
-/**
- * Custom hook that checks if margin settings have been disabled.
- *
- * @param {string} name The name of the block.
- *
- * @return {boolean} Whether margin setting is disabled.
- */
-export function useIsMarginDisabled( { name: blockName } = {} ) {
-	const isDisabled = ! useSetting( 'spacing.margin' );
-	const isInvalid = ! useIsDimensionsSupportValid( blockName, 'margin' );
-
-	return ! hasMarginSupport( blockName ) || isDisabled || isInvalid;
-}
-
-/**
- * Inspector control panel containing the margin related configuration
- *
- * @param {Object} props Block props.
- *
- * @return {WPElement} Margin edit element.
- */
-export function MarginEdit( props ) {
-	const {
-		name: blockName,
-		attributes: { style },
-		setAttributes,
-		onMouseOver,
-		onMouseOut,
-	} = props;
-
-	const spacingSizes = useSetting( 'spacing.spacingSizes' );
-
-	const units = useCustomUnits( {
-		availableUnits: useSetting( 'spacing.units' ) || [
-			'%',
-			'px',
-			'em',
-			'rem',
-			'vw',
-		],
-	} );
-	const sides = useCustomSides( blockName, 'margin' );
-	const splitOnAxis =
-		sides && sides.some( ( side ) => AXIAL_SIDES.includes( side ) );
-
-	if ( useIsMarginDisabled( props ) ) {
-		return null;
-	}
-
-	const onChange = ( next ) => {
-		const newStyle = {
-			...style,
-			spacing: {
-				...style?.spacing,
-				margin: next,
-			},
-		};
-
-		setAttributes( {
-			style: cleanEmptyObject( newStyle ),
-		} );
-	};
-
-	return Platform.select( {
-		web: (
-			<>
-				{ ( ! spacingSizes || spacingSizes?.length === 0 ) && (
-					<BoxControl
-						values={ style?.spacing?.margin }
-						onChange={ onChange }
-						label={ __( 'Margin' ) }
-						sides={ sides }
-						units={ units }
-						allowReset={ false }
-						splitOnAxis={ splitOnAxis }
-						onMouseOver={ onMouseOver }
-						onMouseOut={ onMouseOut }
-					/>
-				) }
-				{ spacingSizes?.length > 0 && (
-					<SpacingSizesControl
-						values={ style?.spacing?.margin }
-						onChange={ onChange }
-						label={ __( 'Margin' ) }
-						sides={ sides }
-						units={ units }
-						allowReset={ false }
-						splitOnAxis={ false }
-						onMouseOver={ onMouseOver }
-						onMouseOut={ onMouseOut }
-					/>
-				) }
-			</>
-		),
-		native: null,
-	} );
-}
-
 export function MarginVisualizer( { clientId, attributes, forceShow } ) {
 	const margin = attributes?.style?.spacing?.margin;
 

package/src/hooks/padding.js

@@ -1,176 +1,14 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
-import {
-	Platform,
-	useState,
-	useRef,
-	useEffect,
-	useMemo,
-} from '@wordpress/element';
-import { getBlockSupport } from '@wordpress/blocks';
-import {
-	__experimentalUseCustomUnits as useCustomUnits,
-	__experimentalBoxControl as BoxControl,
-} from '@wordpress/components';
+import { useState, useRef, useEffect, useMemo } from '@wordpress/element';
 import isShallowEqual from '@wordpress/is-shallow-equal';
 
 /**
  * Internal dependencies
  */
-import useSetting from '../components/use-setting';
-import {
-	AXIAL_SIDES,
-	SPACING_SUPPORT_KEY,
-	useCustomSides,
-	useIsDimensionsSupportValid,
-} from './dimensions';
-import { cleanEmptyObject } from './utils';
 import BlockPopover from '../components/block-popover';
-import SpacingSizesControl from '../components/spacing-sizes-control';
 import { getSpacingPresetCssVar } from '../components/spacing-sizes-control/utils';
-/**
- * Determines if there is padding support.
- *
- * @param {string|Object} blockType Block name or Block Type object.
- *
- * @return {boolean} Whether there is support.
- */
-export function hasPaddingSupport( blockType ) {
-	const support = getBlockSupport( blockType, SPACING_SUPPORT_KEY );
-	return !! ( true === support || support?.padding );
-}
-
-/**
- * Checks if there is a current value in the padding block support attributes.
- *
- * @param {Object} props Block props.
- * @return {boolean}      Whether or not the block has a padding value set.
- */
-export function hasPaddingValue( props ) {
-	return props.attributes.style?.spacing?.padding !== undefined;
-}
-
-/**
- * Resets the padding block support attributes. This can be used when disabling
- * the padding support controls for a block via a `ToolsPanel`.
- *
- * @param {Object} props               Block props.
- * @param {Object} props.attributes    Block's attributes.
- * @param {Object} props.setAttributes Function to set block's attributes.
- */
-export function resetPadding( { attributes = {}, setAttributes } ) {
-	const { style } = attributes;
-
-	setAttributes( {
-		style: cleanEmptyObject( {
-			...style,
-			spacing: {
-				...style?.spacing,
-				padding: undefined,
-			},
-		} ),
-	} );
-}
-
-/**
- * Custom hook that checks if padding settings have been disabled.
- *
- * @param {string} name The name of the block.
- *
- * @return {boolean} Whether padding setting is disabled.
- */
-export function useIsPaddingDisabled( { name: blockName } = {} ) {
-	const isDisabled = ! useSetting( 'spacing.padding' );
-	const isInvalid = ! useIsDimensionsSupportValid( blockName, 'padding' );
-
-	return ! hasPaddingSupport( blockName ) || isDisabled || isInvalid;
-}
-
-/**
- * Inspector control panel containing the padding related configuration
- *
- * @param {Object} props
- *
- * @return {WPElement} Padding edit element.
- */
-export function PaddingEdit( props ) {
-	const {
-		name: blockName,
-		attributes: { style },
-		setAttributes,
-		onMouseOver,
-		onMouseOut,
-	} = props;
-
-	const spacingSizes = useSetting( 'spacing.spacingSizes' );
-
-	const units = useCustomUnits( {
-		availableUnits: useSetting( 'spacing.units' ) || [
-			'%',
-			'px',
-			'em',
-			'rem',
-			'vw',
-		],
-	} );
-	const sides = useCustomSides( blockName, 'padding' );
-	const splitOnAxis =
-		sides && sides.some( ( side ) => AXIAL_SIDES.includes( side ) );
-
-	if ( useIsPaddingDisabled( props ) ) {
-		return null;
-	}
-
-	const onChange = ( next ) => {
-		const newStyle = {
-			...style,
-			spacing: {
-				...style?.spacing,
-				padding: next,
-			},
-		};
-
-		setAttributes( {
-			style: cleanEmptyObject( newStyle ),
-		} );
-	};
-
-	return Platform.select( {
-		web: (
-			<>
-				{ ( ! spacingSizes || spacingSizes?.length === 0 ) && (
-					<BoxControl
-						values={ style?.spacing?.padding }
-						onChange={ onChange }
-						label={ __( 'Padding' ) }
-						sides={ sides }
-						units={ units }
-						allowReset={ false }
-						splitOnAxis={ splitOnAxis }
-						onMouseOver={ onMouseOver }
-						onMouseOut={ onMouseOut }
-					/>
-				) }
-				{ spacingSizes?.length > 0 && (
-					<SpacingSizesControl
-						values={ style?.spacing?.padding }
-						onChange={ onChange }
-						label={ __( 'Padding' ) }
-						sides={ sides }
-						units={ units }
-						allowReset={ false }
-						splitOnAxis={ splitOnAxis }
-						onMouseOver={ onMouseOver }
-						onMouseOut={ onMouseOut }
-					/>
-				) }
-			</>
-		),
-		native: null,
-	} );
-}
 
 export function PaddingVisualizer( { clientId, attributes, forceShow } ) {
 	const padding = attributes?.style?.spacing?.padding;