@wordpress/block-editor 12.15.0 → 12.16.1-next.79a6196f.0

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

@@ -56,57 +56,66 @@
 	}
 }
 
-.block-editor-block-contextual-toolbar.is-fixed {
+.block-editor-block-contextual-toolbar {
 	position: sticky;
 	top: 0;
 	z-index: z-index(".block-editor-block-popover");
 	display: block;
 	width: 100%;
-}
+	// Block UI appearance.
+	background-color: $white;
+	flex-shrink: 3;
+
+	// Raise the specificity.
+	&.components-accessible-toolbar {
+		border: none;
+		border-bottom: $border-width solid $gray-200;
+		border-radius: 0;
+	}
 
-// 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;
-					}
-				}
-			}
+	.block-editor-block-toolbar {
+		overflow: auto;
+		overflow-y: hidden;
 
-			> :last-child,
-			> :last-child .components-toolbar-group,
-			> :last-child .components-toolbar {
-				&::after {
-					display: none;
-				}
+		> :last-child,
+		> :last-child .components-toolbar-group,
+		> :last-child .components-toolbar {
+			&::after {
+				display: none;
 			}
 		}
 	}
-}
 
-.block-editor-block-contextual-toolbar.has-parent:not(.is-fixed) {
-	margin-left: calc(#{$grid-unit-60} + #{$grid-unit-10});
+	.block-editor-block-toolbar .components-toolbar-group,
+	.block-editor-block-toolbar .components-toolbar {
+		border-right-color: $gray-200;
+	}
 
-	.show-icon-labels & {
-		margin-left: 0;
+	& > .block-editor-block-toolbar {
+		flex-grow: initial;
+		width: initial;
+	}
+
+	.block-editor-block-parent-selector {
+		position: relative;
+
+		// Parent selector dot divider
+		&::after {
+			content: "\00B7";
+			position: absolute;
+			font-size: 16px;
+			right: 0;
+			bottom: $grid-unit-20;
+		}
+	}
+
+	.block-editor-block-parent-selector__button {
+		position: relative;
+		top: -1px;
 	}
 }
 
+
 // Block controls.
 .block-editor-block-toolbar__block-controls {
 	// Switcher.
@@ -165,7 +174,6 @@
 	}
 
 	// Padding overrides.
-
 	.components-accessible-toolbar .components-toolbar-group > div:first-child:last-child > .components-button.has-icon {
 		padding-left: 6px;
 		padding-right: 6px;
@@ -181,10 +189,12 @@
 	}
 
 	// Parent selector overrides
-
-	.block-editor-block-parent-selector__button {
+	.block-editor-block-parent-selector .block-editor-block-parent-selector__button {
 		border-top-right-radius: 0;
 		border-bottom-right-radius: 0;
+		padding-left: $grid-unit-15;
+		padding-right: $grid-unit-15;
+		text-wrap: nowrap;
 
 		.block-editor-block-icon {
 			width: 0;
@@ -210,25 +220,17 @@
 
 	// Mover overrides.
 	.block-editor-block-toolbar__block-controls .block-editor-block-mover {
-		border-left: 1px solid $gray-900;
+		border-left: 1px solid $gray-300;
 		margin-left: 6px;
 		margin-right: -6px;
 		white-space: nowrap;
 	}
 
-	.block-editor-block-contextual-toolbar.is-fixed .block-editor-block-toolbar__block-controls .block-editor-block-mover {
-		border-left-color: $gray-200;
-	}
-
 	.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 {
-		border-width: 0;
-	}
-
 	@include break-small() {
 		// Specificity override for https://github.com/WordPress/gutenberg/blob/try/block-toolbar-labels/packages/block-editor/src/components/block-mover/style.scss#L69
 		.is-up-button.is-up-button.is-up-button {
@@ -237,17 +239,9 @@
 			order: 1;
 		}
 
-		.block-editor-block-mover__move-button-container {
-			border-left: 1px solid $gray-900;
-		}
-
 		.is-down-button.is-down-button.is-down-button {
 			order: 2;
 		}
-
-		.block-editor-block-contextual-toolbar.is-fixed .block-editor-block-mover__move-button-container::before {
-			background: $gray-300;
-		}
 	}
 
 	.block-editor-block-contextual-toolbar .block-editor-block-mover.is-horizontal .block-editor-block-mover-button.block-editor-block-mover-button {
@@ -260,16 +254,6 @@
 		flex-shrink: 1;
 	}
 
-	@include break-medium() {
-		.block-editor-block-contextual-toolbar.is-fixed {
-			.components-toolbar,
-			.components-toolbar-group {
-				flex-shrink: 0;
-			}
-		}
-	}
-
-
 	.block-editor-rich-text__inline-format-toolbar-group {
 		.components-button + .components-button {
 			margin-left: 6px;

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

@@ -0,0 +1,46 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import BlockSelectionButton from './block-selection-button';
+import BlockPopover from '../block-popover';
+import useBlockToolbarPopoverProps from './use-block-toolbar-popover-props';
+import useSelectedBlockToolProps from './use-selected-block-tool-props';
+
+export default function BlockToolbarBreadcrumb( {
+	clientId,
+	__unstableContentRef,
+} ) {
+	const {
+		capturingClientId,
+		isInsertionPointVisible,
+		lastClientId,
+		rootClientId,
+	} = useSelectedBlockToolProps( clientId );
+
+	const popoverProps = useBlockToolbarPopoverProps( {
+		contentElement: __unstableContentRef?.current,
+		clientId,
+	} );
+
+	return (
+		<BlockPopover
+			clientId={ capturingClientId || clientId }
+			bottomClientId={ lastClientId }
+			className={ classnames( 'block-editor-block-list__block-popover', {
+				'is-insertion-point-visible': isInsertionPointVisible,
+			} ) }
+			resize={ false }
+			{ ...popoverProps }
+		>
+			<BlockSelectionButton
+				clientId={ clientId }
+				rootClientId={ rootClientId }
+			/>
+		</BlockPopover>
+	);
+}

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

@@ -0,0 +1,84 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+/**
+ * WordPress dependencies
+ */
+import { useDispatch } from '@wordpress/data';
+import { useEffect, useRef } from '@wordpress/element';
+import { useShortcut } from '@wordpress/keyboard-shortcuts';
+/**
+ * Internal dependencies
+ */
+import BlockPopover from '../block-popover';
+import useBlockToolbarPopoverProps from './use-block-toolbar-popover-props';
+import useSelectedBlockToolProps from './use-selected-block-tool-props';
+import { store as blockEditorStore } from '../../store';
+import { PrivateBlockToolbar } from '../block-toolbar';
+
+export default function BlockToolbarPopover( {
+	clientId,
+	isTyping,
+	__unstableContentRef,
+} ) {
+	const { capturingClientId, isInsertionPointVisible, lastClientId } =
+		useSelectedBlockToolProps( clientId );
+
+	// Stores the active toolbar item index so the block toolbar can return focus
+	// to it when re-mounting.
+	const initialToolbarItemIndexRef = useRef();
+
+	useEffect( () => {
+		// Resets the index whenever the active block changes so this is not
+		// persisted. See https://github.com/WordPress/gutenberg/pull/25760#issuecomment-717906169
+		initialToolbarItemIndexRef.current = undefined;
+	}, [ clientId ] );
+
+	const { stopTyping } = useDispatch( blockEditorStore );
+	const isToolbarForced = useRef( false );
+
+	useShortcut( 'core/block-editor/focus-toolbar', () => {
+		isToolbarForced.current = true;
+		stopTyping( true );
+	} );
+
+	useEffect( () => {
+		isToolbarForced.current = false;
+	} );
+
+	const popoverProps = useBlockToolbarPopoverProps( {
+		contentElement: __unstableContentRef?.current,
+		clientId,
+	} );
+
+	return (
+		! isTyping && (
+			<BlockPopover
+				clientId={ capturingClientId || clientId }
+				bottomClientId={ lastClientId }
+				className={ classnames(
+					'block-editor-block-list__block-popover',
+					{
+						'is-insertion-point-visible': isInsertionPointVisible,
+					}
+				) }
+				resize={ false }
+				{ ...popoverProps }
+			>
+				<PrivateBlockToolbar
+					// If the toolbar is being shown because of being forced
+					// it should focus the toolbar right after the mount.
+					focusOnMount={ isToolbarForced.current }
+					__experimentalInitialIndex={
+						initialToolbarItemIndexRef.current
+					}
+					__experimentalOnIndexChange={ ( index ) => {
+						initialToolbarItemIndexRef.current = index;
+					} }
+					variant="toolbar"
+				/>
+			</BlockPopover>
+		)
+	);
+}

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

@@ -2,7 +2,6 @@
  * WordPress dependencies
  */
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useViewportMatch } from '@wordpress/compose';
 import { Popover } from '@wordpress/components';
 import { __unstableUseShortcutEventMatch as useShortcutEventMatch } from '@wordpress/keyboard-shortcuts';
 import { useRef } from '@wordpress/element';
@@ -16,9 +15,9 @@ import {
 	InsertionPointOpenRef,
 	default as InsertionPoint,
 } from './insertion-point';
-import SelectedBlockTools from './selected-block-tools';
+import BlockToolbarPopover from './block-toolbar-popover';
+import BlockToolbarBreadcrumb from './block-toolbar-breadcrumb';
 import { store as blockEditorStore } from '../../store';
-import BlockContextualToolbar from './block-contextual-toolbar';
 import usePopoverScroll from '../block-popover/use-popover-scroll';
 import ZoomOutModeInserters from './zoom-out-mode-inserters';
 
@@ -28,6 +27,7 @@ function selector( select ) {
 		getFirstMultiSelectedBlockClientId,
 		getBlock,
 		getSettings,
+		hasMultiSelection,
 		__unstableGetEditorMode,
 		isTyping,
 	} = select( blockEditorStore );
@@ -36,18 +36,35 @@ function selector( select ) {
 		getSelectedBlockClientId() || getFirstMultiSelectedBlockClientId();
 
 	const { name = '', attributes = {} } = getBlock( clientId ) || {};
+	const editorMode = __unstableGetEditorMode();
+	const hasSelectedBlock = clientId && name;
+	const isEmptyDefaultBlock = isUnmodifiedDefaultBlock( {
+		name,
+		attributes,
+	} );
+	const _showEmptyBlockSideInserter =
+		clientId &&
+		! isTyping() &&
+		editorMode === 'edit' &&
+		isUnmodifiedDefaultBlock( { name, attributes } );
+	const maybeShowBreadcrumb =
+		hasSelectedBlock &&
+		! hasMultiSelection() &&
+		( editorMode === 'navigation' || editorMode === 'zoom-out' );
 
 	return {
 		clientId,
 		hasFixedToolbar: getSettings().hasFixedToolbar,
-		hasSelectedBlock: clientId && name,
 		isTyping: isTyping(),
-		isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
-		showEmptyBlockSideInserter:
-			clientId &&
-			! isTyping() &&
-			__unstableGetEditorMode() === 'edit' &&
-			isUnmodifiedDefaultBlock( { name, attributes } ),
+		isZoomOutMode: editorMode === 'zoom-out',
+		showEmptyBlockSideInserter: _showEmptyBlockSideInserter,
+		showBreadcrumb: ! _showEmptyBlockSideInserter && maybeShowBreadcrumb,
+		showBlockToolbar:
+			! getSettings().hasFixedToolbar &&
+			! _showEmptyBlockSideInserter &&
+			hasSelectedBlock &&
+			! isEmptyDefaultBlock &&
+			! maybeShowBreadcrumb,
 	};
 }
 
@@ -65,14 +82,14 @@ export default function BlockTools( {
 	__unstableContentRef,
 	...props
 } ) {
-	const isLargeViewport = useViewportMatch( 'medium' );
 	const {
 		clientId,
 		hasFixedToolbar,
-		hasSelectedBlock,
 		isTyping,
 		isZoomOutMode,
 		showEmptyBlockSideInserter,
+		showBreadcrumb,
+		showBlockToolbar,
 	} = useSelect( selector, [] );
 	const isMatch = useShortcutEventMatch();
 	const { getSelectedBlockClientIds, getBlockRootClientId } =
@@ -162,12 +179,6 @@ export default function BlockTools( {
 	const blockToolbarRef = usePopoverScroll( __unstableContentRef );
 	const blockToolbarAfterRef = usePopoverScroll( __unstableContentRef );
 
-	// Conditions for fixed toolbar
-	// 1. Not zoom out mode
-	// 2. It's a large viewport. If it's a smaller viewport, let the floating toolbar handle it as it already has styles attached to make it render that way.
-	// 3. Fixed toolbar is enabled
-	const isTopToolbar = ! isZoomOutMode && hasFixedToolbar && isLargeViewport;
-
 	return (
 		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
 		<div { ...props } onKeyDown={ onKeyDown }>
@@ -177,11 +188,6 @@ export default function BlockTools( {
 						__unstableContentRef={ __unstableContentRef }
 					/>
 				) }
-				{ /* If there is no slot available, such as in the standalone block editor, render within the editor */ }
-
-				{ ! isLargeViewport && ( // Small viewports always get a fixed toolbar
-					<BlockContextualToolbar isFixed />
-				) }
 
 				{ showEmptyBlockSideInserter && (
 					<EmptyBlockInserter
@@ -189,17 +195,24 @@ export default function BlockTools( {
 						clientId={ clientId }
 					/>
 				) }
-				{ /* Even if the toolbar is fixed, the block popover is still
-					needed for navigation and zoom-out mode. */ }
-				{ ! showEmptyBlockSideInserter && hasSelectedBlock && (
-					<SelectedBlockTools
+
+				{ showBlockToolbar && (
+					<BlockToolbarPopover
+						__unstableContentRef={ __unstableContentRef }
+						clientId={ clientId }
+						isTyping={ isTyping }
+					/>
+				) }
+
+				{ showBreadcrumb && (
+					<BlockToolbarBreadcrumb
 						__unstableContentRef={ __unstableContentRef }
 						clientId={ clientId }
 					/>
 				) }
 
-				{ /* Used for the inline rich text toolbar. */ }
-				{ ! isTopToolbar && (
+				{ /* Used for the inline rich text toolbar. Until this toolbar is combined into BlockToolbar, someone implementing their own BlockToolbar will also need to use this to see the image caption toolbar. */ }
+				{ ! isZoomOutMode && ! hasFixedToolbar && (
 					<Popover.Slot
 						name="block-toolbar"
 						ref={ blockToolbarRef }