@wordpress/block-editor 8.5.4 → 9.0.0

package/src/components/inserter/index.native.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { AccessibilityInfo, Platform } from 'react-native';
+import { AccessibilityInfo, Platform, Text } from 'react-native';
 import { delay } from 'lodash';
 
 /**
@@ -15,6 +15,7 @@ import { compose, withPreferredColorScheme } from '@wordpress/compose';
 import { isUnmodifiedDefaultBlock } from '@wordpress/blocks';
 import {
 	Icon,
+	plus,
 	plusCircle,
 	plusCircleFilled,
 	insertAfter,
@@ -32,27 +33,51 @@ import { store as blockEditorStore } from '../../store';
 
 const VOICE_OVER_ANNOUNCEMENT_DELAY = 1000;
 
-const defaultRenderToggle = ( { onToggle, disabled, style, onLongPress } ) => (
-	<ToolbarButton
-		title={ _x( 'Add block', 'Generic label for block inserter button' ) }
-		icon={
-			<Icon
-				icon={ plusCircleFilled }
-				style={ style }
-				color={ style.color }
-			/>
-		}
-		onClick={ onToggle }
-		extraProps={ {
-			hint: __( 'Double tap to add a block' ),
-			// testID is present to disambiguate this element for native UI tests. It's not
-			// usually required for components. See: https://git.io/JeQ7G.
-			testID: 'add-block-button',
-			onLongPress,
-		} }
-		isDisabled={ disabled }
-	/>
-);
+const defaultRenderToggle = ( {
+	onToggle,
+	disabled,
+	style,
+	containerStyle,
+	onLongPress,
+	useExpandedMode,
+} ) => {
+	// The "expanded mode" refers to the editor's appearance when no blocks
+	// are currently selected. The "add block" button has a separate style
+	// for the "expanded mode", which are added via the below "expandedModeViewProps"
+	// and "expandedModeViewText" variables.
+	const expandedModeViewProps = useExpandedMode && {
+		icon: <Icon icon={ plus } style={ style } />,
+		customContainerStyles: containerStyle,
+		fixedRatio: false,
+	};
+	const expandedModeViewText = (
+		<Text style={ styles[ 'inserter-menu__add-block-button-text' ] }>
+			{ __( 'Add blocks' ) }
+		</Text>
+	);
+
+	return (
+		<ToolbarButton
+			title={ _x(
+				'Add block',
+				'Generic label for block inserter button'
+			) }
+			icon={ <Icon icon={ plusCircleFilled } style={ style } /> }
+			onClick={ onToggle }
+			extraProps={ {
+				hint: __( 'Double tap to add a block' ),
+				// testID is present to disambiguate this element for native UI tests. It's not
+				// usually required for components. See: https://git.io/JeQ7G.
+				testID: 'add-block-button',
+				onLongPress,
+			} }
+			isDisabled={ disabled }
+			{ ...expandedModeViewProps }
+		>
+			{ useExpandedMode && expandedModeViewText }
+		</ToolbarButton>
+	);
+};
 
 export class Inserter extends Component {
 	constructor() {
@@ -219,13 +244,21 @@ export class Inserter extends Component {
 			renderToggle = defaultRenderToggle,
 			getStylesFromColorScheme,
 			showSeparator,
+			useExpandedMode,
 		} = this.props;
 		if ( showSeparator && isOpen ) {
 			return <BlockInsertionPoint />;
 		}
-		const style = getStylesFromColorScheme(
-			styles.addBlockButton,
-			styles.addBlockButtonDark
+		const style = useExpandedMode
+			? styles[ 'inserter-menu__add-block-button-icon--expanded' ]
+			: getStylesFromColorScheme(
+					styles[ 'inserter-menu__add-block-button-icon' ],
+					styles[ 'inserter-menu__add-block-button-icon--dark' ]
+			  );
+
+		const containerStyle = getStylesFromColorScheme(
+			styles[ 'inserter-menu__add-block-button' ],
+			styles[ 'inserter-menu__add-block-button--dark' ]
 		);
 
 		const onPress = () => {
@@ -265,7 +298,9 @@ export class Inserter extends Component {
 					isOpen,
 					disabled,
 					style,
+					containerStyle,
 					onLongPress,
+					useExpandedMode,
 				} ) }
 				<Picker
 					ref={ ( instance ) => ( this.picker = instance ) }

package/src/components/inserter/style.native.scss

@@ -1,13 +1,35 @@
 /** @format */
 
