@wordpress/edit-site 5.22.0 → 5.24.0

package/src/components/header-edit-mode/document-tools/index.js

@@ -0,0 +1,201 @@
+/**
+ * WordPress dependencies
+ */
+import { useCallback, useRef } from '@wordpress/element';
+import { useViewportMatch } from '@wordpress/compose';
+import {
+	ToolSelector,
+	NavigableToolbar,
+	store as blockEditorStore,
+	privateApis as blockEditorPrivateApis,
+} from '@wordpress/block-editor';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { _x, __ } from '@wordpress/i18n';
+import { listView, plus, chevronUpDown } from '@wordpress/icons';
+import { Button, ToolbarItem } from '@wordpress/components';
+import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+
+/**
+ * Internal dependencies
+ */
+import UndoButton from '../undo-redo/undo';
+import RedoButton from '../undo-redo/redo';
+import { store as editSiteStore } from '../../../store';
+import { unlock } from '../../../lock-unlock';
+
+const { useShouldContextualToolbarShow } = unlock( blockEditorPrivateApis );
+
+const preventDefault = ( event ) => {
+	event.preventDefault();
+};
+
+export default function DocumentTools( {
+	blockEditorMode,
+	hasFixedToolbar,
+	isDistractionFree,
+	showIconLabels,
+	setListViewToggleElement,
+} ) {
+	const inserterButton = useRef();
+	const { isInserterOpen, isListViewOpen, listViewShortcut, isVisualMode } =
+		useSelect( ( select ) => {
+			const {
+				__experimentalGetPreviewDeviceType,
+				isInserterOpened,
+				isListViewOpened,
+				getEditorMode,
+			} = select( editSiteStore );
+			const { getShortcutRepresentation } = select(
+				keyboardShortcutsStore
+			);
+
+			return {
+				deviceType: __experimentalGetPreviewDeviceType(),
+				isInserterOpen: isInserterOpened(),
+				isListViewOpen: isListViewOpened(),
+				listViewShortcut: getShortcutRepresentation(
+					'core/edit-site/toggle-list-view'
+				),
+				isVisualMode: getEditorMode() === 'visual',
+			};
+		}, [] );
+
+	const {
+		__experimentalSetPreviewDeviceType: setPreviewDeviceType,
+		setIsInserterOpened,
+		setIsListViewOpened,
+	} = useDispatch( editSiteStore );
+	const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
+
+	const isLargeViewport = useViewportMatch( 'medium' );
+
+	const toggleInserter = useCallback( () => {
+		if ( isInserterOpen ) {
+			// 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 );
+		}
+	}, [ isInserterOpen, setIsInserterOpened ] );
+
+	const toggleListView = useCallback(
+		() => setIsListViewOpened( ! isListViewOpen ),
+		[ setIsListViewOpened, isListViewOpen ]
+	);
+
+	const {
+		shouldShowContextualToolbar,
+		canFocusHiddenToolbar,
+		fixedToolbarCanBeFocused,
+	} = useShouldContextualToolbarShow();
+	// If there's a block toolbar to be focused, disable the focus shortcut for the document toolbar.
+	// There's a fixed block toolbar when the fixed toolbar option is enabled or when the browser width is less than the large viewport.
+	const blockToolbarCanBeFocused =
+		shouldShowContextualToolbar ||
+		canFocusHiddenToolbar ||
+		fixedToolbarCanBeFocused;
+
+	/* 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 = ! isInserterOpen ? __( 'Add' ) : __( 'Close' );
+
+	const isZoomedOutViewExperimentEnabled =
+		window?.__experimentalEnableZoomedOutView && isVisualMode;
+	const isZoomedOutView = blockEditorMode === 'zoom-out';
+
+	return (
+		<NavigableToolbar
+			className="edit-site-header-edit-mode__document-tools"
+			aria-label={ __( 'Document tools' ) }
+			shouldUseKeyboardFocusShortcut={ ! blockToolbarCanBeFocused }
+		>
+			<div className="edit-site-header-edit-mode__toolbar">
+				{ ! isDistractionFree && (
+					<ToolbarItem
+						ref={ inserterButton }
+						as={ Button }
+						className="edit-site-header-edit-mode__inserter-toggle"
+						variant="primary"
+						isPressed={ isInserterOpen }
+						onMouseDown={ preventDefault }
+						onClick={ toggleInserter }
+						disabled={ ! isVisualMode }
+						icon={ plus }
+						label={ showIconLabels ? shortLabel : longLabel }
+						showTooltip={ ! showIconLabels }
+						aria-expanded={ isInserterOpen }
+					/>
+				) }
+				{ isLargeViewport && (
+					<>
+						{ ! hasFixedToolbar && (
+							<ToolbarItem
+								as={ ToolSelector }
+								showTooltip={ ! showIconLabels }
+								variant={
+									showIconLabels ? 'tertiary' : undefined
+								}
+								disabled={ ! isVisualMode }
+							/>
+						) }
+						<ToolbarItem
+							as={ UndoButton }
+							showTooltip={ ! showIconLabels }
+							variant={ showIconLabels ? 'tertiary' : undefined }
+						/>
+						<ToolbarItem
+							as={ RedoButton }
+							showTooltip={ ! showIconLabels }
+							variant={ showIconLabels ? 'tertiary' : undefined }
+						/>
+						{ ! isDistractionFree && (
+							<ToolbarItem
+								as={ Button }
+								className="edit-site-header-edit-mode__list-view-toggle"
+								disabled={ ! isVisualMode || isZoomedOutView }
+								icon={ listView }
+								isPressed={ isListViewOpen }
+								/* translators: button label text should, if possible, be under 16 characters. */
+								label={ __( 'List View' ) }
+								onClick={ toggleListView }
+								ref={ setListViewToggleElement }
+								shortcut={ listViewShortcut }
+								showTooltip={ ! showIconLabels }
+								variant={
+									showIconLabels ? 'tertiary' : undefined
+								}
+								aria-expanded={ isListViewOpen }
+							/>
+						) }
+						{ isZoomedOutViewExperimentEnabled &&
+							! isDistractionFree &&
+							! hasFixedToolbar && (
+								<ToolbarItem
+									as={ Button }
+									className="edit-site-header-edit-mode__zoom-out-view-toggle"
+									icon={ chevronUpDown }
+									isPressed={ isZoomedOutView }
+									/* translators: button label text should, if possible, be under 16 characters. */
+									label={ __( 'Zoom-out View' ) }
+									onClick={ () => {
+										setPreviewDeviceType( 'Desktop' );
+										__unstableSetEditorMode(
+											isZoomedOutView
+												? 'edit'
+												: 'zoom-out'
+										);
+									} }
+								/>
+							) }
+					</>
+				) }
+			</div>
+		</NavigableToolbar>
+	);
+}

