@wordpress/block-editor 8.3.0 → 8.5.0

package/src/components/writing-flow/use-selection-observer.js

@@ -0,0 +1,153 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useRefEffect } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import { getBlockClientId } from '../../utils/dom';
+
+/**
+ * Extract the selection start node from the selection. When the anchor node is
+ * not a text node, the selection offset is the index of a child node.
+ *
+ * @param {Selection} selection The selection.
+ *
+ * @return {Element} The selection start node.
+ */
+function extractSelectionStartNode( selection ) {
+	const { anchorNode, anchorOffset } = selection;
+
+	if ( anchorNode.nodeType === anchorNode.TEXT_NODE ) {
+		return anchorNode;
+	}
+
+	return anchorNode.childNodes[ anchorOffset ];
+}
+
+/**
+ * Extract the selection end node from the selection. When the focus node is not
+ * a text node, the selection offset is the index of a child node. The selection
+ * reaches up to but excluding that child node.
+ *
+ * @param {Selection} selection The selection.
+ *
+ * @return {Element} The selection start node.
+ */
+function extractSelectionEndNode( selection ) {
+	const { focusNode, focusOffset } = selection;
+
+	if ( focusNode.nodeType === focusNode.TEXT_NODE ) {
+		return focusNode;
+	}
+
+	return focusNode.childNodes[ focusOffset - 1 ];
+}
+
+function findDepth( a, b ) {
+	let depth = 0;
+
+	while ( a[ depth ] === b[ depth ] ) {
+		depth++;
+	}
+
+	return depth;
+}
+
+/**
+ * Sets the `contenteditable` wrapper element to `value`.
+ *
+ * @param {HTMLElement} node  Block element.
+ * @param {boolean}     value `contentEditable` value (true or false)
+ */
+function setContentEditableWrapper( node, value ) {
+	node.contentEditable = value;
+	// Firefox doesn't automatically move focus.
+	if ( value ) node.focus();
+}
+
+/**
+ * Sets a multi-selection based on the native selection across blocks.
+ */
+export default function useSelectionObserver() {
+	const { multiSelect, selectBlock, selectionChange } = useDispatch(
+		blockEditorStore
+	);
+	const { getBlockParents } = useSelect( blockEditorStore );
+	return useRefEffect(
+		( node ) => {
+			const { ownerDocument } = node;
+			const { defaultView } = ownerDocument;
+
+			function onSelectionChange() {
+				const selection = defaultView.getSelection();
+
+				// If no selection is found, end multi selection and disable the
+				// contentEditable wrapper.
+				if ( ! selection.rangeCount || selection.isCollapsed ) {
+					setContentEditableWrapper( node, false );
+					return;
+				}
+
+				const clientId = getBlockClientId(
+					extractSelectionStartNode( selection )
+				);
+				const endClientId = getBlockClientId(
+					extractSelectionEndNode( selection )
+				);
+				const isSingularSelection = clientId === endClientId;
+
+				if ( isSingularSelection ) {
+					selectBlock( clientId );
+				} else {
+					const startPath = [
+						...getBlockParents( clientId ),
+						clientId,
+					];
+					const endPath = [
+						...getBlockParents( endClientId ),
+						endClientId,
+					];
+					const depth = findDepth( startPath, endPath );
+
+					multiSelect( startPath[ depth ], endPath[ depth ] );
+				}
+			}
+
+			function addListeners() {
+				ownerDocument.addEventListener(
+					'selectionchange',
+					onSelectionChange
+				);
+				defaultView.addEventListener( 'mouseup', onSelectionChange );
+			}
+
+			function removeListeners() {
+				ownerDocument.removeEventListener(
+					'selectionchange',
+					onSelectionChange
+				);
+				defaultView.removeEventListener( 'mouseup', onSelectionChange );
+			}
+
+			function resetListeners() {
+				removeListeners();
+				addListeners();
+			}
+
+			addListeners();
+			// We must allow rich text to set selection first. This ensures that
+			// our `selectionchange` listener is always reset to be called after
+			// the rich text one.
+			node.addEventListener( 'focusin', resetListeners );
+			return () => {
+				removeListeners();
+				node.removeEventListener( 'focusin', resetListeners );
+			};
+		},
+		[ multiSelect, selectBlock, selectionChange, getBlockParents ]
+	);
+}

