@wordpress/block-editor 12.20.0 → 12.21.0

package/src/components/spacing-sizes-control/input-controls/spacing-input-control.js

@@ -226,7 +226,7 @@ export default function SpacingInputControl( {
 						placeholder={ allPlaceholder }
 						disableUnits={ isMixed }
 						label={ ariaLabel }
-						hideLabelFromVision={ true }
+						hideLabelFromVision
 						className="spacing-sizes-control__custom-value-input"
 						size={ '__unstable-large' }
 					/>
@@ -272,8 +272,8 @@ export default function SpacingInputControl( {
 					max={ spacingSizes.length - 1 }
 					marks={ marks }
 					label={ ariaLabel }
-					hideLabelFromVision={ true }
-					__nextHasNoMarginBottom={ true }
+					hideLabelFromVision
+					__nextHasNoMarginBottom
 					onFocus={ onMouseOver }
 					onBlur={ onMouseOut }
 				/>
@@ -296,7 +296,7 @@ export default function SpacingInputControl( {
 					} }
 					options={ options }
 					label={ ariaLabel }
-					hideLabelFromVision={ true }
+					hideLabelFromVision
 					size={ '__unstable-large' }
 					onMouseOver={ onMouseOver }
 					onMouseOut={ onMouseOut }

package/src/components/url-popover/index.js

@@ -92,12 +92,12 @@ const URLPopover = forwardRef(
 							/>
 						) }
 					</div>
-					{ showSettings && (
-						<div className="block-editor-url-popover__row block-editor-url-popover__settings">
-							{ renderSettings() }
-						</div>
-					) }
 				</div>
+				{ showSettings && (
+					<div className="block-editor-url-popover__settings">
+						{ renderSettings() }
+					</div>
+				) }
 				{ additionalControls && ! showSettings && (
 					<div className="block-editor-url-popover__additional-controls">
 						{ additionalControls }

package/src/components/url-popover/style.scss

@@ -58,6 +58,7 @@
 	text-overflow: ellipsis;
 	white-space: nowrap;
 	margin-right: $grid-unit-10;
+	min-width: 150px;
 	// Avoids the popover from growing too wide when the URL is long.
 	// See https://github.com/WordPress/gutenberg/issues/58599
 	max-width: $modal-min-width;

package/src/components/writing-flow/use-clipboard-handler.js

@@ -5,7 +5,7 @@ import {
 	documentHasSelection,
 	documentHasUncollapsedSelection,
 } from '@wordpress/dom';
-import { useDispatch, useSelect } from '@wordpress/data';
+import { useDispatch, useRegistry, useSelect } from '@wordpress/data';
 import { useRefEffect } from '@wordpress/compose';
 
 /**
@@ -16,6 +16,7 @@ import { useNotifyCopy } from '../../utils/use-notify-copy';
 import { getPasteBlocks, setClipboardBlocks } from './utils';
 
 export default function useClipboardHandler() {
+	const registry = useRegistry();
 	const {
 		getBlocksByClientId,
 		getSelectedBlockClientIds,
@@ -104,7 +105,7 @@ export default function useClipboardHandler() {
 						blocks = [ head, ...inBetweenBlocks, tail ];
 					}
 
-					setClipboardBlocks( event, blocks );
+					setClipboardBlocks( event, blocks, registry );
 				}
 			}
 

package/src/components/writing-flow/utils.js

@@ -8,36 +8,51 @@ import {
 	pasteHandler,
 	findTransform,
 	getBlockTransforms,
+	store as blocksStore,
 } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
 import { getPasteEventData } from '../../utils/pasting';
+import { store as blockEditorStore } from '../../store';
+
+export const requiresWrapperOnCopy = Symbol( 'requiresWrapperOnCopy' );
 
 /**
  * Sets the clipboard data for the provided blocks, with both HTML and plain
  * text representations.
  *
- * @param {ClipboardEvent} event  Clipboard event.
- * @param {WPBlock[]}      blocks Blocks to set as clipboard data.
+ * @param {ClipboardEvent} event    Clipboard event.
+ * @param {WPBlock[]}      blocks   Blocks to set as clipboard data.
+ * @param {Object}         registry The registry to select from.
  */
-export function setClipboardBlocks( event, blocks ) {
+export function setClipboardBlocks( event, blocks, registry ) {
 	let _blocks = blocks;
-	const wrapperBlockName = event.clipboardData.getData(
-		'__unstableWrapperBlockName'
-	);
 
-	if ( wrapperBlockName ) {
-		_blocks = createBlock(
-			wrapperBlockName,
-			JSON.parse(
-				event.clipboardData.getData(
-					'__unstableWrapperBlockAttributes'
-				)
-			),
-			_blocks
-		);
+	const [ firstBlock ] = blocks;
+
+	if ( firstBlock ) {
+		const firstBlockType = registry
+			.select( blocksStore )
+			.getBlockType( firstBlock.name );
+
+		if ( firstBlockType[ requiresWrapperOnCopy ] ) {
+			const { getBlockRootClientId, getBlockName, getBlockAttributes } =
+				registry.select( blockEditorStore );
+			const wrapperBlockClientId = getBlockRootClientId(
+				firstBlock.clientId
+			);
+			const wrapperBlockName = getBlockName( wrapperBlockClientId );
+
+			if ( wrapperBlockName ) {
+				_blocks = createBlock(
+					wrapperBlockName,
+					getBlockAttributes( wrapperBlockClientId ),
+					_blocks
+				);
+			}
+		}
 	}
 
 	const serialized = serialize( _blocks );

package/src/hooks/background.js

@@ -526,7 +526,7 @@ function BackgroundSizePanelItem( {
 				label={ __( 'Size' ) }
 				value={ currentValueForToggle }
 				onChange={ updateBackgroundSize }
-				isBlock={ true }
+				isBlock
 				help={ backgroundSizeHelpText( sizeValue ) }
 			>
 				<ToggleGroupControlOption

package/src/hooks/block-hooks.js

@@ -19,28 +19,38 @@ import { store as blockEditorStore } from '../store';
 
 const EMPTY_OBJECT = {};
 
-function BlockHooksControlPure( { name, clientId } ) {
+function BlockHooksControlPure( {
+	name,
+	clientId,
+	metadata: { ignoredHookedBlocks = [] } = {},
+} ) {
 	const blockTypes = useSelect(
 		( select ) => select( blocksStore ).getBlockTypes(),
 		[]
 	);
 
+	// A hooked block added via a filter will not be exposed through a block
+	// type's `blockHooks` property; however, if the containing layout has been
+	// modified, it will be present in the anchor block's `ignoredHookedBlocks`
+	// metadata.
 	const hookedBlocksForCurrentBlock = useMemo(
 		() =>
 			blockTypes?.filter(
-				( { blockHooks } ) => blockHooks && name in blockHooks
+				( { name: blockName, blockHooks } ) =>
+					( blockHooks && name in blockHooks ) ||
+					ignoredHookedBlocks.includes( blockName )
 			),
-		[ blockTypes, name ]
+		[ blockTypes, name, ignoredHookedBlocks ]
 	);
 
 	const { blockIndex, rootClientId, innerBlocksLength } = useSelect(
 		( select ) => {
-			const { getBlock, getBlockIndex, getBlockRootClientId } =
+			const { getBlocks, getBlockIndex, getBlockRootClientId } =
 				select( blockEditorStore );
 
 			return {
 				blockIndex: getBlockIndex( clientId ),
-				innerBlocksLength: getBlock( clientId )?.innerBlocks?.length,
+				innerBlocksLength: getBlocks( clientId )?.length,
 				rootClientId: getBlockRootClientId( clientId ),
 			};
 		},
@@ -49,7 +59,7 @@ function BlockHooksControlPure( { name, clientId } ) {
 
 	const hookedBlockClientIds = useSelect(
 		( select ) => {
-			const { getBlock, getGlobalBlockCount } =
+			const { getBlocks, getGlobalBlockCount } =
 				select( blockEditorStore );
 
 			const _hookedBlockClientIds = hookedBlocksForCurrentBlock.reduce(
@@ -69,7 +79,7 @@ function BlockHooksControlPure( { name, clientId } ) {
 							// Any of the current block's siblings (with the right block type) qualifies
 							// as a hooked block (inserted `before` or `after` the current one), as the block
 							// might've been automatically inserted and then moved around a bit by the user.
-							candidates = getBlock( rootClientId )?.innerBlocks;
+							candidates = getBlocks( rootClientId );
 							break;
 
 						case 'first_child':
@@ -77,7 +87,17 @@ function BlockHooksControlPure( { name, clientId } ) {
 							// Any of the current block's child blocks (with the right block type) qualifies
 							// as a hooked first or last child block, as the block might've been automatically
 							// inserted and then moved around a bit by the user.
-							candidates = getBlock( clientId ).innerBlocks;
+							candidates = getBlocks( clientId );
+							break;
+
+						case undefined:
+							// If we haven't found a blockHooks field with a relative position for the hooked
+							// block, it means that it was added by a filter. In this case, we look for the block
+							// both among the current block's siblings and its children.
+							candidates = [
+								...getBlocks( rootClientId ),
+								...getBlocks( clientId ),
+							];
 							break;
 					}
 
@@ -151,6 +171,18 @@ function BlockHooksControlPure( { name, clientId } ) {
 					false
 				);
 				break;
+
+			case undefined:
+				// If we do not know the relative position, it is because the block was
+				// added via a filter. In this case, we default to inserting it after the
+				// current block.
+				insertBlock(
+					block,
+					blockIndex + 1,
+					rootClientId, // Insert as a child of the current block's parent
+					false
+				);
+				break;
 		}
 	};
 
@@ -159,8 +191,13 @@ function BlockHooksControlPure( { name, clientId } ) {
 			<PanelBody
 				className="block-editor-hooks__block-hooks"
 				title={ __( 'Plugins' ) }
-				initialOpen={ true }
+				initialOpen
 			>
+				<p className="block-editor-hooks__block-hooks-helptext">
+					{ __(
+						'Manage the inclusion of blocks added automatically by plugins.'
+					) }
+				</p>
 				{ Object.keys( groupedHookedBlocks ).map( ( vendor ) => {
 					return (
 						<Fragment key={ vendor }>
@@ -214,6 +251,7 @@ function BlockHooksControlPure( { name, clientId } ) {
 
 export default {
 	edit: BlockHooksControlPure,
+	attributeKeys: [ 'metadata' ],
 	hasSupport() {
 		return true;
 	},

package/src/hooks/block-hooks.scss

@@ -13,4 +13,10 @@
 	.components-toggle-control .components-h-stack .components-h-stack {
 		flex-direction: row;
 	}
+
+	.block-editor-hooks__block-hooks-helptext {
+		color: $gray-700;
+		font-size: $helptext-font-size;
+		margin-bottom: $grid-unit-20;
+	}
 }

package/src/hooks/border.js

@@ -18,9 +18,14 @@ import { useSelect } from '@wordpress/data';
 import { getColorClassName } from '../components/colors';
 import InspectorControls from '../components/inspector-controls';
 import useMultipleOriginColorsAndGradients from '../components/colors-gradients/use-multiple-origin-colors-and-gradients';
-import { cleanEmptyObject, shouldSkipSerialization } from './utils';
+import {
+	cleanEmptyObject,
+	shouldSkipSerialization,
+	useBlockSettings,
+} from './utils';
 import {
 	useHasBorderPanel,
+	useHasBorderPanelControls,
 	BorderPanel as StylesBorderPanel,
 } from '../components/global-styles';
 import { store as blockEditorStore } from '../store';
@@ -220,14 +225,21 @@ export function hasShadowSupport( blockName ) {
 	return hasBlockSupport( blockName, SHADOW_SUPPORT_KEY );
 }
 
-export function getBorderPanelLabel( {
+export function useBorderPanelLabel( {
 	blockName,
 	hasBorderControl,
 	hasShadowControl,
 } = {} ) {
+	const settings = useBlockSettings( blockName );
+	const controls = useHasBorderPanelControls( settings );
+
 	if ( ! hasBorderControl && ! hasShadowControl && blockName ) {
-		hasBorderControl = hasBorderSupport( blockName );
-		hasShadowControl = hasShadowSupport( blockName );
+		hasBorderControl =
+			controls?.hasBorderColor ||
+			controls?.hasBorderStyle ||
+			controls?.hasBorderWidth ||
+			controls?.hasBorderRadius;
+		hasShadowControl = controls?.hasShadow;
 	}
 
 	if ( hasBorderControl && hasShadowControl ) {

package/src/hooks/dimensions.js

@@ -19,8 +19,7 @@ import {
 	DimensionsPanel as StylesDimensionsPanel,
 	useHasDimensionsPanel,
 } from '../components/global-styles';
-import { MarginVisualizer } from './margin';
-import { PaddingVisualizer } from './padding';
+import { MarginVisualizer, PaddingVisualizer } from './spacing-visualizer';
 import { store as blockEditorStore } from '../store';
 import { unlock } from '../lock-unlock';
 import { cleanEmptyObject, shouldSkipSerialization } from './utils';

package/src/hooks/font-size.js

@@ -21,10 +21,7 @@ import {
 	shouldSkipSerialization,
 } from './utils';
 import { useSettings } from '../components/use-settings';
-import {
-	getTypographyFontSizeValue,
-	getFluidTypographyOptionsFromSettings,
-} from '../components/global-styles/typography-utils';
+import { getTypographyFontSizeValue } from '../components/global-styles/typography-utils';
 
 export const FONT_SIZE_SUPPORT_KEY = 'typography.fontSize';
 
@@ -173,18 +170,16 @@ function useBlockProps( { name, fontSize, style } ) {
 	let props;
 
 	if ( style?.typography?.fontSize ) {
-		const fluidSettings = getFluidTypographyOptionsFromSettings( {
-			typography: {
-				fluid: fluidTypographySettings,
-			},
-			layout: layoutSettings,
-		} );
-
 		props = {
 			style: {
 				fontSize: getTypographyFontSizeValue(
 					{ size: style.typography.fontSize },
-					fluidSettings
+					{
+						typography: {
+							fluid: fluidTypographySettings,
+						},
+						layout: layoutSettings,
+					}
 				),
 			},
 		};

package/src/hooks/index.js

@@ -42,6 +42,7 @@ createBlockEditFilter(
 		contentLockUI,
 		blockHooks,
 		blockRenaming,
+		childLayout,
 	].filter( Boolean )
 );
 createBlockListBlockFilter( [

package/src/hooks/layout-child.js

@@ -10,6 +10,7 @@ import { useSelect } from '@wordpress/data';
 import { store as blockEditorStore } from '../store';
 import { useStyleOverride } from './utils';
 import { useLayout } from '../components/block-list/layout';
+import { GridVisualizer, GridItemResizer } from '../components/grid-visualizer';
 
 function useBlockPropsChildLayoutStyles( { style } ) {
 	const shouldRenderChildLayoutStyles = useSelect( ( select ) => {
@@ -96,8 +97,45 @@ function useBlockPropsChildLayoutStyles( { style } ) {
 	return { className: `wp-container-content-${ id }` };
 }
 
+function ChildLayoutControlsPure( { clientId, style, setAttributes } ) {
+	const parentLayout = useLayout() || {};
+	const rootClientId = useSelect(
+		( select ) => {
+			return select( blockEditorStore ).getBlockRootClientId( clientId );
+		},
+		[ clientId ]
+	);
+	if ( parentLayout.type !== 'grid' ) {
+		return null;
+	}
+	if ( ! window.__experimentalEnableGridInteractivity ) {
+		return null;
+	}
+	return (
+		<>
+			<GridVisualizer clientId={ rootClientId } />
+			<GridItemResizer
+				clientId={ clientId }
+				onChange={ ( { columnSpan, rowSpan } ) => {
+					setAttributes( {
+						style: {
+							...style,
+							layout: {
+								...style?.layout,
+								columnSpan,
+								rowSpan,
+							},
+						},
+					} );
+				} }
+			/>
+		</>
+	);
+}
+
 export default {
 	useBlockProps: useBlockPropsChildLayoutStyles,
+	edit: ChildLayoutControlsPure,
 	attributeKeys: [ 'style' ],
 	hasSupport() {
 		return true;

package/src/hooks/layout.js

@@ -135,7 +135,12 @@ export function useLayoutStyles( blockAttributes = {}, blockName, selector ) {
 	return css;
 }
 
-function LayoutPanelPure( { layout, setAttributes, name: blockName } ) {
+function LayoutPanelPure( {
+	layout,
+	setAttributes,
+	name: blockName,
+	clientId,
+} ) {
 	const settings = useBlockSettings( blockName );
 	// Block settings come from theme.json under settings.[blockName].
 	const { layout: layoutSettings } = settings;
@@ -266,6 +271,8 @@ function LayoutPanelPure( { layout, setAttributes, name: blockName } ) {
 							layout={ usedLayout }
 							onChange={ onChangeLayout }
 							layoutBlockSupport={ blockSupportAndThemeSettings }
+							name={ blockName }
+							clientId={ clientId }
 						/>
 					) }
 					{ constrainedType && displayControlsForLegacyLayouts && (
@@ -273,6 +280,8 @@ function LayoutPanelPure( { layout, setAttributes, name: blockName } ) {
 							layout={ usedLayout }
 							onChange={ onChangeLayout }
 							layoutBlockSupport={ blockSupportAndThemeSettings }
+							name={ blockName }
+							clientId={ clientId }
 						/>
 					) }
 				</PanelBody>
@@ -282,6 +291,8 @@ function LayoutPanelPure( { layout, setAttributes, name: blockName } ) {
 					layout={ usedLayout }
 					onChange={ onChangeLayout }
 					layoutBlockSupport={ layoutBlockSupport }
+					name={ blockName }
+					clientId={ clientId }
 				/>
 			) }
 		</>

package/src/hooks/line-height.js

@@ -39,7 +39,7 @@ export function LineHeightEdit( props ) {
 	return (
 		<LineHeightControl
 			__unstableInputWidth="100%"
-			__nextHasNoMarginBottom={ true }
+			__nextHasNoMarginBottom
 			value={ style?.typography?.lineHeight }
 			onChange={ onChange }
 			size="__unstable-large"

package/src/hooks/spacing-visualizer.js

@@ -0,0 +1,126 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	useState,
+	useRef,
+	useLayoutEffect,
+	useEffect,
+	useReducer,
+} from '@wordpress/element';
+import isShallowEqual from '@wordpress/is-shallow-equal';
+
+/**
+ * Internal dependencies
+ */
+import BlockPopoverCover from '../components/block-popover/cover';
+import { __unstableUseBlockElement as useBlockElement } from '../components/block-list/use-block-props/use-block-refs';
+
+function SpacingVisualizer( { clientId, value, computeStyle, forceShow } ) {
+	const blockElement = useBlockElement( clientId );
+	const [ style, updateStyle ] = useReducer( () =>
+		computeStyle( blockElement )
+	);
+
+	useLayoutEffect( () => {
+		if ( ! blockElement ) {
+			return;
+		}
+		// It's not sufficient to read the computed spacing value when value.spacing changes as
+		// useEffect may run before the browser recomputes CSS. We therefore combine
+		// useLayoutEffect and two rAF calls to ensure that we read the spacing after the current
+		// paint but before the next paint.
+		// See https://github.com/WordPress/gutenberg/pull/59227.
+		window.requestAnimationFrame( () =>
+			window.requestAnimationFrame( updateStyle )
+		);
+	}, [ blockElement, value ] );
+
+	const previousValue = useRef( value );
+	const [ isActive, setIsActive ] = useState( false );
+
+	useEffect( () => {
+		if ( isShallowEqual( value, previousValue.current ) || forceShow ) {
+			return;
+		}
+
+		setIsActive( true );
+		previousValue.current = value;
+
+		const timeout = setTimeout( () => {
+			setIsActive( false );
+		}, 400 );
+
+		return () => {
+			setIsActive( false );
+			clearTimeout( timeout );
+		};
+	}, [ value, forceShow ] );
+
+	if ( ! isActive && ! forceShow ) {
+		return null;
+	}
+
+	return (
+		<BlockPopoverCover
+			clientId={ clientId }
+			__unstablePopoverSlot="block-toolbar"
+		>
+			<div className="block-editor__spacing-visualizer" style={ style } />
+		</BlockPopoverCover>
+	);
+}
+
+function getComputedCSS( element, property ) {
+	return element.ownerDocument.defaultView
+		.getComputedStyle( element )
+		.getPropertyValue( property );
+}
+
+export function MarginVisualizer( { clientId, value, forceShow } ) {
+	return (
+		<SpacingVisualizer
+			clientId={ clientId }
+			value={ value?.spacing?.margin }
+			computeStyle={ ( blockElement ) => {
+				const top = getComputedCSS( blockElement, 'margin-top' );
+				const right = getComputedCSS( blockElement, 'margin-right' );
+				const bottom = getComputedCSS( blockElement, 'margin-bottom' );
+				const left = getComputedCSS( blockElement, 'margin-left' );
+				return {
+					borderTopWidth: top,
+					borderRightWidth: right,
+					borderBottomWidth: bottom,
+					borderLeftWidth: left,
+					top: top ? `-${ top }` : 0,
+					right: right ? `-${ right }` : 0,
+					bottom: bottom ? `-${ bottom }` : 0,
+					left: left ? `-${ left }` : 0,
+				};
+			} }
+			forceShow={ forceShow }
+		/>
+	);
+}
+
+export function PaddingVisualizer( { clientId, value, forceShow } ) {
+	return (
+		<SpacingVisualizer
+			clientId={ clientId }
+			value={ value?.spacing?.padding }
+			computeStyle={ ( blockElement ) => ( {
+				borderTopWidth: getComputedCSS( blockElement, 'padding-top' ),
+				borderRightWidth: getComputedCSS(
+					blockElement,
+					'padding-right'
+				),
+				borderBottomWidth: getComputedCSS(
+					blockElement,
+					'padding-bottom'
+				),
+				borderLeftWidth: getComputedCSS( blockElement, 'padding-left' ),
+			} ) }
+			forceShow={ forceShow }
+		/>
+	);
+}

package/src/hooks/{padding.scss → spacing.scss}

@@ -1,4 +1,4 @@
-.block-editor__padding-visualizer {
+.block-editor__spacing-visualizer {
 	position: absolute;
 	top: 0;
 	bottom: 0;