@wordpress/block-editor 8.3.0 → 8.5.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,
 	} = 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/style.scss

@@ -15,7 +15,8 @@
 	// Use position relative for row animation.
 	position: relative;
 
-	&.is-selected {
+	// The background has to be applied to the td, not tr, or border-radius won't work.
+	&.is-selected td {
 		background: var(--wp-admin-theme-color);
 	}
 	&.is-selected .block-editor-list-view-block-contents,
@@ -40,27 +41,53 @@
 		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $white;
 	}
 
+	&.is-dragging {
+		display: none;
+	}
+
+	// Border radius for corners of the selected item.
+	&.is-first-selected td:first-child {
+		border-top-left-radius: $radius-block-ui;
+	}
+	&.is-first-selected td:last-child {
+		border-top-right-radius: $radius-block-ui;
+	}
+	&.is-last-selected td:first-child {
+		border-bottom-left-radius: $radius-block-ui;
+	}
+	&.is-last-selected td:last-child {
+		border-bottom-right-radius: $radius-block-ui;
+	}
 	&.is-branch-selected:not(.is-selected) {
 		// Lighten a CSS variable without introducing a new SASS variable
 		background:
 			linear-gradient(transparentize($white, 0.1), transparentize($white, 0.1)),
 			linear-gradient(var(--wp-admin-theme-color), var(--wp-admin-theme-color));
 	}
