@wordpress/edit-site 5.33.0 → 5.35.0

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

@@ -1,210 +1,51 @@
-/**
- * External dependencies
- */
-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 { privateApis as editorPrivateApis } from '@wordpress/editor';
 import { useSelect } from '@wordpress/data';
-import { useEffect, useRef, useState } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { next, previous } from '@wordpress/icons';
-import {
-	Button,
-	__unstableMotion as motion,
-	Popover,
-} from '@wordpress/components';
-import { store as preferencesStore } from '@wordpress/preferences';
-import {
-	DocumentBar,
-	store as editorStore,
-	privateApis as editorPrivateApis,
-} from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
-import MoreMenu from './more-menu';
+import SiteEditorMoreMenu from './more-menu';
+import { unlock } from '../../lock-unlock';
 import SaveButton from '../save-button';
-import DocumentTools from './document-tools';
-import { store as editSiteStore } from '../../store';
+import { isPreviewingTheme } from '../../utils/is-previewing-theme';
 import {
 	getEditorCanvasContainerTitle,
 	useHasEditorCanvasContainer,
 } from '../editor-canvas-container';
-import { unlock } from '../../lock-unlock';
-import { FOCUSABLE_ENTITIES } from '../../utils/constants';
-
-const { useShowBlockTools } = unlock( blockEditorPrivateApis );
-const { PostViewLink, PreviewDropdown, PinnedItems } =
-	unlock( editorPrivateApis );
+import { store as editSiteStore } from '../../store';
 
-export default function HeaderEditMode() {
-	const {
-		templateType,
-		isDistractionFree,
-		blockEditorMode,
-		blockSelectionStart,
-		showIconLabels,
-		editorCanvasView,
-	} = useSelect( ( select ) => {
-		const { getEditedPostType } = select( editSiteStore );
-		const { getBlockSelectionStart, __unstableGetEditorMode } =
-			select( blockEditorStore );
-		const { get: getPreference } = select( preferencesStore );
-		const { getDeviceType } = select( editorStore );
+const { Header: EditorHeader } = unlock( editorPrivateApis );
 
+function Header( { setEntitiesSavedStatesCallback } ) {
+	const _isPreviewingTheme = isPreviewingTheme();
+	const hasDefaultEditorCanvasView = ! useHasEditorCanvasContainer();
+	const { editorCanvasView } = useSelect( ( select ) => {
 		return {
-			deviceType: getDeviceType(),
-			templateType: getEditedPostType(),
-			blockEditorMode: __unstableGetEditorMode(),
-			blockSelectionStart: getBlockSelectionStart(),
-			showIconLabels: getPreference( 'core', 'showIconLabels' ),
 			editorCanvasView: unlock(
 				select( editSiteStore )
 			).getEditorCanvasContainerView(),
-			isDistractionFree: getPreference( 'core', 'distractionFree' ),
 		};
 	}, [] );
 
-	const isLargeViewport = useViewportMatch( 'medium' );
-	const { showFixedToolbar } = useShowBlockTools();
-	const showTopToolbar = isLargeViewport && showFixedToolbar;
-	const blockToolbarRef = useRef();
-	const disableMotion = useReducedMotion();
-
-	const hasDefaultEditorCanvasView = ! useHasEditorCanvasContainer();
-
-	const isFocusMode = FOCUSABLE_ENTITIES.includes( templateType );
-
-	const isZoomedOutView = blockEditorMode === 'zoom-out';
-
-	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 },
-		view: { y: 0 },
-		edit: { y: 0 },
-	};
-
-	const toolbarTransition = {
-		type: 'tween',
-		duration: disableMotion ? 0 : 0.2,
-		ease: 'easeOut',
-	};
-
 	return (
-		<div
-			className={ classnames( 'edit-site-header-edit-mode', {
-				'show-icon-labels': showIconLabels,
-			} ) }
+		<EditorHeader
+			setEntitiesSavedStatesCallback={ setEntitiesSavedStatesCallback }
+			customSaveButton={
+				_isPreviewingTheme && <SaveButton size="compact" />
+			}
+			forceDisableBlockTools={ ! hasDefaultEditorCanvasView }
+			title={
+				! hasDefaultEditorCanvasView
+					? getEditorCanvasContainerTitle( editorCanvasView )
+					: undefined
+			}
 		>
-			{ hasDefaultEditorCanvasView && (
-				<motion.div
-					className="edit-site-header-edit-mode__start"
-					variants={ toolbarVariants }
-					transition={ toolbarTransition }
-				>
-					<DocumentTools
-						blockEditorMode={ blockEditorMode }
-						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"
-							/>
-						</>
-					) }
-				</motion.div>
-			) }
-
-			{ ! isDistractionFree && (
-				<div
-					className={ classnames(
-						'edit-site-header-edit-mode__center',
-						{
-							'is-collapsed':
-								! isBlockToolsCollapsed && showTopToolbar,
-						}
-					) }
-				>
-					{ ! hasDefaultEditorCanvasView ? (
-						getEditorCanvasContainerTitle( editorCanvasView )
-					) : (
-						<DocumentBar />
-					) }
-				</div>
-			) }
-
-			<div className="edit-site-header-edit-mode__end">
-				<motion.div
-					className="edit-site-header-edit-mode__actions"
-					variants={ toolbarVariants }
-					transition={ toolbarTransition }
-				>
-					{ isLargeViewport && (
-						<div
-							className={ classnames(
-								'edit-site-header-edit-mode__preview-options',
-								{ 'is-zoomed-out': isZoomedOutView }
-							) }
-						>
-							<PreviewDropdown
-								disabled={
-									isFocusMode || ! hasDefaultEditorCanvasView
-								}
-							/>
-						</div>
-					) }
-					<PostViewLink />
-					<SaveButton size="compact" />
-					{ ! isDistractionFree && <PinnedItems.Slot scope="core" /> }
-					<MoreMenu showIconLabels={ showIconLabels } />
-				</motion.div>
-			</div>
-		</div>
+			<SiteEditorMoreMenu />
+		</EditorHeader>
 	);
 }
