@wordpress/edit-post 7.34.0 → 7.35.0

package/build-style/style.css

@@ -104,243 +104,19 @@
   }
 }
 
-.edit-post-header {
-  height: 60px;
-  background: #fff;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  max-width: 100vw;
-  justify-content: space-between;
-}
-@media (min-width: 280px) {
-  .edit-post-header {
-    flex-wrap: nowrap;
-  }
-}
-
-.edit-post-header__toolbar {
-  display: flex;
-  flex-shrink: 8;
-  flex-grow: 3;
-  overflow: hidden;
-  padding: 2px 0;
-  align-items: center;
-}
-@media (min-width: 782px) {
-  .edit-post-header__toolbar {
-    padding-right: var(--wp-admin-border-width-focus);
-  }
-}
-.edit-post-header__toolbar .table-of-contents {
-  display: none;
-}
-@media (min-width: 600px) {
-  .edit-post-header__toolbar .table-of-contents {
-    display: block;
-  }
-}
-
-.edit-post-header__center {
-  flex-grow: 1;
-  display: flex;
-  justify-content: center;
-}
-.edit-post-header__center.is-collapsed {
-  display: none;
-}
-
 /**
- * Buttons on the right side
+ *  Show icon label overrides.
  */
-.edit-post-header__settings {
-  display: inline-flex;
-  align-items: center;
-  flex-wrap: nowrap;
-  padding-right: 4px;
-  gap: 8px;
-}
-@media (min-width: 600px) {
-  .edit-post-header__settings {
-    padding-right: 8px;
-  }
-}
-
-/**
- * Show icon labels.
- */
-.show-icon-labels.interface-pinned-items .components-button.has-icon,
-.show-icon-labels .edit-post-header .components-button.has-icon,
-.edit-post-header__dropdown .components-button.has-icon {
-  width: auto;
-}
-.show-icon-labels.interface-pinned-items .components-button.has-icon svg,
-.show-icon-labels .edit-post-header .components-button.has-icon svg,
-.edit-post-header__dropdown .components-button.has-icon svg {
-  display: none;
-}
-.show-icon-labels.interface-pinned-items .components-button.has-icon::after,
-.show-icon-labels .edit-post-header .components-button.has-icon::after,
-.edit-post-header__dropdown .components-button.has-icon::after {
-  content: attr(aria-label);
-}
-.show-icon-labels.interface-pinned-items .components-button.has-icon[aria-disabled=true],
-.show-icon-labels .edit-post-header .components-button.has-icon[aria-disabled=true],
-.edit-post-header__dropdown .components-button.has-icon[aria-disabled=true] {
-  background-color: transparent;
-}
-.show-icon-labels.interface-pinned-items .is-tertiary:active,
-.show-icon-labels .edit-post-header .is-tertiary:active,
-.edit-post-header__dropdown .is-tertiary:active {
-  box-shadow: 0 0 0 1.5px var(--wp-admin-theme-color);
-  background-color: transparent;
-}
-.show-icon-labels.interface-pinned-items .edit-post-fullscreen-mode-close.has-icon svg,
-.show-icon-labels.interface-pinned-items .components-button.has-icon.button-toggle svg,
-.show-icon-labels .edit-post-header .edit-post-fullscreen-mode-close.has-icon svg,
-.show-icon-labels .edit-post-header .components-button.has-icon.button-toggle svg,
-.edit-post-header__dropdown .edit-post-fullscreen-mode-close.has-icon svg,
-.edit-post-header__dropdown .components-button.has-icon.button-toggle svg {
-  display: block;
-}
-.show-icon-labels.interface-pinned-items .edit-post-fullscreen-mode-close.has-icon::after,
-.show-icon-labels.interface-pinned-items .components-button.has-icon.button-toggle::after,
-.show-icon-labels .edit-post-header .edit-post-fullscreen-mode-close.has-icon::after,
-.show-icon-labels .edit-post-header .components-button.has-icon.button-toggle::after,
-.edit-post-header__dropdown .edit-post-fullscreen-mode-close.has-icon::after,
-.edit-post-header__dropdown .components-button.has-icon.button-toggle::after {
-  content: none;
-}
-.show-icon-labels.interface-pinned-items .edit-post-fullscreen-mode-close.has-icon,
-.show-icon-labels .edit-post-header .edit-post-fullscreen-mode-close.has-icon,
-.edit-post-header__dropdown .edit-post-fullscreen-mode-close.has-icon {
+.show-icon-labels .editor-header .edit-post-fullscreen-mode-close.has-icon {
   width: 60px;
 }
-.show-icon-labels.interface-pinned-items .components-menu-items-choice .components-menu-items__item-icon.components-menu-items__item-icon,
-.show-icon-labels .edit-post-header .components-menu-items-choice .components-menu-items__item-icon.components-menu-items__item-icon,
-.edit-post-header__dropdown .components-menu-items-choice .components-menu-items__item-icon.components-menu-items__item-icon {
+.show-icon-labels .editor-header .edit-post-fullscreen-mode-close.has-icon svg {
   display: block;
 }
-.show-icon-labels.interface-pinned-items .editor-document-tools__inserter-toggle.editor-document-tools__inserter-toggle,
-.show-icon-labels.interface-pinned-items .interface-pinned-items .components-button,
-.show-icon-labels .edit-post-header .editor-document-tools__inserter-toggle.editor-document-tools__inserter-toggle,
-.show-icon-labels .edit-post-header .interface-pinned-items .components-button,
-.edit-post-header__dropdown .editor-document-tools__inserter-toggle.editor-document-tools__inserter-toggle,
-.edit-post-header__dropdown .interface-pinned-items .components-button {
-  padding-left: 8px;
-  padding-right: 8px;
-}
-@media (min-width: 600px) {
-  .show-icon-labels.interface-pinned-items .editor-document-tools__inserter-toggle.editor-document-tools__inserter-toggle,
-.show-icon-labels.interface-pinned-items .interface-pinned-items .components-button,
-.show-icon-labels .edit-post-header .editor-document-tools__inserter-toggle.editor-document-tools__inserter-toggle,
-.show-icon-labels .edit-post-header .interface-pinned-items .components-button,
-.edit-post-header__dropdown .editor-document-tools__inserter-toggle.editor-document-tools__inserter-toggle,
-.edit-post-header__dropdown .interface-pinned-items .components-button {
-    padding-left: 12px;
-    padding-right: 12px;
-  }
-}
-.show-icon-labels.interface-pinned-items .editor-post-save-draft.editor-post-save-draft::after,
-.show-icon-labels.interface-pinned-items .editor-post-saved-state.editor-post-saved-state::after,
-.show-icon-labels .edit-post-header .editor-post-save-draft.editor-post-save-draft::after,
-.show-icon-labels .edit-post-header .editor-post-saved-state.editor-post-saved-state::after,
-.edit-post-header__dropdown .editor-post-save-draft.editor-post-save-draft::after,
-.edit-post-header__dropdown .editor-post-saved-state.editor-post-saved-state::after {
+.show-icon-labels .editor-header .edit-post-fullscreen-mode-close.has-icon::after {
   content: none;
 }
 
-.show-icon-labels .edit-post-header__toolbar .block-editor-block-mover {
-  border-left: none;
-}
-.show-icon-labels .edit-post-header__toolbar .block-editor-block-mover::before {
-  content: "";
-  width: 1px;
-  height: 24px;
-  background-color: #ddd;
-  margin-top: 4px;
-  margin-left: 8px;
-}
-.show-icon-labels .edit-post-header__toolbar .block-editor-block-mover .block-editor-block-mover__move-button-container::before {
-  width: calc(100% - 24px);
-  background: #ddd;
-  left: calc(50% + 1px);
-}
-
-.edit-post-header__dropdown .components-menu-item__button.components-menu-item__button,
-.edit-post-header__dropdown .components-button.editor-history__undo,
-.edit-post-header__dropdown .components-button.editor-history__redo,
-.edit-post-header__dropdown .table-of-contents .components-button,
-.edit-post-header__dropdown .components-button.block-editor-list-view {
-  margin: 0;
-  padding: 6px 6px 6px 40px;
-  width: 14.625rem;
-  text-align: left;
-  justify-content: flex-start;
-}
-
-.show-icon-labels.interface-pinned-items {
-  padding: 6px 12px 12px;
-  margin-top: 0;
-  margin-bottom: 0;
-  margin-left: -12px;
-  margin-right: -12px;
-  border-bottom: 1px solid #ccc;
-  display: block;
-}
-.show-icon-labels.interface-pinned-items > .components-button.has-icon {
-  margin: 0;
-  padding: 6px 6px 6px 8px;
-  width: 14.625rem;
-  justify-content: flex-start;
-}
-.show-icon-labels.interface-pinned-items > .components-button.has-icon[aria-expanded=true] svg {
-  display: block;
-  max-width: 24px;
-}
-.show-icon-labels.interface-pinned-items > .components-button.has-icon[aria-expanded=false] {
-  padding-left: 40px;
-}
-.show-icon-labels.interface-pinned-items > .components-button.has-icon svg {
-  margin-right: 8px;
-}
-
-@media (min-width: 600px) {
-  .edit-post-header__post-preview-button {
-    display: none;
-  }
-}
-
-.is-distraction-free .interface-interface-skeleton__header {
-  border-bottom: none;
-}
-.is-distraction-free .edit-post-header {
-  background-color: #fff;
-  border-bottom: 1px solid #e0e0e0;
-  position: absolute;
-  width: 100%;
-}
-.is-distraction-free .edit-post-header > .edit-post-header__settings > .edit-post-header__post-preview-button {
-  visibility: hidden;
-}
-.is-distraction-free .edit-post-header > .edit-post-header__toolbar .editor-document-tools__document-overview-toggle, .is-distraction-free .edit-post-header > .edit-post-header__settings > .editor-preview-dropdown, .is-distraction-free .edit-post-header > .edit-post-header__settings > .interface-pinned-items {
-  display: none;
-}
-.is-distraction-free .interface-interface-skeleton__header:focus-within {
-  opacity: 1 !important;
-}
-.is-distraction-free .interface-interface-skeleton__header:focus-within div {
-  transform: translateX(0) translateZ(0) !important;
-}
-.is-distraction-free .components-editor-notices__dismissible {
-  position: absolute;
-  z-index: 35;
-}
-
-.components-popover.more-menu-dropdown__content {
-  z-index: 99998;
-}
-
 .edit-post-fullscreen-mode-close.components-button {
   display: none;
 }
@@ -554,42 +330,6 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
   clear: both;
 }
 
-.components-panel__header.edit-post-sidebar__panel-tabs {
-  padding-left: 0;
-  padding-right: 16px;
-}
-.components-panel__header.edit-post-sidebar__panel-tabs .components-button.has-icon {
-  padding: 0;
-  min-width: 24px;
-  height: 24px;
-}
-@media (min-width: 782px) {
-  .components-panel__header.edit-post-sidebar__panel-tabs .components-button.has-icon {
-    display: flex;
-  }
-}
-
-.edit-post-sidebar__panel {
-  margin-top: -1px;
-}
-
-.edit-post-post-format {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-}
-
-.edit-post-post-slug {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-}
-
-.edit-post-post-visibility__dialog .editor-post-visibility {
-  min-width: 248px;
-  margin: 8px;
-}
-
 .edit-post-text-editor {
   position: relative;
   width: 100%;
@@ -777,15 +517,15 @@ body.js.block-editor-page .media-frame select.attachment-filters:last-of-type {
   }
 }
 
-.edit-post-header,
+.editor-header,
 .edit-post-text-editor,
 .editor-sidebar,
 .editor-post-publish-panel {
   box-sizing: border-box;
 }
-.edit-post-header *,
-.edit-post-header *::before,
-.edit-post-header *::after,
+.editor-header *,
+.editor-header *::before,
+.editor-header *::after,
 .edit-post-text-editor *,
 .edit-post-text-editor *::before,
 .edit-post-text-editor *::after,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-post",
-	"version": "7.34.0",
+	"version": "7.35.0",
 	"description": "Edit Post module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,36 +27,36 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.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",
+		"@wordpress/a11y": "^3.58.0",
+		"@wordpress/api-fetch": "^6.55.0",
+		"@wordpress/block-editor": "^12.26.0",
+		"@wordpress/block-library": "^8.35.0",
+		"@wordpress/blocks": "^12.35.0",
+		"@wordpress/commands": "^0.29.0",
+		"@wordpress/components": "^27.6.0",
+		"@wordpress/compose": "^6.35.0",
+		"@wordpress/core-commands": "^0.27.0",
+		"@wordpress/core-data": "^6.35.0",
+		"@wordpress/data": "^9.28.0",
+		"@wordpress/deprecated": "^3.58.0",
+		"@wordpress/dom": "^3.58.0",
+		"@wordpress/editor": "^13.35.0",
+		"@wordpress/element": "^5.35.0",
+		"@wordpress/hooks": "^3.58.0",
+		"@wordpress/i18n": "^4.58.0",
+		"@wordpress/icons": "^9.49.0",
+		"@wordpress/keyboard-shortcuts": "^4.35.0",
+		"@wordpress/keycodes": "^3.58.0",
+		"@wordpress/media-utils": "^4.49.0",
+		"@wordpress/notices": "^4.26.0",
+		"@wordpress/plugins": "^6.26.0",
+		"@wordpress/preferences": "^3.35.0",
+		"@wordpress/private-apis": "^0.40.0",
+		"@wordpress/url": "^3.59.0",
+		"@wordpress/viewport": "^5.35.0",
+		"@wordpress/warning": "^2.58.0",
+		"@wordpress/widgets": "^3.35.0",
+		"clsx": "^2.1.1",
 		"memize": "^2.1.0"
 	},
 	"peerDependencies": {
@@ -66,5 +66,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "581d8a5580dba8f600b7268d51eb554771ae482c"
+	"gitHead": "42f38f287506a6b3ed8ccba839b18ad066821044"
 }

package/src/components/header/fullscreen-mode-close/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -83,7 +83,7 @@ function FullscreenModeClose( { showTooltip, icon, href, initialPost } ) {
 		buttonIcon = <Icon size="36px" icon={ icon } />;
 	}
 
-	const classes = classnames( {
+	const classes = clsx( {
 		'edit-post-fullscreen-mode-close': true,
 		'has-icon': siteIconUrl,
 	} );

package/src/components/header/index.js

@@ -1,23 +1,9 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
-import {
-	DocumentBar,
-	PostSavedState,
-	PostPreviewButton,
-	store as editorStore,
-	privateApis as editorPrivateApis,
-} from '@wordpress/editor';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 import { useSelect } from '@wordpress/data';
-import { useViewportMatch } from '@wordpress/compose';
 import { __unstableMotion as motion } from '@wordpress/components';
-import { store as preferencesStore } from '@wordpress/preferences';
-import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -28,21 +14,7 @@ import MainDashboardButton from './main-dashboard-button';
 import { store as editPostStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 
-const {
-	CollapsableBlockToolbar,
-	DocumentTools,
-	PostViewLink,
-	PreviewDropdown,
-	PinnedItems,
-	MoreMenu,
-	PostPublishButtonOrToggle,
-} = 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%' },
@@ -51,39 +23,17 @@ const slideX = {
 };
 
 function Header( { setEntitiesSavedStatesCallback, initialPost } ) {
-	const isWideViewport = useViewportMatch( 'large' );
-	const isLargeViewport = useViewportMatch( 'medium' );
-	const {
-		isTextEditor,
-		hasActiveMetaboxes,
-		isPublishSidebarOpened,
-		showIconLabels,
-		hasHistory,
-		hasFixedToolbar,
-	} = useSelect( ( select ) => {
-		const { get: getPreference } = select( preferencesStore );
-		const { getEditorMode } = select( editorStore );
-
+	const { hasActiveMetaboxes } = useSelect( ( select ) => {
 		return {
-			isTextEditor: getEditorMode() === 'text',
 			hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(),
-			hasHistory:
-				!! select( editorStore ).getEditorSettings()
-					.onNavigateToPreviousEntityRecord,
-			isPublishSidebarOpened:
-				select( editorStore ).isPublishSidebarOpened(),
-			showIconLabels: getPreference( 'core', 'showIconLabels' ),
-			hasFixedToolbar: getPreference( 'core', 'fixedToolbar' ),
 		};
 	}, [] );
 
-	const hasTopToolbar = isLargeViewport && hasFixedToolbar;
-
-	const [ isBlockToolsCollapsed, setIsBlockToolsCollapsed ] =
-		useState( true );
-
 	return (
-		<div className="edit-post-header">
+		<EditorHeader
+			forceIsDirty={ hasActiveMetaboxes }
+			setEntitiesSavedStatesCallback={ setEntitiesSavedStatesCallback }
+		>
 			<MainDashboardButton.Slot>
 				<motion.div
 					variants={ slideX }
@@ -95,61 +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 } />
-				{ hasTopToolbar && (
-					<CollapsableBlockToolbar
-						isCollapsed={ isBlockToolsCollapsed }
-						onToggle={ setIsBlockToolsCollapsed }
-					/>
-				) }
-				<div
-					className={ classnames( 'edit-post-header__center', {
-						'is-collapsed':
-							hasHistory &&
-							! isBlockToolsCollapsed &&
-							hasTopToolbar,
-					} ) }
-				>
-					{ 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 />
-				<PostEditorMoreMenu />
-			</motion.div>
-		</div>
+			<PostEditorMoreMenu />
+		</EditorHeader>
 	);
 }
 

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

@@ -20,7 +20,7 @@ function ManagePatternsMenuItem() {
 		// 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 canUser( 'create', 'templates' ) ? patternsUrl : defaultUrl;
 	}, [] );
 
 	return (