Backport GB 8.6 fixes to WP trunk

lib/client-assets.php

@@ -670,7 +670,7 @@ function gutenberg_extend_settings_block_patterns( $settings ) {
  * @return array Filtered editor settings.
  */
 function gutenberg_extend_settings_custom_line_height( $settings ) {
-	$settings['__experimentalDisableCustomLineHeight'] = get_theme_support( 'disable-custom-line-height' );
+	$settings['enableCustomLineHeight'] = get_theme_support( 'custom-line-height' );
 	return $settings;
 }
 add_filter( 'block_editor_settings', 'gutenberg_extend_settings_custom_line_height' );
@@ -684,7 +684,7 @@ function gutenberg_extend_settings_custom_line_height( $settings ) {
  * @return array Filtered editor settings.
  */
 function gutenberg_extend_settings_custom_units( $settings ) {
-	$settings['__experimentalDisableCustomUnits'] = get_theme_support( 'experimental-custom-units' );
+	$settings['enableCustomUnits'] = get_theme_support( 'custom-units' );
 	return $settings;
 }
 add_filter( 'block_editor_settings', 'gutenberg_extend_settings_custom_units' );

packages/block-directory/src/components/downloadable-blocks-panel/index.js

@@ -22,18 +22,10 @@ function DownloadableBlocksPanel( {
 	debouncedSpeak,
 } ) {
 	if ( false === hasPermission ) {
-		debouncedSpeak(
-			__(
-				'No blocks found in your library. Please contact your site administrator to install new blocks.'
-			)
-		);
+		debouncedSpeak( __( 'No blocks found in your library.' ) );
 		return (
 			<p className="block-directory-downloadable-blocks-panel__description has-no-results">
 				{ __( 'No blocks found in your library.' ) }
-				<br />
-				{ __(
-					'Please contact your site administrator to install new blocks.'
-				) }
 			</p>
 		);
 	}

packages/block-editor/README.md

@@ -481,6 +481,7 @@ _Properties_
 -   _disableCustomColors_ `boolean`: Whether or not the custom colors are disabled
 -   _fontSizes_ `Array`: Available font sizes
 -   _disableCustomFontSizes_ `boolean`: Whether or not the custom font sizes are disabled
+-   _imageEditing_ `boolean`: Image Editing settings set to false to disable.
 -   _imageSizes_ `Array`: Available image sizes
 -   _maxWidth_ `number`: Max width to constraint resizing
 -   _allowedBlockTypes_ `(boolean|Array)`: Allowed block types

packages/block-editor/package.json

@@ -60,6 +60,7 @@
 		"memize": "^1.1.0",
 		"react-autosize-textarea": "^3.0.2",
 		"react-spring": "^8.0.19",
+		"reakit": "1.1.0",
 		"redux-multi": "^0.1.12",
 		"refx": "^3.0.0",
 		"rememo": "^3.0.0",

packages/block-editor/src/components/block-list/block-wrapper.js

@@ -71,6 +71,7 @@ const BlockComponent = forwardRef(
 					initialPosition: isSelected
 						? getSelectedBlocksInitialCaretPosition()
 						: undefined,
+					isNavigationMode: _isNavigationMode,
 				};
 			},
 			[ isSelected ]

packages/block-editor/src/components/block-list/block.js

@@ -6,7 +6,12 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useState, createContext, useMemo } from '@wordpress/element';
+import {
+	useState,
+	createContext,
+	useMemo,
+	useCallback,
+} from '@wordpress/element';
 import {
 	getBlockType,
 	getSaveElement,
@@ -105,7 +110,7 @@ function BlockListBlock( {
 		[ clientId ]
 	);
 	const { removeBlock } = useDispatch( 'core/block-editor' );
-	const onRemove = () => removeBlock( clientId );
+	const onRemove = useCallback( () => removeBlock( clientId ), [ clientId ] );
 
 	// Handling the error state
 	const [ hasError, setErrorState ] = useState( false );

packages/block-editor/src/components/block-list/insertion-point.js

@@ -18,57 +18,139 @@ import Inserter from '../inserter';
 import { getClosestTabbable } from '../writing-flow';
 import { getBlockDOMNode } from '../../utils/dom';
 
-function Indicator( { clientId } ) {
-	const showInsertionPoint = useSelect(
+function InsertionPointInserter( {
+	clientId,
+	setIsInserterForced,
+	containerRef,
+} ) {
+	const ref = useRef();
+	// Hide the inserter above the selected block and during multi-selection.
+	const isInserterHidden = useSelect(
 		( select ) => {
 			const {
-				getBlockIndex,
-				getBlockInsertionPoint,
-				isBlockInsertionPointVisible,
-				getBlockRootClientId,
+				getMultiSelectedBlockClientIds,
+				getSelectedBlockClientId,
+				hasMultiSelection,
 			} = select( 'core/block-editor' );
-			const rootClientId = getBlockRootClientId( clientId );
-			const blockIndex = getBlockIndex( clientId, rootClientId );
-			const insertionPoint = getBlockInsertionPoint();
-			return (
-				isBlockInsertionPointVisible() &&
-				insertionPoint.index === blockIndex &&
-				insertionPoint.rootClientId === rootClientId
-			);
+			const multiSelectedBlockClientIds = getMultiSelectedBlockClientIds();
+			const selectedBlockClientId = getSelectedBlockClientId();
+
+			return hasMultiSelection()
+				? multiSelectedBlockClientIds.includes( clientId )
+				: clientId === selectedBlockClientId;
 		},
 		[ clientId ]
 	);
 
-	if ( ! showInsertionPoint ) {
-		return null;
+	function focusClosestTabbable( event ) {
+		const { clientX, clientY, target } = event;
+
+		// Only handle click on the wrapper specifically, and not an event
+		// bubbled from the inserter itself.
+		if ( target !== ref.current ) {
+			return;
+		}
+
+		const targetRect = target.getBoundingClientRect();
+		const isReverse = clientY < targetRect.top + targetRect.height / 2;
+		const blockNode = getBlockDOMNode( clientId );
+		const container = isReverse ? containerRef.current : blockNode;
+		const closest =
+			getClosestTabbable( blockNode, true, container ) || blockNode;
+		const rect = new window.DOMRect( clientX, clientY, 0, 16 );
+
+		placeCaretAtVerticalEdge( closest, isReverse, rect, false );
 	}
 
 	return (
-		<div className="block-editor-block-list__insertion-point-indicator" />
+		/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
+		<div
+			ref={ ref }
+			onFocus={ () => setIsInserterForced( true ) }
+			onBlur={ () => setIsInserterForced( false ) }
+			onClick={ focusClosestTabbable }
+			// While ideally it would be enough to capture the
+			// bubbling focus event from the Inserter, due to the
+			// characteristics of click focusing of `button`s in
+			// Firefox and Safari, it is not reliable.
+			//
+			// See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
+			tabIndex={ -1 }
+			className={ classnames(
+				'block-editor-block-list__insertion-point-inserter',
+				{
+					'is-inserter-hidden': isInserterHidden,
+				}
+			) }
+		>
+			<Inserter
+				position="bottom center"
+				clientId={ clientId }
+				__experimentalIsQuick
+			/>
+		</div>
 	);
 }
 
-export default function InsertionPoint( {
-	hasMultiSelection,
-	selectedBlockClientId,
-	children,
+function InsertionPointPopover( {
+	clientId,
+	isInserterShown,
+	isInserterForced,
+	setIsInserterForced,
 	containerRef,
+	showInsertionPoint,
 } ) {
+	const element = getBlockDOMNode( clientId );
+
+	return (
+		<Popover
+			noArrow
+			animate={ false }
+			anchorRef={ element }
+			position="top right left"
+			focusOnMount={ false }
+			className="block-editor-block-list__insertion-point-popover"
+			__unstableSlotName="block-toolbar"
+		>
+			<div
+				className="block-editor-block-list__insertion-point"
+				style={ { width: element?.offsetWidth } }
+			>
+				{ showInsertionPoint && (
+					<div className="block-editor-block-list__insertion-point-indicator" />
+				) }
+				{ ( isInserterShown || isInserterForced ) && (
+					<InsertionPointInserter
+						clientId={ clientId }
+						setIsInserterForced={ setIsInserterForced }
+						containerRef={ containerRef }
+					/>
+				) }
+			</div>
+		</Popover>
+	);
+}
+
+export default function InsertionPoint( { children, containerRef } ) {
 	const [ isInserterShown, setIsInserterShown ] = useState( false );
 	const [ isInserterForced, setIsInserterForced ] = useState( false );
-	const [ inserterElement, setInserterElement ] = useState( null );
 	const [ inserterClientId, setInserterClientId ] = useState( null );
-	const ref = useRef();
-	const { multiSelectedBlockClientIds, isMultiSelecting } = useSelect(
+	const { isMultiSelecting, isInserterVisible, selectedClientId } = useSelect(
 		( select ) => {
 			const {
-				getMultiSelectedBlockClientIds,
 				isMultiSelecting: _isMultiSelecting,
+				isBlockInsertionPointVisible,
+				getBlockInsertionPoint,
+				getBlockOrder,
 			} = select( 'core/block-editor' );
 
+			const insertionPoint = getBlockInsertionPoint();
+			const order = getBlockOrder( insertionPoint.rootClientId );
+
 			return {
 				isMultiSelecting: _isMultiSelecting(),
-				multiSelectedBlockClientIds: getMultiSelectedBlockClientIds(),
+				isInserterVisible: isBlockInsertionPointVisible(),
+				selectedClientId: order[ insertionPoint.index ],
 			};
 		},
 		[]
@@ -117,80 +199,24 @@ export default function InsertionPoint( {
 		}
 
 		setIsInserterShown( true );
-		setInserterElement( element );
 		setInserterClientId( clientId );
 	}
 
-	function focusClosestTabbable( event ) {
-		const { clientX, clientY, target } = event;
-
-		// Only handle click on the wrapper specifically, and not an event
-		// bubbled from the inserter itself.
-		if ( target !== ref.current ) {
-			return;
-		}
-
-		const targetRect = target.getBoundingClientRect();
-		const isReverse = clientY < targetRect.top + targetRect.height / 2;
-		const blockNode = getBlockDOMNode( inserterClientId );
-		const container = isReverse ? containerRef.current : blockNode;
-		const closest =
-			getClosestTabbable( blockNode, true, container ) || blockNode;
-		const rect = new window.DOMRect( clientX, clientY, 0, 16 );
-
-		placeCaretAtVerticalEdge( closest, isReverse, rect, false );
-	}
-
-	// Hide the inserter above the selected block and during multi-selection.
-	const isInserterHidden = hasMultiSelection
-		? multiSelectedBlockClientIds.includes( inserterClientId )
-		: inserterClientId === selectedBlockClientId;
+	const isVisible = isInserterShown || isInserterForced || isInserterVisible;
 
 	return (
 		<>
-			{ ! isMultiSelecting && ( isInserterShown || isInserterForced ) && (
-				<Popover
-					noArrow
-					animate={ false }
-					anchorRef={ inserterElement }
-					position="top right left"
-					focusOnMount={ false }
-					className="block-editor-block-list__insertion-point-popover"
-					__unstableSlotName="block-toolbar"
-				>
-					<div
-						className="block-editor-block-list__insertion-point"
-						style={ { width: inserterElement.offsetWidth } }
-					>
-						<Indicator clientId={ inserterClientId } />
-						{ /* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */ }
-						<div
-							ref={ ref }
-							onFocus={ () => setIsInserterForced( true ) }
-							onBlur={ () => setIsInserterForced( false ) }
-							onClick={ focusClosestTabbable }
-							// While ideally it would be enough to capture the
-							// bubbling focus event from the Inserter, due to the
-							// characteristics of click focusing of `button`s in
-							// Firefox and Safari, it is not reliable.
-							//
-							// See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
-							tabIndex={ -1 }
-							className={ classnames(
-								'block-editor-block-list__insertion-point-inserter',
-								{
-									'is-inserter-hidden': isInserterHidden,
-								}
-							) }
-						>
-							<Inserter
-								position="bottom center"
-								clientId={ inserterClientId }
-								__experimentalIsQuick
-							/>
-						</div>
-					</div>
-				</Popover>
+			{ ! isMultiSelecting && isVisible && (
+				<InsertionPointPopover
+					clientId={
+						isInserterVisible ? selectedClientId : inserterClientId
+					}
+					isInserterShown={ isInserterShown }
+					isInserterForced={ isInserterForced }
+					setIsInserterForced={ setIsInserterForced }
+					containerRef={ containerRef }
+					showInsertionPoint={ isInserterVisible }
+				/>
 			) }
 			<div
 				onMouseMove={

packages/block-editor/src/components/block-list/root-container.js

@@ -79,11 +79,7 @@ function RootContainer( { children, className }, ref ) {
 	const [ blockNodes, setBlockNodes ] = useState( {} );
 
 	return (
-		<InsertionPoint
-			hasMultiSelection={ hasMultiSelection }
-			selectedBlockClientId={ selectedBlockClientId }
-			containerRef={ ref }
-		>
+		<InsertionPoint containerRef={ ref }>
 			<BlockNodes.Provider value={ blockNodes }>
 				<BlockPopover />
 				<div

packages/block-editor/src/components/block-list/style.scss

@@ -391,7 +391,7 @@
 
 	// Hide the inserter above the selected block.
 	&.is-inserter-hidden .block-editor-inserter__toggle {
-		opacity: 0;
+		visibility: hidden;
 		pointer-events: none;
 	}
 }