@wordpress/block-editor 9.7.1-next.d6164808d3.0 → 10.0.0

package/src/hooks/content-lock-ui.js

@@ -0,0 +1,161 @@
+/**
+ * WordPress dependencies
+ */
+import { ToolbarButton } from '@wordpress/components';
+import { createHigherOrderComponent } from '@wordpress/compose';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { addFilter } from '@wordpress/hooks';
+import { __ } from '@wordpress/i18n';
+import { useEffect, useRef, useCallback } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../store';
+import { BlockControls } from '../components';
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+function StopEditingAsBlocksOnOutsideSelect( {
+	clientId,
+	stopEditingAsBlock,
+} ) {
+	const isBlockOrDescendantSelected = useSelect(
+		( select ) => {
+			const { isBlockSelected, hasSelectedInnerBlock } =
+				select( blockEditorStore );
+			return (
+				isBlockSelected( clientId ) ||
+				hasSelectedInnerBlock( clientId, true )
+			);
+		},
+		[ clientId ]
+	);
+	useEffect( () => {
+		if ( ! isBlockOrDescendantSelected ) {
+			stopEditingAsBlock();
+		}
+	}, [ isBlockOrDescendantSelected ] );
+	return null;
+}
+
+export const withBlockControls = createHigherOrderComponent(
+	( BlockEdit ) => ( props ) => {
+		const { getBlockListSettings, getSettings } =
+			useSelect( blockEditorStore );
+		const focusModeToRevert = useRef();
+		const { templateLock, isLockedByParent, isEditingAsBlocks } = useSelect(
+			( select ) => {
+				const {
+					__unstableGetContentLockingParent,
+					getTemplateLock,
+					__unstableGetTemporarilyEditingAsBlocks,
+				} = select( blockEditorStore );
+				return {
+					templateLock: getTemplateLock( props.clientId ),
+					isLockedByParent: !! __unstableGetContentLockingParent(
+						props.clientId
+					),
+					isEditingAsBlocks:
+						__unstableGetTemporarilyEditingAsBlocks() ===
+						props.clientId,
+				};
+			},
+			[ props.clientId ]
+		);
+
+		const {
+			updateSettings,
+			updateBlockListSettings,
+			__unstableSetTemporarilyEditingAsBlocks,
+		} = useDispatch( blockEditorStore );
+		const isContentLocked =
+			! isLockedByParent && templateLock === 'noContent';
+		const {
+			__unstableMarkNextChangeAsNotPersistent,
+			updateBlockAttributes,
+		} = useDispatch( blockEditorStore );
+
+		const stopEditingAsBlock = useCallback( () => {
+			__unstableMarkNextChangeAsNotPersistent();
+			updateBlockAttributes( props.clientId, {
+				templateLock: 'noContent',
+			} );
+			updateBlockListSettings( props.clientId, {
+				...getBlockListSettings( props.clientId ),
+				templateLock: 'noContent',
+			} );
+			updateSettings( { focusMode: focusModeToRevert.current } );
+			__unstableSetTemporarilyEditingAsBlocks();
+		}, [
+			props.clientId,
+			focusModeToRevert,
+			updateSettings,
+			updateBlockListSettings,
+			getBlockListSettings,
+			__unstableMarkNextChangeAsNotPersistent,
+			updateBlockAttributes,
+			__unstableSetTemporarilyEditingAsBlocks,
+		] );
+
+		if ( ! isContentLocked && ! isEditingAsBlocks ) {
+			return <BlockEdit { ...props } />;
+		}
+
+		return (
+			<>
+				{ isEditingAsBlocks && ! isContentLocked && (
+					<StopEditingAsBlocksOnOutsideSelect
+						clientId={ props.clientId }
+						stopEditingAsBlock={ stopEditingAsBlock }
+					/>
+				) }
+				<BlockControls group="other">
+					<ToolbarButton
+						onClick={ () => {
+							if ( isEditingAsBlocks && ! isContentLocked ) {
+								stopEditingAsBlock();
+							} else {
+								__unstableMarkNextChangeAsNotPersistent();
+								updateBlockAttributes( props.clientId, {
+									templateLock: undefined,
+								} );
+								updateBlockListSettings( props.clientId, {
+									...getBlockListSettings( props.clientId ),
+									templateLock: false,
+								} );
+								focusModeToRevert.current =
+									getSettings().focusMode;
+								updateSettings( { focusMode: true } );
+								__unstableSetTemporarilyEditingAsBlocks(
+									props.clientId
+								);
+							}
+						} }
+					>
+						{ isEditingAsBlocks && ! isContentLocked
+							? __( 'Done' )
+							: __( 'Modify' ) }
+					</ToolbarButton>
+				</BlockControls>
+				<BlockEdit
+					{ ...props }
+					className={ classnames(
+						props.className,
+						isEditingAsBlocks &&
+							'is-content-locked-editing-as-blocks'
+					) }
+				/>
+			</>
+		);
+	},
+	'withToolbarControls'
+);
+
+addFilter(
+	'editor.BlockEdit',
+	'core/style/with-block-controls',
+	withBlockControls
+);