+
+export default Header;

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

@@ -1,167 +1,30 @@
 /**
  * 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 {
-	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 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, ActionItem, interfaceStore, PreferencesModal } =
-	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/plugin-more-menu"
-							label={ __( 'Plugins' ) }
-							as={ MenuGroup }
-							fillProps={ { onClick: onClose } }
-						/>
-						<MenuGroup label={ __( 'Tools' ) }>
-							{ isBlockBasedTheme && <SiteExport /> }
-							<MenuItem
-								onClick={ () =>
-									openModal( 'editor/keyboard-shortcut-help' )
-								}
-								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( 'editor/preferences' )
-								}
-							>
-								{ __( 'Preferences' ) }
-							</MenuItem>
-						</MenuGroup>
-					</>
-				) }
-			</DropdownMenu>
+			<ToolsMoreMenuGroup>
+				{ isBlockBasedTheme && <SiteExport /> }
+				<WelcomeGuideMenuItem />
+			</ToolsMoreMenuGroup>
 			<PreferencesModal />
 		</>
 	);

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

@@ -1,273 +1,3 @@
-.edit-site-header-edit-mode {
-	height: $header-height;
-	align-items: center;
-	background-color: $white;
-	color: $gray-900;
-	display: flex;
-	box-sizing: border-box;
-	width: 100%;
-	justify-content: space-between;
-	border-bottom: $border-width solid $gray-200;
+.editor-header {
 	padding-left: $header-height;
-
-	.edit-site-header-edit-mode__start {
-		display: flex;
-		border: none;
-		align-items: center;
-		flex-grow: 1;
-		flex-shrink: 2;
-		// 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.
-		@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);
-			// 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;
-		}
-	}
-
-	.edit-site-header-edit-mode__end {
-		display: flex;
-		justify-content: flex-end;
-		height: 100%;
-		flex-grow: 1;
-		flex-shrink: 1;
-
-		@include break-medium() {
-			flex-basis: 37.5%;
-		}
-	}
-
-	.edit-site-header-edit-mode__center {
-		align-items: center;
-		display: flex;
-		flex-basis: 100%;
-		flex-grow: 1;
-		flex-shrink: 2;
-		height: 100%;
-		justify-content: center;
-
-		// Flex items will, by default, refuse to shrink below a minimum
-		// intrinsic width. In order to shrink this flexbox item, and
-		// subsequently truncate child text, we set an explicit min-width.
-		// See https://dev.w3.org/csswg/css-flexbox/#min-size-auto
-		min-width: 0;
-
-		@include break-medium() {
-			flex-basis: 25%;
-		}
-	}
-
-}
-
-.edit-site-header-edit-mode__toolbar {
-	align-items: center;
-	display: flex;
-	gap: $grid-unit-10;
-	padding-left: $grid-unit-20;
-
-	@include break-medium() {
-		padding-left: $grid-unit-50 * 0.5;
-	}
-
-	@include break-wide() {
-		padding-right: $grid-unit-10;
-	}
-
-	.edit-site-header-edit-mode__inserter-toggle {
-		svg {
-			transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
-			@include reduce-motion("transition");
-		}
-
-		&.is-pressed {
-			svg {
-				transform: rotate(45deg);
-			}
-		}
-	}
-}
-
-/**
- * Buttons on the right side
- */
-
-.edit-site-header-edit-mode__actions {
-	display: inline-flex;
-	align-items: center;
-	flex-wrap: nowrap;
-	// Ensure actions do not press against .edit-site-header-edit-mode__center.
-	padding-left: $grid-unit-10;
-	padding-right: $grid-unit-10;
-	gap: $grid-unit-10;
-}
-
-.edit-site-header-edit-mode__preview-options {
-	opacity: 1;
-	transition: opacity 0.3s;
-
-	&.is-zoomed-out {
-		opacity: 0;
-	}
-}
-
-// Button text label styles
-
-.edit-site-header-edit-mode.show-icon-labels {
-	.components-button.has-icon {
-		width: auto;
-
-		// Hide the button icons when labels are set to display...
-		svg {
-			display: none;
-		}
-		// ... and display labels.
-		&::after {
-			content: attr(aria-label);
-		}
-		&[aria-disabled="true"] {
-			background-color: transparent;
-		}
-	}
-	.is-tertiary {
-		&:active {
-			box-shadow: 0 0 0 1.5px var(--wp-admin-theme-color);
-			background-color: transparent;
-		}
-	}
-	// Some margins and padding have to be adjusted so the buttons can still fit on smaller screens.
-	.edit-site-save-button__button {
-		padding-left: 6px;
-		padding-right: 6px;
-	}
-
-	// The template details toggle has a custom label, different from its aria-label, so we don't want to display both.
-	.edit-site-document-actions__get-info.edit-site-document-actions__get-info.edit-site-document-actions__get-info {
-		&::after {
-			content: none;
-		}
-	}
-
-	.edit-site-header-edit-mode__inserter-toggle.edit-site-header-edit-mode__inserter-toggle,
-	.edit-site-document-actions__get-info.edit-site-document-actions__get-info.edit-site-document-actions__get-info {
-		height: 36px;
-		padding: 0 $grid-unit-10;
-	}
-
-	.block-editor-block-mover {
-		// Modified group borders.
-		border-left: none;
-
-		&::before {
-			content: "";
-			width: $border-width;
-			height: $grid-unit-30;
-			background-color: $gray-300;
-			margin-top: $grid-unit-05;
-			margin-left: $grid-unit;
-		}
-
-		// Modified block movers horizontal separator.
-		.block-editor-block-mover__move-button-container {
-			&::before {
-				width: calc(100% - #{$grid-unit-30});
-				background: $gray-300;
-				left: calc(50% + 1px);
-			}
-		}
-	}
-}
-
-.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");
 }