package/src/components/writing-flow/use-tab-nav.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { focus } from '@wordpress/dom';
+import { focus, isFormElement } from '@wordpress/dom';
 import { TAB, ESCAPE } from '@wordpress/keycodes';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useRefEffect, useMergeRefs } from '@wordpress/compose';
@@ -12,16 +12,6 @@ import { useRef } from '@wordpress/element';
  */
 import { store as blockEditorStore } from '../../store';
 
-function isFormElement( element ) {
-	const { tagName } = element;
-	return (
-		tagName === 'INPUT' ||
-		tagName === 'BUTTON' ||
-		tagName === 'SELECT' ||
-		tagName === 'TEXTAREA'
-	);
-}
-
 export default function useTabNav() {
 	const container = useRef();
 	const focusCaptureBeforeRef = useRef();

package/src/hooks/anchor.js

@@ -25,6 +25,13 @@ import { InspectorControls } from '../components';
  */
 const ANCHOR_REGEX = /[\s#]/g;
 
+const ANCHOR_SCHEMA = {
+	type: 'string',
+	source: 'attribute',
+	attribute: 'id',
+	selector: '*',
+};
+
 /**
  * Filters registered block settings, extending attributes with anchor using ID
  * of the first node.
@@ -42,12 +49,7 @@ export function addAttribute( settings ) {
 		// Gracefully handle if settings.attributes is undefined.
 		settings.attributes = {
 			...settings.attributes,
-			anchor: {
-				type: 'string',
-				source: 'attribute',
-				attribute: 'id',
-				selector: '*',
-			},
+			anchor: ANCHOR_SCHEMA,
 		};
 	}
 

package/src/hooks/border-color.js

@@ -23,11 +23,11 @@ import {
 } from '../components/colors';
 import useSetting from '../components/use-setting';
 import {
+	BORDER_SUPPORT_KEY,
 	hasBorderSupport,
 	removeBorderAttribute,
-	shouldSkipSerialization,
 } from './border';
-import { cleanEmptyObject } from './utils';
+import { cleanEmptyObject, shouldSkipSerialization } from './utils';
 
 // Defining empty array here instead of inline avoids unnecessary re-renders of
 // color control.
@@ -200,7 +200,7 @@ function addAttributes( settings ) {
 function addSaveProps( props, blockType, attributes ) {
 	if (
 		! hasBorderSupport( blockType, 'color' ) ||
-		shouldSkipSerialization( blockType )
+		shouldSkipSerialization( blockType, BORDER_SUPPORT_KEY, 'color' )
 	) {
 		return props;
 	}
@@ -231,7 +231,7 @@ function addSaveProps( props, blockType, attributes ) {
 function addEditProps( settings ) {
 	if (
 		! hasBorderSupport( settings, 'color' ) ||
-		shouldSkipSerialization( settings )
+		shouldSkipSerialization( settings, BORDER_SUPPORT_KEY, 'color' )
 	) {
 		return settings;
 	}
@@ -266,7 +266,7 @@ export const withBorderColorPaletteStyles = createHigherOrderComponent(
 
 		if (
 			! hasBorderSupport( name, 'color' ) ||
-			shouldSkipSerialization( name )
+			shouldSkipSerialization( name, BORDER_SUPPORT_KEY, 'color' )
 		) {
 			return <BlockListBlock { ...props } />;
 		}

package/src/hooks/border.js

@@ -171,19 +171,6 @@ export function hasBorderSupport( blockName, feature = 'any' ) {
 	return !! support?.[ feature ];
 }
 
-/**
- * Check whether serialization of border classes and styles should be skipped.
- *
- * @param {string|Object} blockType Block name or block type object.
- *
- * @return {boolean} Whether serialization of border properties should occur.
- */
-export function shouldSkipSerialization( blockType ) {
-	const support = getBlockSupport( blockType, BORDER_SUPPORT_KEY );
-
-	return support?.__experimentalSkipSerialization;
-}
-
 /**
  * Returns a new style object where the specified border attribute has been
  * removed.

package/src/hooks/color.js

@@ -26,7 +26,12 @@ import {
 	getGradientValueBySlug,
 	getGradientSlugByValue,
 } from '../components/gradients';
-import { cleanEmptyObject, transformStyles, immutableSet } from './utils';
+import {
+	cleanEmptyObject,
+	transformStyles,
+	immutableSet,
+	shouldSkipSerialization,
+} from './utils';
 import ColorPanel from './color-panel';
 import useSetting from '../components/use-setting';
 
@@ -43,12 +48,6 @@ const hasColorSupport = ( blockType ) => {
 	);
 };
 
-const shouldSkipSerialization = ( blockType ) => {
-	const colorSupport = getBlockSupport( blockType, COLOR_SUPPORT_KEY );
-
-	return colorSupport?.__experimentalSkipSerialization;
-};
-
 const hasLinkColorSupport = ( blockType ) => {
 	if ( Platform.OS !== 'web' ) {
 		return false;
@@ -248,7 +247,7 @@ function addAttributes( settings ) {
 export function addSaveProps( props, blockType, attributes ) {
 	if (
 		! hasColorSupport( blockType ) ||
-		shouldSkipSerialization( blockType )
+		shouldSkipSerialization( blockType, COLOR_SUPPORT_KEY )
 	) {
 		return props;
 	}
@@ -258,12 +257,31 @@ export function addSaveProps( props, blockType, attributes ) {
 	// I'd have preferred to avoid the "style" attribute usage here
 	const { backgroundColor, textColor, gradient, style } = attributes;
 
-	const backgroundClass = getColorClassName(
-		'background-color',
-		backgroundColor
-	);
-	const gradientClass = __experimentalGetGradientClass( gradient );
-	const textClass = getColorClassName( 'color', textColor );
+	const shouldSerialize = ( feature ) =>
+		! shouldSkipSerialization( blockType, COLOR_SUPPORT_KEY, feature );
+
+	// Primary color classes must come before the `has-text-color`,
+	// `has-background` and `has-link-color` classes to maintain backwards
+	// compatibility and avoid block invalidations.
+	const textClass = shouldSerialize( 'text' )
+		? getColorClassName( 'color', textColor )
+		: undefined;
+
+	const gradientClass = shouldSerialize( 'gradients' )
+		? __experimentalGetGradientClass( gradient )
+		: undefined;
+
+	const backgroundClass = shouldSerialize( 'background' )
+		? getColorClassName( 'background-color', backgroundColor )
+		: undefined;
+
+	const serializeHasBackground =
+		shouldSerialize( 'background' ) || shouldSerialize( 'gradients' );
+	const hasBackground =
+		backgroundColor ||
+		style?.color?.background ||
+		( hasGradient && ( gradient || style?.color?.gradient ) );
+
 	const newClassName = classnames(
 		props.className,
 		textClass,
@@ -273,12 +291,12 @@ export function addSaveProps( props, blockType, attributes ) {
 			[ backgroundClass ]:
 				( ! hasGradient || ! style?.color?.gradient ) &&
 				!! backgroundClass,
-			'has-text-color': textColor || style?.color?.text,
-			'has-background':
-				backgroundColor ||
-				style?.color?.background ||
-				( hasGradient && ( gradient || style?.color?.gradient ) ),
-			'has-link-color': style?.elements?.link?.color,
+			'has-text-color':
+				shouldSerialize( 'text' ) &&
+				( textColor || style?.color?.text ),
+			'has-background': serializeHasBackground && hasBackground,
+			'has-link-color':
+				shouldSerialize( 'link' ) && style?.elements?.link?.color,
 		}
 	);
 	props.className = newClassName ? newClassName : undefined;
@@ -297,7 +315,7 @@ export function addSaveProps( props, blockType, attributes ) {
 export function addEditProps( settings ) {
 	if (
 		! hasColorSupport( settings ) ||
-		shouldSkipSerialization( settings )
+		shouldSkipSerialization( settings, COLOR_SUPPORT_KEY )
 	) {
 		return settings;
 	}
@@ -589,18 +607,27 @@ export const withColorPaletteStyles = createHigherOrderComponent(
 			],
 			[ userPalette, themePalette, defaultPalette ]
 		);
-		if ( ! hasColorSupport( name ) || shouldSkipSerialization( name ) ) {
+		if (
+			! hasColorSupport( name ) ||
+			shouldSkipSerialization( name, COLOR_SUPPORT_KEY )
+		) {
 			return <BlockListBlock { ...props } />;
 		}
 		const extraStyles = {};
 
-		if ( textColor ) {
+		if (
+			textColor &&
+			! shouldSkipSerialization( name, COLOR_SUPPORT_KEY, 'text' )
+		) {
 			extraStyles.color = getColorObjectByAttributeValues(
 				colors,
 				textColor
 			)?.color;
 		}
-		if ( backgroundColor ) {
+		if (
+			backgroundColor &&
+			! shouldSkipSerialization( name, COLOR_SUPPORT_KEY, 'background' )
+		) {
 			extraStyles.backgroundColor = getColorObjectByAttributeValues(
 				colors,
 				backgroundColor

package/src/hooks/font-family.js

@@ -15,6 +15,8 @@ import TokenList from '@wordpress/token-list';
  */
 import useSetting from '../components/use-setting';
 import FontFamilyControl from '../components/font-family';
+import { shouldSkipSerialization } from './utils';
+import { TYPOGRAPHY_SUPPORT_KEY } from './typography';
 
 export const FONT_FAMILY_SUPPORT_KEY = 'typography.__experimentalFontFamily';
 
@@ -56,9 +58,10 @@ function addSaveProps( props, blockType, attributes ) {
 	}
 
 	if (
-		hasBlockSupport(
+		shouldSkipSerialization(
 			blockType,
-			'typography.__experimentalSkipSerialization'
+			TYPOGRAPHY_SUPPORT_KEY,
+			'fontFamily'
 		)
 	) {
 		return props;

package/src/hooks/font-size.js

@@ -15,7 +15,12 @@ import {
 	getFontSizeObjectByValue,
 	FontSizePicker,
 } from '../components/font-sizes';
-import { cleanEmptyObject, transformStyles } from './utils';
+import { TYPOGRAPHY_SUPPORT_KEY } from './typography';
+import {
+	cleanEmptyObject,
+	transformStyles,
+	shouldSkipSerialization,
+} from './utils';
 import useSetting from '../components/use-setting';
 
 export const FONT_SIZE_SUPPORT_KEY = 'typography.fontSize';
@@ -60,10 +65,7 @@ function addSaveProps( props, blockType, attributes ) {
 	}
 
 	if (
-		hasBlockSupport(
-			blockType,
-			'typography.__experimentalSkipSerialization'
-		)
+		shouldSkipSerialization( blockType, TYPOGRAPHY_SUPPORT_KEY, 'fontSize' )
 	) {
 		return props;
 	}
@@ -223,9 +225,10 @@ const withFontSizeInlineStyles = createHigherOrderComponent(
 		// and does have a class to extract the font size from.
 		if (
 			! hasBlockSupport( blockName, FONT_SIZE_SUPPORT_KEY ) ||
-			hasBlockSupport(
+			shouldSkipSerialization(
 				blockName,
-				'typography.__experimentalSkipSerialization'
+				TYPOGRAPHY_SUPPORT_KEY,
+				'fontSize'
 			) ||
 			! fontSize ||
 			style?.typography?.fontSize

package/src/hooks/gap.js

@@ -6,6 +6,7 @@ import { Platform } from '@wordpress/element';
 import { getBlockSupport } from '@wordpress/blocks';
 import {
 	__experimentalUseCustomUnits as useCustomUnits,
+	__experimentalBoxControl as BoxControl,
 	__experimentalUnitControl as UnitControl,
 } from '@wordpress/components';
 
@@ -14,14 +15,14 @@ import {
  */
 import { __unstableUseBlockRef as useBlockRef } from '../components/block-list/use-block-props/use-block-refs';
 import useSetting from '../components/use-setting';
-import { SPACING_SUPPORT_KEY } from './dimensions';
+import { AXIAL_SIDES, SPACING_SUPPORT_KEY, useCustomSides } 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.
+ * @return {boolean}                Whether there is support.
  */
 export function hasGapSupport( blockType ) {
 	const support = getBlockSupport( blockType, SPACING_SUPPORT_KEY );
@@ -38,6 +39,47 @@ export function hasGapValue( props ) {
 	return props.attributes.style?.spacing?.blockGap !== undefined;
 }
 
+/**
+ * Returns a BoxControl object value from a given blockGap style value.
+ * The string check is for backwards compatibility before Gutenberg supported
+ * split gap values (row and column) and the value was a string n + unit.
+ *
+ * @param {string? | Object?} blockGapValue A block gap string or axial object value, e.g., '10px' or { top: '10px', left: '10px'}.
+ * @return {Object|null}                    A value to pass to the BoxControl component.
+ */
+export function getGapBoxControlValueFromStyle( blockGapValue ) {
+	if ( ! blockGapValue ) {
+		return null;
+	}
+
+	const isValueString = typeof blockGapValue === 'string';
+	return {
+		top: isValueString ? blockGapValue : blockGapValue?.top,
+		left: isValueString ? blockGapValue : blockGapValue?.left,
+	};
+}
+
+/**
+ * Returns a CSS value for the `gap` property from a given blockGap style.
+ *
+ * @param {string? | Object?} blockGapValue A block gap string or axial object value, e.g., '10px' or { top: '10px', left: '10px'}.
+ * @param {string?}           defaultValue  A default gap value.
+ * @return {string|null}                    The concatenated gap value (row and column).
+ */
+export function getGapCSSValue( blockGapValue, defaultValue = '0' ) {
+	const blockGapBoxControlValue = getGapBoxControlValueFromStyle(
+		blockGapValue
+	);
+	if ( ! blockGapBoxControlValue ) {
+		return null;
+	}
+
+	const row = blockGapBoxControlValue?.top || defaultValue;
+	const column = blockGapBoxControlValue?.left || defaultValue;
+
+	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.
@@ -82,6 +124,7 @@ export function GapEdit( props ) {
 	const {
 		clientId,
 		attributes: { style },
+		name: blockName,
 		setAttributes,
 	} = props;
 
@@ -94,19 +137,29 @@ export function GapEdit( props ) {
 			'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 ) };
+		}
+
 		const newStyle = {
 			...style,
 			spacing: {
 				...style?.spacing,
-				blockGap: next,
+				blockGap,
 			},
 		};
 
@@ -128,17 +181,43 @@ export function GapEdit( props ) {
 		}
 	};
 
+	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,
+		  }
+		: gapValue?.top;
+
 	return Platform.select( {
 		web: (
 			<>
-				<UnitControl
-					label={ __( 'Block spacing' ) }
-					__unstableInputWidth="80px"
-					min={ 0 }
-					onChange={ onChange }
-					units={ units }
-					value={ style?.spacing?.blockGap }
-				/>
+				{ 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 }
+					/>
+				) }
 			</>
 		),
 		native: null,

package/src/hooks/layout.js

@@ -56,6 +56,15 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) {
 		return null;
 	}
 
+	// Only show the inherit toggle if it's supported,
+	// a default theme layout is set (e.g. one that provides `contentSize` and/or `wideSize` values),
+	// and that the default / flow layout type is in use, as this is the only one that supports inheritance.
+	const showInheritToggle = !! (
+		allowInheriting &&
+		!! defaultThemeLayout &&
+		( ! layout?.type || layout?.type === 'default' || layout?.inherit )
+	);
+
 	const usedLayout = layout || defaultBlockLayout || {};
 	const { inherit = false, type = 'default' } = usedLayout;
 	/**
@@ -77,7 +86,7 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) {
 		<>
 			<InspectorControls>
 				<PanelBody title={ __( 'Layout' ) }>
-					{ allowInheriting && !! defaultThemeLayout && (
+					{ showInheritToggle && (
 						<ToggleControl
 							label={ __( 'Inherit default layout' ) }
 							checked={ !! inherit }
@@ -213,6 +222,7 @@ export const withLayoutStyles = createHigherOrderComponent(
 					element &&
 					createPortal(
 						<LayoutStyle
+							blockName={ name }
 							selector={ `.wp-container-${ id }` }
 							layout={ usedLayout }
 							style={ attributes?.style }