package/src/hooks/dimensions.js

@@ -79,15 +79,16 @@ export function DimensionsPanel( props ) {
 		},
 	} );
 
+	const spacingClassnames = classnames( {
+		'tools-panel-item-spacing': spacingSizes && spacingSizes.length > 0,
+	} );
+
 	return (
 		<>
 			<InspectorControls __experimentalGroup="dimensions">
 				{ ! isPaddingDisabled && (
 					<ToolsPanelItem
-						className={ classnames( {
-							'tools-panel-item-spacing':
-								spacingSizes && spacingSizes.length > 0,
-						} ) }
+						className={ spacingClassnames }
 						hasValue={ () => hasPaddingValue( props ) }
 						label={ __( 'Padding' ) }
 						onDeselect={ () => resetPadding( props ) }
@@ -100,10 +101,7 @@ export function DimensionsPanel( props ) {
 				) }
 				{ ! isMarginDisabled && (
 					<ToolsPanelItem
-						className={ classnames( {
-							'tools-panel-item-spacing':
-								spacingSizes && spacingSizes.length > 0,
-						} ) }
+						className={ spacingClassnames }
 						hasValue={ () => hasMarginValue( props ) }
 						label={ __( 'Margin' ) }
 						onDeselect={ () => resetMargin( props ) }
@@ -116,6 +114,7 @@ export function DimensionsPanel( props ) {
 				) }
 				{ ! isGapDisabled && (
 					<ToolsPanelItem
+						className={ spacingClassnames }
 						hasValue={ () => hasGapValue( props ) }
 						label={ __( 'Block spacing' ) }
 						onDeselect={ () => resetGap( props ) }

package/src/hooks/duotone.js

@@ -12,6 +12,7 @@ import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks';
 import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose';
 import { addFilter } from '@wordpress/hooks';
 import { useMemo, useContext, createPortal } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -27,6 +28,7 @@ import {
 	__unstableDuotoneStylesheet as DuotoneStylesheet,
 	__unstableDuotoneUnsetStylesheet as DuotoneUnsetStylesheet,
 } from '../components/duotone';
+import { store as blockEditorStore } from '../store';
 
 const EMPTY_ARRAY = [];
 
@@ -157,11 +159,21 @@ const withDuotoneControls = createHigherOrderComponent(
 			props.name,
 			'color.__experimentalDuotone'
 		);
+		const isContentLocked = useSelect(
+			( select ) => {
+				return select(
+					blockEditorStore
+				).__unstableGetContentLockingParent( props.clientId );
+			},
+			[ props.clientId ]
+		);
 
 		return (
 			<>
 				<BlockEdit { ...props } />
-				{ hasDuotoneSupport && <DuotonePanel { ...props } /> }
+				{ hasDuotoneSupport && ! isContentLocked && (
+					<DuotonePanel { ...props } />
+				) }
 			</>
 		);
 	},

package/src/hooks/font-appearance.js

@@ -58,6 +58,7 @@ export function FontAppearanceEdit( props ) {
 			hasFontStyles={ hasFontStyles }
 			hasFontWeights={ hasFontWeights }
 			value={ { fontStyle, fontWeight } }
+			size="__unstable-large"
 		/>
 	);
 }

package/src/hooks/font-family.js

@@ -132,6 +132,8 @@ export function FontFamilyEdit( {
 			fontFamilies={ fontFamilies }
 			value={ value }
 			onChange={ onChange }
+			size="__unstable-large"
+			__nextHasNoMarginBottom
 		/>
 	);
 }

package/src/hooks/font-size.js

@@ -147,6 +147,8 @@ export function FontSizeEdit( props ) {
 			onChange={ onChange }
 			value={ fontSizeValue }
 			withReset={ false }
+			size="__unstable-large"
+			__nextHasNoMarginBottom
 		/>
 	);
 }

package/src/hooks/gap.js

@@ -15,6 +15,7 @@ import {
  */
 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 } from './dimensions';
 import { cleanEmptyObject } from './utils';
@@ -55,12 +56,8 @@ export function getGapBoxControlValueFromStyle( blockGapValue ) {
 
 	const isValueString = typeof blockGapValue === 'string';
 	return {
-		top: isValueString
-			? getSpacingPresetCssVar( blockGapValue )
-			: getSpacingPresetCssVar( blockGapValue?.top ),
-		left: isValueString
-			? getSpacingPresetCssVar( blockGapValue )
-			: getSpacingPresetCssVar( blockGapValue?.left ),
+		top: isValueString ? blockGapValue : blockGapValue?.top,
+		left: isValueString ? blockGapValue : blockGapValue?.left,
 	};
 }
 
@@ -78,8 +75,10 @@ export function getGapCSSValue( blockGapValue, defaultValue = '0' ) {
 		return null;
 	}
 
-	const row = blockGapBoxControlValue?.top || defaultValue;
-	const column = blockGapBoxControlValue?.left || defaultValue;
+	const row =
+		getSpacingPresetCssVar( blockGapBoxControlValue?.top ) || defaultValue;
+	const column =
+		getSpacingPresetCssVar( blockGapBoxControlValue?.left ) || defaultValue;
 
 	return row === column ? row : `${ row } ${ column }`;
 }
@@ -132,6 +131,8 @@ export function GapEdit( props ) {
 		setAttributes,
 	} = props;
 
+	const spacingSizes = useSetting( 'spacing.spacingSizes' );
+
 	const units = useCustomUnits( {
 		availableUnits: useSetting( 'spacing.units' ) || [
 			'%',
@@ -157,6 +158,9 @@ export function GapEdit( props ) {
 		// 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 = {
@@ -195,32 +199,46 @@ export function GapEdit( props ) {
 				right: gapValue?.left,
 				bottom: gapValue?.top,
 		  }
-		: gapValue?.top;
+		: {
+				top: gapValue?.top,
+		  };
 
 	return Platform.select( {
 		web: (
 			<>
-				{ splitOnAxis ? (
-					<BoxControl
-						label={ __( 'Block spacing' ) }
-						min={ 0 }
+				{ ( ! 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 }
-						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 }
-					/>
 				) }
 			</>
 		),

package/src/hooks/index.js

@@ -15,10 +15,14 @@ import './duotone';
 import './font-size';
 import './border';
 import './layout';
+import './content-lock-ui';
+import './metadata';
+import './metadata-name';
 
 export { useCustomSides } from './dimensions';
 export { getBorderClassesAndStyles, useBorderProps } from './use-border-props';
 export { getColorClassesAndStyles, useColorProps } from './use-color-props';
 export { getSpacingClassesAndStyles } from './use-spacing-props';
+export { getTypographyClassesAndStyles } from './use-typography-props';
 export { getGapCSSValue } from './gap';
 export { useCachedTruthy } from './use-cached-truthy';

package/src/hooks/layout.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { has, kebabCase } from 'lodash';
+import { kebabCase } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -63,7 +63,12 @@ function useLayoutClasses( layout, layoutDefinitions ) {
 		);
 	}
 
-	if ( ( layout?.inherit || layout?.contentSize ) && rootPaddingAlignment ) {
+	if (
+		( layout?.inherit ||
+			layout?.contentSize ||
+			layout?.type === 'constrained' ) &&
+		rootPaddingAlignment
+	) {
 		layoutClassnames.push( 'has-global-padding' );
 	}
 
@@ -138,8 +143,10 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) {
 		return null;
 	}
 	const layoutType = getLayoutType( type );
-
 	const constrainedType = getLayoutType( 'constrained' );
+	const displayControlsForLegacyLayouts =
+		! usedLayout.type && ( contentSize || inherit );
+	const hasContentSizeOrLegacySettings = !! inherit || !! contentSize;
 
 	const onChangeType = ( newType ) =>
 		setAttributes( { layout: { type: newType } } );
@@ -153,36 +160,35 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) {
 					{ showInheritToggle && (
 						<>
 							<ToggleControl
-								label={ __(
-									'Inner blocks respect content width'
-								) }
+								className="block-editor-hooks__toggle-control"
+								label={ __( 'Inner blocks use content width' ) }
 								checked={
 									layoutType?.name === 'constrained' ||
-									!! inherit ||
-									!! contentSize
+									hasContentSizeOrLegacySettings
 								}
 								onChange={ () =>
 									setAttributes( {
 										layout: {
 											type:
 												layoutType?.name ===
-												'constrained'
+													'constrained' ||
+												hasContentSizeOrLegacySettings
 													? 'default'
 													: 'constrained',
 										},
 									} )
 								}
+								help={
+									layoutType?.name === 'constrained' ||
+									hasContentSizeOrLegacySettings
+										? __(
+												'Nested blocks use content width with options for full and wide widths.'
+										  )
+										: __(
+												'Nested blocks will fill the width of this container. Toggle to constrain.'
+										  )
+								}
 							/>
-							<p className="block-editor-hooks__layout-controls-helptext">
-								{ !! inherit ||
-								layoutType?.name === 'constrained'
-									? __(
-											'Nested blocks use theme content width with options for full and wide widths.'
-									  )
-									: __(
-											'Nested blocks will fill the width of this container.'
-									  ) }
-							</p>
 						</>
 					) }
 
@@ -200,7 +206,7 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) {
 							layoutBlockSupport={ layoutBlockSupport }
 						/>
 					) }
-					{ constrainedType && !! contentSize && (
+					{ constrainedType && displayControlsForLegacyLayouts && (
 						<constrainedType.inspectorControls
 							layout={ usedLayout }
 							onChange={ onChangeLayout }
@@ -246,7 +252,7 @@ function LayoutTypeSwitcher( { type, onChange } ) {
  * @return {Object} Filtered block settings.
  */
 export function addAttribute( settings ) {
-	if ( has( settings.attributes, [ 'layout', 'type' ] ) ) {
+	if ( 'type' in ( settings.attributes?.layout ?? {} ) ) {
 		return settings;
 	}
 	if ( hasBlockSupport( settings, layoutBlockSupportKey ) ) {

package/src/hooks/layout.scss

@@ -1,6 +1,6 @@
 .block-editor-hooks__layout-controls {
 	display: flex;
-	margin-bottom: $grid-unit-20;
+	margin-bottom: $grid-unit-10;
 
 	.block-editor-hooks__layout-controls-unit {
 		display: flex;
@@ -19,7 +19,9 @@
 }
 
 .block-editor-hooks__layout-controls-helptext {
+	color: $gray-700;
 	font-size: $helptext-font-size;
+	margin-bottom: $grid-unit-20;
 }
 
 .block-editor-hooks__flex-layout-justification-controls,
@@ -29,3 +31,7 @@
 		margin-bottom: $grid-unit-10;
 	}
 }
+
+.block-editor-hooks__toggle-control.block-editor-hooks__toggle-control {
+	margin-bottom: $grid-unit-20;
+}

package/src/hooks/letter-spacing.js

@@ -46,6 +46,7 @@ export function LetterSpacingEdit( props ) {
 			value={ style?.typography?.letterSpacing }
 			onChange={ onChange }
 			__unstableInputWidth={ '100%' }
+			size="__unstable-large"
 		/>
 	);
 }

package/src/hooks/line-height.js

@@ -42,6 +42,7 @@ export function LineHeightEdit( props ) {
 			__nextHasNoMarginBottom={ true }
 			value={ style?.typography?.lineHeight }
 			onChange={ onChange }
+			size="__unstable-large"
 		/>
 	);
 }

package/src/hooks/lock.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { has } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -17,7 +12,7 @@ import { addFilter } from '@wordpress/hooks';
  */
 export function addAttribute( settings ) {
 	// Allow blocks to specify their own attribute definition with default values if needed.
-	if ( has( settings.attributes, [ 'lock', 'type' ] ) ) {
+	if ( 'type' in ( settings.attributes?.lock ?? {} ) ) {
 		return settings;
 	}
 	// Gracefully handle if settings.attributes is undefined.

package/src/hooks/metadata-name.js

@@ -0,0 +1,48 @@
+/**
+ * WordPress dependencies
+ */
+import { addFilter } from '@wordpress/hooks';
+/**
+ * Internal dependencies
+ */
+import { hasBlockMetadataSupport } from './metadata';
+
+/**
+ * Filters registered block settings, adding an `__experimentalLabel` callback if one does not already exist.
+ *
+ * @param {Object} settings Original block settings.
+ *
+ * @return {Object} Filtered block settings.
+ */
+export function addLabelCallback( settings ) {
+	// If blocks provide their own label callback, do not override it.
+	if ( settings.__experimentalLabel ) {
+		return settings;
+	}
+
+	const supportsBlockNaming = hasBlockMetadataSupport(
+		settings,
+		'name',
+		false // default value
+	);
+
+	// Check whether block metadata is supported before using it.
+	if ( supportsBlockNaming ) {
+		settings.__experimentalLabel = ( attributes, { context } ) => {
+			const { metadata } = attributes;
+
+			// In the list view, use the block's name attribute as the label.
+			if ( context === 'list-view' && metadata?.name ) {
+				return metadata.name;
+			}
+		};
+	}
+
+	return settings;
+}
+
+addFilter(
+	'blocks.registerBlockType',
+	'core/metadata/addLabelCallback',
+	addLabelCallback
+);

package/src/hooks/metadata.js

@@ -0,0 +1,64 @@
+/**
+ * WordPress dependencies
+ */
+import { addFilter } from '@wordpress/hooks';
+import { getBlockSupport } from '@wordpress/blocks';
+
+const META_ATTRIBUTE_NAME = 'metadata';
+
+export function hasBlockMetadataSupport( blockType, feature = '' ) {
+	const support = getBlockSupport( blockType, '__experimentalMetadata' );
+	return !! ( true === support || support?.[ feature ] );
+}
+
+/**
+ * Filters registered block settings, extending attributes to include `metadata`.
+ *
+ * see: https://github.com/WordPress/gutenberg/pull/40393/files#r864632012
+ *
+ * @param {Object} blockTypeSettings Original block settings.
+ * @return {Object} Filtered block settings.
+ */
+export function addMetaAttribute( blockTypeSettings ) {
+	// Allow blocks to specify their own attribute definition with default values if needed.
+	if ( blockTypeSettings?.attributes?.[ META_ATTRIBUTE_NAME ]?.type ) {
+		return blockTypeSettings;
+	}
+
+	const supportsBlockNaming = hasBlockMetadataSupport(
+		blockTypeSettings,
+		'name',
+		false
+	);
+
+	if ( supportsBlockNaming ) {
+		blockTypeSettings.attributes = {
+			...blockTypeSettings.attributes,
+			[ META_ATTRIBUTE_NAME ]: {
+				type: 'object',
+			},
+		};
+	}
+
+	return blockTypeSettings;
+}
+
+export function addSaveProps( extraProps, blockType, attributes ) {
+	if ( hasBlockMetadataSupport( blockType ) ) {
+		extraProps[ META_ATTRIBUTE_NAME ] = attributes[ META_ATTRIBUTE_NAME ];
+	}
+
+	return extraProps;
+}
+
+addFilter(
+	'blocks.registerBlockType',
+	'core/metadata/addMetaAttribute',
+	addMetaAttribute
+);
+
+addFilter(
+	'blocks.getSaveContent.extraProps',
+	'core/metadata/save-props',
+	addSaveProps
+);