@wordpress/edit-post 7.27.1 → 7.28.0

package/build-style/style-rtl.css

@@ -451,7 +451,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 }
 
 .interface-more-menu-dropdown__content .components-popover__content {
-  min-width: 280px;
+  min-width: 300px;
 }
 @media (min-width: 480px) {
   .interface-more-menu-dropdown__content .components-popover__content {
@@ -501,14 +501,6 @@ body.is-fullscreen-mode .interface-interface-skeleton {
     flex-wrap: nowrap;
   }
 }
-.edit-post-header > .edit-post-header__settings {
-  order: 1;
-}
-@supports (position: sticky) {
-  .edit-post-header > .edit-post-header__settings {
-    order: initial;
-  }
-}
 
 .edit-post-header__toolbar {
   display: flex;
@@ -527,17 +519,26 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   }
 }
 .edit-post-header__toolbar .selected-block-tools-wrapper {
-  overflow-x: hidden;
+  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;
-  margin-top: 12px;
-  margin-bottom: 12px;
+  height: 24px;
   background-color: #ddd;
   margin-right: 8px;
 }
@@ -549,15 +550,25 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 .edit-post-header__toolbar .selected-block-tools-wrapper .components-toolbar::after {
   content: "";
   width: 1px;
-  margin-top: 12px;
-  margin-bottom: 12px;
+  height: 24px;
   background-color: #ddd;
+  margin-top: 4px;
   margin-right: 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;
 }
@@ -587,7 +598,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 }
 @media (min-width: 600px) {
   .edit-post-header__settings {
-    padding-left: 10px;
+    padding-left: 8px;
   }
 }
 
