@wordpress/block-editor 11.8.0 → 12.0.0

package/src/components/block-mobile-toolbar/test/block-actions-menu.native.js

@@ -8,7 +8,7 @@ import {
 	getBlock,
 	within,
 	getEditorHtml,
-	changeTextOfRichText,
+	typeInRichText,
 } from 'test/helpers';
 
 /**
@@ -71,7 +71,7 @@ describe( 'Block Actions Menu', () => {
 				within( paragraphBlock ).getByPlaceholderText(
 					'Start writing…'
 				);
-			changeTextOfRichText( paragraphField, 'Hello!' );
+			typeInRichText( paragraphField, 'Hello!' );
 
 			// Add Spacer block
 			await addBlock( screen, 'Spacer' );
@@ -132,7 +132,7 @@ describe( 'Block Actions Menu', () => {
 				within( paragraphBlock ).getByPlaceholderText(
 					'Start writing…'
 				);
-			changeTextOfRichText( paragraphField, 'Hello!' );
+			typeInRichText( paragraphField, 'Hello!' );
 
 			// Add Spacer block
 			await addBlock( screen, 'Spacer' );
@@ -179,7 +179,7 @@ describe( 'Block Actions Menu', () => {
 				within( paragraphBlock ).getByPlaceholderText(
 					'Start writing…'
 				);
-			changeTextOfRichText( paragraphField, 'Hello!' );
+			typeInRichText( paragraphField, 'Hello!' );
 
 			// Add Spacer block
 			await addBlock( screen, 'Spacer' );
@@ -228,7 +228,7 @@ describe( 'Block Actions Menu', () => {
 				within( paragraphBlock ).getByPlaceholderText(
 					'Start writing…'
 				);
-			changeTextOfRichText( paragraphField, 'Hello!' );
+			typeInRichText( paragraphField, 'Hello!' );
 
 			// Add Spacer block
 			await addBlock( screen, 'Spacer' );
@@ -275,7 +275,7 @@ describe( 'Block Actions Menu', () => {
 				within( paragraphBlock ).getByPlaceholderText(
 					'Start writing…'
 				);
-			changeTextOfRichText( paragraphField, 'Hello!' );
+			typeInRichText( paragraphField, 'Hello!' );
 
 			// Add Spacer block
 			await addBlock( screen, 'Spacer' );
@@ -322,7 +322,7 @@ describe( 'Block Actions Menu', () => {
 				within( paragraphBlock ).getByPlaceholderText(
 					'Start writing…'
 				);
-			changeTextOfRichText( paragraphField, 'Hello!' );
+			typeInRichText( paragraphField, 'Hello!' );
 
 			// Add Spacer block
 			await addBlock( screen, 'Spacer' );
@@ -368,7 +368,7 @@ describe( 'Block Actions Menu', () => {
 				within( paragraphBlock ).getByPlaceholderText(
 					'Start writing…'
 				);
-			changeTextOfRichText( paragraphField, 'Hello!' );
+			typeInRichText( paragraphField, 'Hello!' );
 
 			// Add Spacer block
 			await addBlock( screen, 'Spacer' );
@@ -405,7 +405,7 @@ describe( 'Block Actions Menu', () => {
 				within( paragraphBlock ).getByPlaceholderText(
 					'Start writing…'
 				);
-			changeTextOfRichText( paragraphField, 'Hello!' );
+			typeInRichText( paragraphField, 'Hello!' );
 
 			// Add Spacer block
 			await addBlock( screen, 'Spacer' );

package/src/components/block-mover/style.scss

@@ -35,11 +35,14 @@
 			> * {
 				width: $block-toolbar-height * 0.5;
 				min-width: 0 !important; // overrides default button width.
-				padding-left: 0 !important;
-				padding-right: 0 !important;
 				overflow: hidden;
 			}
 
+			.block-editor-block-mover-button {
+				padding-left: 0;
+				padding-right: 0;
+			}
+
 			.block-editor-block-mover-button.is-up-button svg {
 				left: 5px;
 			}
@@ -55,9 +58,12 @@
 	@include break-small() {
 		width: $block-toolbar-height * 0.5;
 		min-width: 0 !important; // overrides default button width.
-		padding-left: 0 !important;
-		padding-right: 0 !important;
 		overflow: hidden;
+
+		.block-editor-block-mover &.has-icon.has-icon {
+			padding-left: 0;
+			padding-right: 0;
+		}
 	}
 }
 

package/src/components/block-mover/test/index.native.js

@@ -9,7 +9,7 @@ import {
 	within,
 	getEditorHtml,
 	render,
-	changeTextOfRichText,
+	typeInRichText,
 } from 'test/helpers';
 
 /**
@@ -89,7 +89,7 @@ describe( 'Block Mover Picker', () => {
 				within( paragraphBlock ).getByPlaceholderText(
 					'Start writing…'
 				);
-			changeTextOfRichText( paragraphField, 'Hello!' );
+			typeInRichText( paragraphField, 'Hello!' );
 
 			// Add Spacer block
 			await addBlock( screen, 'Spacer' );
@@ -138,7 +138,7 @@ describe( 'Block Mover Picker', () => {
 				within( paragraphBlock ).getByPlaceholderText(
 					'Start writing…'
 				);
-			changeTextOfRichText( paragraphField, 'Hello!' );
+			typeInRichText( paragraphField, 'Hello!' );
 
 			// Add Spacer block
 			await addBlock( screen, 'Spacer' );
@@ -176,7 +176,7 @@ describe( 'Block Mover Picker', () => {
 				within( paragraphBlock ).getByPlaceholderText(
 					'Start writing…'
 				);
-			changeTextOfRichText( paragraphField, 'Hello!' );
+			typeInRichText( paragraphField, 'Hello!' );
 
 			// Add Spacer block
 			await addBlock( screen, 'Spacer' );

package/src/components/block-toolbar/index.js

@@ -99,6 +99,7 @@ const BlockToolbar = ( { hideDragHandle } ) => {
 	// header area and not contextually to the block.
 	const displayHeaderToolbar =
 		useViewportMatch( 'medium', '<' ) || hasFixedToolbar;
+	const isLargeViewport = ! useViewportMatch( 'medium', '<' );
 
 	if ( blockType ) {
 		if ( ! hasBlockSupport( blockType, '__experimentalToolbar', true ) ) {
@@ -124,9 +125,9 @@ const BlockToolbar = ( { hideDragHandle } ) => {
 
 	return (
 		<div className={ classes }>
-			{ ! isMultiToolbar &&
-				! displayHeaderToolbar &&
-				! isContentLocked && <BlockParentSelector /> }
+			{ ! isMultiToolbar && isLargeViewport && ! isContentLocked && (
+				<BlockParentSelector />
+			) }
 			<div ref={ nodeRef } { ...showMoversGestures }>
 				{ ( shouldShowVisualToolbar || isMultiToolbar ) &&
 					! isContentLocked && (

package/src/components/block-toolbar/style.scss

@@ -56,26 +56,46 @@
 	}
 }
 
-.block-editor-block-contextual-toolbar.has-parent:not(.is-fixed) {
-	margin-left: calc(#{$grid-unit-60} + #{$grid-unit-10});
+// on desktop browsers the fixed toolbar has tweaked borders
+@include break-medium() {
+	.block-editor-block-contextual-toolbar.is-fixed {
+		.block-editor-block-toolbar {
+			.components-toolbar-group,
+			.components-toolbar {
+				border-right: none;
+
+				&::after {
+					content: "";
+					width: $border-width;
+					margin-top: $grid-unit + $grid-unit-05;
+					margin-bottom: $grid-unit + $grid-unit-05;
+					background-color: $gray-300;
+					margin-left: $grid-unit;
+				}
+
+				& .components-toolbar-group.components-toolbar-group {
+					&::after {
+						display: none;
+					}
+				}
+			}
 
-	.show-icon-labels & {
-		margin-left: 0;
+			> :last-child,
+			> :last-child .components-toolbar-group,
+			> :last-child .components-toolbar {
+				&::after {
+					display: none;
+				}
+			}
+		}
 	}
 }
 
-.block-editor-block-parent-selector {
-	position: absolute;
-	top: -$border-width;
-	left: calc(-#{$grid-unit-60} - #{$grid-unit-10} - #{$border-width});
+.block-editor-block-contextual-toolbar.has-parent:not(.is-fixed) {
+	margin-left: calc(#{$grid-unit-60} + #{$grid-unit-10});
 
 	.show-icon-labels & {
-		position: relative;
-		left: auto;
-		top: auto;
-		margin-top: -$border-width;
-		margin-left: -$border-width;
-		margin-bottom: -$border-width;
+		margin-left: 0;
 	}
 }
 
@@ -152,21 +172,38 @@
 		.block-editor-block-icon {
 			width: 0 !important;
 			height: 0 !important;
+			min-width: 0 !important;
 		}
 	}
 
 	// Parent selector overrides
 
 	.block-editor-block-parent-selector__button {
+		border-top-right-radius: 0;
+		border-bottom-right-radius: 0;
+
 		.block-editor-block-icon {
 			width: 0;
 		}
 	}
 
-	.block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container {
+	.block-editor-block-mover .block-editor-block-mover__move-button-container {
 		width: auto;
 	}
 
+	.block-editor-block-mover.is-horizontal {
+		.block-editor-block-mover__move-button-container,
+		.block-editor-block-mover-button {
+			padding-left: 6px;
+			padding-right: 6px;
+		}
+	}
+
+	.block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover-button {
+		padding-left: $grid-unit;
+		padding-right: $grid-unit;
+	}
+
 	// Mover overrides.
 	.block-editor-block-toolbar__block-controls .block-editor-block-mover {
 		border-left: 1px solid $gray-900;
@@ -179,15 +216,9 @@
 		border-left-color: $gray-200;
 	}
 
-	.block-editor-block-mover-button {
-		// The specificity can be reduced once https://github.com/WordPress/gutenberg/blob/try/block-toolbar-labels/packages/block-editor/src/components/block-mover/style.scss#L34 is also dealt with.
-		padding-left: $grid-unit !important;
-		padding-right: $grid-unit !important;
-	}
-
-	.block-editor-block-mover__drag-handle.has-icon {
-		padding-left: 12px !important;
-		padding-right: 12px !important;
+	.block-editor-block-mover .block-editor-block-mover__drag-handle.has-icon {
+		padding-left: $grid-unit-15;
+		padding-right: $grid-unit-15;
 	}
 
 	.block-editor-block-contextual-toolbar.is-fixed .block-editor-block-mover__move-button-container {
@@ -204,18 +235,10 @@
 
 		.block-editor-block-mover__move-button-container {
 			border-left: 1px solid $gray-900;
-
-			&::before {
-				content: "";
-				display: block;
-				height: 1px;
-				background: $gray-900;
-				order: 2;
-			}
 		}
 
 		.is-down-button.is-down-button.is-down-button {
-			order: 3;
+			order: 2;
 		}
 
 		.block-editor-block-contextual-toolbar.is-fixed .block-editor-block-mover__move-button-container::before {

package/src/components/block-tools/block-contextual-toolbar.js

@@ -7,8 +7,16 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { forwardRef, useEffect, useRef, useState } from '@wordpress/element';
 import { hasBlockSupport, store as blocksStore } from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
+import {
+	ToolbarItem,
+	ToolbarButton,
+	ToolbarGroup,
+} from '@wordpress/components';
+import { levelUp } from '@wordpress/icons';
+import { useViewportMatch } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -16,10 +24,57 @@ import { useSelect } from '@wordpress/data';
 import NavigableToolbar from '../navigable-toolbar';
 import BlockToolbar from '../block-toolbar';
 import { store as blockEditorStore } from '../../store';
+import BlockIcon from '../block-icon';
+
+const CollapseFixedToolbarButton = forwardRef( ( { onClick }, ref ) => {
+	return (
+		<ToolbarItem
+			as={ ToolbarButton }
+			className="block-editor-block-toolbar__collapse-fixed-toolbar"
+			icon={ levelUp }
+			onClick={ onClick }
+			ref={ ref }
+			label={ __( 'Show document tools' ) }
+		/>
+	);
+} );
+
+const ExpandFixedToolbarButton = forwardRef( ( { onClick, icon }, ref ) => {
+	return (
+		<ToolbarItem
+			as={ ToolbarButton }
+			className="block-editor-block-toolbar__expand-fixed-toolbar"
+			icon={ <BlockIcon icon={ icon } /> }
+			onClick={ onClick }
+			ref={ ref }
+			label={ __( 'Show block tools' ) }
+		/>
+	);
+} );
 
 function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
-	const { blockType, hasParents, showParentSelector } = useSelect(
-		( select ) => {
+	// When the toolbar is fixed it can be collapsed
+	const [ isCollapsed, setIsCollapsed ] = useState( false );
+	const expandFixedToolbarButtonRef = useRef();
+	const collapseFixedToolbarButtonRef = useRef();
+
+	// Don't focus the block toolbar just because it mounts
+	const initialRender = useRef( true );
+	useEffect( () => {
+		if ( initialRender.current ) {
+			initialRender.current = false;
+			return;
+		}
+		if ( isCollapsed && expandFixedToolbarButtonRef.current ) {
+			expandFixedToolbarButtonRef.current.focus();
+		}
+		if ( ! isCollapsed && collapseFixedToolbarButtonRef.current ) {
+			collapseFixedToolbarButtonRef.current.focus();
+		}
+	}, [ isCollapsed ] );
+
+	const { blockType, hasParents, showParentSelector, selectedBlockClientId } =
+		useSelect( ( select ) => {
 			const {
 				getBlockName,
 				getBlockParents,
@@ -28,16 +83,17 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 			} = select( blockEditorStore );
 			const { getBlockType } = select( blocksStore );
 			const selectedBlockClientIds = getSelectedBlockClientIds();
-			const selectedBlockClientId = selectedBlockClientIds[ 0 ];
-			const parents = getBlockParents( selectedBlockClientId );
+			const _selectedBlockClientId = selectedBlockClientIds[ 0 ];
+			const parents = getBlockParents( _selectedBlockClientId );
 			const firstParentClientId = parents[ parents.length - 1 ];
 			const parentBlockName = getBlockName( firstParentClientId );
 			const parentBlockType = getBlockType( parentBlockName );
 
 			return {
+				selectedBlockClientId: _selectedBlockClientId,
 				blockType:
-					selectedBlockClientId &&
-					getBlockType( getBlockName( selectedBlockClientId ) ),
+					_selectedBlockClientId &&
+					getBlockType( getBlockName( _selectedBlockClientId ) ),
 				hasParents: parents.length,
 				showParentSelector:
 					parentBlockType &&
@@ -48,12 +104,16 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 					) &&
 					selectedBlockClientIds.length <= 1 &&
 					! __unstableGetContentLockingParent(
-						selectedBlockClientId
+						_selectedBlockClientId
 					),
 			};
-		},
-		[]
-	);
+		}, [] );
+
+	useEffect( () => {
+		setIsCollapsed( false );
+	}, [ selectedBlockClientId ] );
+
+	const isLargeViewport = useViewportMatch( 'medium' );
 
 	if ( blockType ) {
 		if ( ! hasBlockSupport( blockType, '__experimentalToolbar', true ) ) {
@@ -65,6 +125,7 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 	const classes = classnames( 'block-editor-block-contextual-toolbar', {
 		'has-parent': hasParents && showParentSelector,
 		'is-fixed': isFixed,
+		'is-collapsed': isCollapsed,
 	} );
 
 	return (
@@ -75,7 +136,29 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 			aria-label={ __( 'Block tools' ) }
 			{ ...props }
 		>
-			<BlockToolbar hideDragHandle={ isFixed } />
+			{ isFixed && isLargeViewport && blockType && (
+				<ToolbarGroup
+					className={
+						isCollapsed
+							? 'block-editor-block-toolbar__group-expand-fixed-toolbar'
+							: 'block-editor-block-toolbar__group-collapse-fixed-toolbar'
+					}
+				>
+					{ isCollapsed ? (
+						<ExpandFixedToolbarButton
+							onClick={ () => setIsCollapsed( false ) }
+							icon={ blockType.icon }
+							ref={ expandFixedToolbarButtonRef }
+						/>
+					) : (
+						<CollapseFixedToolbarButton
+							onClick={ () => setIsCollapsed( true ) }
+							ref={ collapseFixedToolbarButtonRef }
+						/>
+					) }
+				</ToolbarGroup>
+			) }
+			{ ! isCollapsed && <BlockToolbar hideDragHandle={ isFixed } /> }
 		</NavigableToolbar>
 	);
 }

package/src/components/block-tools/selected-block-popover.js

@@ -10,7 +10,6 @@ import { useRef, useEffect } from '@wordpress/element';
 import { isUnmodifiedDefaultBlock } from '@wordpress/blocks';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useShortcut } from '@wordpress/keyboard-shortcuts';
-import { useViewportMatch } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -22,26 +21,20 @@ import BlockPopover from '../block-popover';
 import useBlockToolbarPopoverProps from './use-block-toolbar-popover-props';
 import Inserter from '../inserter';
 import { unlock } from '../../lock-unlock';
+import { privateApis } from '../../private-apis';
 
 function selector( select ) {
 	const {
 		__unstableGetEditorMode,
-		isMultiSelecting,
 		hasMultiSelection,
 		isTyping,
-		isBlockInterfaceHidden,
-		getSettings,
 		getLastMultiSelectedBlockClientId,
 	} = unlock( select( blockEditorStore ) );
 
 	return {
 		editorMode: __unstableGetEditorMode(),
 		hasMultiSelection: hasMultiSelection(),
-		isMultiSelecting: isMultiSelecting(),
 		isTyping: isTyping(),
-		isBlockInterfaceHidden: isBlockInterfaceHidden(),
-		hasFixedToolbar: getSettings().hasFixedToolbar,
-		isDistractionFree: getSettings().isDistractionFree,
 		lastClientId: hasMultiSelection()
 			? getLastMultiSelectedBlockClientId()
 			: null,
@@ -52,21 +45,16 @@ function SelectedBlockPopover( {
 	clientId,
 	rootClientId,
 	isEmptyDefaultBlock,
-	showContents, // we may need to mount an empty popover because we reuse
 	capturingClientId,
 	__unstablePopoverSlot,
 	__unstableContentRef,
 } ) {
-	const {
-		editorMode,
-		hasMultiSelection,
-		isMultiSelecting,
-		isTyping,
-		isBlockInterfaceHidden,
-		hasFixedToolbar,
-		isDistractionFree,
-		lastClientId,
-	} = useSelect( selector, [] );
+	const { editorMode, hasMultiSelection, isTyping, lastClientId } = useSelect(
+		selector,
+		[]
+	);
+
+	const { useShouldContextualToolbarShow } = unlock( privateApis );
 	const isInsertionPointVisible = useSelect(
 		( select ) => {
 			const {
@@ -85,8 +73,10 @@ function SelectedBlockPopover( {
 		},
 		[ clientId ]
 	);
-	const isLargeViewport = useViewportMatch( 'medium' );
 	const isToolbarForced = useRef( false );
+	const { shouldShowContextualToolbar, canFocusHiddenToolbar } =
+		useShouldContextualToolbarShow( clientId );
+
 	const { stopTyping } = useDispatch( blockEditorStore );
 
 	const showEmptyBlockSideInserter =
@@ -94,20 +84,6 @@ function SelectedBlockPopover( {
 	const shouldShowBreadcrumb =
 		! hasMultiSelection &&
 		( editorMode === 'navigation' || editorMode === 'zoom-out' );
-	const shouldShowContextualToolbar =
-		editorMode === 'edit' &&
-		! hasFixedToolbar &&
-		isLargeViewport &&
-		! isMultiSelecting &&
-		! showEmptyBlockSideInserter &&
-		! isTyping &&
-		! isBlockInterfaceHidden;
-	const canFocusHiddenToolbar =
-		editorMode === 'edit' &&
-		! shouldShowContextualToolbar &&
-		! hasFixedToolbar &&
-		! isDistractionFree &&
-		! isEmptyDefaultBlock;
 
 	useShortcut(
 		'core/block-editor/focus-toolbar',
@@ -179,7 +155,7 @@ function SelectedBlockPopover( {
 				resize={ false }
 				{ ...popoverProps }
 			>
-				{ shouldShowContextualToolbar && showContents && (
+				{ shouldShowContextualToolbar && (
 					<BlockContextualToolbar
 						// If the toolbar is being shown because of being forced
 						// it should focus the toolbar right after the mount.
@@ -215,8 +191,6 @@ function wrapperSelector( select ) {
 		getBlockRootClientId,
 		getBlock,
 		getBlockParents,
-		getSettings,
-		isNavigationMode: _isNavigationMode,
 		__experimentalGetBlockListSettingsForBlocks,
 	} = select( blockEditorStore );
 
@@ -242,14 +216,10 @@ function wrapperSelector( select ) {
 				?.__experimentalCaptureToolbars
 	);
 
-	const settings = getSettings();
-
 	return {
 		clientId,
 		rootClientId: getBlockRootClientId( clientId ),
 		name,
-		isDistractionFree: settings.isDistractionFree,
-		isNavigationMode: _isNavigationMode(),
 		isEmptyDefaultBlock:
 			name && isUnmodifiedDefaultBlock( { name, attributes } ),
 		capturingClientId,
@@ -272,8 +242,6 @@ export default function WrappedBlockPopover( {
 		name,
 		isEmptyDefaultBlock,
 		capturingClientId,
-		isDistractionFree,
-		isNavigationMode,
 	} = selected;
 
 	if ( ! name ) {
@@ -285,7 +253,6 @@ export default function WrappedBlockPopover( {
 			clientId={ clientId }
 			rootClientId={ rootClientId }
 			isEmptyDefaultBlock={ isEmptyDefaultBlock }
-			showContents={ ! isDistractionFree || isNavigationMode }
 			capturingClientId={ capturingClientId }
 			__unstablePopoverSlot={ __unstablePopoverSlot }
 			__unstableContentRef={ __unstableContentRef }