package/src/components/header-edit-mode/index.js

@@ -6,29 +6,26 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useCallback, useRef } from '@wordpress/element';
 import { useViewportMatch, useReducedMotion } from '@wordpress/compose';
 import { store as coreStore } from '@wordpress/core-data';
 import {
-	ToolSelector,
 	__experimentalPreviewOptions as PreviewOptions,
-	NavigableToolbar,
-	store as blockEditorStore,
 	privateApis as blockEditorPrivateApis,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { useSelect, useDispatch } from '@wordpress/data';
+import { useEffect, useRef, useState } from '@wordpress/element';
 import { PinnedItems } from '@wordpress/interface';
-import { _x, __ } from '@wordpress/i18n';
-import { listView, plus, external, chevronUpDown } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+import { external, next, previous } from '@wordpress/icons';
 import {
-	__unstableMotion as motion,
 	Button,
-	ToolbarItem,
+	__unstableMotion as motion,
 	MenuGroup,
 	MenuItem,
+	Popover,
 	VisuallyHidden,
 } from '@wordpress/components';
-import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
@@ -36,9 +33,8 @@ import { store as preferencesStore } from '@wordpress/preferences';
  */
 import MoreMenu from './more-menu';
 import SaveButton from '../save-button';
-import UndoButton from './undo-redo/undo';
-import RedoButton from './undo-redo/redo';
 import DocumentActions from './document-actions';
+import DocumentTools from './document-tools';
 import { store as editSiteStore } from '../../store';
 import {
 	getEditorCanvasContainerTitle,
@@ -47,37 +43,25 @@ import {
 import { unlock } from '../../lock-unlock';
 import { FOCUSABLE_ENTITIES } from '../../utils/constants';
 
-const { useShouldContextualToolbarShow } = unlock( blockEditorPrivateApis );
-
-const preventDefault = ( event ) => {
-	event.preventDefault();
-};
+const { BlockContextualToolbar } = unlock( blockEditorPrivateApis );
 
 export default function HeaderEditMode( { setListViewToggleElement } ) {
-	const inserterButton = useRef();
 	const {
 		deviceType,
 		templateType,
-		isInserterOpen,
-		isListViewOpen,
-		listViewShortcut,
-		isVisualMode,
 		isDistractionFree,
 		blockEditorMode,
+		blockSelectionStart,
 		homeUrl,
 		showIconLabels,
 		editorCanvasView,
 		hasFixedToolbar,
+		isZoomOutMode,
 	} = useSelect( ( select ) => {
-		const {
-			__experimentalGetPreviewDeviceType,
-			getEditedPostType,
-			isInserterOpened,
-			isListViewOpened,
-			getEditorMode,
-		} = select( editSiteStore );
-		const { getShortcutRepresentation } = select( keyboardShortcutsStore );
-		const { __unstableGetEditorMode } = select( blockEditorStore );
+		const { __experimentalGetPreviewDeviceType, getEditedPostType } =
+			select( editSiteStore );
+		const { getBlockSelectionStart, __unstableGetEditorMode } =
+			select( blockEditorStore );
 
 		const postType = getEditedPostType();
 
@@ -90,13 +74,8 @@ export default function HeaderEditMode( { setListViewToggleElement } ) {
 		return {
 			deviceType: __experimentalGetPreviewDeviceType(),
 			templateType: postType,
-			isInserterOpen: isInserterOpened(),
-			isListViewOpen: isListViewOpened(),
-			listViewShortcut: getShortcutRepresentation(
-				'core/edit-site/toggle-list-view'
-			),
-			isVisualMode: getEditorMode() === 'visual',
 			blockEditorMode: __unstableGetEditorMode(),
+			blockSelectionStart: getBlockSelectionStart(),
 			homeUrl: getUnstableBase()?.home,
 			showIconLabels: getPreference(
 				editSiteStore.name,
@@ -105,71 +84,44 @@ export default function HeaderEditMode( { setListViewToggleElement } ) {
 			editorCanvasView: unlock(
 				select( editSiteStore )
 			).getEditorCanvasContainerView(),
-			isDistractionFree: getPreference(
-				editSiteStore.name,
-				'distractionFree'
-			),
 			hasFixedToolbar: getPreference(
 				editSiteStore.name,
 				'fixedToolbar'
 			),
+			isDistractionFree: getPreference(
+				editSiteStore.name,
+				'distractionFree'
+			),
+			isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
 		};
 	}, [] );
 
-	const {
-		__experimentalSetPreviewDeviceType: setPreviewDeviceType,
-		setIsInserterOpened,
-		setIsListViewOpened,
-	} = useDispatch( editSiteStore );
-	const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
-	const disableMotion = useReducedMotion();
-
 	const isLargeViewport = useViewportMatch( 'medium' );
+	const isTopToolbar = ! isZoomOutMode && hasFixedToolbar && isLargeViewport;
+	const blockToolbarRef = useRef();
 
-	const toggleInserter = useCallback( () => {
-		if ( isInserterOpen ) {
-			// 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 );
-		}
-	}, [ isInserterOpen, setIsInserterOpened ] );
-
-	const toggleListView = useCallback(
-		() => setIsListViewOpened( ! isListViewOpen ),
-		[ setIsListViewOpened, isListViewOpen ]
-	);
-
-	const {
-		shouldShowContextualToolbar,
-		canFocusHiddenToolbar,
-		fixedToolbarCanBeFocused,
-	} = useShouldContextualToolbarShow();
-	// If there's a block toolbar to be focused, disable the focus shortcut for the document toolbar.
-	// There's a fixed block toolbar when the fixed toolbar option is enabled or when the browser width is less than the large viewport.
-	const blockToolbarCanBeFocused =
-		shouldShowContextualToolbar ||
-		canFocusHiddenToolbar ||
-		fixedToolbarCanBeFocused;
+	const { __experimentalSetPreviewDeviceType: setPreviewDeviceType } =
+		useDispatch( editSiteStore );
+	const disableMotion = useReducedMotion();
 
 	const hasDefaultEditorCanvasView = ! useHasEditorCanvasContainer();
 
 	const isFocusMode = FOCUSABLE_ENTITIES.includes( templateType );
 
-	/* 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 = ! isInserterOpen ? __( 'Add' ) : __( 'Close' );
-
-	const isZoomedOutViewExperimentEnabled =
-		window?.__experimentalEnableZoomedOutView && isVisualMode;
 	const isZoomedOutView = blockEditorMode === 'zoom-out';
 
+	const [ isBlockToolsCollapsed, setIsBlockToolsCollapsed ] =
+		useState( true );
+
+	const hasBlockSelected = !! blockSelectionStart;
+
+	useEffect( () => {
+		// If we have a new block selection, show the block tools
+		if ( blockSelectionStart ) {
+			setIsBlockToolsCollapsed( false );
+		}
+	}, [ blockSelectionStart ] );
+
 	const toolbarVariants = {
 		isDistractionFree: { y: '-50px' },
 		isDistractionFreeHovering: { y: 0 },
@@ -190,116 +142,66 @@ export default function HeaderEditMode( { setListViewToggleElement } ) {
 			} ) }
 		>
 			{ hasDefaultEditorCanvasView && (
-				<NavigableToolbar
-					as={ motion.div }
+				<motion.div
 					className="edit-site-header-edit-mode__start"
-					aria-label={ __( 'Document tools' ) }
-					shouldUseKeyboardFocusShortcut={
-						! blockToolbarCanBeFocused
-					}
 					variants={ toolbarVariants }
 					transition={ toolbarTransition }
 				>
-					<div className="edit-site-header-edit-mode__toolbar">
-						{ ! isDistractionFree && (
-							<ToolbarItem
-								ref={ inserterButton }
-								as={ Button }
-								className="edit-site-header-edit-mode__inserter-toggle"
-								variant="primary"
-								isPressed={ isInserterOpen }
-								onMouseDown={ preventDefault }
-								onClick={ toggleInserter }
-								disabled={ ! isVisualMode }
-								icon={ plus }
-								label={
-									showIconLabels ? shortLabel : longLabel
-								}
-								showTooltip={ ! showIconLabels }
-								aria-expanded={ isInserterOpen }
-							/>
-						) }
-						{ isLargeViewport && (
-							<>
-								{ ! hasFixedToolbar && (
-									<ToolbarItem
-										as={ ToolSelector }
-										showTooltip={ ! showIconLabels }
-										variant={
-											showIconLabels
-												? 'tertiary'
-												: undefined
-										}
-										disabled={ ! isVisualMode }
-									/>
+					<DocumentTools
+						blockEditorMode={ blockEditorMode }
+						isDistractionFree={ isDistractionFree }
+						showIconLabels={ showIconLabels }
+						setListViewToggleElement={ setListViewToggleElement }
+					/>
+					{ isTopToolbar && (
+						<>
+							<div
+								className={ classnames(
+									'selected-block-tools-wrapper',
+									{
+										'is-collapsed': isBlockToolsCollapsed,
+									}
 								) }
-								<ToolbarItem
-									as={ UndoButton }
-									showTooltip={ ! showIconLabels }
-									variant={
-										showIconLabels ? 'tertiary' : undefined
+							>
+								<BlockContextualToolbar isFixed />
+							</div>
+							<Popover.Slot
+								ref={ blockToolbarRef }
+								name="block-toolbar"
+							/>
+							{ hasBlockSelected && (
+								<Button
+									className="edit-site-header-edit-mode__block-tools-toggle"
+									icon={
+										isBlockToolsCollapsed ? next : previous
 									}
-								/>
-								<ToolbarItem
-									as={ RedoButton }
-									showTooltip={ ! showIconLabels }
-									variant={
-										showIconLabels ? 'tertiary' : undefined
+									onClick={ () => {
+										setIsBlockToolsCollapsed(
+											( collapsed ) => ! collapsed
+										);
+									} }
+									label={
+										isBlockToolsCollapsed
+											? __( 'Show block tools' )
+											: __( 'Hide block tools' )
 									}
 								/>
-								{ ! isDistractionFree && (
-									<ToolbarItem
-										as={ Button }
-										className="edit-site-header-edit-mode__list-view-toggle"
-										disabled={
-											! isVisualMode || isZoomedOutView
-										}
-										icon={ listView }
-										isPressed={ isListViewOpen }
-										/* translators: button label text should, if possible, be under 16 characters. */
-										label={ __( 'List View' ) }
-										onClick={ toggleListView }
-										ref={ setListViewToggleElement }
-										shortcut={ listViewShortcut }
-										showTooltip={ ! showIconLabels }
-										variant={
-											showIconLabels
-												? 'tertiary'
-												: undefined
-										}
-										aria-expanded={ isListViewOpen }
-									/>
-								) }
-								{ isZoomedOutViewExperimentEnabled &&
-									! isDistractionFree &&
-									! hasFixedToolbar && (
-										<ToolbarItem
-											as={ Button }
-											className="edit-site-header-edit-mode__zoom-out-view-toggle"
-											icon={ chevronUpDown }
-											isPressed={ isZoomedOutView }
-											/* translators: button label text should, if possible, be under 16 characters. */
-											label={ __( 'Zoom-out View' ) }
-											onClick={ () => {
-												setPreviewDeviceType(
-													'Desktop'
-												);
-												__unstableSetEditorMode(
-													isZoomedOutView
-														? 'edit'
-														: 'zoom-out'
-												);
-											} }
-										/>
-									) }
-							</>
-						) }
-					</div>
-				</NavigableToolbar>
+							) }
+						</>
+					) }
+				</motion.div>
 			) }
 
 			{ ! isDistractionFree && (
-				<div className="edit-site-header-edit-mode__center">
+				<div
+					className={ classnames(
+						'edit-site-header-edit-mode__center',
+						{
+							'is-collapsed':
+								! isBlockToolsCollapsed && isLargeViewport,
+						}
+					) }
+				>
 					{ ! hasDefaultEditorCanvasView ? (
 						getEditorCanvasContainerTitle( editorCanvasView )
 					) : (
@@ -327,6 +229,7 @@ export default function HeaderEditMode( { setListViewToggleElement } ) {
 							isEnabled={
 								! isFocusMode && hasDefaultEditorCanvasView
 							}
+							showIconLabels={ showIconLabels }
 						>
 							{ ( { onClose } ) => (
 								<MenuGroup>

package/src/components/header-edit-mode/more-menu/index.js

@@ -52,7 +52,7 @@ export default function MoreMenu( { showIconLabels } ) {
 
 	const toggleDistractionFree = () => {
 		registry.batch( () => {
-			setPreference( 'core/edit-site', 'fixedToolbar', false );
+			setPreference( 'core/edit-site', 'fixedToolbar', true );
 			setIsInserterOpened( false );
 			setIsListViewOpened( false );
 			closeGeneralSidebar();

package/src/components/header-edit-mode/more-menu/site-export.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import downloadjs from 'downloadjs';
-
 /**
  * WordPress dependencies
  */
@@ -11,6 +6,7 @@ import { MenuItem } from '@wordpress/components';
 import apiFetch from '@wordpress/api-fetch';
 import { download } from '@wordpress/icons';
 import { useDispatch } from '@wordpress/data';
+import { downloadBlob } from '@wordpress/blob';
 import { store as noticesStore } from '@wordpress/notices';
 
 export default function SiteExport() {
@@ -35,7 +31,7 @@ export default function SiteExport() {
 				? contentDispositionMatches[ 1 ]
 				: 'edit-site-export';
 
-			downloadjs( blob, fileName + '.zip', 'application/zip' );
+			downloadBlob( fileName + '.zip', blob, 'application/zip' );
 		} catch ( errorResponse ) {
 			let error = {};
 			try {

package/src/components/header-edit-mode/style.scss

@@ -15,6 +15,17 @@ $header-toolbar-min-width: 335px;
 	.edit-site-header-edit-mode__start {
 		display: flex;
 		border: none;
+		align-items: center;
+		flex-shrink: 2;
+		// We need this to be overflow hidden so the block toolbar can
+		// overflow scroll. If the overflow is visible, flexbox allows
+		// the toolbar to grow outside of the allowed container space.
+		overflow: hidden;
+		// Take up the full height of the header so the border focus
+		// is visible on toolbar buttons.
+		height: 100%;
+		// Allow focus ring to be fully visible on furthest right button.
+		padding-right: 2px;
 	}
 
 	.edit-site-header-edit-mode__end {
@@ -35,6 +46,10 @@ $header-toolbar-min-width: 335px;
 		// See https://dev.w3.org/csswg/css-flexbox/#min-size-auto
 		min-width: 0;
 	}
+
+	.block-editor-block-contextual-toolbar.is-fixed {
+		border: none;
+	}
 }
 
 .edit-site-header-edit-mode__toolbar {
@@ -99,7 +114,7 @@ $header-toolbar-min-width: 335px;
 	}
 }
 
-.edit-site-header-edit-mode__start {
+.edit-site-header-edit-mode__document-tools {
 	display: flex;
 	border: none;
 
@@ -183,7 +198,25 @@ $header-toolbar-min-width: 335px;
 		padding: 0 $grid-unit-10;
 	}
 
-	.edit-site-header-edit-mode__start .edit-site-header-edit-mode__toolbar > * + * {
+	.edit-site-header-edit-mode__document-tools .edit-site-header-edit-mode__toolbar > * + * {
 		margin-left: $grid-unit-10;
 	}
 }
+
+.has-fixed-toolbar {
+	.selected-block-tools-wrapper {
+		overflow-x: scroll;
+
+		&.is-collapsed {
+			display: none;
+		}
+	}
+
+	.edit-site-header-edit-mode__center.is-collapsed {
+		display: none;
+	}
+}
+
+.edit-site-header-edit-mode__block-tools-toggle {
+	margin-left: 2px; // Allow focus ring to be fully visible
+}