@wordpress/block-editor 12.21.0 → 12.23.0

package/src/components/list-view/block-select-button.js

@@ -14,12 +14,7 @@ import {
 	Tooltip,
 } from '@wordpress/components';
 import { forwardRef } from '@wordpress/element';
-import {
-	Icon,
-	connection,
-	lockSmall as lock,
-	pinSmall,
-} from '@wordpress/icons';
+import { Icon, lockSmall as lock, pinSmall } from '@wordpress/icons';
 import { SPACE, ENTER, BACKSPACE, DELETE } from '@wordpress/keycodes';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { __unstableUseShortcutEventMatch as useShortcutEventMatch } from '@wordpress/keyboard-shortcuts';
@@ -37,12 +32,11 @@ import { useBlockLock } from '../block-lock';
 import { store as blockEditorStore } from '../../store';
 import useListViewImages from './use-list-view-images';
 import { useListViewContext } from './context';
-import { canBindBlock } from '../../hooks/use-bindings-attributes';
 
 function ListViewBlockSelectButton(
 	{
 		className,
-		block: { clientId, name: blockName },
+		block: { clientId },
 		onClick,
 		onContextMenu,
 		onMouseDown,
@@ -53,7 +47,6 @@ function ListViewBlockSelectButton(
 		onDragEnd,
 		draggable,
 		isExpanded,
-		ariaLabel,
 		ariaDescribedBy,
 		updateFocusAndSelection,
 	},
@@ -71,8 +64,8 @@ function ListViewBlockSelectButton(
 		getPreviousBlockClientId,
 		getBlockRootClientId,
 		getBlockOrder,
+		getBlockParents,
 		getBlocksByClientId,
-		getBlockAttributes,
 		canRemoveBlocks,
 	} = useSelect( blockEditorStore );
 	const { duplicateBlocks, multiSelect, removeBlocks } =
@@ -80,9 +73,7 @@ function ListViewBlockSelectButton(
 	const isMatch = useShortcutEventMatch();
 	const isSticky = blockInformation?.positionType === 'sticky';
 	const images = useListViewImages( { clientId, isExpanded } );
-	const { rootClientId } = useListViewContext();
-
-	const isConnected = getBlockAttributes( clientId )?.metadata?.bindings;
+	const { collapseAll, expand, rootClientId } = useListViewContext();
 
 	const positionLabel = blockInformation?.positionLabel
 		? sprintf(
@@ -237,6 +228,17 @@ function ListViewBlockSelectButton(
 				blockClientIds[ blockClientIds.length - 1 ],
 				null
 			);
+		} else if ( isMatch( 'core/block-editor/collapse-list-view', event ) ) {
+			if ( event.defaultPrevented ) {
+				return;
+			}
+			event.preventDefault();
+			const { firstBlockClientId } = getBlocksToUpdate();
+			const blockParents = getBlockParents( firstBlockClientId, false );
+			// Collapse all blocks.
+			collapseAll();
+			// Expand all parents of the current block.
+			expand( blockParents );
 		}
 	}
 
@@ -258,7 +260,6 @@ function ListViewBlockSelectButton(
 				onDragEnd={ onDragEnd }
 				draggable={ draggable }
 				href={ `#block-${ clientId }` }
-				aria-label={ ariaLabel }
 				aria-describedby={ ariaDescribedBy }
 				aria-expanded={ isExpanded }
 			>
@@ -287,11 +288,6 @@ function ListViewBlockSelectButton(
 							</Truncate>
 						</span>
 					) }
-					{ isConnected && canBindBlock( blockName ) && (
-						<span className="block-editor-list-view-block-select-button__bindings">
-							<Icon icon={ connection } />
-						</span>
-					) }
 					{ positionLabel && isSticky && (
 						<Tooltip text={ positionLabel }>
 							<Icon icon={ pinSmall } />

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

@@ -21,7 +21,7 @@ import {
 	memo,
 } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { sprintf, __ } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { ESCAPE } from '@wordpress/keycodes';
 
 /**
@@ -35,7 +35,11 @@ import {
 } from '../block-mover/button';
 import ListViewBlockContents from './block-contents';
 import { useListViewContext } from './context';
-import { getBlockPositionDescription, focusListItem } from './utils';
+import {
+	getBlockPositionDescription,
+	getBlockPropertiesDescription,
+	focusListItem,
+} from './utils';
 import { store as blockEditorStore } from '../../store';
 import useBlockDisplayInformation from '../use-block-display-information';
 import { useBlockLock } from '../block-lock';
@@ -77,8 +81,6 @@ function ListViewBlock( {
 	const { toggleBlockHighlight } = useDispatch( blockEditorStore );
 
 	const blockInformation = useBlockDisplayInformation( clientId );
-	const blockTitle =
-		blockInformation?.name || blockInformation?.title || __( 'Untitled' );
 
 	const { block, blockName, blockEditingMode } = useSelect(
 		( select ) => {
@@ -93,6 +95,7 @@ function ListViewBlock( {
 		},
 		[ clientId ]
 	);
+
 	const allowRightClickOverrides = useSelect(
 		( select ) =>
 			select( blockEditorStore ).getSettings().allowRightClickOverrides,
@@ -107,7 +110,7 @@ function ListViewBlock( {
 		// Don't show the settings menu if block is disabled or content only.
 		blockEditingMode === 'default';
 	const instanceId = useInstanceId( ListViewBlock );
-	const descriptionId = `list-view-block-select-button__${ instanceId }`;
+	const descriptionId = `list-view-block-select-button__description-${ instanceId }`;
 
 	const {
 		expand,
@@ -247,19 +250,8 @@ function ListViewBlock( {
 		level
 	);
 
-	const blockAriaLabel = isLocked
-		? sprintf(
-				// translators: %s: The title of the block. This string indicates a link to select the locked block.
-				__( '%s (locked)' ),
-				blockTitle
-		  )
-		: blockTitle;
-
-	const settingsAriaLabel = sprintf(
-		// translators: %s: The title of the block.
-		__( 'Options for %s' ),
-		blockTitle
-	);
+	const blockPropertiesDescription =
+		getBlockPropertiesDescription( isLocked );
 
 	const hasSiblings = siblingBlockCount > 0;
 	const hasRenderedMovers = showBlockMovers && hasSiblings;
@@ -352,12 +344,11 @@ function ListViewBlock( {
 							onFocus={ onFocus }
 							isExpanded={ canEdit ? isExpanded : undefined }
 							selectedClientIds={ selectedClientIds }
-							ariaLabel={ blockAriaLabel }
 							ariaDescribedBy={ descriptionId }
 							updateFocusAndSelection={ updateFocusAndSelection }
 						/>
 						<AriaReferencedText id={ descriptionId }>
-							{ blockPositionDescription }
+							{ `${ blockPositionDescription } ${ blockPropertiesDescription }` }
 						</AriaReferencedText>
 					</div>
 				) }
@@ -405,7 +396,7 @@ function ListViewBlock( {
 							clientIds={ dropdownClientIds }
 							block={ block }
 							icon={ moreVertical }
-							label={ settingsAriaLabel }
+							label={ __( 'Options' ) }
 							popoverProps={ {
 								anchor: settingsPopoverAnchor, // Used to position the settings at the cursor on right-click.
 							} }

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

@@ -37,6 +37,7 @@ import ListViewDropIndicatorPreview from './drop-indicator';
 import useBlockSelection from './use-block-selection';
 import useListViewBlockIndexes from './use-list-view-block-indexes';
 import useListViewClientIds from './use-list-view-client-ids';
+import useListViewCollapseItems from './use-list-view-collapse-items';
 import useListViewDropZone from './use-list-view-drop-zone';
 import useListViewExpandSelectedItem from './use-list-view-expand-selected-item';
 import { store as blockEditorStore } from '../../store';
@@ -45,6 +46,9 @@ import { focusListItem } from './utils';
 import useClipboardHandler from './use-clipboard-handler';
 
 const expanded = ( state, action ) => {
+	if ( action.type === 'clear' ) {
+		return {};
+	}
 	if ( Array.isArray( action.clientIds ) ) {
 		return {
 			...state,
@@ -194,7 +198,10 @@ function ListViewComponent(
 			if ( ! clientId ) {
 				return;
 			}
-			setExpandedState( { type: 'expand', clientIds: [ clientId ] } );
+			const clientIds = Array.isArray( clientId )
+				? clientId
+				: [ clientId ];
+			setExpandedState( { type: 'expand', clientIds } );
 		},
 		[ setExpandedState ]
 	);
@@ -207,6 +214,9 @@ function ListViewComponent(
 		},
 		[ setExpandedState ]
 	);
+	const collapseAll = useCallback( () => {
+		setExpandedState( { type: 'clear' } );
+	}, [ setExpandedState ] );
 	const expandRow = useCallback(
 		( row ) => {
 			expand( row?.dataset?.block );
@@ -232,6 +242,11 @@ function ListViewComponent(
 		[ updateBlockSelection ]
 	);
 
+	useListViewCollapseItems( {
+		collapseAll,
+		expand,
+	} );
+
 	const firstDraggedBlockClientId = draggedClientIds?.[ 0 ];
 
 	// Convert a blockDropTarget into indexes relative to the blocks in the list view.
@@ -282,6 +297,7 @@ function ListViewComponent(
 			expand,
 			firstDraggedBlockIndex,
 			collapse,
+			collapseAll,
 			BlockSettingsMenu,
 			listViewInstanceId: instanceId,
 			AdditionalBlockContent,
@@ -299,6 +315,7 @@ function ListViewComponent(
 			expand,
 			firstDraggedBlockIndex,
 			collapse,
+			collapseAll,
 			BlockSettingsMenu,
 			instanceId,
 			AdditionalBlockContent,

package/src/components/list-view/style.scss

@@ -7,7 +7,7 @@
 	// Move upwards when in modal.
 	.components-modal__content & {
 		margin: (-$grid-unit-15) (-$grid-unit-15 * 0.5) 0;
-		width: calc(100% + #{ $grid-unit-15 });
+		width: calc(100% + #{$grid-unit-15});
 	}
 
 	// Without setting `pointer-events: none`, when dragging over list view items,
@@ -71,7 +71,8 @@
 		&:focus::after {
 			box-shadow:
 				inset 0 0 0 1px $white,
-				0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
+				0 0 0 var(--wp-admin-border-width-focus)
+				var(--wp-block-synced-color);
 		}
 	}
 	&.is-selected .block-editor-list-view-block-contents,
@@ -82,14 +83,16 @@
 		&::after {
 			box-shadow:
 				inset 0 0 0 1px $white,
-				0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+				0 0 0 var(--wp-admin-border-width-focus)
+				var(--wp-admin-theme-color);
 		}
 	}
 	&.is-selected.is-synced .block-editor-list-view-block-contents:focus {
 		&::after {
 			box-shadow:
 				inset 0 0 0 1px $white,
-				0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
+				0 0 0 var(--wp-admin-border-width-focus)
+				var(--wp-block-synced-color);
 		}
 	}
 	&.is-selected .block-editor-list-view-block__menu:focus {
@@ -181,7 +184,9 @@
 
 	&.is-after-dragged-blocks.is-displacement-down {
 		transition: transform 0.2s;
-		transform: translateY(calc(36px + var(--wp-admin--list-view-dragged-items-height, 36px) * -1));
+		transform:
+			translateY(calc(36px + var(--wp-admin--list-view-dragged-items-height, 36px) *
+			-1));
 		@include reduce-motion("transition");
 	}
 
@@ -207,7 +212,7 @@
 		align-items: center;
 		width: 100%;
 		height: auto;
-		padding: ($grid-unit-15 * 0.5) $grid-unit-05 ($grid-unit-15 * 0.5) 0;
+		padding: ($grid-unit-15 * 0.5) ($grid-unit-15 * 0.5) ($grid-unit-15 * 0.5) 0;
 		text-align: left;
 		border-radius: $radius-block-ui;
 		position: relative;
@@ -217,7 +222,10 @@
 			content: "";
 			position: absolute;
 			pointer-events: none;
-			transition: border-color 0.1s linear, border-style 0.1s linear, box-shadow 0.1s linear;
+			transition:
+				border-color 0.1s linear,
+				border-style 0.1s linear,
+				box-shadow 0.1s linear;
 			top: -2px;
 			right: 0;
 			left: 0;
@@ -242,7 +250,9 @@
 			bottom: 0;
 			left: 0;
 			border-radius: inherit;
-			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+			box-shadow:
+				inset 0 0 0 var(--wp-admin-border-width-focus)
+				var(--wp-admin-theme-color);
 			z-index: 2;
 			pointer-events: none;
 		}
@@ -255,7 +265,9 @@
 
 	&.is-nesting .block-editor-list-view__menu,
 	.block-editor-list-view-block__menu:focus {
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+		box-shadow:
+			inset 0 0 0 var(--wp-admin-border-width-focus)
+			var(--wp-admin-theme-color);
 		z-index: 1;
 	}
 
@@ -297,14 +309,14 @@
 
 		&,
 		.components-button.has-icon {
-			width: 24px;
-			min-width: 24px;
+			width: $button-size-small;
+			min-width: $button-size-small;
 			padding: 0;
 		}
 	}
 
 	.block-editor-list-view-block__menu-cell {
-		padding-right: $grid-unit-05;
+		padding-right: $grid-unit-15 * 0.5; // 6px.
 
 		.components-button.has-icon {
 			height: 24px;
@@ -458,7 +470,9 @@ $block-navigation-max-indent: 8;
 }
 
 .block-editor-list-view-leaf[aria-level] .block-editor-list-view__expander {
-	margin-left: ( $icon-size ) * $block-navigation-max-indent + 4 * ( $block-navigation-max-indent - 1 );
+	margin-left:
+		($icon-size) * $block-navigation-max-indent + 4 *
+		($block-navigation-max-indent - 1);
 }
 
 .block-editor-list-view-leaf:not([aria-level="1"]) {
@@ -471,12 +485,12 @@ $block-navigation-max-indent: 8;
 // indentation in `use-list-view-drop-zone.js` must be updated as well
 // to ensure the drop zone is aligned with the indentation.
 @for $i from 0 to $block-navigation-max-indent {
-	.block-editor-list-view-leaf[aria-level="#{ $i + 1 }"] .block-editor-list-view__expander {
+	.block-editor-list-view-leaf[aria-level="#{ $i + 1 }"]
+	.block-editor-list-view__expander {
 		@if $i - 1 >= 0 {
-			margin-left: ( $icon-size * $i ) + 4 * ($i - 1);
-		}
-		@else {
-			margin-left: ( $icon-size * $i );
+			margin-left: ($icon-size * $i) + 4 * ($i - 1);
+		} @else {
+			margin-left: ($icon-size * $i);
 		}
 	}
 }
@@ -486,7 +500,9 @@ $block-navigation-max-indent: 8;
 }
 
 // Point downwards when open.
-.block-editor-list-view-leaf[data-expanded="true"] .block-editor-list-view__expander svg {
+.block-editor-list-view-leaf[data-expanded="true"]
+.block-editor-list-view__expander
+svg {
 	visibility: visible;
 	transition: transform 0.2s ease;
 	transform: rotate(90deg);
@@ -494,7 +510,9 @@ $block-navigation-max-indent: 8;
 }
 
 // Point rightwards when closed
-.block-editor-list-view-leaf[data-expanded="false"] .block-editor-list-view__expander svg {
+.block-editor-list-view-leaf[data-expanded="false"]
+.block-editor-list-view__expander
+svg {
 	visibility: visible;
 	transform: rotate(0deg);
 	transition: transform 0.2s ease;
@@ -557,11 +575,3 @@ $block-navigation-max-indent: 8;
 .list-view-appender__description {
 	display: none;
 }
-
-.block-editor-list-view-block-select-button__bindings svg g {
-	stroke: var(--wp-bound-block-color);
-	fill: transparent;
-	stroke-width: 1.5;
-	stroke-linecap: round;
-	stroke-linejoin: round;
-}

package/src/components/list-view/use-list-view-collapse-items.js

@@ -0,0 +1,33 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+
+export default function useListViewCollapseItems( { collapseAll, expand } ) {
+	const { expandedBlock, getBlockParents } = useSelect( ( select ) => {
+		const { getBlockParents: _getBlockParents, getExpandedBlock } = unlock(
+			select( blockEditorStore )
+		);
+		return {
+			expandedBlock: getExpandedBlock(),
+			getBlockParents: _getBlockParents,
+		};
+	}, [] );
+
+	// Collapse all but the specified block when the expanded block client Id changes.
+	useEffect( () => {
+		if ( expandedBlock ) {
+			const blockParents = getBlockParents( expandedBlock, false );
+			// Collapse all blocks and expand the block's parents.
+			collapseAll();
+			expand( blockParents );
+		}
+	}, [ collapseAll, expand, expandedBlock, getBlockParents ] );
+}

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

@@ -7,12 +7,15 @@ import { focus } from '@wordpress/dom';
 export const getBlockPositionDescription = ( position, siblingCount, level ) =>
 	sprintf(
 		/* translators: 1: The numerical position of the block. 2: The total number of blocks. 3. The level of nesting for the block. */
-		__( 'Block %1$d of %2$d, Level %3$d' ),
+		__( 'Block %1$d of %2$d, Level %3$d.' ),
 		position,
 		siblingCount,
 		level
 	);
 
+export const getBlockPropertiesDescription = ( isLocked ) =>
+	isLocked ? __( 'This block is locked.' ) : '';
+
 /**
  * Returns true if the client ID occurs within the block selection or multi-selection,
  * or false otherwise.

package/src/components/rich-text/README.md

@@ -12,6 +12,10 @@ _Required._ HTML string to make editable. The HTML should be valid, and valid in
 
 _Required._ Called when the value changes.
 
+### `identifier: String`
+
+_Optional._ If the editable field is bound to a block attribute (through the `value` and `onChange` props) then this prop should specify the attribute name. The field will use this value to set the block editor selection correctly, specifying in which attribute and at what offset does the selection start or end.
+
 ### `tagName: String`
 
 _Default: `div`._ The [tag name](https://www.w3.org/TR/html51/syntax.html#tag-name) of the editable element.
@@ -50,6 +54,7 @@ _Optional._ By default, all registered formats are allowed. This setting can be
 ```js
 <RichText
 	tagName="h2"
+	identifier="content"
 	value={ attributes.content }
 	allowedFormats={ [ 'core/bold', 'core/italic' ] } // Allow the content to be made bold or italic, but do not allow othe formatting options
 	onChange={ ( content ) => setAttributes( { content } ) }
@@ -99,6 +104,7 @@ registerBlockType( /* ... */, {
 			<RichText
 				tagName="h2"
 				className={ className }
+				identifier="content"
 				value={ attributes.content }
 				onChange={ ( content ) => setAttributes( { content } ) }
 			/>

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

@@ -13,7 +13,7 @@ import {
 	createContext,
 } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { useMergeRefs } from '@wordpress/compose';
+import { useMergeRefs, useInstanceId } from '@wordpress/compose';
 import {
 	__unstableUseRichText as useRichText,
 	removeFormat,
@@ -52,6 +52,8 @@ import { canBindBlock } from '../../hooks/use-bindings-attributes';
 export const keyboardShortcutContext = createContext();
 export const inputEventContext = createContext();
 
+const instanceIdKey = Symbol( 'instanceId' );
+
 /**
  * Removes props used for the native version of RichText so that they are not
  * passed to the DOM element and log warnings.
@@ -75,7 +77,6 @@ function removeNativeProps( props ) {
 		fontStyle,
 		minWidth,
 		maxWidth,
-		setRef,
 		disableSuggestions,
 		disableAutocorrection,
 		...restProps
@@ -110,13 +111,15 @@ export function RichTextWrapper(
 		__unstableDisableFormats: disableFormats,
 		disableLineBreaks,
 		__unstableAllowPrefixTransformations,
-		disableEditing,
+		readOnly,
 		...props
 	},
 	forwardedRef
 ) {
 	props = removeNativeProps( props );
 
+	const instanceId = useInstanceId( RichTextWrapper );
+
 	const anchorRef = useRef();
 	const context = useBlockEditContext();
 	const { clientId, isSelected: isBlockSelected, name: blockName } = context;
@@ -139,7 +142,9 @@ export function RichTextWrapper(
 			isSelected =
 				selectionStart.clientId === clientId &&
 				selectionEnd.clientId === clientId &&
-				selectionStart.attributeKey === identifier;
+				( identifier
+					? selectionStart.attributeKey === identifier
+					: selectionStart[ instanceIdKey ] === instanceId );
 		} else if ( originalIsSelected ) {
 			isSelected = selectionStart.clientId === clientId;
 		}
@@ -153,6 +158,7 @@ export function RichTextWrapper(
 	const { selectionStart, selectionEnd, isSelected } = useSelect( selector, [
 		clientId,
 		identifier,
+		instanceId,
 		originalIsSelected,
 		isBlockSelected,
 	] );
@@ -196,7 +202,7 @@ export function RichTextWrapper(
 		[ blockBindings, blockName ]
 	);
 
-	const shouldDisableEditing = disableEditing || disableBoundBlocks;
+	const shouldDisableEditing = readOnly || disableBoundBlocks;
 
 	const { getSelectionStart, getSelectionEnd, getBlockRootClientId } =
 		useSelect( blockEditorStore );
@@ -213,6 +219,13 @@ export function RichTextWrapper(
 			const selection = {};
 			const unset = start === undefined && end === undefined;
 
+			const baseSelection = {
+				clientId,
+				[ identifier ? 'attributeKey' : instanceIdKey ]: identifier
+					? identifier
+					: instanceId,
+			};
+
 			if ( typeof start === 'number' || unset ) {
 				// If we are only setting the start (or the end below), which
 				// means a partial selection, and we're not updating a selection
@@ -227,8 +240,7 @@ export function RichTextWrapper(
 				}
 
 				selection.start = {
-					clientId,
-					attributeKey: identifier,
+					...baseSelection,
 					offset: start,
 				};
 			}
@@ -243,15 +255,22 @@ export function RichTextWrapper(
 				}
 
 				selection.end = {
-					clientId,
-					attributeKey: identifier,
+					...baseSelection,
 					offset: end,
 				};
 			}
 
 			selectionChange( selection );
 		},
-		[ clientId, identifier ]
+		[
+			clientId,
+			getBlockRootClientId,
+			getSelectionEnd,
+			getSelectionStart,
+			identifier,
+			instanceId,
+			selectionChange,
+		]
 	);
 
 	const {
@@ -466,9 +485,7 @@ PrivateRichText.isEmpty = ( value ) => {
  * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/rich-text/README.md
  */
 const PublicForwardedRichTextContainer = forwardRef( ( props, ref ) => {
-	return (
-		<PrivateRichText ref={ ref } { ...props } disableEditing={ false } />
-	);
+	return <PrivateRichText ref={ ref } { ...props } readOnly={ false } />;
 } );
 
 PublicForwardedRichTextContainer.Content = Content;