@wordpress/block-editor 8.3.1 → 8.4.0

package/src/components/list-view/branch.js

@@ -23,39 +23,59 @@ import { isClientIdSelected } from './utils';
  * When a block is collapsed, we do not count their children as part of that total. In the current drag
  * implementation dragged blocks and their children are not counted.
  *
- * @param {Object} block            block tree
- * @param {Object} expandedState    state that notes which branches are collapsed
- * @param {Array}  draggedClientIds a list of dragged client ids
+ * @param {Object}  block               block tree
+ * @param {Object}  expandedState       state that notes which branches are collapsed
+ * @param {Array}   draggedClientIds    a list of dragged client ids
+ * @param {boolean} isExpandedByDefault flag to determine the default fallback expanded state.
  * @return {number} block count
  */
-function countBlocks( block, expandedState, draggedClientIds ) {
+function countBlocks(
+	block,
+	expandedState,
+	draggedClientIds,
+	isExpandedByDefault
+) {
 	const isDragged = draggedClientIds?.includes( block.clientId );
 	if ( isDragged ) {
 		return 0;
 	}
-	const isExpanded = expandedState[ block.clientId ] ?? true;
+	const isExpanded = expandedState[ block.clientId ] ?? isExpandedByDefault;
+
 	if ( isExpanded ) {
 		return (
 			1 +
 			block.innerBlocks.reduce(
-				countReducer( expandedState, draggedClientIds ),
+				countReducer(
+					expandedState,
+					draggedClientIds,
+					isExpandedByDefault
+				),
 				0
 			)
 		);
 	}
 	return 1;
 }
-const countReducer = ( expandedState, draggedClientIds ) => (
-	count,
-	block
-) => {
+const countReducer = (
+	expandedState,
+	draggedClientIds,
+	isExpandedByDefault
+) => ( count, block ) => {
 	const isDragged = draggedClientIds?.includes( block.clientId );
 	if ( isDragged ) {
 		return count;
 	}
-	const isExpanded = expandedState[ block.clientId ] ?? true;
+	const isExpanded = expandedState[ block.clientId ] ?? isExpandedByDefault;
 	if ( isExpanded && block.innerBlocks.length > 0 ) {
-		return count + countBlocks( block, expandedState, draggedClientIds );
+		return (
+			count +
+			countBlocks(
+				block,
+				expandedState,
+				draggedClientIds,
+				isExpandedByDefault
+			)
+		);
 	}
 	return count + 1;
 };
@@ -72,6 +92,7 @@ function ListViewBranch( props ) {
 		isBranchSelected = false,
 		listPosition = 0,
 		fixedListWindow,
+		expandNested = true,
 	} = props;
 
 	const {
@@ -93,14 +114,14 @@ function ListViewBranch( props ) {
 					nextPosition += countBlocks(
 						filteredBlocks[ index - 1 ],
 						expandedState,
-						draggedClientIds
+						draggedClientIds,
+						expandNested
 					);
 				}
 
 				const usesWindowing = __experimentalPersistentListViewFeatures;
 
 				const { itemInView } = fixedListWindow;
-
 				const blockInView =
 					! usesWindowing || itemInView( nextPosition );
 
@@ -113,7 +134,7 @@ function ListViewBranch( props ) {
 					showNestedBlocks && !! innerBlocks && !! innerBlocks.length;
 
 				const isExpanded = hasNestedBlocks
-					? expandedState[ clientId ] ?? true
+					? expandedState[ clientId ] ?? expandNested
 					: undefined;
 
 				const isDragged = !! draggedClientIds?.includes( clientId );
@@ -165,6 +186,7 @@ function ListViewBranch( props ) {
 								fixedListWindow={ fixedListWindow }
 								isBranchSelected={ isSelectedBranch }
 								selectedClientIds={ selectedClientIds }
+								expandNested={ expandNested }
 							/>
 						) }
 					</AsyncModeProvider>

package/src/components/list-view/index.js

@@ -59,6 +59,8 @@ export const BLOCK_LIST_ITEM_HEIGHT = 36;
  * @param {boolean} props.__experimentalFeatures                   Flag to enable experimental features.
  * @param {boolean} props.__experimentalPersistentListViewFeatures Flag to enable features for the Persistent List View experiment.
  * @param {boolean} props.__experimentalHideContainerBlockActions  Flag to hide actions of top level blocks (like core/widget-area)
+ * @param {string}  props.id                                       Unique identifier for the root list element (primarily for a11y purposes).
+ * @param {boolean} props.expandNested                             Flag to determine whether nested levels are expanded by default.
  * @param {Object}  ref                                            Forwarded ref
  */
 function ListView(
@@ -69,6 +71,8 @@ function ListView(
 		__experimentalHideContainerBlockActions,
 		showNestedBlocks,
 		showBlockMovers,
+		id,
+		expandNested = false,
 		...props
 	},
 	ref
@@ -205,6 +209,7 @@ function ListView(
 				blockDropTarget={ blockDropTarget }
 			/>
 			<TreeGrid
+				id={ id }
 				className="block-editor-list-view-tree"
 				aria-label={ __( 'Block navigation structure' ) }
 				ref={ treeGridRef }
@@ -220,6 +225,7 @@ function ListView(
 						showBlockMovers={ showBlockMovers }
 						fixedListWindow={ fixedListWindow }
 						selectedClientIds={ selectedClientIds }
+						expandNested={ expandNested }
 						{ ...props }
 					/>
 				</ListViewContext.Provider>

package/src/components/list-view/use-block-selection.js

@@ -10,7 +10,7 @@ import { speak } from '@wordpress/a11y';
 import { __, sprintf } from '@wordpress/i18n';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useCallback } from '@wordpress/element';
-import { UP, DOWN } from '@wordpress/keycodes';
+import { UP, DOWN, HOME, END } from '@wordpress/keycodes';
 import { store as blocksStore } from '@wordpress/blocks';
 
 /**
@@ -49,7 +49,10 @@ export default function useBlockSelection() {
 
 			const isKeyPress =
 				event.type === 'keydown' &&
-				( event.keyCode === UP || event.keyCode === DOWN );
+				( event.keyCode === UP ||
+					event.keyCode === DOWN ||
+					event.keyCode === HOME ||
+					event.keyCode === END );
 
 			// Handle clicking on a block when no blocks are selected, and return early.
 			if (
@@ -114,6 +117,16 @@ export default function useBlockSelection() {
 			// the total number of blocks deselected is greater than one.
 			const updatedSelectedBlocks = getSelectedBlockClientIds();
 
+			// If the selection is greater than 1 and the Home or End keys
+			// were used to generate the selection, then skip announcing the
+			// deselected blocks.
+			if (
+				( event.keyCode === HOME || event.keyCode === END ) &&
+				updatedSelectedBlocks.length > 1
+			) {
+				return;
+			}
+
 			const selectionDiff = difference(
 				selectedBlocks,
 				updatedSelectedBlocks

package/src/components/rich-text/index.js

@@ -330,6 +330,7 @@ function RichTextWrapper(
 				{ ...props }
 				{ ...autocompleteProps }
 				ref={ useMergeRefs( [
+					forwardedRef,
 					autocompleteProps.ref,
 					props.ref,
 					richTextRef,
@@ -371,7 +372,6 @@ function RichTextWrapper(
 						onSplitAtEnd,
 					} ),
 					anchorRef,
-					forwardedRef,
 				] ) }
 				contentEditable={ true }
 				suppressContentEditableWarning={ true }

package/src/components/rich-text/index.native.js

@@ -66,6 +66,8 @@ function RichTextWrapper(
 	{
 		children,
 		tagName,
+		start,
+		reversed,
 		value: originalValue,
 		onChange: originalOnChange,
 		isSelected: originalIsSelected,
@@ -214,8 +216,13 @@ function RichTextWrapper(
 	}
 
 	const onSelectionChange = useCallback(
-		( start, end ) => {
-			selectionChange( clientId, identifier, start, end );
+		( selectionChangeStart, selectionChangeEnd ) => {
+			selectionChange(
+				clientId,
+				identifier,
+				selectionChangeStart,
+				selectionChangeEnd
+			);
 		},
 		[ clientId, identifier ]
 	);
@@ -349,9 +356,11 @@ function RichTextWrapper(
 					onChange( insertLineSeparator( value ) );
 				}
 			} else {
-				const { text, start, end } = value;
+				const { text, start: splitStart, end: splitEnd } = value;
 				const canSplitAtEnd =
-					onSplitAtEnd && start === end && end === text.length;
+					onSplitAtEnd &&
+					splitStart === splitEnd &&
+					splitEnd === text.length;
 
 				if ( shiftKey || ( ! canSplit && ! canSplitAtEnd ) ) {
 					if ( ! disableLineBreaks ) {
@@ -530,15 +539,18 @@ function RichTextWrapper(
 				return;
 			}
 
-			const { start, text } = value;
-			const characterBefore = text.slice( start - 1, start );
+			const { start: startPosition, text } = value;
+			const characterBefore = text.slice(
+				startPosition - 1,
+				startPosition
+			);
 
 			// The character right before the caret must be a plain space.
 			if ( characterBefore !== ' ' ) {
 				return;
 			}
 
-			const trimmedTextBefore = text.slice( 0, start ).trim();
+			const trimmedTextBefore = text.slice( 0, startPosition ).trim();
 			const prefixTransforms = getBlockTransforms( 'from' ).filter(
 				( { type } ) => type === 'prefix'
 			);
@@ -553,7 +565,9 @@ function RichTextWrapper(
 				return;
 			}
 
-			const content = valueToFormat( slice( value, start, text.length ) );
+			const content = valueToFormat(
+				slice( value, startPosition, text.length )
+			);
 			const block = transformation.transform( content );
 
 			onReplace( [ block ] );
@@ -575,6 +589,8 @@ function RichTextWrapper(
 			selectionEnd={ selectionEnd }
 			onSelectionChange={ onSelectionChange }
 			tagName={ tagName }
+			start={ start }
+			reversed={ reversed }
 			placeholder={ placeholder }
 			allowedFormats={ adjustedAllowedFormats }
 			withoutInteractiveFormatting={ withoutInteractiveFormatting }

package/src/components/url-popover/image-url-input-ui.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { find, isEmpty, each, map } from 'lodash';
+import { find, map } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -80,38 +80,25 @@ const ImageURLInputUI = ( {
 		setIsOpen( false );
 	} );
 
-	const removeNewTabRel = ( currentRel ) => {
-		let newRel = currentRel;
-
-		if ( currentRel !== undefined && ! isEmpty( newRel ) ) {
-			if ( ! isEmpty( newRel ) ) {
-				each( NEW_TAB_REL, ( relVal ) => {
-					const regExp = new RegExp( '\\b' + relVal + '\\b', 'gi' );
-					newRel = newRel.replace( regExp, '' );
-				} );
-
-				// Only trim if NEW_TAB_REL values was replaced.
-				if ( newRel !== currentRel ) {
-					newRel = newRel.trim();
-				}
-
-				if ( isEmpty( newRel ) ) {
-					newRel = undefined;
-				}
-			}
-		}
-
-		return newRel;
-	};
-
 	const getUpdatedLinkTargetSettings = ( value ) => {
 		const newLinkTarget = value ? '_blank' : undefined;
 
 		let updatedRel;
-		if ( ! newLinkTarget && ! rel ) {
-			updatedRel = undefined;
+		if ( newLinkTarget ) {
+			const rels = ( rel ?? '' ).split( ' ' );
+			NEW_TAB_REL.forEach( ( relVal ) => {
+				if ( ! rels.includes( relVal ) ) {
+					rels.push( relVal );
+				}
+			} );
+			updatedRel = rels.join( ' ' );
 		} else {
-			updatedRel = removeNewTabRel( rel );
+			const rels = ( rel ?? '' )
+				.split( ' ' )
+				.filter(
+					( relVal ) => NEW_TAB_REL.includes( relVal ) === false
+				);
+			updatedRel = rels.length ? rels.join( ' ' ) : undefined;
 		}
 
 		return {
@@ -232,7 +219,7 @@ const ImageURLInputUI = ( {
 			/>
 			<TextControl
 				label={ __( 'Link Rel' ) }
-				value={ removeNewTabRel( rel ) || '' }
+				value={ rel ?? '' }
 				onChange={ onSetLinkRel }
 			/>
 			<TextControl

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/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,45 @@ export function hasGapValue( props ) {
 	return props.attributes.style?.spacing?.blockGap !== undefined;
 }
 
+/**
+ * Returns a BoxControl object value from a given blockGap style.
+ * 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?} rawBlockGapValue A style object.
+ * @return {Object?}                           A value to pass to the BoxControl component.
+ */
+export function getGapValueFromStyle( rawBlockGapValue ) {
+	if ( ! rawBlockGapValue ) {
+		return rawBlockGapValue;
+	}
+
+	const isValueString = typeof rawBlockGapValue === 'string';
+	return {
+		top: isValueString ? rawBlockGapValue : rawBlockGapValue?.top,
+		left: isValueString ? rawBlockGapValue : rawBlockGapValue?.left,
+	};
+}
+
+/**
+ * Returns a CSS value for the `gap` property from a given blockGap style.
+ *
+ * @param {string? | Object?} blockGapValue A style object.
+ * @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 = getGapValueFromStyle( 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 +122,7 @@ export function GapEdit( props ) {
 	const {
 		clientId,
 		attributes: { style },
+		name: blockName,
 		setAttributes,
 	} = props;
 
@@ -94,7 +135,7 @@ export function GapEdit( props ) {
 			'vw',
 		],
 	} );
-
+	const sides = useCustomSides( blockName, 'blockGap' );
 	const ref = useBlockRef( clientId );
 
 	if ( useIsGapDisabled( props ) ) {
@@ -106,7 +147,9 @@ export function GapEdit( props ) {
 			...style,
 			spacing: {
 				...style?.spacing,
-				blockGap: next,
+				blockGap: {
+					...getGapValueFromStyle( next ),
+				},
 			},
 		};
 
@@ -128,17 +171,45 @@ export function GapEdit( props ) {
 		}
 	};
 
+	const splitOnAxis =
+		sides && sides.some( ( side ) => AXIAL_SIDES.includes( side ) );
+	const gapValue = getGapValueFromStyle( 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/test/gap.js

@@ -0,0 +1,42 @@
+/**
+ * Internal dependencies
+ */
+import { getGapCSSValue } from '../gap';
+
+describe( 'gap', () => {
+	describe( 'getGapCSSValue()', () => {
+		it( 'should return `null` if argument is falsey', () => {
+			expect( getGapCSSValue( undefined ) ).toBeNull();
+			expect( getGapCSSValue( '' ) ).toBeNull();
+		} );
+
+		it( 'should return single value for gap if argument is valid string', () => {
+			expect( getGapCSSValue( '88rem' ) ).toEqual( '88rem' );
+		} );
+
+		it( 'should return single value for gap if row and column are the same', () => {
+			const blockGapValue = {
+				top: '88rem',
+				left: '88rem',
+			};
+			expect( getGapCSSValue( blockGapValue ) ).toEqual( '88rem' );
+		} );
+
+		it( 'should return shorthand value for gap if row and column are different', () => {
+			const blockGapValue = {
+				top: '88px',
+				left: '88rem',
+			};
+			expect( getGapCSSValue( blockGapValue ) ).toEqual( '88px 88rem' );
+		} );
+
+		it( 'should return default value if a top or left is missing', () => {
+			const blockGapValue = {
+				top: '88px',
+			};
+			expect( getGapCSSValue( blockGapValue, '1px' ) ).toEqual(
+				'88px 1px'
+			);
+		} );
+	} );
+} );

package/src/layouts/flex.js

@@ -16,6 +16,7 @@ import { Button, ToggleControl, Flex, FlexItem } from '@wordpress/components';
  * Internal dependencies
  */
 import { appendSelectors } from './utils';
+import { getGapCSSValue } from '../hooks/gap';
 import useSetting from '../components/use-setting';
 import { BlockControls, JustifyContentControl } from '../components';
 
@@ -42,8 +43,9 @@ export default {
 	inspectorControls: function FlexLayoutInspectorControls( {
 		layout = {},
 		onChange,
+		layoutBlockSupport = {},
 	} ) {
-		const { allowOrientation = true } = layout;
+		const { allowOrientation = true } = layoutBlockSupport;
 		return (
 			<>
 				<Flex>
@@ -89,7 +91,8 @@ export default {
 		const blockGapSupport = useSetting( 'spacing.blockGap' );
 		const hasBlockGapStylesSupport = blockGapSupport !== null;
 		const blockGapValue =
-			style?.spacing?.blockGap ?? 'var( --wp--style--block-gap, 0.5em )';
+			getGapCSSValue( style?.spacing?.blockGap, '0.5em' ) ??
+			'var( --wp--style--block-gap, 0.5em )';
 		const justifyContent =
 			justifyContentMap[ layout.justifyContent ] ||
 			justifyContentMap.left;
@@ -112,8 +115,8 @@ export default {
 			<style>{ `
 				${ appendSelectors( selector ) } {
 					display: flex;
-					gap: ${ hasBlockGapStylesSupport ? blockGapValue : '0.5em' };
 					flex-wrap: ${ flexWrap };
+					gap: ${ hasBlockGapStylesSupport ? blockGapValue : '0.5em' };
 					${ orientation === 'horizontal' ? rowOrientation : columnOrientation }
 				}
 

package/src/layouts/flow.js

@@ -14,6 +14,7 @@ import { Icon, positionCenter, stretchWide } from '@wordpress/icons';
  */
 import useSetting from '../components/use-setting';
 import { appendSelectors } from './utils';
+import { getGapValueFromStyle } from '../hooks/gap';
 
 export default {
 	name: 'default',
@@ -109,8 +110,11 @@ export default {
 		const { contentSize, wideSize } = layout;
 		const blockGapSupport = useSetting( 'spacing.blockGap' );
 		const hasBlockGapStylesSupport = blockGapSupport !== null;
+		const blockGapStyleValue = getGapValueFromStyle(
+			style?.spacing?.blockGap
+		);
 		const blockGapValue =
-			style?.spacing?.blockGap ?? 'var( --wp--style--block-gap )';
+			blockGapStyleValue?.top ?? 'var( --wp--style--block-gap )';
 
 		let output =
 			!! contentSize || !! wideSize
@@ -123,11 +127,9 @@ export default {
 						margin-left: auto !important;
 						margin-right: auto !important;
 					}
-
 					${ appendSelectors( selector, '> .alignwide' ) }  {
 						max-width: ${ wideSize ?? contentSize };
 					}
-
 					${ appendSelectors( selector, '> .alignfull' ) } {
 						max-width: none;
 					}
@@ -137,26 +139,29 @@ export default {
 		output += `
 			${ appendSelectors( selector, '> .alignleft' ) } {
 				float: left;
-				margin-right: 2em;
-				margin-left: 0;
+				margin-inline-start: 0;
+				margin-inline-end: 2em;
 			}
-
 			${ appendSelectors( selector, '> .alignright' ) } {
 				float: right;
-				margin-left: 2em;
-				margin-right: 0;
+				margin-inline-start: 2em;
+				margin-inline-end: 0;
 			}
 
+			${ appendSelectors( selector, '> .aligncenter' ) } {
+				margin-left: auto !important;
+				margin-right: auto !important;
+			}
 		`;
 
 		if ( hasBlockGapStylesSupport ) {
 			output += `
 				${ appendSelectors( selector, '> *' ) } {
-					margin-top: 0;
-					margin-bottom: 0;
+					margin-block-start: 0;
+					margin-block-end: 0;
 				}
 				${ appendSelectors( selector, '> * + *' ) } {
-					margin-top: ${ blockGapValue };
+					margin-block-start: ${ blockGapValue };
 				}
 			`;
 		}

package/src/store/defaults.js

@@ -28,6 +28,7 @@ export const PREFERENCES_DEFAULTS = {
  * @property {boolean}       __experimentalBlockDirectory           Whether the user has enabled the Block Directory
  * @property {Array}         __experimentalBlockPatterns            Array of objects representing the block patterns
  * @property {Array}         __experimentalBlockPatternCategories   Array of objects representing the block pattern categories
+ * @property {boolean}       __experimentalGenerateAnchors          Enable/Disable auto anchor generation for Heading blocks
  * @property {boolean}       __unstableGalleryWithImageBlocks       Whether the user has enabled the refactored gallery block which uses InnerBlocks
  */
 export const SETTINGS_DEFAULTS = {