@wordpress/edit-post 7.33.0 → 7.35.0

package/src/components/header/index.js

@@ -1,54 +1,20 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
-import {
-	BlockToolbar,
-	privateApis as blockEditorPrivateApis,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
-import {
-	PostSavedState,
-	PostPreviewButton,
-	store as editorStore,
-	DocumentBar,
-	privateApis as editorPrivateApis,
-} from '@wordpress/editor';
-import { useEffect, useRef, useState } from '@wordpress/element';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 import { useSelect } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
-import { next, previous } from '@wordpress/icons';
-import { useViewportMatch } from '@wordpress/compose';
-import {
-	Button,
-	__unstableMotion as motion,
-	Popover,
-} from '@wordpress/components';
-import { store as preferencesStore } from '@wordpress/preferences';
+import { __unstableMotion as motion } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import FullscreenModeClose from './fullscreen-mode-close';
-import MoreMenu from './more-menu';
-import PostPublishButtonOrToggle from './post-publish-button-or-toggle';
+import PostEditorMoreMenu from './more-menu';
 import MainDashboardButton from './main-dashboard-button';
 import { store as editPostStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 
-const { useShowBlockTools } = unlock( blockEditorPrivateApis );
-const { DocumentTools, PostViewLink, PreviewDropdown, PinnedItems } =
-	unlock( editorPrivateApis );
-
-const slideY = {
-	hidden: { y: '-50px' },
-	distractionFreeInactive: { y: 0 },
-	hover: { y: 0, transition: { type: 'tween', delay: 0.2 } },
-};
+const { Header: EditorHeader } = unlock( editorPrivateApis );
 
 const slideX = {
 	hidden: { x: '-100%' },
@@ -57,50 +23,17 @@ const slideX = {
 };
 
 function Header( { setEntitiesSavedStatesCallback, initialPost } ) {
-	const isWideViewport = useViewportMatch( 'large' );
-	const isLargeViewport = useViewportMatch( 'medium' );
-	const blockToolbarRef = useRef();
-	const {
-		isTextEditor,
-		blockSelectionStart,
-		hasActiveMetaboxes,
-		isPublishSidebarOpened,
-		showIconLabels,
-		hasHistory,
-	} = useSelect( ( select ) => {
-		const { get: getPreference } = select( preferencesStore );
-		const { getEditorMode } = select( editorStore );
-
+	const { hasActiveMetaboxes } = useSelect( ( select ) => {
 		return {
-			isTextEditor: getEditorMode() === 'text',
-			blockSelectionStart:
-				select( blockEditorStore ).getBlockSelectionStart(),
 			hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(),
-			hasHistory:
-				!! select( editorStore ).getEditorSettings()
-					.onNavigateToPreviousEntityRecord,
-			isPublishSidebarOpened:
-				select( editorStore ).isPublishSidebarOpened(),
-			showIconLabels: getPreference( 'core', 'showIconLabels' ),
 		};
 	}, [] );
 
-	const { showFixedToolbar } = useShowBlockTools();
-	const showTopToolbar = isLargeViewport && showFixedToolbar;
-
-	const [ isBlockToolsCollapsed, setIsBlockToolsCollapsed ] =
-		useState( true );
-	const hasBlockSelection = !! blockSelectionStart;
-
-	useEffect( () => {
-		// If we have a new block selection, show the block tools
-		if ( blockSelectionStart ) {
-			setIsBlockToolsCollapsed( false );
-		}
-	}, [ blockSelectionStart ] );
-
 	return (
-		<div className="edit-post-header">
+		<EditorHeader
+			forceIsDirty={ hasActiveMetaboxes }
+			setEntitiesSavedStatesCallback={ setEntitiesSavedStatesCallback }
+		>
 			<MainDashboardButton.Slot>
 				<motion.div
 					variants={ slideX }
@@ -112,89 +45,8 @@ function Header( { setEntitiesSavedStatesCallback, initialPost } ) {
 					/>
 				</motion.div>
 			</MainDashboardButton.Slot>
-			<motion.div
-				variants={ slideY }
-				transition={ { type: 'tween', delay: 0.8 } }
-				className="edit-post-header__toolbar"
-			>
-				<DocumentTools disableBlockTools={ isTextEditor } />
-				{ showTopToolbar && (
-					<>
-						<div
-							className={ classnames(
-								'selected-block-tools-wrapper',
-								{
-									'is-collapsed':
-										isBlockToolsCollapsed ||
-										! hasBlockSelection,
-								}
-							) }
-						>
-							<BlockToolbar hideDragHandle />
-						</div>
-						<Popover.Slot
-							ref={ blockToolbarRef }
-							name="block-toolbar"
-						/>
-						<Button
-							className="edit-post-header__block-tools-toggle"
-							icon={ isBlockToolsCollapsed ? next : previous }
-							onClick={ () => {
-								setIsBlockToolsCollapsed(
-									( collapsed ) => ! collapsed
-								);
-							} }
-							label={
-								isBlockToolsCollapsed
-									? __( 'Show block tools' )
-									: __( 'Hide block tools' )
-							}
-							size="compact"
-						/>
-					</>
-				) }
-				<div
-					className={ classnames( 'edit-post-header__center', {
-						'is-collapsed':
-							hasHistory &&
-							! isBlockToolsCollapsed &&
-							showTopToolbar,
-					} ) }
-				>
-					{ hasHistory && <DocumentBar /> }
-				</div>
-			</motion.div>
-			<motion.div
-				variants={ slideY }
-				transition={ { type: 'tween', delay: 0.8 } }
-				className="edit-post-header__settings"
-			>
-				{ ! 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 forceIsDirty={ hasActiveMetaboxes } />
-				) }
-				<PreviewDropdown forceIsAutosaveable={ hasActiveMetaboxes } />
-				<PostPreviewButton
-					className="edit-post-header__post-preview-button"
-					forceIsAutosaveable={ hasActiveMetaboxes }
-				/>
-				<PostViewLink />
-				<PostPublishButtonOrToggle
-					forceIsDirty={ hasActiveMetaboxes }
-					setEntitiesSavedStatesCallback={
-						setEntitiesSavedStatesCallback
-					}
-				/>
-				{ ( isWideViewport || ! showIconLabels ) && (
-					<PinnedItems.Slot scope="core" />
-				) }
-				<MoreMenu showIconLabels={ showIconLabels } />
-			</motion.div>
-		</div>
+			<PostEditorMoreMenu />
+		</EditorHeader>
 	);
 }
 

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

@@ -2,62 +2,47 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { MenuGroup, DropdownMenu } from '@wordpress/components';
 import { useViewportMatch } from '@wordpress/compose';
 import { privateApis as editorPrivateApis } from '@wordpress/editor';
-import { moreVertical } from '@wordpress/icons';
+import { PreferenceToggleMenuItem } from '@wordpress/preferences';
+import { displayShortcut } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
  */
-import PreferencesMenuItem from '../preferences-menu-item';
-import ToolsMoreMenuGroup from '../tools-more-menu-group';
-import WritingMenu from '../writing-menu';
 import { unlock } from '../../../lock-unlock';
+import ManagePatternsMenuItem from './manage-patterns-menu-item';
+import WelcomeGuideMenuItem from './welcome-guide-menu-item';
+import EditPostPreferencesModal from '../../preferences-modal';
 
-const { ModeSwitcher, ActionItem, PinnedItems } = unlock( editorPrivateApis );
+const { ToolsMoreMenuGroup, ViewMoreMenuGroup } = unlock( editorPrivateApis );
 
-const MoreMenu = ( { showIconLabels } ) => {
+const MoreMenu = () => {
 	const isLargeViewport = useViewportMatch( 'large' );
 
 	return (
-		<DropdownMenu
-			icon={ moreVertical }
-			label={ __( 'Options' ) }
-			popoverProps={ {
-				placement: 'bottom-end',
-				className: 'more-menu-dropdown__content',
-			} }
-			toggleProps={ {
-				...( showIconLabels && { variant: 'tertiary' } ),
-				tooltipPosition: 'bottom',
-				showTooltip: ! showIconLabels,
-				size: 'compact',
-			} }
-		>
-			{ ( { onClose } ) => (
-				<>
-					{ showIconLabels && ! isLargeViewport && (
-						<PinnedItems.Slot
-							className={ showIconLabels && 'show-icon-labels' }
-							scope="core"
-						/>
-					) }
-					<WritingMenu />
-					<ModeSwitcher />
-					<ActionItem.Slot
-						name="core/plugin-more-menu"
-						label={ __( 'Plugins' ) }
-						as={ MenuGroup }
-						fillProps={ { onClick: onClose } }
+		<>
+			{ isLargeViewport && (
+				<ViewMoreMenuGroup>
+					<PreferenceToggleMenuItem
+						scope="core/edit-post"
+						name="fullscreenMode"
+						label={ __( 'Fullscreen mode' ) }
+						info={ __( 'Show and hide the admin user interface' ) }
+						messageActivated={ __( 'Fullscreen mode activated' ) }
+						messageDeactivated={ __(
+							'Fullscreen mode deactivated'
+						) }
+						shortcut={ displayShortcut.secondary( 'f' ) }
 					/>
-					<ToolsMoreMenuGroup.Slot fillProps={ { onClose } } />
-					<MenuGroup>
-						<PreferencesMenuItem />
-					</MenuGroup>
-				</>
+				</ViewMoreMenuGroup>
 			) }
-		</DropdownMenu>
+			<ToolsMoreMenuGroup>
+				<ManagePatternsMenuItem />
+				<WelcomeGuideMenuItem />
+			</ToolsMoreMenuGroup>
+			<EditPostPreferencesModal />
+		</>
 	);
 };
 

package/src/components/header/more-menu/manage-patterns-menu-item.js

@@ -0,0 +1,33 @@
+/**
+ * WordPress dependencies
+ */
+import { MenuItem } from '@wordpress/components';
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import { addQueryArgs } from '@wordpress/url';
+
+function ManagePatternsMenuItem() {
+	const url = useSelect( ( select ) => {
+		const { canUser } = select( coreStore );
+		const defaultUrl = addQueryArgs( 'edit.php', {
+			post_type: 'wp_block',
+		} );
+		const patternsUrl = addQueryArgs( 'site-editor.php', {
+			path: '/patterns',
+		} );
+
+		// The site editor and templates both check whether the user has
+		// edit_theme_options capabilities. We can leverage that here and not
+		// display the manage patterns link if the user can't access it.
+		return canUser( 'create', 'templates' ) ? patternsUrl : defaultUrl;
+	}, [] );
+
+	return (
+		<MenuItem role="menuitem" href={ url }>
+			{ __( 'Manage patterns' ) }
+		</MenuItem>
+	);
+}
+
+export default ManagePatternsMenuItem;

package/src/components/header/style.scss

@@ -1,330 +1,14 @@
-.edit-post-header {
-	height: $header-height;
-	background: $white;
-	display: flex;
-	flex-wrap: wrap;
-	align-items: center;
-	// The header should never be wider than the viewport, or buttons might be hidden. Especially relevant at high zoom levels. Related to https://core.trac.wordpress.org/ticket/47603#ticket.
-	max-width: 100vw;
-	justify-content: space-between;
-
-	// Make toolbar sticky on larger breakpoints
-	@include break-zoomed-in {
-		flex-wrap: nowrap;
-	}
-}
-
-.edit-post-header__toolbar {
-	display: flex;
-	// Allow this area to shrink to fit the toolbar buttons.
-	flex-shrink: 8;
-	// Take up the space of the toolbar so it can be justified to the left side of the toolbar.
-	flex-grow: 3;
-	// Hide the overflow so flex will limit its width. Block toolbar will allow scrolling on fixed toolbar.
-	overflow: hidden;
-	// Leave enough room for the focus ring to show.
-	padding: 2px 0;
-	align-items: center;
-	// Allow focus ring to be fully visible on furthest right button.
-	@include break-medium() {
-		padding-right: var(--wp-admin-border-width-focus);
-	}
-
-	.table-of-contents {
-		display: none;
-
-		@include break-small() {
-			display: block;
-		}
-	}
-
-	.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-post-header__block-tools-toggle {
-	margin-left: 2px; // Allow focus ring to be fully visible
-}
-
-.edit-post-header__center {
-	flex-grow: 1;
-	display: flex;
-	justify-content: center;
-
-	&.is-collapsed {
-		display: none;
-	}
-}
-
-/**
- * Buttons on the right side
- */
-
-.edit-post-header__settings {
-	display: inline-flex;
-	align-items: center;
-	flex-wrap: nowrap;
-	padding-right: $grid-unit-05;
-
-	@include break-small () {
-		padding-right: $grid-unit-10;
-	}
-
-	gap: $grid-unit-10;
-}
-
 /**
- * Show icon labels.
+ *  Show icon label overrides.
  */
-
-.show-icon-labels.interface-pinned-items,
-.show-icon-labels .edit-post-header,
-.edit-post-header__dropdown {
-	.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;
-		}
-	}
-	// Exception for drodpdown toggle buttons.
-	// Exception for the fullscreen mode button.
-	.edit-post-fullscreen-mode-close.has-icon,
-	.components-button.has-icon.button-toggle {
-		svg {
-			display: block;
-		}
-		&::after {
-			content: none;
-		}
-	}
-	// Undo the width override for fullscreen mode button.
+.show-icon-labels .editor-header {
 	.edit-post-fullscreen-mode-close.has-icon {
 		width: $header-height;
-	}
-	// Don't hide MenuItemsChoice check icons
-	.components-menu-items-choice .components-menu-items__item-icon.components-menu-items__item-icon {
-		display: block;
-	}
-	.editor-document-tools__inserter-toggle.editor-document-tools__inserter-toggle,
-	.interface-pinned-items .components-button {
-		padding-left: $grid-unit;
-		padding-right: $grid-unit;
-
-		@include break-small {
-			padding-left: $grid-unit-15;
-			padding-right: $grid-unit-15;
+		svg {
+			display: block;
 		}
-	}
-
-	.editor-post-save-draft.editor-post-save-draft,
-	.editor-post-saved-state.editor-post-saved-state {
 		&::after {
 			content: none;
 		}
 	}
 }
-
-.show-icon-labels {
-	.edit-post-header__toolbar .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);
-			}
-		}
-	}
-}
-
-.edit-post-header__dropdown {
-	.components-menu-item__button.components-menu-item__button,
-	.components-button.editor-history__undo,
-	.components-button.editor-history__redo,
-	.table-of-contents .components-button,
-	.components-button.block-editor-list-view {
-		margin: 0;
-		padding: 6px 6px 6px $grid-unit-50;
-		width: 14.625rem;
-		text-align: left;
-		justify-content: flex-start;
-	}
-}
-
-.show-icon-labels.interface-pinned-items {
-	padding: 6px $grid-unit-15 $grid-unit-15;
-	margin-top: 0;
-	margin-bottom: 0;
-	margin-left: -$grid-unit-15;
-	margin-right: -$grid-unit-15;
-	border-bottom: 1px solid $gray-400;
-	display: block;
-
-	> .components-button.has-icon {
-		margin: 0;
-		padding: 6px 6px 6px $grid-unit;
-		width: 14.625rem;
-		justify-content: flex-start;
-
-		&[aria-expanded="true"] svg {
-			display: block;
-			max-width: $grid-unit-30;
-		}
-		&[aria-expanded="false"] {
-			padding-left: $grid-unit-50;
-		}
-		svg {
-			margin-right: 8px;
-		}
-	}
-}
-
-.edit-post-header__post-preview-button {
-	@include break-small {
-		display: none;
-	}
-}
-
-.is-distraction-free {
-	.interface-interface-skeleton__header {
-		border-bottom: none;
-	}
-
-	.edit-post-header {
-		background-color: $white;
-		border-bottom: 1px solid #e0e0e0;
-		position: absolute;
-		width: 100%;
-
-
-		// hide some parts
-		& > .edit-post-header__settings > .edit-post-header__post-preview-button {
-			visibility: hidden;
-		}
-
-		& > .edit-post-header__toolbar .editor-document-tools__document-overview-toggle,
-		& > .edit-post-header__settings > .editor-preview-dropdown,
-		& > .edit-post-header__settings > .interface-pinned-items {
-			display: none;
-		}
-
-	}
-
-	// We need ! important because we override inline styles
-	// set by the motion component.
-	.interface-interface-skeleton__header:focus-within {
-		opacity: 1 !important;
-		div {
-			transform: translateX(0) translateZ(0) !important;
-		}
-
-	}
-
-	.components-editor-notices__dismissible {
-		position: absolute;
-		z-index: 35;
-	}
-}
-
-.components-popover.more-menu-dropdown__content {
-	z-index: z-index(".components-popover.more-menu__content");
-}