-	&.is-branch-selected.is-selected .block-editor-list-view-block-contents {
-		border-radius: 2px 2px 0 0;
+	&.is-branch-selected.is-first-selected td:first-child {
+		border-top-left-radius: $radius-block-ui;
+	}
+	&.is-branch-selected.is-first-selected td:last-child {
+		border-top-right-radius: $radius-block-ui;
 	}
 	&[aria-expanded="false"] {
-		&.is-branch-selected.is-selected .block-editor-list-view-block-contents {
-			border-radius: 2px;
+		&.is-branch-selected.is-first-selected td:first-child {
+			border-top-left-radius: $radius-block-ui;
+		}
+		&.is-branch-selected.is-first-selected td:last-child {
+			border-top-right-radius: $radius-block-ui;
+		}
+		&.is-branch-selected.is-last-selected td:first-child {
+			border-bottom-left-radius: $radius-block-ui;
+		}
+		&.is-branch-selected.is-last-selected td:last-child {
+			border-bottom-right-radius: $radius-block-ui;
 		}
 	}
-	&.is-branch-selected:not(.is-selected) .block-editor-list-view-block-contents {
+	&.is-branch-selected:not(.is-selected) td {
 		border-radius: 0;
 	}
 
-	&.is-dragging {
-		display: none;
-	}
 
 	// List View renders a fixed number of items and relies on each item having a fixed height of 36px.
 	// If this value changes, we should also change the itemHeight value set in useFixedWindowList.
@@ -73,7 +100,7 @@
 		padding: ($grid-unit-15 * 0.5) $grid-unit-15 ($grid-unit-15 * 0.5) 0;
 		text-align: left;
 		color: $gray-900;
-		border-radius: 2px;
+		border-radius: $radius-block-ui;
 		position: relative;
 		white-space: nowrap;
 
@@ -106,7 +133,7 @@
 			left: 0;
 			border-radius: inherit;
 			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-			z-index: 1;
+			z-index: 2;
 			pointer-events: none;
 
 			// Hide focus styles while a user is dragging blocks/files etc.
@@ -152,17 +179,23 @@
 	.block-editor-list-view-block__mover-cell {
 		line-height: 0;
 		width: $button-size;
-		opacity: 0;
 		vertical-align: middle;
 		@include reduce-motion("transition");
 
+		> * {
+			opacity: 0;
+		}
+
 		// Show on hover, visible, and show above to keep the hit area size.
 		&:hover,
 		&.is-visible {
 			position: relative;
 			z-index: 1;
-			opacity: 1;
-			@include edit-post__fade-in-animation;
+
+			> * {
+				opacity: 1;
+				@include edit-post__fade-in-animation;
+			}
 		}
 
 		&,
@@ -278,6 +311,15 @@
 	&.is-selected .block-editor-list-view-block-select-button__anchor {
 		background: rgba($black, 0.3);
 	}
+
+	.block-editor-list-view-block-select-button__lock {
+		line-height: 0;
+		width: 24px;
+		min-width: 24px;
+		margin-left: auto;
+		padding: 0;
+		vertical-align: middle;
+	}
 }
 
 .block-editor-list-view-block-select-button__description,

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/media-placeholder/README.md

@@ -140,6 +140,14 @@ Whether to allow multiple selection of files or not.
 -   Default: `false`
 -   Platform: Web
 
+### mediaPreview
+
+The component is rendered as a preview in the placeholder.
+
+-   Type: `Component`
+-   Required: No
+-   Platform: Web
+
 ### onError
 
 Callback called when an upload error happens.

package/src/components/media-replace-flow/index.js

@@ -212,6 +212,9 @@ const MediaReplaceFlow = ( {
 	);
 };
 
+/**
+ * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/media-replace-flow/README.md
+ */
 export default compose( [
 	withDispatch( ( dispatch ) => {
 		const { createNotice, removeNotice } = dispatch( noticesStore );

package/src/components/multi-selection-inspector/index.js

@@ -5,7 +5,7 @@ import { sprintf, _n } from '@wordpress/i18n';
 import { withSelect } from '@wordpress/data';
 import { serialize } from '@wordpress/blocks';
 import { count as wordCount } from '@wordpress/wordcount';
-import { stack } from '@wordpress/icons';
+import { copy } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -18,7 +18,7 @@ function MultiSelectionInspector( { blocks } ) {
 
 	return (
 		<div className="block-editor-multi-selection-inspector__card">
-			<BlockIcon icon={ stack } showColors />
+			<BlockIcon icon={ copy } showColors />
 			<div className="block-editor-multi-selection-inspector__card-content">
 				<div className="block-editor-multi-selection-inspector__card-title">
 					{ sprintf(

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

@@ -45,6 +45,7 @@ import { useFormatTypes } from './use-format-types';
 import { useRemoveBrowserShortcuts } from './use-remove-browser-shortcuts';
 import { useShortcuts } from './use-shortcuts';
 import { useInputEvents } from './use-input-events';
+import { useFirefoxCompat } from './use-firefox-compat';
 import FormatEdit from './format-edit';
 import { getMultilineTag, getAllowedFormats } from './utils';
 
@@ -131,6 +132,7 @@ function RichTextWrapper(
 		if ( originalIsSelected === undefined ) {
 			isSelected =
 				selectionStart.clientId === clientId &&
+				selectionEnd.clientId === clientId &&
 				selectionStart.attributeKey === identifier;
 		} else if ( originalIsSelected ) {
 			isSelected = selectionStart.clientId === clientId;
@@ -171,7 +173,26 @@ function RichTextWrapper(
 
 	const onSelectionChange = useCallback(
 		( start, end ) => {
-			selectionChange( clientId, identifier, start, end );
+			const selection = {};
+			const unset = start === undefined && end === undefined;
+
+			if ( typeof start === 'number' || unset ) {
+				selection.start = {
+					clientId,
+					attributeKey: identifier,
+					offset: start,
+				};
+			}
+
+			if ( typeof end === 'number' || unset ) {
+				selection.end = {
+					clientId,
+					attributeKey: identifier,
+					offset: end,
+				};
+			}
+
+			selectionChange( selection );
 		},
 		[ clientId, identifier ]
 	);
@@ -330,6 +351,7 @@ function RichTextWrapper(
 				{ ...props }
 				{ ...autocompleteProps }
 				ref={ useMergeRefs( [
+					forwardedRef,
 					autocompleteProps.ref,
 					props.ref,
 					richTextRef,
@@ -339,6 +361,7 @@ function RichTextWrapper(
 						__unstableAllowPrefixTransformations,
 						formatTypes,
 						onReplace,
+						selectionChange,
 					} ),
 					useRemoveBrowserShortcuts(),
 					useShortcuts( keyboardShortcuts ),
@@ -370,8 +393,8 @@ function RichTextWrapper(
 						disableLineBreaks,
 						onSplitAtEnd,
 					} ),
+					useFirefoxCompat(),
 					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/rich-text/split-value.js

@@ -20,8 +20,12 @@ export function splitValue( {
 		return;
 	}
 
+	// Ensure the value has a selection. This might happen when trying to split
+	// an empty value before there was a `selectionchange` event.
+	const { start = 0, end = 0 } = value;
+	const valueWithEnsuredSelection = { ...value, start, end };
 	const blocks = [];
-	const [ before, after ] = split( value );
+	const [ before, after ] = split( valueWithEnsuredSelection );
 	const hasPastedBlocks = pastedBlocks.length > 0;
 	let lastPastedBlockIndex = -1;
 

package/src/components/rich-text/use-firefox-compat.js

@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import { useRefEffect } from '@wordpress/compose';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+
+export function useFirefoxCompat() {
+	const { isMultiSelecting } = useSelect( blockEditorStore );
+	return useRefEffect( ( element ) => {
+		function onFocus() {
+			if ( ! isMultiSelecting() ) {
+				return;
+			}
+
+			// This is a little hack to work around focus issues with nested
+			// editable elements in Firefox. For some reason the editable child
+			// element sometimes regains focus, while it should not be focusable
+			// and focus should remain on the editable parent element.
+			// To do: try to find the cause of the shifting focus.
+			const parentEditable = element.parentElement.closest(
+				'[contenteditable="true"]'
+			);
+
+			if ( parentEditable ) {
+				parentEditable.focus();
+			}
+		}
+
+		element.addEventListener( 'focus', onFocus );
+		return () => {
+			element.removeEventListener( 'focus', onFocus );
+		};
+	}, [] );
+}

package/src/components/rich-text/use-input-rules.js

@@ -1,9 +1,14 @@
+/**
+ * External dependencies
+ */
+import { findKey } from 'lodash';
+
 /**
  * WordPress dependencies
  */
 import { useRef } from '@wordpress/element';
 import { useRefEffect } from '@wordpress/compose';
-import { slice, toHTMLString } from '@wordpress/rich-text';
+import { insert, toHTMLString } from '@wordpress/rich-text';
 import { getBlockTransforms, findTransform } from '@wordpress/blocks';
 import { useDispatch } from '@wordpress/data';
 
@@ -13,6 +18,37 @@ import { useDispatch } from '@wordpress/data';
 import { store as blockEditorStore } from '../../store';
 import { preventEventDiscovery } from './prevent-event-discovery';
 
+// A robust way to retain selection position through various
+// transforms is to insert a special character at the position and
+// then recover it.
+const START_OF_SELECTED_AREA = '\u0086';
+
+function findSelection( blocks ) {
+	let i = blocks.length;
+
+	while ( i-- ) {
+		const attributeKey = findKey(
+			blocks[ i ].attributes,
+			( v ) =>
+				typeof v === 'string' &&
+				v.indexOf( START_OF_SELECTED_AREA ) !== -1
+		);
+
+		if ( attributeKey ) {
+			blocks[ i ].attributes[ attributeKey ] = blocks[ i ].attributes[
+				attributeKey
+			].replace( START_OF_SELECTED_AREA, '' );
+			return blocks[ i ].clientId;
+		}
+
+		const nestedSelection = findSelection( blocks[ i ].innerBlocks );
+
+		if ( nestedSelection ) {
+			return nestedSelection;
+		}
+	}
+}
+
 export function useInputRules( props ) {
 	const {
 		__unstableMarkLastChangeAsPersistent,
@@ -22,7 +58,7 @@ export function useInputRules( props ) {
 	propsRef.current = props;
 	return useRefEffect( ( element ) => {
 		function inputRule() {
-			const { value, onReplace } = propsRef.current;
+			const { value, onReplace, selectionChange } = propsRef.current;
 
 			if ( ! onReplace ) {
 				return;
@@ -52,10 +88,11 @@ export function useInputRules( props ) {
 			}
 
 			const content = toHTMLString( {
-				value: slice( value, start, text.length ),
+				value: insert( value, START_OF_SELECTED_AREA, 0, start ),
 			} );
 			const block = transformation.transform( content );
 
+			selectionChange( findSelection( [ block ] ) );
 			onReplace( [ block ] );
 			__unstableMarkAutomaticChange();
 		}

package/src/components/skip-to-selected-block/index.js

@@ -28,6 +28,9 @@ const SkipToSelectedBlock = ( { selectedBlockClientId } ) => {
 	) : null;
 };
 
+/**
+ * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/skip-to-selected-block/README.md
+ */
 export default withSelect( ( select ) => {
 	return {
 		selectedBlockClientId: select(

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

@@ -71,12 +71,13 @@ $input-size: 300px;
 .block-editor-url-input .components-spinner {
 	display: none;
 	@include break-small() {
-		display: inherit;
+		display: grid;
 	}
 }
 
 .block-editor-url-input__suggestion {
-	padding: 4px $input-padding;
+	min-height: $button-size;
+	height: auto;
 	color: $gray-700;
 	display: block;
 	font-size: $default-font-size;