@wordpress/edit-post 7.33.0 → 7.34.0

package/build-style/style.css

@@ -140,64 +140,6 @@
     display: block;
   }
 }
-.edit-post-header__toolbar .selected-block-tools-wrapper {
-  overflow: hidden;
-  display: flex;
-  align-items: center;
-  height: 60px;
-}
-.edit-post-header__toolbar .selected-block-tools-wrapper .block-editor-block-contextual-toolbar {
-  border-bottom: 0;
-  height: 100%;
-}
-.edit-post-header__toolbar .selected-block-tools-wrapper .block-editor-block-toolbar {
-  height: 100%;
-  padding-top: 15px;
-}
-.edit-post-header__toolbar .selected-block-tools-wrapper .block-editor-block-toolbar .components-button:not(.block-editor-block-mover-button) {
-  height: 32px;
-}
-.edit-post-header__toolbar .selected-block-tools-wrapper::after {
-  content: "";
-  width: 1px;
-  height: 24px;
-  background-color: #ddd;
-  margin-left: 8px;
-}
-.edit-post-header__toolbar .selected-block-tools-wrapper .components-toolbar-group,
-.edit-post-header__toolbar .selected-block-tools-wrapper .components-toolbar {
-  border-right: none;
-}
-.edit-post-header__toolbar .selected-block-tools-wrapper .components-toolbar-group::after,
-.edit-post-header__toolbar .selected-block-tools-wrapper .components-toolbar::after {
-  content: "";
-  width: 1px;
-  height: 24px;
-  background-color: #ddd;
-  margin-top: 4px;
-  margin-left: 8px;
-}
-.edit-post-header__toolbar .selected-block-tools-wrapper .components-toolbar-group .components-toolbar-group.components-toolbar-group::after,
-.edit-post-header__toolbar .selected-block-tools-wrapper .components-toolbar .components-toolbar-group.components-toolbar-group::after {
-  display: none;
-}
-.edit-post-header__toolbar .selected-block-tools-wrapper .block-editor-block-mover.is-horizontal .block-editor-block-mover-button {
-  height: 32px;
-  overflow: visible;
-}
-@media (min-width: 600px) {
-  .edit-post-header__toolbar .selected-block-tools-wrapper .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container {
-    position: relative;
-    top: -10px;
-  }
-}
-.edit-post-header__toolbar .selected-block-tools-wrapper.is-collapsed {
-  display: none;
-}
-
-.edit-post-header__block-tools-toggle {
-  margin-left: 2px;
-}
 
 .edit-post-header__center {
   flex-grow: 1;
@@ -472,13 +414,17 @@
 .edit-post-layout .components-editor-notices__snackbar {
   position: fixed;
   right: 0;
-  bottom: 40px;
+  bottom: 16px;
   padding-left: 16px;
   padding-right: 16px;
 }
 
 .is-distraction-free .components-editor-notices__snackbar {
-  bottom: 20px;
+  bottom: 16px;
+}
+
+.has-block-breadcrumbs .components-editor-notices__snackbar {
+  bottom: 40px;
 }
 
 .edit-post-layout .components-editor-notices__snackbar {
@@ -519,87 +465,6 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
   left: 0 !important;
 }
 
-.edit-post-layout .editor-post-publish-panel {
-  position: fixed;
-  z-index: 100001;
-  top: 46px;
-  bottom: 0;
-  right: 0;
-  left: 0;
-  overflow: auto;
-}
-@media (min-width: 782px) {
-  .edit-post-layout .editor-post-publish-panel {
-    z-index: 99998;
-    top: 32px;
-    left: auto;
-    width: 281px;
-    border-left: 1px solid #ddd;
-    transform: translateX(100%);
-    animation: edit-post-post-publish-panel__slide-in-animation 0.1s forwards;
-  }
-}
-@media (min-width: 782px) and (prefers-reduced-motion: reduce) {
-  .edit-post-layout .editor-post-publish-panel {
-    animation-duration: 1ms;
-    animation-delay: 0s;
-  }
-}
-@media (min-width: 782px) {
-  body.is-fullscreen-mode .edit-post-layout .editor-post-publish-panel {
-    top: 0;
-  }
-}
-@media (min-width: 782px) {
-  [role=region]:focus .edit-post-layout .editor-post-publish-panel {
-    transform: translateX(0%);
-  }
-}
-
-@keyframes edit-post-post-publish-panel__slide-in-animation {
-  100% {
-    transform: translateX(0%);
-  }
-}
-.edit-post-layout .editor-post-publish-panel__header-publish-button {
-  justify-content: center;
-}
-
-.edit-post-layout__toggle-publish-panel,
-.edit-post-layout__toggle-sidebar-panel,
-.edit-post-layout__toggle-entities-saved-states-panel {
-  z-index: 100000;
-  position: fixed !important;
-  top: -9999em;
-  bottom: auto;
-  left: auto;
-  right: 0;
-  box-sizing: border-box;
-  width: 280px;
-  background-color: #fff;
-  border: 1px dotted #ddd;
-  height: auto !important;
-  padding: 24px;
-  display: flex;
-  justify-content: center;
-}
-
-.interface-interface-skeleton__sidebar:focus .edit-post-layout__toggle-sidebar-panel, .interface-interface-skeleton__sidebar:focus-within .edit-post-layout__toggle-sidebar-panel {
-  top: auto;
-  bottom: 0;
-}
-
-.interface-interface-skeleton__actions:focus .edit-post-layout__toggle-entities-saved-states-panel, .interface-interface-skeleton__actions:focus-within .edit-post-layout__toggle-entities-saved-states-panel,
-.interface-interface-skeleton__actions:focus .edit-post-layout__toggle-publish-panel,
-.interface-interface-skeleton__actions:focus-within .edit-post-layout__toggle-publish-panel {
-  top: auto;
-  bottom: 0;
-}
-
-.edit-post-layout .entities-saved-states__panel-header {
-  height: 61px;
-}
-
 .edit-post-meta-boxes-area {
   position: relative;
   /**

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-post",
-	"version": "7.33.0",
+	"version": "7.34.0",
 	"description": "Edit Post module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,35 +27,35 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.56.0",
-		"@wordpress/api-fetch": "^6.53.0",
-		"@wordpress/block-editor": "^12.24.0",
-		"@wordpress/block-library": "^8.33.0",
-		"@wordpress/blocks": "^12.33.0",
-		"@wordpress/commands": "^0.27.0",
-		"@wordpress/components": "^27.4.0",
-		"@wordpress/compose": "^6.33.0",
-		"@wordpress/core-commands": "^0.25.0",
-		"@wordpress/core-data": "^6.33.0",
-		"@wordpress/data": "^9.26.0",
-		"@wordpress/deprecated": "^3.56.0",
-		"@wordpress/dom": "^3.56.0",
-		"@wordpress/editor": "^13.33.0",
-		"@wordpress/element": "^5.33.0",
-		"@wordpress/hooks": "^3.56.0",
-		"@wordpress/i18n": "^4.56.0",
-		"@wordpress/icons": "^9.47.0",
-		"@wordpress/keyboard-shortcuts": "^4.33.0",
-		"@wordpress/keycodes": "^3.56.0",
-		"@wordpress/media-utils": "^4.47.0",
-		"@wordpress/notices": "^4.24.0",
-		"@wordpress/plugins": "^6.24.0",
-		"@wordpress/preferences": "^3.33.0",
-		"@wordpress/private-apis": "^0.38.0",
-		"@wordpress/url": "^3.57.0",
-		"@wordpress/viewport": "^5.33.0",
-		"@wordpress/warning": "^2.56.0",
-		"@wordpress/widgets": "^3.33.0",
+		"@wordpress/a11y": "^3.57.0",
+		"@wordpress/api-fetch": "^6.54.0",
+		"@wordpress/block-editor": "^12.25.0",
+		"@wordpress/block-library": "^8.34.0",
+		"@wordpress/blocks": "^12.34.0",
+		"@wordpress/commands": "^0.28.0",
+		"@wordpress/components": "^27.5.0",
+		"@wordpress/compose": "^6.34.0",
+		"@wordpress/core-commands": "^0.26.0",
+		"@wordpress/core-data": "^6.34.0",
+		"@wordpress/data": "^9.27.0",
+		"@wordpress/deprecated": "^3.57.0",
+		"@wordpress/dom": "^3.57.0",
+		"@wordpress/editor": "^13.34.0",
+		"@wordpress/element": "^5.34.0",
+		"@wordpress/hooks": "^3.57.0",
+		"@wordpress/i18n": "^4.57.0",
+		"@wordpress/icons": "^9.48.0",
+		"@wordpress/keyboard-shortcuts": "^4.34.0",
+		"@wordpress/keycodes": "^3.57.0",
+		"@wordpress/media-utils": "^4.48.0",
+		"@wordpress/notices": "^4.25.0",
+		"@wordpress/plugins": "^6.25.0",
+		"@wordpress/preferences": "^3.34.0",
+		"@wordpress/private-apis": "^0.39.0",
+		"@wordpress/url": "^3.58.0",
+		"@wordpress/viewport": "^5.34.0",
+		"@wordpress/warning": "^2.57.0",
+		"@wordpress/widgets": "^3.34.0",
 		"classnames": "^2.3.1",
 		"memize": "^2.1.0"
 	},
@@ -66,5 +66,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "280403b4c1cf6cc2c55a6c4d56f9ef91145e4191"
+	"gitHead": "581d8a5580dba8f600b7268d51eb554771ae482c"
 }

package/src/components/header/index.js

@@ -7,42 +7,36 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import {
-	BlockToolbar,
-	privateApis as blockEditorPrivateApis,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
-import {
+	DocumentBar,
 	PostSavedState,
 	PostPreviewButton,
 	store as editorStore,
-	DocumentBar,
 	privateApis as editorPrivateApis,
 } from '@wordpress/editor';
-import { useEffect, useRef, useState } from '@wordpress/element';
 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 { __unstableMotion as motion } from '@wordpress/components';
 import { store as preferencesStore } from '@wordpress/preferences';
+import { useState } from '@wordpress/element';
 
 /**
  * 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 {
+	CollapsableBlockToolbar,
+	DocumentTools,
+	PostViewLink,
+	PreviewDropdown,
+	PinnedItems,
+	MoreMenu,
+	PostPublishButtonOrToggle,
+} = unlock( editorPrivateApis );
 
 const slideY = {
 	hidden: { y: '-50px' },
@@ -59,22 +53,19 @@ const slideX = {
 function Header( { setEntitiesSavedStatesCallback, initialPost } ) {
 	const isWideViewport = useViewportMatch( 'large' );
 	const isLargeViewport = useViewportMatch( 'medium' );
-	const blockToolbarRef = useRef();
 	const {
 		isTextEditor,
-		blockSelectionStart,
 		hasActiveMetaboxes,
 		isPublishSidebarOpened,
 		showIconLabels,
 		hasHistory,
+		hasFixedToolbar,
 	} = useSelect( ( select ) => {
 		const { get: getPreference } = select( preferencesStore );
 		const { getEditorMode } = select( editorStore );
 
 		return {
 			isTextEditor: getEditorMode() === 'text',
-			blockSelectionStart:
-				select( blockEditorStore ).getBlockSelectionStart(),
 			hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(),
 			hasHistory:
 				!! select( editorStore ).getEditorSettings()
@@ -82,22 +73,14 @@ function Header( { setEntitiesSavedStatesCallback, initialPost } ) {
 			isPublishSidebarOpened:
 				select( editorStore ).isPublishSidebarOpened(),
 			showIconLabels: getPreference( 'core', 'showIconLabels' ),
+			hasFixedToolbar: getPreference( 'core', 'fixedToolbar' ),
 		};
 	}, [] );
 
-	const { showFixedToolbar } = useShowBlockTools();
-	const showTopToolbar = isLargeViewport && showFixedToolbar;
+	const hasTopToolbar = isLargeViewport && hasFixedToolbar;
 
 	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">
@@ -118,47 +101,18 @@ function Header( { setEntitiesSavedStatesCallback, initialPost } ) {
 				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"
-						/>
-					</>
+				{ hasTopToolbar && (
+					<CollapsableBlockToolbar
+						isCollapsed={ isBlockToolsCollapsed }
+						onToggle={ setIsBlockToolsCollapsed }
+					/>
 				) }
 				<div
 					className={ classnames( 'edit-post-header__center', {
 						'is-collapsed':
 							hasHistory &&
 							! isBlockToolsCollapsed &&
-							showTopToolbar,
+							hasTopToolbar,
 					} ) }
 				>
 					{ hasHistory && <DocumentBar /> }
@@ -192,7 +146,8 @@ function Header( { setEntitiesSavedStatesCallback, initialPost } ) {
 				{ ( isWideViewport || ! showIconLabels ) && (
 					<PinnedItems.Slot scope="core" />
 				) }
-				<MoreMenu showIconLabels={ showIconLabels } />
+				<MoreMenu />
+				<PostEditorMoreMenu />
 			</motion.div>
 		</div>
 	);

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( 'read', 'templates' ) ? patternsUrl : defaultUrl;
+	}, [] );
+
+	return (
+		<MenuItem role="menuitem" href={ url }>
+			{ __( 'Manage patterns' ) }
+		</MenuItem>
+	);
+}
+
+export default ManagePatternsMenuItem;

package/src/components/header/style.scss

@@ -37,85 +37,6 @@
 			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 {