Adds top toolbar improvements to site editor

packages/block-editor/src/components/block-toolbar/index.js

@@ -120,13 +120,12 @@ const BlockToolbar = ( { hideDragHandle } ) => {
 	const classes = classnames( 'block-editor-block-toolbar', {
 		'is-showing-movers': shouldShowMovers,
 		'is-synced': isSynced,
+		'is-fixed': hasFixedToolbar,
 	} );
 
 	return (
 		<div className={ classes }>
-			{ ! isMultiToolbar &&
-				! displayHeaderToolbar &&
-				! isContentLocked && <BlockParentSelector /> }
+			{ ! isMultiToolbar && ! isContentLocked && <BlockParentSelector /> }
 			<div ref={ nodeRef } { ...showMoversGestures }>
 				{ ( shouldShowVisualToolbar || isMultiToolbar ) &&
 					! isContentLocked && (

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

@@ -20,6 +20,33 @@
 		overflow: inherit;
 	}
 
+	&.is-fixed > .block-editor-block-parent-selector .block-editor-block-parent-selector__button {
+		border: 0;
+		&::after {
+			content: "\00B7";
+			font-size: 16px;
+			line-height: $grid-unit-40 + $grid-unit-10;
+			position: absolute;
+			left: $grid-unit-40 + $grid-unit-15 + 2px;
+			bottom: $grid-unit-05;
+		}
+	}
+
+	&:not(.is-fixed) > .block-editor-block-parent-selector {
+		position: absolute;
+		top: -$border-width;
+		left: calc(-#{$grid-unit-60} - #{$grid-unit-10} - #{$border-width});
+
+		.show-icon-labels & {
+			position: relative;
+			left: auto;
+			top: auto;
+			margin-top: -$border-width;
+			margin-left: -$border-width;
+			margin-bottom: -$border-width;
+		}
+	}
+
 	// Borders around toolbar segments.
 	.components-toolbar-group,
 	.components-toolbar {
@@ -64,20 +91,6 @@
 	}
 }
 
-.block-editor-block-parent-selector {
-	position: absolute;
-	top: -$border-width;
-	left: calc(-#{$grid-unit-60} - #{$grid-unit-10} - #{$border-width});
-
-	.show-icon-labels & {
-		position: relative;
-		left: auto;
-		top: auto;
-		margin-top: -$border-width;
-		margin-left: -$border-width;
-		margin-bottom: -$border-width;
-	}
-}
 
 // Block controls.
 .block-editor-block-toolbar__block-controls {

packages/block-editor/src/components/block-tools/index.js

@@ -46,10 +46,7 @@ export default function BlockTools( {
 	...props
 } ) {
 	const isLargeViewport = useViewportMatch( 'medium' );
-	const { hasFixedToolbar, isZoomOutMode, isTyping } = useSelect(
-		selector,
-		[]
-	);
+	const { isZoomOutMode, isTyping } = useSelect( selector, [] );
 	const isMatch = useShortcutEventMatch();
 	const { getSelectedBlockClientIds, getBlockRootClientId } =
 		useSelect( blockEditorStore );
@@ -129,10 +126,9 @@ export default function BlockTools( {
 						__unstableContentRef={ __unstableContentRef }
 					/>
 				) }
-				{ ! isZoomOutMode &&
-					( hasFixedToolbar || ! isLargeViewport ) && (
-						<BlockContextualToolbar isFixed />
-					) }
+				{ ! isLargeViewport && ! isZoomOutMode && (
+					<BlockContextualToolbar isFixed />
+				) }
 				{ /* Even if the toolbar is fixed, the block popover is still
 					needed for navigation and zoom-out mode. */ }
 				<SelectedBlockPopover

packages/edit-post/src/components/header/header-toolbar/index.js

@@ -3,59 +3,33 @@
  */
 import { useViewportMatch } from '@wordpress/compose';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { __, _x } from '@wordpress/i18n';
-import {
-	NavigableToolbar,
-	ToolSelector,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
-import {
-	EditorHistoryRedo,
-	EditorHistoryUndo,
-	store as editorStore,
-} from '@wordpress/editor';
+import { __ } from '@wordpress/i18n';
+import { NavigableToolbar, ToolSelector } from '@wordpress/block-editor';
+import { EditorHistoryRedo, EditorHistoryUndo } from '@wordpress/editor';
 import { Button, ToolbarItem } from '@wordpress/components';
-import { listView, plus } from '@wordpress/icons';
-import { useRef, useCallback } from '@wordpress/element';
+import { listView } from '@wordpress/icons';
+import { useCallback } from '@wordpress/element';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 
 /**
  * Internal dependencies
  */
 import { store as editPostStore } from '../../../store';
+import InserterButton from '../inserter-button';
 
-const preventDefault = ( event ) => {
-	event.preventDefault();
-};
-
-function HeaderToolbar() {
-	const inserterButton = useRef();
-	const { setIsInserterOpened, setIsListViewOpened } =
-		useDispatch( editPostStore );
+function HeaderToolbar( { BlockToolbarToggle, hasSelectedBlocks } ) {
+	const { setIsListViewOpened } = useDispatch( editPostStore );
 	const {
-		isInserterEnabled,
-		isInserterOpened,
 		isTextModeEnabled,
 		showIconLabels,
 		isListViewOpen,
 		listViewShortcut,
 	} = useSelect( ( select ) => {
-		const { hasInserterItems, getBlockRootClientId, getBlockSelectionEnd } =
-			select( blockEditorStore );
-		const { getEditorSettings } = select( editorStore );
 		const { getEditorMode, isFeatureActive, isListViewOpened } =
 			select( editPostStore );
 		const { getShortcutRepresentation } = select( keyboardShortcutsStore );
 
 		return {
-			// This setting (richEditingEnabled) should not live in the block editor's setting.
-			isInserterEnabled:
-				getEditorMode() === 'visual' &&
-				getEditorSettings().richEditingEnabled &&
-				hasInserterItems(
-					getBlockRootClientId( getBlockSelectionEnd() )
-				),
-			isInserterOpened: select( editPostStore ).isInserterOpened(),
 			isTextModeEnabled: getEditorMode() === 'text',
 			showIconLabels: isFeatureActive( 'showIconLabels' ),
 			isListViewOpen: isListViewOpened(),
@@ -91,44 +65,14 @@ function HeaderToolbar() {
 			/>
 		</>
 	);
-	const toggleInserter = useCallback( () => {
-		if ( isInserterOpened ) {
-			// Focusing the inserter button should close the inserter popover.
-			// However, there are some cases it won't close when the focus is lost.
-			// See https://github.com/WordPress/gutenberg/issues/43090 for more details.
-			inserterButton.current.focus();
-			setIsInserterOpened( false );
-		} else {
-			setIsInserterOpened( true );
-		}
-	}, [ isInserterOpened, setIsInserterOpened ] );
-
-	/* translators: button label text should, if possible, be under 16 characters. */
-	const longLabel = _x(
-		'Toggle block inserter',
-		'Generic label for block inserter button'
-	);
-	const shortLabel = ! isInserterOpened ? __( 'Add' ) : __( 'Close' );
 
 	return (
 		<NavigableToolbar
-			className="edit-post-header-toolbar"
+			className="edit-post-header-document-toolbar"
 			aria-label={ toolbarAriaLabel }
 		>
-			<div className="edit-post-header-toolbar__left">
-				<ToolbarItem
-					ref={ inserterButton }
-					as={ Button }
-					className="edit-post-header-toolbar__inserter-toggle"
-					variant="primary"
-					isPressed={ isInserterOpened }
-					onMouseDown={ preventDefault }
-					onClick={ toggleInserter }
-					disabled={ ! isInserterEnabled }
-					icon={ plus }
-					label={ showIconLabels ? shortLabel : longLabel }
-					showTooltip={ ! showIconLabels }
-				/>
+			<div className="edit-post-header-document-toolbar__left">
+				<InserterButton />
 				{ ( isWideViewport || ! showIconLabels ) && (
 					<>
 						{ isLargeViewport && (
@@ -152,6 +96,7 @@ function HeaderToolbar() {
 							variant={ showIconLabels ? 'tertiary' : undefined }
 						/>
 						{ overflowItems }
+						{ hasSelectedBlocks && <BlockToolbarToggle /> }
 					</>
 				) }
 			</div>

packages/edit-post/src/components/header/header-toolbar/style.scss

@@ -1,19 +1,19 @@
-.edit-post-header-toolbar {
+.edit-post-header-document-toolbar {
 	display: inline-flex;
 	flex-grow: 1;
 	align-items: center;
 	border: none;
 
 	// Hide all action buttons except the inserter on mobile.
-	.edit-post-header-toolbar__left > .components-button {
+	.edit-post-header-document-toolbar__left > .components-button {
 		display: none;
 
 		@include break-small() {
 			display: inline-flex;
 		}
 	}
 
-	.edit-post-header-toolbar__left > .edit-post-header-toolbar__inserter-toggle {
+	.edit-post-header-document-toolbar__left > .edit-post-header-toolbar__inserter-toggle {
 		display: inline-flex;
 
 		svg {
@@ -39,11 +39,92 @@
 
 	// The Toolbar component adds different styles to buttons, so we reset them
 	// here to the original button styles
-	.edit-post-header-toolbar__left > .components-button.has-icon,
-	.edit-post-header-toolbar__left > .components-dropdown > .components-button.has-icon {
+	.edit-post-header-document-toolbar__left > .components-button.has-icon:first-child {
+		margin-right: $grid-unit-10;
+	}
+
+	.edit-post-header-document-toolbar__left > .components-button.has-icon,
+	.edit-post-header-document-toolbar__left > .components-dropdown > .components-button.has-icon {
+		height: $grid-unit-40;
+		min-width: $grid-unit-40;
+		margin-right: $grid-unit-05;
+		padding: 0;
+		width: 32px;
+
+		&.is-pressed {
+			background: $gray-900;
+		}
+
+		&:focus:not(:disabled) {
+			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 $border-width $white;
+			outline: 1px solid transparent;
+		}
+
+		&::before {
+			display: none;
+		}
+	}
+
+	& > .edit-post-header-document-toolbar__left button.components-button.edit-post-header-toolbar__block-tools-toggle.is-primary.has-icon {
+		height: $button-size;
+		min-width: $button-size;
+		background-color: #fff;
+		color: #000;
+		margin-left: $grid-unit-10;
+		border-left: 1px solid #ddd;
+		padding-left: $grid-unit-15;
+
+		&:hover {
+			color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+		}
+	}
+}
+
+.edit-post-header-block-toolbar {
+	display: inline-flex;
+	flex-grow: 1;
+	align-items: center;
+	border: none;
+	padding-left: 24px; //compensates for the edit-post-header-document-toolbar__left left padding
+	height: 32px;
+	overflow: hidden; //limits the height of the separators
+
+	> .edit-post-header-toolbar__inserter-toggle {
+		display: inline-flex;
+
+		svg {
+			transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
+			@include reduce-motion("transition");
+		}
+
+		&.is-pressed {
+			svg {
+				transform: rotate(45deg);
+			}
+		}
+	}
+
+	& > button.components-button.edit-post-header-toolbar__document-tools-toggle.is-primary.has-icon {
 		height: $button-size;
 		min-width: $button-size;
 		padding: 6px;
+		background-color: #fff;
+		color: #000;
+		border-right: 1px solid #ddd;
+
+		&:hover {
+			color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+		}
+	}
+
+	// The Toolbar component adds different styles to buttons, so we reset them
+	// here to the original button styles
+	& > button.components-button.edit-post-header-toolbar__inserter-toggle.is-primary.has-icon {
+		height: 32px;
+		margin-right: 8px;
+		min-width: 32px;
+		padding: 0;
+		width: 32px;
 
 		&.is-pressed {
 			background: $gray-900;
@@ -57,28 +138,35 @@
 		&::before {
 			display: none;
 		}
+
+		.show-icon-labels & {
+			width: auto;
+			height: 36px;
+			padding: 0 $grid-unit-10;
+		}
 	}
+
 }
 
 // Reduced UI.
 .edit-post-header.has-reduced-ui {
 	@include break-small () {
 		// Apply transition to every button but the first one.
-		.edit-post-header-toolbar__left > * + .components-button,
-		.edit-post-header-toolbar__left > * + .components-dropdown > [aria-expanded="false"] {
+		.edit-post-header-document-toolbar__left > * + .components-button,
+		.edit-post-header-document-toolbar__left > * + .components-dropdown > [aria-expanded="false"] {
 			transition: opacity 0.1s linear;
 			@include reduce-motion("transition");
 		}
 
 		// Zero out opacity unless hovered.
-		&:not(:hover) .edit-post-header-toolbar__left > * + .components-button,
-		&:not(:hover) .edit-post-header-toolbar__left > * + .components-dropdown > [aria-expanded="false"] {
+		&:not(:hover) .edit-post-header-document-toolbar__left > * + .components-button,
+		&:not(:hover) .edit-post-header-document-toolbar__left > * + .components-dropdown > [aria-expanded="false"] {
 			opacity: 0;
 		}
 	}
 }
 
-.edit-post-header-toolbar__left {
+.edit-post-header-document-toolbar__left {
 	display: inline-flex;
 	align-items: center;
 	padding-left: $grid-unit-10;
@@ -92,7 +180,7 @@
 	}
 }
 
-.edit-post-header-toolbar .edit-post-header-toolbar__left > .edit-post-header-toolbar__inserter-toggle.has-icon {
+.edit-post-header-document-toolbar .edit-post-header-document-toolbar__left > .edit-post-header-document-toolbar__inserter-toggle.has-icon {
 	margin-right: $grid-unit-10;
 	// Special dimensions for this button.
 	min-width: 32px;
@@ -107,6 +195,6 @@
 	}
 }
 
-.show-icon-labels .edit-post-header-toolbar__left > * + * {
+.show-icon-labels .edit-post-header-document-toolbar__left > * + * {
 	margin-left: $grid-unit-10;
 }