@@ -681,9 +692,9 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 .show-icon-labels .edit-post-header__toolbar .block-editor-block-mover::before {
   content: "";
   width: 1px;
-  margin-top: 12px;
-  margin-bottom: 12px;
+  height: 24px;
   background-color: #ddd;
+  margin-top: 4px;
   margin-right: 8px;
 }
 .show-icon-labels .edit-post-header__toolbar .block-editor-block-mover .block-editor-block-mover__move-button-container::before {
@@ -1217,7 +1228,7 @@ h2.edit-post-template-summary__title {
   position: relative;
   display: flex;
   flex-flow: column;
-  background-color: #1e1e1e;
+  background-color: #ddd;
   flex: 1 0 auto;
 }
 .edit-post-visual-editor:not(.has-inline-canvas) {
@@ -1360,7 +1371,6 @@ body.js.block-editor-page .media-frame select.attachment-filters:last-of-type {
 .edit-post-text-editor,
 .edit-post-sidebar,
 .editor-post-publish-panel,
-.components-popover,
 .components-modal__frame {
   box-sizing: border-box;
 }
@@ -1376,9 +1386,6 @@ body.js.block-editor-page .media-frame select.attachment-filters:last-of-type {
 .editor-post-publish-panel *,
 .editor-post-publish-panel *::before,
 .editor-post-publish-panel *::after,
-.components-popover *,
-.components-popover *::before,
-.components-popover *::after,
 .components-modal__frame *,
 .components-modal__frame *::before,
 .components-modal__frame *::after {

package/build-style/style.css

@@ -451,7 +451,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 }
 
 .interface-more-menu-dropdown__content .components-popover__content {
-  min-width: 280px;
+  min-width: 300px;
 }
 @media (min-width: 480px) {
   .interface-more-menu-dropdown__content .components-popover__content {
@@ -501,14 +501,6 @@ body.is-fullscreen-mode .interface-interface-skeleton {
     flex-wrap: nowrap;
   }
 }
-.edit-post-header > .edit-post-header__settings {
-  order: 1;
-}
-@supports (position: sticky) {
-  .edit-post-header > .edit-post-header__settings {
-    order: initial;
-  }
-}
 
 .edit-post-header__toolbar {
   display: flex;
@@ -527,17 +519,26 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   }
 }
 .edit-post-header__toolbar .selected-block-tools-wrapper {
-  overflow-x: hidden;
+  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;
-  margin-top: 12px;
-  margin-bottom: 12px;
+  height: 24px;
   background-color: #ddd;
   margin-left: 8px;
 }
@@ -549,15 +550,25 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 .edit-post-header__toolbar .selected-block-tools-wrapper .components-toolbar::after {
   content: "";
   width: 1px;
-  margin-top: 12px;
-  margin-bottom: 12px;
+  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;
 }
@@ -587,7 +598,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 }
 @media (min-width: 600px) {
   .edit-post-header__settings {
-    padding-right: 10px;
+    padding-right: 8px;
   }
 }
 
@@ -681,9 +692,9 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 .show-icon-labels .edit-post-header__toolbar .block-editor-block-mover::before {
   content: "";
   width: 1px;
-  margin-top: 12px;
-  margin-bottom: 12px;
+  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 {
@@ -1217,7 +1228,7 @@ h2.edit-post-template-summary__title {
   position: relative;
   display: flex;
   flex-flow: column;
-  background-color: #1e1e1e;
+  background-color: #ddd;
   flex: 1 0 auto;
 }
 .edit-post-visual-editor:not(.has-inline-canvas) {
@@ -1360,7 +1371,6 @@ body.js.block-editor-page .media-frame select.attachment-filters:last-of-type {
 .edit-post-text-editor,
 .edit-post-sidebar,
 .editor-post-publish-panel,
-.components-popover,
 .components-modal__frame {
   box-sizing: border-box;
 }
@@ -1376,9 +1386,6 @@ body.js.block-editor-page .media-frame select.attachment-filters:last-of-type {
 .editor-post-publish-panel *,
 .editor-post-publish-panel *::before,
 .editor-post-publish-panel *::after,
-.components-popover *,
-.components-popover *::before,
-.components-popover *::after,
 .components-modal__frame *,
 .components-modal__frame *::before,
 .components-modal__frame *::after {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-post",
-	"version": "7.27.1",
+	"version": "7.28.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.50.0",
-		"@wordpress/api-fetch": "^6.47.0",
-		"@wordpress/block-editor": "^12.18.1",
-		"@wordpress/block-library": "^8.27.1",
-		"@wordpress/blocks": "^12.27.1",
-		"@wordpress/commands": "^0.21.0",
-		"@wordpress/components": "^25.16.0",
-		"@wordpress/compose": "^6.27.0",
-		"@wordpress/core-commands": "^0.19.1",
-		"@wordpress/core-data": "^6.27.1",
-		"@wordpress/data": "^9.20.0",
-		"@wordpress/deprecated": "^3.50.0",
-		"@wordpress/dom": "^3.50.0",
-		"@wordpress/editor": "^13.27.1",
-		"@wordpress/element": "^5.27.0",
-		"@wordpress/hooks": "^3.50.0",
-		"@wordpress/i18n": "^4.50.0",
-		"@wordpress/icons": "^9.41.0",
-		"@wordpress/interface": "^5.27.0",
-		"@wordpress/keyboard-shortcuts": "^4.27.0",
-		"@wordpress/keycodes": "^3.50.0",
-		"@wordpress/media-utils": "^4.41.0",
-		"@wordpress/notices": "^4.18.0",
-		"@wordpress/plugins": "^6.18.0",
-		"@wordpress/preferences": "^3.27.0",
-		"@wordpress/private-apis": "^0.32.0",
-		"@wordpress/url": "^3.51.0",
-		"@wordpress/viewport": "^5.27.0",
-		"@wordpress/warning": "^2.50.0",
-		"@wordpress/widgets": "^3.27.1",
+		"@wordpress/a11y": "^3.51.0",
+		"@wordpress/api-fetch": "^6.48.0",
+		"@wordpress/block-editor": "^12.19.0",
+		"@wordpress/block-library": "^8.28.0",
+		"@wordpress/blocks": "^12.28.0",
+		"@wordpress/commands": "^0.22.0",
+		"@wordpress/components": "^26.0.0",
+		"@wordpress/compose": "^6.28.0",
+		"@wordpress/core-commands": "^0.20.0",
+		"@wordpress/core-data": "^6.28.0",
+		"@wordpress/data": "^9.21.0",
+		"@wordpress/deprecated": "^3.51.0",
+		"@wordpress/dom": "^3.51.0",
+		"@wordpress/editor": "^13.28.0",
+		"@wordpress/element": "^5.28.0",
+		"@wordpress/hooks": "^3.51.0",
+		"@wordpress/i18n": "^4.51.0",
+		"@wordpress/icons": "^9.42.0",
+		"@wordpress/interface": "^5.28.0",
+		"@wordpress/keyboard-shortcuts": "^4.28.0",
+		"@wordpress/keycodes": "^3.51.0",
+		"@wordpress/media-utils": "^4.42.0",
+		"@wordpress/notices": "^4.19.0",
+		"@wordpress/plugins": "^6.19.0",
+		"@wordpress/preferences": "^3.28.0",
+		"@wordpress/private-apis": "^0.33.0",
+		"@wordpress/url": "^3.52.0",
+		"@wordpress/viewport": "^5.28.0",
+		"@wordpress/warning": "^2.51.0",
+		"@wordpress/widgets": "^3.28.0",
 		"classnames": "^2.3.1",
 		"memize": "^2.1.0",
 		"rememo": "^4.0.2"
@@ -68,5 +68,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "c2f6d07ffab7d68b9ac3c423ce7e11af91f6e45e"
+	"gitHead": "eb796371e9630636a4a8837033807b0c4a06ed67"
 }

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

@@ -24,7 +24,7 @@ import { useReducedMotion } from '@wordpress/compose';
  */
 import { store as editPostStore } from '../../../store';
 
-function FullscreenModeClose( { showTooltip, icon, href } ) {
+function FullscreenModeClose( { showTooltip, icon, href, initialPost } ) {
 	const { isActive, isRequestingSiteIcon, postType, siteIconUrl } = useSelect(
 		( select ) => {
 			const { getCurrentPostType } = select( editorStore );
@@ -33,7 +33,7 @@ function FullscreenModeClose( { showTooltip, icon, href } ) {
 				select( coreStore );
 			const siteData =
 				getEntityRecord( 'root', '__unstableBase', undefined ) || {};
-
+			const _postType = initialPost?.type || getCurrentPostType();
 			return {
 				isActive: isFeatureActive( 'fullscreenMode' ),
 				isRequestingSiteIcon: isResolving( 'getEntityRecord', [
@@ -41,7 +41,7 @@ function FullscreenModeClose( { showTooltip, icon, href } ) {
 					'__unstableBase',
 					undefined,
 				] ),
-				postType: getPostType( getCurrentPostType() ),
+				postType: getPostType( _postType ),
 				siteIconUrl: siteData.site_icon_url,
 			};
 		},
@@ -88,17 +88,20 @@ function FullscreenModeClose( { showTooltip, icon, href } ) {
 		'has-icon': siteIconUrl,
 	} );
 
+	const buttonHref =
+		href ??
+		addQueryArgs( 'edit.php', {
+			post_type: postType.slug,
+		} );
+
+	const buttonLabel = postType?.labels?.view_items ?? __( 'Back' );
+
 	return (
 		<motion.div whileHover="expand">
 			<Button
 				className={ classes }
-				href={
-					href ??
-					addQueryArgs( 'edit.php', {
-						post_type: postType.slug,
-					} )
-				}
-				label={ postType?.labels?.view_items ?? __( 'Back' ) }
+				href={ buttonHref }
+				label={ buttonLabel }
 				showTooltip={ showTooltip }
 			>
 				{ buttonIcon }

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

@@ -15,8 +15,7 @@ import FullscreenModeClose from '../';
 
 jest.mock( '@wordpress/data/src/components/use-select', () => {
 	// This allows us to tweak the returned value on each test.
-	const mock = jest.fn();
-	return mock;
+	return jest.fn();
 } );
 
 jest.mock( '@wordpress/core-data' );
@@ -28,16 +27,15 @@ describe( 'FullscreenModeClose', () => {
 				return cb( () => ( {
 					isResolving: () => false,
 					isFeatureActive: () => true,
-					getCurrentPostType: () => {},
 					getPostType: () => true,
 					getEntityRecord: () => ( {
 						site_icon_url: 'https://fakeUrl.com',
 					} ),
+					getCurrentPostType: () => 'post',
 				} ) );
 			} );
 
 			render( <FullscreenModeClose /> );
-
 			const siteIcon = screen.getByAltText( 'Site Icon' );
 
 			expect( siteIcon ).toBeVisible();
@@ -48,11 +46,11 @@ describe( 'FullscreenModeClose', () => {
 				return cb( () => ( {
 					isResolving: () => false,
 					isFeatureActive: () => true,
-					getCurrentPostType: () => {},
 					getPostType: () => true,
 					getEntityRecord: () => ( {
 						site_icon_url: '',
 					} ),
+					getCurrentPostType: () => 'post',
 				} ) );
 			} );
 
@@ -64,5 +62,33 @@ describe( 'FullscreenModeClose', () => {
 
 			expect( container ).toMatchSnapshot();
 		} );
+
+		it( 'should add correct href using post type from initialPost props', () => {
+			useSelect.mockImplementation( ( cb ) => {
+				return cb( () => ( {
+					isResolving: () => false,
+					isFeatureActive: () => true,
+					getPostType: () => {
+						return {
+							slug: 'page',
+							labels: {
+								view_items: 'View Pages',
+							},
+						};
+					},
+					getEntityRecord: () => ( {
+						site_icon_url: '',
+					} ),
+					getCurrentPostType: () => 'post',
+				} ) );
+			} );
+
+			render( <FullscreenModeClose initialPost={ { type: 'page' } } /> );
+
+			const button = screen.getByLabelText( 'View Pages' );
+			expect( button.href ).toBe(
+				'http://localhost/edit.php?post_type=page'
+			);
+		} );
 	} );
 } );

package/src/components/header/index.js

@@ -55,7 +55,7 @@ const slideX = {
 	hover: { x: 0, transition: { type: 'tween', delay: 0.2 } },
 };
 
-function Header( { setEntitiesSavedStatesCallback } ) {
+function Header( { setEntitiesSavedStatesCallback, initialPost } ) {
 	const isWideViewport = useViewportMatch( 'large' );
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const blockToolbarRef = useRef();
@@ -64,7 +64,6 @@ function Header( { setEntitiesSavedStatesCallback } ) {
 		hasBlockSelection,
 		hasActiveMetaboxes,
 		hasFixedToolbar,
-		isEditingTemplate,
 		isPublishSidebarOpened,
 		showIconLabels,
 		hasHistory,
@@ -77,9 +76,9 @@ function Header( { setEntitiesSavedStatesCallback } ) {
 			hasBlockSelection:
 				!! select( blockEditorStore ).getBlockSelectionStart(),
 			hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(),
-			hasHistory: !! select( editorStore ).getEditorSettings().goBack,
-			isEditingTemplate:
-				select( editorStore ).getRenderingMode() === 'template-only',
+			hasHistory:
+				!! select( editorStore ).getEditorSettings()
+					.onNavigateToPreviousEntityRecord,
 			isPublishSidebarOpened:
 				select( editPostStore ).isPublishSidebarOpened(),
 			hasFixedToolbar: getPreference( 'core', 'fixedToolbar' ),
@@ -104,7 +103,10 @@ function Header( { setEntitiesSavedStatesCallback } ) {
 					variants={ slideX }
 					transition={ { type: 'tween', delay: 0.8 } }
 				>
-					<FullscreenModeClose showTooltip />
+					<FullscreenModeClose
+						showTooltip
+						initialPost={ initialPost }
+					/>
 				</motion.div>
 			</MainDashboardButton.Slot>
 			<motion.div
@@ -150,14 +152,14 @@ function Header( { setEntitiesSavedStatesCallback } ) {
 				<div
 					className={ classnames( 'edit-post-header__center', {
 						'is-collapsed':
-							isEditingTemplate &&
+							hasHistory &&
 							hasBlockSelection &&
 							! isBlockToolsCollapsed &&
 							hasFixedToolbar &&
 							isLargeViewport,
 					} ) }
 				>
-					{ ( isEditingTemplate || hasHistory ) && <DocumentBar /> }
+					{ hasHistory && <DocumentBar /> }
 				</div>
 			</motion.div>
 			<motion.div

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

@@ -29,33 +29,24 @@ const MODES = [
 ];
 
 function ModeSwitcher() {
-	const {
-		shortcut,
-		isRichEditingEnabled,
-		isCodeEditingEnabled,
-		isEditingTemplate,
-		mode,
-	} = useSelect(
-		( select ) => ( {
-			shortcut: select(
-				keyboardShortcutsStore
-			).getShortcutRepresentation( 'core/edit-post/toggle-mode' ),
-			isRichEditingEnabled:
-				select( editorStore ).getEditorSettings().richEditingEnabled,
-			isCodeEditingEnabled:
-				select( editorStore ).getEditorSettings().codeEditingEnabled,
-			isEditingTemplate:
-				select( editorStore ).getRenderingMode() === 'template-only',
-			mode: select( editPostStore ).getEditorMode(),
-		} ),
-		[]
-	);
+	const { shortcut, isRichEditingEnabled, isCodeEditingEnabled, mode } =
+		useSelect(
+			( select ) => ( {
+				shortcut: select(
+					keyboardShortcutsStore
+				).getShortcutRepresentation( 'core/edit-post/toggle-mode' ),
+				isRichEditingEnabled:
+					select( editorStore ).getEditorSettings()
+						.richEditingEnabled,
+				isCodeEditingEnabled:
+					select( editorStore ).getEditorSettings()
+						.codeEditingEnabled,
+				mode: select( editPostStore ).getEditorMode(),
+			} ),
+			[]
+		);
 	const { switchEditorMode } = useDispatch( editPostStore );
 
-	if ( isEditingTemplate ) {
-		return null;
-	}
-
 	let selectedMode = mode;
 	if ( ! isRichEditingEnabled && mode === 'visual' ) {
 		selectedMode = 'text';