@wordpress/edit-site 5.32.0 → 5.34.0

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

@@ -7,24 +7,14 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { useViewportMatch, useReducedMotion } from '@wordpress/compose';
-import {
-	BlockToolbar,
-	privateApis as blockEditorPrivateApis,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
+import { store as blockEditorStore } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
-import { useEffect, useRef, useState } from '@wordpress/element';
-import { PinnedItems } from '@wordpress/interface';
-import { __ } from '@wordpress/i18n';
-import { next, previous } from '@wordpress/icons';
-import {
-	Button,
-	__unstableMotion as motion,
-	Popover,
-} from '@wordpress/components';
+import { useState } from '@wordpress/element';
+import { __unstableMotion as motion } from '@wordpress/components';
 import { store as preferencesStore } from '@wordpress/preferences';
 import {
 	DocumentBar,
+	PostSavedState,
 	store as editorStore,
 	privateApis as editorPrivateApis,
 } from '@wordpress/editor';
@@ -32,7 +22,7 @@ import {
 /**
  * Internal dependencies
  */
-import MoreMenu from './more-menu';
+import SiteEditorMoreMenuItems from './more-menu';
 import SaveButton from '../save-button';
 import DocumentTools from './document-tools';
 import { store as editSiteStore } from '../../store';
@@ -42,22 +32,29 @@ import {
 } from '../editor-canvas-container';
 import { unlock } from '../../lock-unlock';
 import { FOCUSABLE_ENTITIES } from '../../utils/constants';
-
-const { useShowBlockTools } = unlock( blockEditorPrivateApis );
-const { PostViewLink, PreviewDropdown } = unlock( editorPrivateApis );
-
-export default function HeaderEditMode() {
+import { isPreviewingTheme } from '../../utils/is-previewing-theme';
+
+const {
+	CollapsableBlockToolbar,
+	MoreMenu,
+	PostViewLink,
+	PreviewDropdown,
+	PinnedItems,
+	PostPublishButtonOrToggle,
+} = unlock( editorPrivateApis );
+
+export default function HeaderEditMode( { setEntitiesSavedStatesCallback } ) {
 	const {
 		templateType,
 		isDistractionFree,
 		blockEditorMode,
-		blockSelectionStart,
 		showIconLabels,
 		editorCanvasView,
+		isFixedToolbar,
+		isPublishSidebarOpened,
 	} = useSelect( ( select ) => {
 		const { getEditedPostType } = select( editSiteStore );
-		const { getBlockSelectionStart, __unstableGetEditorMode } =
-			select( blockEditorStore );
+		const { __unstableGetEditorMode } = select( blockEditorStore );
 		const { get: getPreference } = select( preferencesStore );
 		const { getDeviceType } = select( editorStore );
 
@@ -65,19 +62,20 @@ export default function HeaderEditMode() {
 			deviceType: getDeviceType(),
 			templateType: getEditedPostType(),
 			blockEditorMode: __unstableGetEditorMode(),
-			blockSelectionStart: getBlockSelectionStart(),
 			showIconLabels: getPreference( 'core', 'showIconLabels' ),
 			editorCanvasView: unlock(
 				select( editSiteStore )
 			).getEditorCanvasContainerView(),
 			isDistractionFree: getPreference( 'core', 'distractionFree' ),
+			isFixedToolbar: getPreference( 'core', 'fixedToolbar' ),
+			isPublishSidebarOpened:
+				select( editorStore ).isPublishSidebarOpened(),
 		};
 	}, [] );
 
 	const isLargeViewport = useViewportMatch( 'medium' );
-	const { showFixedToolbar } = useShowBlockTools();
-	const showTopToolbar = isLargeViewport && showFixedToolbar;
-	const blockToolbarRef = useRef();
+	const showTopToolbar =
+		isLargeViewport && isFixedToolbar && blockEditorMode !== 'zoom-out';
 	const disableMotion = useReducedMotion();
 
 	const hasDefaultEditorCanvasView = ! useHasEditorCanvasContainer();
@@ -89,13 +87,6 @@ export default function HeaderEditMode() {
 	const [ isBlockToolsCollapsed, setIsBlockToolsCollapsed ] =
 		useState( true );
 
-	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 },
@@ -109,10 +100,12 @@ export default function HeaderEditMode() {
 		ease: 'easeOut',
 	};
 
+	const _isPreviewingTheme = isPreviewingTheme();
 	return (
 		<div
 			className={ classnames( 'edit-site-header-edit-mode', {
 				'show-icon-labels': showIconLabels,
+				'show-block-toolbar': ! isBlockToolsCollapsed && showTopToolbar,
 			} ) }
 		>
 			{ hasDefaultEditorCanvasView && (
@@ -126,51 +119,16 @@ export default function HeaderEditMode() {
 						isDistractionFree={ isDistractionFree }
 					/>
 					{ showTopToolbar && (
-						<>
-							<div
-								className={ classnames(
-									'selected-block-tools-wrapper',
-									{
-										'is-collapsed': isBlockToolsCollapsed,
-									}
-								) }
-							>
-								<BlockToolbar hideDragHandle />
-							</div>
-							<Popover.Slot
-								ref={ blockToolbarRef }
-								name="block-toolbar"
-							/>
-							<Button
-								className="edit-site-header-edit-mode__block-tools-toggle"
-								icon={ isBlockToolsCollapsed ? next : previous }
-								onClick={ () => {
-									setIsBlockToolsCollapsed(
-										( collapsed ) => ! collapsed
-									);
-								} }
-								label={
-									isBlockToolsCollapsed
-										? __( 'Show block tools' )
-										: __( 'Hide block tools' )
-								}
-								size="compact"
-							/>
-						</>
+						<CollapsableBlockToolbar
+							isCollapsed={ isBlockToolsCollapsed }
+							onToggle={ setIsBlockToolsCollapsed }
+						/>
 					) }
 				</motion.div>
 			) }
 
 			{ ! isDistractionFree && (
-				<div
-					className={ classnames(
-						'edit-site-header-edit-mode__center',
-						{
-							'is-collapsed':
-								! isBlockToolsCollapsed && showTopToolbar,
-						}
-					) }
-				>
+				<div className="edit-site-header-edit-mode__center">
 					{ ! hasDefaultEditorCanvasView ? (
 						getEditorCanvasContainerTitle( editorCanvasView )
 					) : (
@@ -200,11 +158,31 @@ export default function HeaderEditMode() {
 						</div>
 					) }
 					<PostViewLink />
-					<SaveButton size="compact" />
-					{ ! isDistractionFree && (
-						<PinnedItems.Slot scope="core/edit-site" />
+					{
+						// TODO: For now we conditionally render the Save/Publish buttons based on
+						// some specific site editor extra handling. Examples are when we're previewing
+						// a theme, handling of global styles changes or when we're in 'view' mode,
+						// which opens the save panel in a Modal.
+					 }
+					{ ! _isPreviewingTheme && ! isPublishSidebarOpened && (
+						// This button isn't completely hidden by the publish sidebar.
+						// We can't hide the whole toolbar when the publish sidebar is open because
+						// we want to prevent mounting/unmounting the PostPublishButtonOrToggle DOM node.
+						// We track that DOM node to return focus to the PostPublishButtonOrToggle
+						// when the publish sidebar has been closed.
+						<PostSavedState />
+					) }
+					{ ! _isPreviewingTheme && (
+						<PostPublishButtonOrToggle
+							setEntitiesSavedStatesCallback={
+								setEntitiesSavedStatesCallback
+							}
+						/>
 					) }
-					<MoreMenu showIconLabels={ showIconLabels } />
+					{ _isPreviewingTheme && <SaveButton size="compact" /> }
+					{ ! isDistractionFree && <PinnedItems.Slot scope="core" /> }
+					<MoreMenu />
+					<SiteEditorMoreMenuItems />
 				</motion.div>
 			</div>
 		</div>

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

@@ -1,179 +1,31 @@
 /**
  * WordPress dependencies
  */
-import { __, _x } from '@wordpress/i18n';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { displayShortcut } from '@wordpress/keycodes';
-import { external, moreVertical } from '@wordpress/icons';
-import {
-	MenuGroup,
-	MenuItem,
-	VisuallyHidden,
-	DropdownMenu,
-} from '@wordpress/components';
-import { ActionItem, store as interfaceStore } from '@wordpress/interface';
-import {
-	PreferenceToggleMenuItem,
-	store as preferencesStore,
-} from '@wordpress/preferences';
+import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
-import {
-	store as editorStore,
-	privateApis as editorPrivateApis,
-} from '@wordpress/editor';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
-import {
-	KEYBOARD_SHORTCUT_HELP_MODAL_NAME,
-	default as KeyboardShortcutHelpModal,
-} from '../../keyboard-shortcut-help-modal';
-import {
-	PREFERENCES_MODAL_NAME,
-	default as EditSitePreferencesModal,
-} from '../../preferences-modal';
-import ToolsMoreMenuGroup from '../tools-more-menu-group';
 import SiteExport from './site-export';
 import WelcomeGuideMenuItem from './welcome-guide-menu-item';
-import CopyContentMenuItem from './copy-content-menu-item';
 import { unlock } from '../../../lock-unlock';
 
-const { ModeSwitcher } = unlock( editorPrivateApis );
+const { ToolsMoreMenuGroup, PreferencesModal } = unlock( editorPrivateApis );
 
-export default function MoreMenu( { showIconLabels } ) {
-	const { openModal } = useDispatch( interfaceStore );
-	const { set: setPreference } = useDispatch( preferencesStore );
+export default function MoreMenu() {
 	const isBlockBasedTheme = useSelect( ( select ) => {
 		return select( coreStore ).getCurrentTheme().is_block_theme;
 	}, [] );
 
-	const { toggleDistractionFree } = useDispatch( editorStore );
-
-	const turnOffDistractionFree = () => {
-		setPreference( 'core', 'distractionFree', false );
-	};
-
 	return (
 		<>
-			<DropdownMenu
-				icon={ moreVertical }
-				label={ __( 'Options' ) }
-				popoverProps={ {
-					placement: 'bottom-end',
-					className: 'more-menu-dropdown__content',
-				} }
-				toggleProps={ {
-					showTooltip: ! showIconLabels,
-					...( showIconLabels && { variant: 'tertiary' } ),
-					tooltipPosition: 'bottom',
-					size: 'compact',
-				} }
-			>
-				{ ( { onClose } ) => (
-					<>
-						<MenuGroup label={ _x( 'View', 'noun' ) }>
-							<PreferenceToggleMenuItem
-								scope="core"
-								name="fixedToolbar"
-								onToggle={ turnOffDistractionFree }
-								label={ __( 'Top toolbar' ) }
-								info={ __(
-									'Access all block and document tools in a single place'
-								) }
-								messageActivated={ __(
-									'Top toolbar activated'
-								) }
-								messageDeactivated={ __(
-									'Top toolbar deactivated'
-								) }
-							/>
-							<PreferenceToggleMenuItem
-								scope="core"
-								name="distractionFree"
-								label={ __( 'Distraction free' ) }
-								info={ __( 'Write with calmness' ) }
-								handleToggling={ false }
-								onToggle={ toggleDistractionFree }
-								messageActivated={ __(
-									'Distraction free mode activated'
-								) }
-								messageDeactivated={ __(
-									'Distraction free mode deactivated'
-								) }
-								shortcut={ displayShortcut.primaryShift(
-									'\\'
-								) }
-							/>
-							<PreferenceToggleMenuItem
-								scope="core"
-								name="focusMode"
-								label={ __( 'Spotlight mode' ) }
-								info={ __( 'Focus on one block at a time' ) }
-								messageActivated={ __(
-									'Spotlight mode activated'
-								) }
-								messageDeactivated={ __(
-									'Spotlight mode deactivated'
-								) }
-							/>
-						</MenuGroup>
-						<ModeSwitcher />
-						<ActionItem.Slot
-							name="core/edit-site/plugin-more-menu"
-							label={ __( 'Plugins' ) }
-							as={ MenuGroup }
-							fillProps={ { onClick: onClose } }
-						/>
-						<MenuGroup label={ __( 'Tools' ) }>
-							{ isBlockBasedTheme && <SiteExport /> }
-							<MenuItem
-								onClick={ () =>
-									openModal(
-										KEYBOARD_SHORTCUT_HELP_MODAL_NAME
-									)
-								}
-								shortcut={ displayShortcut.access( 'h' ) }
-							>
-								{ __( 'Keyboard shortcuts' ) }
-							</MenuItem>
-							<WelcomeGuideMenuItem />
-							<CopyContentMenuItem />
-							<MenuItem
-								icon={ external }
-								role="menuitem"
-								href={ __(
-									'https://wordpress.org/documentation/article/site-editor/'
-								) }
-								target="_blank"
-								rel="noopener noreferrer"
-							>
-								{ __( 'Help' ) }
-								<VisuallyHidden as="span">
-									{
-										/* translators: accessibility text */
-										__( '(opens in a new tab)' )
-									}
-								</VisuallyHidden>
-							</MenuItem>
-							<ToolsMoreMenuGroup.Slot
-								fillProps={ { onClose } }
-							/>
-						</MenuGroup>
-						<MenuGroup>
-							<MenuItem
-								onClick={ () =>
-									openModal( PREFERENCES_MODAL_NAME )
-								}
-							>
-								{ __( 'Preferences' ) }
-							</MenuItem>
-						</MenuGroup>
-					</>
-				) }
-			</DropdownMenu>
-			<KeyboardShortcutHelpModal />
-			<EditSitePreferencesModal />
+			<ToolsMoreMenuGroup>
+				{ isBlockBasedTheme && <SiteExport /> }
+				<WelcomeGuideMenuItem />
+			</ToolsMoreMenuGroup>
+			<PreferencesModal />
 		</>
 	);
 }

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

@@ -10,6 +10,19 @@
 	border-bottom: $border-width solid $gray-200;
 	padding-left: $header-height;
 
+	// When top toolbar is engaged and should expand fully.
+	&.show-block-toolbar {
+
+		.edit-site-header-edit-mode__start,
+		.edit-site-header-edit-mode__end {
+			flex-basis: auto;
+		}
+
+		.edit-site-header-edit-mode__center {
+			display: none;
+		}
+	}
+
 	.edit-site-header-edit-mode__start {
 		display: flex;
 		border: none;
@@ -21,9 +34,9 @@
 		height: 100%;
 		// Allow focus ring to be fully visible on furthest right button.
 		@include break-medium() {
+			padding-right: var(--wp-admin-border-width-focus);
 			// Account for the site hub, which is 60x60px.
 			flex-basis: calc(37.5% - 60px);
-			padding-right: 2px;
 			// 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.
@@ -183,91 +196,6 @@
 	}
 }
 
-.has-fixed-toolbar {
-	.selected-block-tools-wrapper {
-		overflow: hidden;
-		display: flex;
-		align-items: center;
-		height: $header-height;
-
-		.block-editor-block-contextual-toolbar {
-			border-bottom: 0;
-			height: 100%;
-		}
-
-		// These rules ensure that icons are always positioned in a way that lines up with the rest of the icons in the toolbar.
-		.block-editor-block-toolbar {
-			height: 100%;
-			// Push down so that buttons are centered vertically.
-			// It should be 14px (60px header height - 32px compact button height = 28 / 2),
-			// but there is a -1px top-margin down the stack that affects this.
-			padding-top: math.div($header-height - $button-size-compact, 2) + 1;
-
-			// Match the height of other buttons in the header toolbar.
-			.components-button:not(.block-editor-block-mover-button) {
-				height: $button-size-compact;
-			}
-		}
-
-		&::after {
-			content: "";
-			width: $border-width;
-			height: $grid-unit-30;
-			background-color: $gray-300;
-			margin-left: $grid-unit;
-		}
-
-		// Modified group borders.
-		.components-toolbar-group,
-		.components-toolbar {
-			border-right: none;
-
-			&::after {
-				content: "";
-				width: $border-width;
-				height: $grid-unit-30;
-				background-color: $gray-300;
-				margin-top: $grid-unit-05;
-				margin-left: $grid-unit;
-			}
-
-			& .components-toolbar-group.components-toolbar-group {
-				&::after {
-					display: none;
-				}
-			}
-		}
-
-		.block-editor-block-mover {
-			// Match the height of other buttons in the header toolbar.
-			&.is-horizontal .block-editor-block-mover-button {
-				height: $button-size-compact;
-				overflow: visible;
-			}
-
-			// Move up a little to prevent the toolbar shift when focus is on the vertical movers.
-			@include break-small() {
-				&:not(.is-horizontal) .block-editor-block-mover__move-button-container {
-					position: relative;
-					top: -10px;
-				}
-			}
-		}
-
-		&.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
-}
-
 .components-popover.more-menu-dropdown__content {
 	z-index: z-index(".components-popover.more-menu__content");
 }

package/src/components/keyboard-shortcuts/register.js

@@ -19,84 +19,6 @@ function KeyboardShortcutsRegister() {
 				character: 's',
 			},
 		} );
-
-		registerShortcut( {
-			name: 'core/edit-site/toggle-block-settings-sidebar',
-			category: 'global',
-			description: __( 'Show or hide the Settings sidebar.' ),
-			keyCombination: {
-				modifier: 'primaryShift',
-				character: ',',
-			},
-		} );
-
-		registerShortcut( {
-			name: 'core/edit-site/keyboard-shortcuts',
-			category: 'main',
-			description: __( 'Display these keyboard shortcuts.' ),
-			keyCombination: {
-				modifier: 'access',
-				character: 'h',
-			},
-		} );
-
-		registerShortcut( {
-			name: 'core/edit-site/next-region',
-			category: 'global',
-			description: __( 'Navigate to the next part of the editor.' ),
-			keyCombination: {
-				modifier: 'ctrl',
-				character: '`',
-			},
-			aliases: [
-				{
-					modifier: 'access',
-					character: 'n',
-				},
-			],
-		} );
-
-		registerShortcut( {
-			name: 'core/edit-site/previous-region',
-			category: 'global',
-			description: __( 'Navigate to the previous part of the editor.' ),
-			keyCombination: {
-				modifier: 'ctrlShift',
-				character: '`',
-			},
-			aliases: [
-				{
-					modifier: 'access',
-					character: 'p',
-				},
-				{
-					modifier: 'ctrlShift',
-					character: '~',
-				},
-			],
-		} );
-
-		registerShortcut( {
-			name: 'core/edit-site/transform-heading-to-paragraph',
-			category: 'block-library',
-			description: __( 'Transform heading to paragraph.' ),
-			keyCombination: {
-				modifier: 'access',
-				character: `0`,
-			},
-		} );
-
-		[ 1, 2, 3, 4, 5, 6 ].forEach( ( level ) => {
-			registerShortcut( {
-				name: `core/edit-site/transform-paragraph-to-heading-${ level }`,
-				category: 'block-library',
-				description: __( 'Transform paragraph to heading.' ),
-				keyCombination: {
-					modifier: 'access',
-					character: `${ level }`,
-				},
-			} );
-		} );
 	}, [ registerShortcut ] );
 
 	return null;

package/src/components/layout/animation.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { Controller } from '@react-spring/web';
+import { Controller, easings } from '@react-spring/web';
 
 /**
  * WordPress dependencies
@@ -15,7 +15,7 @@ function getAbsolutePosition( element ) {
 	};
 }
 
-const ANIMATION_DURATION = 300;
+const ANIMATION_DURATION = 400;
 
 /**
  * Hook used to compute the styles required to move a div into a new position.
@@ -65,7 +65,10 @@ function useMovingAnimation( { triggerAnimationOnChange } ) {
 			y: 0,
 			width: prevRect.width,
 			height: prevRect.height,
-			config: { duration: ANIMATION_DURATION },
+			config: {
+				duration: ANIMATION_DURATION,
+				easing: easings.easeInOutQuint,
+			},
 			onChange( { value } ) {
 				if ( ! ref.current ) {
 					return;