@wordpress/block-editor 12.20.0 → 12.22.0

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;

package/src/hooks/test/__snapshots__/anchor.native.js.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`anchor should set the ID attribute on the block 1`] = `
+"<!-- wp:paragraph -->
+<p id="my-anchor"></p>
+<!-- /wp:paragraph -->"
+`;

package/src/hooks/test/anchor.native.js

@@ -0,0 +1,32 @@
+/**
+ * External dependencies
+ */
+import {
+	addBlock,
+	changeTextOfTextInput,
+	getEditorHtml,
+	initializeEditor,
+	openBlockSettings,
+	screen,
+	setupCoreBlocks,
+} from 'test/helpers';
+
+setupCoreBlocks( [ 'core/paragraph' ] );
+
+describe( 'anchor', () => {
+	it( 'should set the ID attribute on the block', async () => {
+		// Arrange
+		await initializeEditor();
+		const block = await addBlock( screen, 'Paragraph' );
+		await openBlockSettings( screen, block );
+
+		// Act
+		await changeTextOfTextInput(
+			await screen.getByPlaceholderText( 'Add an anchor' ),
+			'my-anchor'
+		);
+
+		// Assert
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+} );

package/src/hooks/use-bindings-attributes.js

@@ -1,15 +1,16 @@
 /**
  * WordPress dependencies
  */
-import { getBlockType } from '@wordpress/blocks';
+import { getBlockType, store as blocksStore } from '@wordpress/blocks';
 import { createHigherOrderComponent } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
+import { useLayoutEffect, useCallback, useState } from '@wordpress/element';
 import { addFilter } from '@wordpress/hooks';
+import { RichTextData } from '@wordpress/rich-text';
+
 /**
  * Internal dependencies
  */
-import { store as blockEditorStore } from '../store';
-import { useBlockEditContext } from '../components/block-edit/context';
 import { unlock } from '../lock-unlock';
 
 /** @typedef {import('@wordpress/compose').WPHigherOrderComponent} WPHigherOrderComponent */
@@ -22,89 +23,238 @@ import { unlock } from '../lock-unlock';
  * @return {WPHigherOrderComponent} Higher-order component.
  */
 
-export const BLOCK_BINDINGS_ALLOWED_BLOCKS = {
+const BLOCK_BINDINGS_ALLOWED_BLOCKS = {
 	'core/paragraph': [ 'content' ],
 	'core/heading': [ 'content' ],
 	'core/image': [ 'url', 'title', 'alt' ],
 	'core/button': [ 'url', 'text', 'linkTarget' ],
 };
 
-const createEditFunctionWithBindingsAttribute = () =>
-	createHigherOrderComponent(
-		( BlockEdit ) => ( props ) => {
-			const { clientId, name: blockName } = useBlockEditContext();
-			const { getBlockBindingsSource } = unlock(
-				useSelect( blockEditorStore )
-			);
-			const { getBlockAttributes } = useSelect( blockEditorStore );
-
-			const updatedAttributes = getBlockAttributes( clientId );
-			if ( updatedAttributes?.metadata?.bindings ) {
-				Object.entries( updatedAttributes.metadata.bindings ).forEach(
-					( [ attributeName, settings ] ) => {
-						const source = getBlockBindingsSource(
-							settings.source
-						);
-
-						if ( source && source.useSource ) {
-							// Second argument (`updateMetaValue`) will be used to update the value in the future.
-							const {
-								placeholder,
-								useValue: [ metaValue = null ] = [],
-							} = source.useSource( props, settings.args );
-
-							if ( placeholder && ! metaValue ) {
-								// If the attribute is `src` or `href`, a placeholder can't be used because it is not a valid url.
-								// Adding this workaround until attributes and metadata fields types are improved and include `url`.
-								const htmlAttribute =
-									getBlockType( blockName ).attributes[
-										attributeName
-									].attribute;
-								if (
-									htmlAttribute === 'src' ||
-									htmlAttribute === 'href'
-								) {
-									updatedAttributes[ attributeName ] = null;
-								} else {
-									updatedAttributes[ attributeName ] =
-										placeholder;
-								}
-							}
-
-							if ( metaValue ) {
-								updatedAttributes[ attributeName ] = metaValue;
-							}
-						}
-					}
-				);
+/**
+ * Based on the given block name,
+ * check if it is possible to bind the block.
+ *
+ * @param {string} blockName - The block name.
+ * @return {boolean} Whether it is possible to bind the block to sources.
+ */
+export function canBindBlock( blockName ) {
+	return blockName in BLOCK_BINDINGS_ALLOWED_BLOCKS;
+}
+
+/**
+ * Based on the given block name and attribute name,
+ * check if it is possible to bind the block attribute.
+ *
+ * @param {string} blockName     - The block name.
+ * @param {string} attributeName - The attribute name.
+ * @return {boolean} Whether it is possible to bind the block attribute.
+ */
+export function canBindAttribute( blockName, attributeName ) {
+	return (
+		canBindBlock( blockName ) &&
+		BLOCK_BINDINGS_ALLOWED_BLOCKS[ blockName ].includes( attributeName )
+	);
+}
+
+/**
+ * This component is responsible for detecting and
+ * propagating data changes from the source to the block.
+ *
+ * @param {Object}   props                   - The component props.
+ * @param {string}   props.attrName          - The attribute name.
+ * @param {Object}   props.blockProps        - The block props with bound attribute.
+ * @param {Object}   props.source            - Source handler.
+ * @param {Object}   props.args              - The arguments to pass to the source.
+ * @param {Function} props.onPropValueChange - The function to call when the attribute value changes.
+ * @return {null}                              Data-handling component. Render nothing.
+ */
+const BindingConnector = ( {
+	args,
+	attrName,
+	blockProps,
+	source,
+	onPropValueChange,
+} ) => {
+	const { placeholder, value: propValue } = source.useSource(
+		blockProps,
+		args
+	);
+
+	const { name: blockName } = blockProps;
+	const attrValue = blockProps.attributes[ attrName ];
+
+	const updateBoundAttibute = useCallback(
+		( newAttrValue, prevAttrValue ) => {
+			/*
+			 * If the attribute is a RichTextData instance,
+			 * (core/paragraph, core/heading, core/button, etc.)
+			 * compare its HTML representation with the new value.
+			 *
+			 * To do: it looks like a workaround.
+			 * Consider improving the attribute and metadata fields types.
+			 */
+			if ( prevAttrValue instanceof RichTextData ) {
+				// Bail early if the Rich Text value is the same.
+				if ( prevAttrValue.toHTMLString() === newAttrValue ) {
+					return;
+				}
+
+				/*
+				 * To preserve the value type,
+				 * convert the new value to a RichTextData instance.
+				 */
+				newAttrValue = RichTextData.fromHTMLString( newAttrValue );
+			}
+
+			if ( prevAttrValue === newAttrValue ) {
+				return;
 			}
 
-			return (
+			onPropValueChange( { [ attrName ]: newAttrValue } );
+		},
+		[ attrName, onPropValueChange ]
+	);
+
+	useLayoutEffect( () => {
+		if ( typeof propValue !== 'undefined' ) {
+			updateBoundAttibute( propValue, attrValue );
+		} else if ( placeholder ) {
+			/*
+			 * Placeholder fallback.
+			 * If the attribute is `src` or `href`,
+			 * a placeholder can't be used because it is not a valid url.
+			 * Adding this workaround until
+			 * attributes and metadata fields types are improved and include `url`.
+			 */
+			const htmlAttribute =
+				getBlockType( blockName ).attributes[ attrName ].attribute;
+
+			if ( htmlAttribute === 'src' || htmlAttribute === 'href' ) {
+				updateBoundAttibute( null );
+				return;
+			}
+
+			updateBoundAttibute( placeholder );
+		}
+	}, [
+		updateBoundAttibute,
+		propValue,
+		attrValue,
+		placeholder,
+		blockName,
+		attrName,
+	] );
+
+	return null;
+};
+
+/**
+ * BlockBindingBridge acts like a component wrapper
+ * that connects the bound attributes of a block
+ * to the source handlers.
+ * For this, it creates a BindingConnector for each bound attribute.
+ *
+ * @param {Object}   props                   - The component props.
+ * @param {Object}   props.blockProps        - The BlockEdit props object.
+ * @param {Object}   props.bindings          - The block bindings settings.
+ * @param {Function} props.onPropValueChange - The function to call when the attribute value changes.
+ * @return {null}                              Data-handling component. Render nothing.
+ */
+function BlockBindingBridge( { blockProps, bindings, onPropValueChange } ) {
+	const blockBindingsSources = unlock(
+		useSelect( blocksStore )
+	).getAllBlockBindingsSources();
+
+	return (
+		<>
+			{ Object.entries( bindings ).map(
+				( [ attrName, boundAttribute ] ) => {
+					// Bail early if the block doesn't have a valid source handler.
+					const source =
+						blockBindingsSources[ boundAttribute.source ];
+					if ( ! source?.useSource ) {
+						return null;
+					}
+
+					return (
+						<BindingConnector
+							key={ attrName }
+							attrName={ attrName }
+							source={ source }
+							blockProps={ blockProps }
+							args={ boundAttribute.args }
+							onPropValueChange={ onPropValueChange }
+						/>
+					);
+				}
+			) }
+		</>
+	);
+}
+
+const withBlockBindingSupport = createHigherOrderComponent(
+	( BlockEdit ) => ( props ) => {
+		/*
+		 * Collect and update the bound attributes
+		 * in a separate state.
+		 */
+		const [ boundAttributes, setBoundAttributes ] = useState( {} );
+		const updateBoundAttributes = useCallback(
+			( newAttributes ) =>
+				setBoundAttributes( ( prev ) => ( {
+					...prev,
+					...newAttributes,
+				} ) ),
+			[]
+		);
+
+		/*
+		 * Create binding object filtering
+		 * only the attributes that can be bound.
+		 */
+		const bindings = Object.fromEntries(
+			Object.entries( props.attributes.metadata?.bindings || {} ).filter(
+				( [ attrName ] ) => canBindAttribute( props.name, attrName )
+			)
+		);
+
+		return (
+			<>
+				{ Object.keys( bindings ).length > 0 && (
+					<BlockBindingBridge
+						blockProps={ props }
+						bindings={ bindings }
+						onPropValueChange={ updateBoundAttributes }
+					/>
+				) }
+
 				<BlockEdit
-					key="edit"
 					{ ...props }
-					attributes={ updatedAttributes }
+					attributes={ { ...props.attributes, ...boundAttributes } }
 				/>
-			);
-		},
-		'useBoundAttributes'
-	);
+			</>
+		);
+	},
+	'withBlockBindingSupport'
+);
 
 /**
  * Filters a registered block's settings to enhance a block's `edit` component
  * to upgrade bound attributes.
  *
- * @param {WPBlockSettings} settings Registered block settings.
- *
+ * @param {WPBlockSettings} settings - Registered block settings.
+ * @param {string}          name     - Block name.
  * @return {WPBlockSettings} Filtered block settings.
  */
-function shimAttributeSource( settings ) {
-	if ( ! ( settings.name in BLOCK_BINDINGS_ALLOWED_BLOCKS ) ) {
+function shimAttributeSource( settings, name ) {
+	if ( ! canBindBlock( name ) ) {
 		return settings;
 	}
-	settings.edit = createEditFunctionWithBindingsAttribute()( settings.edit );
 
-	return settings;
+	return {
+		...settings,
+		edit: withBlockBindingSupport( settings.edit ),
+	};
 }
 
 addFilter(

package/src/hooks/use-typography-props.js

@@ -13,10 +13,7 @@ import { privateApis as componentsPrivateApis } from '@wordpress/components';
  */
 import { getInlineStyles } from './style';
 import { getFontSizeClass } from '../components/font-sizes';
-import {
-	getTypographyFontSizeValue,
-	getFluidTypographyOptionsFromSettings,
-} from '../components/global-styles/typography-utils';
+import { getTypographyFontSizeValue } from '../components/global-styles/typography-utils';
 import { unlock } from '../lock-unlock';
 
 /*
@@ -36,14 +33,11 @@ import { unlock } from '../lock-unlock';
 export function getTypographyClassesAndStyles( attributes, settings ) {
 	const { kebabCase } = unlock( componentsPrivateApis );
 	let typographyStyles = attributes?.style?.typography || {};
-	const fluidTypographySettings =
-		getFluidTypographyOptionsFromSettings( settings );
-
 	typographyStyles = {
 		...typographyStyles,
 		fontSize: getTypographyFontSizeValue(
 			{ size: attributes?.style?.typography?.fontSize },
-			fluidTypographySettings
+			settings
 		),
 	};
 

package/src/layouts/grid.js

@@ -23,6 +23,7 @@ import { appendSelectors, getBlockGapCSS } from './utils';
 import { getGapCSSValue } from '../hooks/gap';
 import { shouldSkipSerialization } from '../hooks/utils';
 import { LAYOUT_DEFINITIONS } from './definitions';
+import { GridVisualizer } from '../components/grid-visualizer';
 
 const RANGE_CONTROL_MAX_VALUES = {
 	px: 600,
@@ -67,6 +68,7 @@ export default {
 	inspectorControls: function GridLayoutInspectorControls( {
 		layout = {},
 		onChange,
+		clientId,
 	} ) {
 		return (
 			<>
@@ -85,10 +87,13 @@ export default {
 						onChange={ onChange }
 					/>
 				) }
+				{ window.__experimentalEnableGridInteractivity && (
+					<GridVisualizer clientId={ clientId } />
+				) }
 			</>
 		);
 	},
-	toolBarControls: function DefaultLayoutToolbarControls() {
+	toolBarControls: function GridLayoutToolbarControls() {
 		return null;
 	},
 	getLayoutStyle: function getLayoutStyle( {
@@ -305,11 +310,11 @@ function GridLayoutTypeControl( { layout, onChange } ) {
 
 	return (
 		<ToggleGroupControl
-			__nextHasNoMarginBottom={ true }
+			__nextHasNoMarginBottom
 			label={ __( 'Type' ) }
 			value={ isManual }
 			onChange={ onChangeType }
-			isBlock={ true }
+			isBlock
 		>
 			<ToggleGroupControlOption
 				key={ 'auto' }

package/src/private-apis.js

@@ -10,7 +10,7 @@ import { ComposedPrivateInserter as PrivateInserter } from './components/inserte
 import { default as PrivateQuickInserter } from './components/inserter/quick-inserter';
 import { PrivateListView } from './components/list-view';
 import BlockInfo from './components/block-info-slot-fill';
-import { useCanBlockToolbarBeFocused } from './utils/use-can-block-toolbar-be-focused';
+import { useShowBlockTools } from './components/block-tools/use-show-block-tools';
 import { cleanEmptyObject, useStyleOverride } from './hooks/utils';
 import BlockQuickNavigation from './components/block-quick-navigation';
 import { LayoutStyle } from './components/block-list/layout';
@@ -27,6 +27,8 @@ import { ExperimentalBlockCanvas } from './components/block-canvas';
 import { getDuotoneFilter } from './components/duotone/utils';
 import { useFlashEditableBlocks } from './components/use-flash-editable-blocks';
 import { selectBlockPatternsKey } from './store/private-keys';
+import { requiresWrapperOnCopy } from './components/writing-flow/utils';
+import { PrivateRichText } from './components/rich-text/';
 
 /**
  * Private @wordpress/block-editor APIs.
@@ -43,7 +45,7 @@ lock( privateApis, {
 	PrivateListView,
 	ResizableBoxPopover,
 	BlockInfo,
-	useCanBlockToolbarBeFocused,
+	useShowBlockTools,
 	cleanEmptyObject,
 	useStyleOverride,
 	BlockQuickNavigation,
@@ -58,4 +60,6 @@ lock( privateApis, {
 	usesContextKey,
 	useFlashEditableBlocks,
 	selectBlockPatternsKey,
+	requiresWrapperOnCopy,
+	PrivateRichText,
 } );

package/src/private-apis.native.js

@@ -3,6 +3,7 @@
  */
 import * as globalStyles from './components/global-styles';
 import { ExperimentalBlockEditorProvider } from './components/provider';
+import { getRichTextValues } from './components/rich-text/get-rich-text-values';
 import { lock } from './lock-unlock';
 
 /**
@@ -12,4 +13,5 @@ export const privateApis = {};
 lock( privateApis, {
 	...globalStyles,
 	ExperimentalBlockEditorProvider,
+	getRichTextValues,
 } );