@wordpress/edit-site 5.21.1-next.f8d8eceb.0 → 5.23.0

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 )
 					) : (

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
+}

package/src/components/layout/index.js

@@ -18,7 +18,7 @@ import {
 	useResizeObserver,
 } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
-import { useState, useRef } from '@wordpress/element';
+import { useState } from '@wordpress/element';
 import { NavigableRegion } from '@wordpress/interface';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import {
@@ -72,7 +72,6 @@ export default function Layout() {
 	useCommonCommands();
 	useBlockCommands();
 
-	const hubRef = useRef();
 	const { params } = useLocation();
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
 	const isListPage = getIsListPage( params, isMobileViewport );
@@ -117,7 +116,7 @@ export default function Layout() {
 	} );
 	const disableMotion = useReducedMotion();
 	const showSidebar =
-		( isMobileViewport && ! isListPage ) ||
+		( isMobileViewport && canvasMode === 'view' && ! isListPage ) ||
 		( ! isMobileViewport && ( canvasMode === 'view' || ! isEditorPage ) );
 	const showCanvas =
 		( isMobileViewport && isEditorPage && isEditing ) ||
@@ -193,6 +192,7 @@ export default function Layout() {
 						'is-full-canvas': isFullCanvas,
 						'is-edit-mode': isEditing,
 						'has-fixed-toolbar': hasFixedToolbar,
+						'is-block-toolbar-visible': hasBlockSelected,
 					}
 				) }
 			>
@@ -226,13 +226,6 @@ export default function Layout() {
 					animate={ headerAnimationState }
 				>
 					<SiteHub
-						variants={ {
-							isDistractionFree: { x: '-100%' },
-							isDistractionFreeHovering: { x: 0 },
-							view: { x: 0 },
-							edit: { x: 0 },
-						} }
-						ref={ hubRef }
 						isTransparent={ isResizableFrameOversized }
 						className="edit-site-layout__hub"
 					/>
@@ -290,7 +283,7 @@ export default function Layout() {
 							// (https://github.com/WordPress/gutenberg/pull/51558/files#r1231763003),
 							// so we can't remove the element entirely. Using `inert` will make
 							// it inaccessible to screen readers and keyboard navigation.
-							inert={ showSidebar ? undefined : 'inert' }
+							inert={ showSidebar ? undefined : 'true' }
 							animate={ { opacity: showSidebar ? 1 : 0 } }
 							transition={ {
 								type: 'tween',

package/src/components/layout/style.scss

@@ -157,11 +157,16 @@
 }
 
 // This shouldn't be necessary (we should have a way to say that a skeletton is relative
-.edit-site-layout__canvas .interface-interface-skeleton {
+.edit-site-layout__canvas .interface-interface-skeleton,
+.edit-site-page-pages-preview .interface-interface-skeleton {
 	position: relative !important;
 	min-height: 100% !important;
 }
 
+.edit-site-page-pages-preview {
+	height: 100%;
+}
+
 .edit-site-layout__view-mode-toggle.components-button {
 	position: relative;
 	color: $white;
@@ -249,23 +254,6 @@
 	}
 }
 
-.edit-site-layout.has-fixed-toolbar {
-	// making the header be lower than the content
-	// so the fixed toolbar can be positioned on top of it
-	// but only on desktop
-	@include break-medium() {
-		.edit-site-layout__canvas-container {
-			z-index: 5;
-		}
-		.edit-site-site-hub {
-			z-index: 4;
-		}
-		.edit-site-layout__header:focus-within {
-			z-index: 3;
-		}
-	}
-}
-
 .is-edit-mode.is-distraction-free {
 
 	.edit-site-layout__header-container {

package/src/components/list/added-by.js

@@ -152,7 +152,7 @@ export function useAddedBy( postType, postId ) {
  * @param {Object} props
  * @param {string} props.imageUrl
  */
-function AvatarImage( { imageUrl } ) {
+export function AvatarImage( { imageUrl } ) {
 	const [ isImageLoaded, setIsImageLoaded ] = useState( false );
 
 	return (

package/src/components/page-content-focus-manager/back-to-page-notification.js

@@ -25,27 +25,19 @@ export default function BackToPageNotification() {
  * switches from focusing on editing page content to editing a template.
  */
 export function useBackToPageNotification() {
-	const { isPage, hasPageContentFocus } = useSelect(
-		( select ) => ( {
-			isPage: select( editSiteStore ).isPage(),
-			hasPageContentFocus: select( editSiteStore ).hasPageContentFocus(),
-		} ),
+	const hasPageContentFocus = useSelect(
+		( select ) => select( editSiteStore ).hasPageContentFocus(),
 		[]
 	);
+	const { isPage } = useSelect( editSiteStore );
 
 	const alreadySeen = useRef( false );
-	const prevHasPageContentFocus = useRef( false );
 
 	const { createInfoNotice } = useDispatch( noticesStore );
 	const { setHasPageContentFocus } = useDispatch( editSiteStore );
 
 	useEffect( () => {
-		if (
-			! alreadySeen.current &&
-			isPage &&
-			prevHasPageContentFocus.current &&
-			! hasPageContentFocus
-		) {
+		if ( isPage() && ! alreadySeen.current && ! hasPageContentFocus ) {
 			createInfoNotice( __( 'You are editing a template.' ), {
 				isDismissible: true,
 				type: 'snackbar',
@@ -58,11 +50,8 @@ export function useBackToPageNotification() {
 			} );
 			alreadySeen.current = true;
 		}
-		prevHasPageContentFocus.current = hasPageContentFocus;
 	}, [
-		alreadySeen,
 		isPage,
-		prevHasPageContentFocus,
 		hasPageContentFocus,
 		createInfoNotice,
 		setHasPageContentFocus,