-.addBlockButton {
-	color: $blue-wordpress;
+.inserter-menu__add-block-button-icon {
+	color: $blue-50;
 }
 
-.addBlockButtonDark {
+.inserter-menu__add-block-button-icon--dark {
 	color: $blue-30;
 }
 
+.inserter-menu__add-block-button-icon--expanded {
+	color: $white;
+}
+
+.inserter-menu__add-block-button {
+	border-radius: 22px;
+	background-color: $blue-50;
+	margin: 8px;
+	padding: 6px 16px 6px 12px;
+}
+
+.inserter-menu__add-block-button--dark {
+	background-color: $blue-30;
+}
+
+.inserter-menu__add-block-button-text {
+	color: $white;
+	font-weight: 500;
+	align-self: center;
+	text-transform: capitalize;
+}
+
 .inserter-menu__list-wrapper {
 	flex: 1;
 }

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

@@ -6,6 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
+import { hasBlockSupport } from '@wordpress/blocks';
 import {
 	__experimentalTreeGridCell as TreeGridCell,
 	__experimentalTreeGridItem as TreeGridItem,
@@ -19,7 +20,7 @@ import {
 	useCallback,
 	memo,
 } from '@wordpress/element';
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { sprintf, __ } from '@wordpress/i18n';
 
 /**
@@ -66,6 +67,19 @@ function ListViewBlock( {
 	const { toggleBlockHighlight } = useDispatch( blockEditorStore );
 
 	const blockInformation = useBlockDisplayInformation( clientId );
+	const blockName = useSelect(
+		( select ) => select( blockEditorStore ).getBlockName( clientId ),
+		[ clientId ]
+	);
+
+	// When a block hides its toolbar it also hides the block settings menu,
+	// since that menu is part of the toolbar in the editor canvas.
+	// List View respects this by also hiding the block settings menu.
+	const showBlockActions = hasBlockSupport(
+		blockName,
+		'__experimentalToolbar',
+		true
+	);
 	const { isLocked } = useBlockLock( clientId );
 	const instanceId = useInstanceId( ListViewBlock );
 	const descriptionId = `list-view-block-select-button__${ instanceId }`;
@@ -98,14 +112,7 @@ function ListViewBlock( {
 		  )
 		: __( 'Options' );
 
-	const {
-		__experimentalFeatures: withExperimentalFeatures,
-		__experimentalPersistentListViewFeatures: withExperimentalPersistentListViewFeatures,
-		__experimentalHideContainerBlockActions: hideContainerBlockActions,
-		isTreeGridMounted,
-		expand,
-		collapse,
-	} = useListViewContext();
+	const { isTreeGridMounted, expand, collapse } = useListViewContext();
 
 	const hasSiblings = siblingBlockCount > 0;
 	const hasRenderedMovers = showBlockMovers && hasSiblings;
@@ -123,27 +130,19 @@ function ListViewBlock( {
 	// only focus the selected list item on mount; otherwise the list would always
 	// try to steal the focus from the editor canvas.
 	useEffect( () => {
-		if (
-			withExperimentalPersistentListViewFeatures &&
-			! isTreeGridMounted &&
-			isSelected
-		) {
+		if ( ! isTreeGridMounted && isSelected ) {
 			cellRef.current.focus();
 		}
 	}, [] );
 
-	const highlightBlock = withExperimentalPersistentListViewFeatures
-		? toggleBlockHighlight
-		: () => {};
-
 	const onMouseEnter = useCallback( () => {
 		setIsHovered( true );
-		highlightBlock( clientId, true );
-	}, [ clientId, setIsHovered, highlightBlock ] );
+		toggleBlockHighlight( clientId, true );
+	}, [ clientId, setIsHovered, toggleBlockHighlight ] );
 	const onMouseLeave = useCallback( () => {
 		setIsHovered( false );
-		highlightBlock( clientId, false );
-	}, [ clientId, setIsHovered, highlightBlock ] );
+		toggleBlockHighlight( clientId, false );
+	}, [ clientId, setIsHovered, toggleBlockHighlight ] );
 
 	const selectEditorBlock = useCallback(
 		( event ) => {
@@ -174,18 +173,10 @@ function ListViewBlock( {
 		[ clientId, expand, collapse, isExpanded ]
 	);
 
-	const showBlockActions =
-		withExperimentalFeatures &&
-		// hide actions for blocks like core/widget-areas
-		( ! hideContainerBlockActions ||
-			( hideContainerBlockActions && level > 1 ) );
-
-	const hideBlockActions = withExperimentalFeatures && ! showBlockActions;
-
 	let colSpan;
 	if ( hasRenderedMovers ) {
 		colSpan = 2;
-	} else if ( hideBlockActions ) {
+	} else if ( ! showBlockActions ) {
 		colSpan = 3;
 	}
 
@@ -193,10 +184,9 @@ function ListViewBlock( {
 		'is-selected': isSelected,
 		'is-first-selected': isFirstSelectedBlock,
 		'is-last-selected': isLastSelectedBlock,
-		'is-branch-selected':
-			withExperimentalPersistentListViewFeatures && isBranchSelected,
+		'is-branch-selected': isBranchSelected,
 		'is-dragging': isDragged,
-		'has-single-cell': hideBlockActions,
+		'has-single-cell': ! showBlockActions,
 	} );
 
 	// Only include all selected blocks if the currently clicked on block

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

@@ -85,21 +85,16 @@ function ListViewBranch( props ) {
 		blocks,
 		selectBlock,
 		showBlockMovers,
-		showNestedBlocks,
 		selectedClientIds,
 		level = 1,
 		path = '',
 		isBranchSelected = false,
 		listPosition = 0,
 		fixedListWindow,
-		expandNested,
+		isExpanded,
 	} = props;
 
-	const {
-		expandedState,
-		draggedClientIds,
-		__experimentalPersistentListViewFeatures,
-	} = useListViewContext();
+	const { expandedState, draggedClientIds } = useListViewContext();
 
 	const filteredBlocks = compact( blocks );
 	const blockCount = filteredBlocks.length;
@@ -115,26 +110,22 @@ function ListViewBranch( props ) {
 						filteredBlocks[ index - 1 ],
 						expandedState,
 						draggedClientIds,
-						expandNested
+						isExpanded
 					);
 				}
 
-				const usesWindowing = __experimentalPersistentListViewFeatures;
-
 				const { itemInView } = fixedListWindow;
-				const blockInView =
-					! usesWindowing || itemInView( nextPosition );
+				const blockInView = itemInView( nextPosition );
 
 				const position = index + 1;
 				const updatedPath =
 					path.length > 0
 						? `${ path }_${ position }`
 						: `${ position }`;
-				const hasNestedBlocks =
-					showNestedBlocks && !! innerBlocks && !! innerBlocks.length;
+				const hasNestedBlocks = !! innerBlocks?.length;
 
-				const isExpanded = hasNestedBlocks
-					? expandedState[ clientId ] ?? expandNested
+				const shouldExpand = hasNestedBlocks
+					? expandedState[ clientId ] ?? isExpanded
 					: undefined;
 
 				const isDragged = !! draggedClientIds?.includes( clientId );
@@ -164,7 +155,7 @@ function ListViewBranch( props ) {
 								siblingBlockCount={ blockCount }
 								showBlockMovers={ showBlockMovers }
 								path={ updatedPath }
-								isExpanded={ isExpanded }
+								isExpanded={ shouldExpand }
 								listPosition={ nextPosition }
 								selectedClientIds={ selectedClientIds }
 							/>
@@ -174,19 +165,18 @@ function ListViewBranch( props ) {
 								<td className="block-editor-list-view-placeholder" />
 							</tr>
 						) }
-						{ hasNestedBlocks && isExpanded && ! isDragged && (
+						{ hasNestedBlocks && shouldExpand && ! isDragged && (
 							<ListViewBranch
 								blocks={ innerBlocks }
 								selectBlock={ selectBlock }
 								showBlockMovers={ showBlockMovers }
-								showNestedBlocks={ showNestedBlocks }
 								level={ level + 1 }
 								path={ updatedPath }
 								listPosition={ nextPosition + 1 }
 								fixedListWindow={ fixedListWindow }
 								isBranchSelected={ isSelectedBranch }
 								selectedClientIds={ selectedClientIds }
-								expandNested={ expandNested }
+								isExpanded={ isExpanded }
 							/>
 						) }
 					</AsyncModeProvider>

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

@@ -3,9 +3,6 @@
  */
 import { createContext, useContext } from '@wordpress/element';
 
-export const ListViewContext = createContext( {
-	__experimentalFeatures: false,
-	__experimentalPersistentListViewFeatures: false,
-} );
+export const ListViewContext = createContext( {} );
 
 export const useListViewContext = () => useContext( ListViewContext );

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

@@ -48,33 +48,17 @@ const expanded = ( state, action ) => {
 export const BLOCK_LIST_ITEM_HEIGHT = 36;
 
 /**
- * Wrap `ListViewRows` with `TreeGrid`. ListViewRows is a
- * recursive component (it renders itself), so this ensures TreeGrid is only
- * present at the very top of the navigation grid.
+ * Show a hierarchical list of blocks.
  *
- * @param {Object}  props                                          Components props.
- * @param {Array}   props.blocks                                   Custom subset of block client IDs to be used instead of the default hierarchy.
- * @param {boolean} props.showNestedBlocks                         Flag to enable displaying nested blocks.
- * @param {boolean} props.showBlockMovers                          Flag to enable block movers
- * @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
+ * @param {Object}  props                 Components props.
+ * @param {string}  props.id              An HTML element id for the root element of ListView.
+ * @param {Array}   props.blocks          Custom subset of block client IDs to be used instead of the default hierarchy.
+ * @param {boolean} props.showBlockMovers Flag to enable block movers
+ * @param {boolean} props.isExpanded      Flag to determine whether nested levels are expanded by default.
+ * @param {Object}  ref                   Forwarded ref
  */
 function ListView(
-	{
-		blocks,
-		__experimentalFeatures,
-		__experimentalPersistentListViewFeatures,
-		__experimentalHideContainerBlockActions,
-		showNestedBlocks,
-		showBlockMovers,
-		id,
-		expandNested = false,
-		...props
-	},
+	{ id, blocks, showBlockMovers = false, isExpanded = false },
 	ref
 ) {
 	const {
@@ -131,7 +115,7 @@ function ListView(
 		BLOCK_LIST_ITEM_HEIGHT,
 		visibleBlockCount,
 		{
-			useWindowing: __experimentalPersistentListViewFeatures,
+			useWindowing: true,
 			windowOverscan: 40,
 		}
 	);
@@ -181,25 +165,13 @@ function ListView(
 
 	const contextValue = useMemo(
 		() => ( {
-			__experimentalFeatures,
-			__experimentalPersistentListViewFeatures,
-			__experimentalHideContainerBlockActions,
 			isTreeGridMounted: isMounted.current,
 			draggedClientIds,
 			expandedState,
 			expand,
 			collapse,
 		} ),
-		[
-			__experimentalFeatures,
-			__experimentalPersistentListViewFeatures,
-			__experimentalHideContainerBlockActions,
-			isMounted.current,
-			draggedClientIds,
-			expandedState,
-			expand,
-			collapse,
-		]
+		[ isMounted.current, draggedClientIds, expandedState, expand, collapse ]
 	);
 
 	return (
@@ -221,12 +193,10 @@ function ListView(
 					<ListViewBranch
 						blocks={ clientIdsTree }
 						selectBlock={ selectEditorBlock }
-						showNestedBlocks={ showNestedBlocks }
 						showBlockMovers={ showBlockMovers }
 						fixedListWindow={ fixedListWindow }
 						selectedClientIds={ selectedClientIds }
-						expandNested={ expandNested }
-						{ ...props }
+						isExpanded={ isExpanded }
 					/>
 				</ListViewContext.Provider>
 			</TreeGrid>

package/src/components/navigable-toolbar/README.md

@@ -0,0 +1,16 @@
+# NavigableToolbar
+
+A toolbar that can be navigated with a keyboard
+
+## Props
+
+The component accepts the following props. Props not included in this set will be applied to the element wrapping NavigableMenu content.
+
+## `focusOnMount`
+
+Whether to immediately focus when the component mounts.
+
+- Type: `Boolean`
+- Required: No
+- Default: false
+

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

@@ -36,7 +36,6 @@ import { useBlockEditContext } from '../block-edit';
 import FormatToolbarContainer from './format-toolbar-container';
 import { store as blockEditorStore } from '../../store';
 import { useUndoAutomaticChange } from './use-undo-automatic-change';
-import { useCaretInFormat } from './use-caret-in-format';
 import { useMarkPersistent } from './use-mark-persistent';
 import { usePasteHandler } from './use-paste-handler';
 import { useInputRules } from './use-input-rules';
@@ -268,7 +267,6 @@ function RichTextWrapper(
 		onChange,
 	} );
 
-	useCaretInFormat( { value } );
 	useMarkPersistent( { html: adjustedValue, value } );
 
 	const keyboardShortcuts = useRef( new Set() );

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

@@ -125,7 +125,6 @@ function RichTextWrapper(
 	const embedHandlerPickerRef = useRef();
 	const selector = ( select ) => {
 		const {
-			isCaretWithinFormattedText,
 			getSelectionStart,
 			getSelectionEnd,
 			getSettings,
@@ -163,7 +162,6 @@ function RichTextWrapper(
 		}
 
 		return {
-			isCaretWithinFormattedText: isCaretWithinFormattedText(),
 			selectionStart: isSelected ? selectionStart.offset : undefined,
 			selectionEnd: isSelected ? selectionEnd.offset : undefined,
 			isSelected,
@@ -177,7 +175,6 @@ function RichTextWrapper(
 	// retrieved from the store on merge.
 	// To do: fix this somehow.
 	const {
-		isCaretWithinFormattedText,
 		selectionStart,
 		selectionEnd,
 		isSelected,
@@ -600,7 +597,6 @@ function RichTextWrapper(
 			__unstableIsSelected={ isSelected }
 			__unstableInputRule={ inputRule }
 			__unstableMultilineTag={ multilineTag }
-			__unstableIsCaretWithinFormattedText={ isCaretWithinFormattedText }
 			__unstableOnEnterFormattedText={ enterFormattedText }
 			__unstableOnExitFormattedText={ exitFormattedText }
 			__unstableOnCreateUndoLevel={ __unstableMarkLastChangeAsPersistent }

package/src/components/url-input/index.js

@@ -418,7 +418,7 @@ class URLInput extends Component {
 
 	renderControl() {
 		const {
-			label,
+			label = null,
 			className,
 			isFullWidth,
 			instanceId,
@@ -435,8 +435,10 @@ class URLInput extends Component {
 			suggestionOptionIdPrefix,
 		} = this.state;
 
+		const inputId = `url-input-control-${ instanceId }`;
+
 		const controlProps = {
-			id: `url-input-control-${ instanceId }`,
+			id: inputId, // Passes attribute to label for the for attribute
 			label,
 			className: classnames( 'block-editor-url-input', className, {
 				'is-full-width': isFullWidth,
@@ -444,6 +446,7 @@ class URLInput extends Component {
 		};
 
 		const inputProps = {
+			id: inputId,
 			value,
 			required: true,
 			className: 'block-editor-url-input__input',
@@ -453,7 +456,7 @@ class URLInput extends Component {
 			placeholder,
 			onKeyDown: this.onKeyDown,
 			role: 'combobox',
-			'aria-label': __( 'URL' ),
+			'aria-label': label ? undefined : __( 'URL' ), // Ensure input always has an accessible label
 			'aria-expanded': showSuggestions,
 			'aria-autocomplete': 'list',
 			'aria-owns': suggestionsListboxId,

package/src/components/use-block-display-information/index.js

@@ -19,6 +19,7 @@ import { store as blockEditorStore } from '../../store';
  * @property {string} title       Human-readable block type label.
  * @property {WPIcon} icon        Block type icon.
  * @property {string} description A detailed block type description.
+ * @property {string} anchor      HTML anchor.
  */
 
 /**
@@ -63,6 +64,7 @@ export default function useBlockDisplayInformation( clientId ) {
 				title: match.title || blockType.title,
 				icon: match.icon || blockType.icon,
 				description: match.description || blockType.description,
+				anchor: attributes?.anchor,
 			};
 		},
 		[ clientId ]