@wordpress/edit-post 7.24.0 → 7.25.0

package/build-style/style.css

@@ -468,7 +468,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 
 .interface-pinned-items {
   display: flex;
-  gap: 4px;
+  gap: 8px;
   margin-right: -4px;
 }
 .interface-pinned-items .components-button {
@@ -616,11 +616,37 @@ body.is-fullscreen-mode .interface-interface-skeleton {
     display: block;
   }
 }
-.edit-post-header__toolbar .block-editor-block-contextual-toolbar.is-fixed {
-  border: none;
-}
 .edit-post-header__toolbar .selected-block-tools-wrapper {
   overflow-x: hidden;
+  display: flex;
+}
+.edit-post-header__toolbar .selected-block-tools-wrapper .block-editor-block-contextual-toolbar {
+  border-bottom: 0;
+}
+.edit-post-header__toolbar .selected-block-tools-wrapper::after {
+  content: "";
+  width: 1px;
+  margin-top: 12px;
+  margin-bottom: 12px;
+  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;
+  margin-top: 12px;
+  margin-bottom: 12px;
+  background-color: #ddd;
+  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.is-collapsed {
   display: none;
@@ -647,39 +673,13 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   align-items: center;
   flex-wrap: nowrap;
   padding-right: 4px;
-  gap: 4px;
+  gap: 8px;
 }
 @media (min-width: 600px) {
   .edit-post-header__settings {
     padding-right: 10px;
   }
 }
-@media (min-width: 600px) {
-  .edit-post-header__settings {
-    gap: 8px;
-  }
-}
-
-.edit-post-header-preview__grouping-external {
-  display: flex;
-  position: relative;
-  padding-bottom: 0;
-}
-
-.edit-post-header-preview__button-external {
-  padding-left: 8px;
-  margin-right: auto;
-  width: 100%;
-  display: flex;
-  justify-content: flex-start;
-}
-.edit-post-header-preview__button-external svg {
-  margin-left: auto;
-}
-
-.edit-post-post-preview-dropdown .components-popover__content {
-  padding-bottom: 0;
-}
 
 /**
  * Show icon labels.
@@ -765,6 +765,18 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   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;
+  margin-top: 12px;
+  margin-bottom: 12px;
+  background-color: #ddd;
+  margin-left: 8px;
+}
+
 .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,
@@ -803,6 +815,12 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   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;
 }
@@ -814,10 +832,10 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   position: absolute;
   width: 100%;
 }
-.is-distraction-free .edit-post-header > .edit-post-header__settings > .editor-post-preview {
+.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 .edit-post-header-toolbar__inserter-toggle, .is-distraction-free .edit-post-header > .edit-post-header__toolbar .edit-post-header-toolbar__document-overview-toggle, .is-distraction-free .edit-post-header > .edit-post-header__settings > .block-editor-post-preview__dropdown, .is-distraction-free .edit-post-header > .edit-post-header__settings > .interface-pinned-items {
+.is-distraction-free .edit-post-header > .edit-post-header__toolbar .edit-post-header-toolbar__inserter-toggle, .is-distraction-free .edit-post-header > .edit-post-header__toolbar .edit-post-header-toolbar__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 {
@@ -934,9 +952,9 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 }
 .edit-post-header-toolbar .edit-post-header-toolbar__left > .components-button.has-icon,
 .edit-post-header-toolbar .edit-post-header-toolbar__left > .components-dropdown > .components-button.has-icon {
-  height: 36px;
-  min-width: 36px;
-  padding: 6px;
+  height: 32px;
+  min-width: 32px;
+  padding: 4px;
 }
 .edit-post-header-toolbar .edit-post-header-toolbar__left > .components-button.has-icon.is-pressed,
 .edit-post-header-toolbar .edit-post-header-toolbar__left > .components-dropdown > .components-button.has-icon.is-pressed {
@@ -974,12 +992,13 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 .edit-post-header-toolbar__left {
   display: inline-flex;
   align-items: center;
-  padding-left: 8px;
+  padding-left: 16px;
+  gap: 8px;
   margin-right: 8px;
 }
-@media (min-width: 600px) {
+@media (min-width: 782px) {
   .edit-post-header-toolbar__left {
-    padding-left: 24px;
+    padding-left: 20px;
   }
 }
 @media (min-width: 1280px) {
@@ -989,7 +1008,6 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 }
 
 .edit-post-header-toolbar .edit-post-header-toolbar__left > .edit-post-header-toolbar__inserter-toggle.has-icon {
-  margin-right: 8px;
   min-width: 32px;
   width: 32px;
   height: 32px;
@@ -997,7 +1015,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 }
 .show-icon-labels .edit-post-header-toolbar .edit-post-header-toolbar__left > .edit-post-header-toolbar__inserter-toggle.has-icon {
   width: auto;
-  height: 36px;
+  height: 32px;
   padding: 0 8px;
 }
 
@@ -1005,60 +1023,6 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   margin-left: 8px;
 }
 
-.edit-post-document-actions {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  height: 36px;
-  justify-content: space-between;
-  min-width: 0;
-  background: #f0f0f0;
-  border-radius: 4px;
-  width: min(100%, 450px);
-}
-.edit-post-document-actions .components-button:hover {
-  color: var(--wp-block-synced-color);
-  background: #e0e0e0;
-}
-
-.edit-post-document-actions__command {
-  flex-grow: 1;
-  color: var(--wp-block-synced-color);
-  overflow: hidden;
-}
-
-.edit-post-document-actions__title {
-  flex-grow: 1;
-  color: var(--wp-block-synced-color);
-  overflow: hidden;
-}
-.edit-post-document-actions__title:hover {
-  color: var(--wp-block-synced-color);
-}
-.edit-post-document-actions__title .block-editor-block-icon {
-  flex-shrink: 0;
-}
-.edit-post-document-actions__title h1 {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  color: var(--wp-block-synced-color);
-}
-
-.edit-post-document-actions__shortcut {
-  color: #2f2f2f;
-}
-
-.edit-post-document-actions__back.components-button.has-icon.has-text {
-  min-width: 36px;
-  flex-shrink: 0;
-  color: #757575;
-  gap: 0;
-}
-.edit-post-document-actions__back.components-button.has-icon.has-text:hover {
-  color: currentColor;
-}
-
 .edit-post-keyboard-shortcut-help-modal__section {
   margin: 0 0 2rem 0;
 }
@@ -1558,21 +1522,10 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
 }
 
 .components-panel__header.edit-post-sidebar__panel-tabs {
-  justify-content: flex-start;
   padding-left: 0;
   padding-right: 16px;
-  border-top: 0;
-  margin-top: 0;
-}
-.components-panel__header.edit-post-sidebar__panel-tabs ul {
-  display: flex;
-}
-.components-panel__header.edit-post-sidebar__panel-tabs li {
-  margin: 0;
 }
 .components-panel__header.edit-post-sidebar__panel-tabs .components-button.has-icon {
-  display: none;
-  margin: 0 0 0 auto;
   padding: 0;
   min-width: 24px;
   height: 24px;
@@ -1583,6 +1536,10 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
   }
 }
 
+.edit-post-sidebar__panel {
+  margin-top: -1px;
+}
+
 .components-panel__body.is-opened.edit-post-last-revision__panel {
   padding: 0;
   height: 48px;
@@ -1604,96 +1561,11 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
   align-items: stretch;
 }
 
-.components-button.edit-post-post-template__toggle {
-  display: inline-block;
-  width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.edit-post-post-template__dialog {
-  z-index: 99999;
-}
-
-.edit-post-post-template__form {
-  min-width: 248px;
-  margin: 8px;
-}
-
-@media (min-width: 782px) {
-  .edit-post-post-template__create-form {
-    width: 320px;
-  }
-}
-
 .edit-post-post-visibility__dialog .editor-post-visibility {
   min-width: 248px;
   margin: 8px;
 }
 
-.components-button.edit-post-sidebar__panel-tab {
-  position: relative;
-  border-radius: 0;
-  height: 48px;
-  background: transparent;
-  border: none;
-  box-shadow: none;
-  cursor: pointer;
-  padding: 3px 16px;
-  margin-left: 0;
-  font-weight: 500;
-}
-.components-button.edit-post-sidebar__panel-tab:focus:not(:disabled) {
-  position: relative;
-  box-shadow: none;
-  outline: none;
-}
-.components-button.edit-post-sidebar__panel-tab::after {
-  content: "";
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  pointer-events: none;
-  background: var(--wp-admin-theme-color);
-  height: calc(0 * var(--wp-admin-border-width-focus));
-  border-radius: 0;
-  transition: all 0.1s linear;
-}
-@media (prefers-reduced-motion: reduce) {
-  .components-button.edit-post-sidebar__panel-tab::after {
-    transition-duration: 0s;
-    transition-delay: 0s;
-  }
-}
-.components-button.edit-post-sidebar__panel-tab.is-active::after {
-  height: calc(1 * var(--wp-admin-border-width-focus));
-  outline: 2px solid transparent;
-  outline-offset: -1px;
-}
-.components-button.edit-post-sidebar__panel-tab::before {
-  content: "";
-  position: absolute;
-  top: 12px;
-  right: 12px;
-  bottom: 12px;
-  left: 12px;
-  pointer-events: none;
-  box-shadow: 0 0 0 0 transparent;
-  border-radius: 2px;
-  transition: all 0.1s linear;
-}
-@media (prefers-reduced-motion: reduce) {
-  .components-button.edit-post-sidebar__panel-tab::before {
-    transition-duration: 0s;
-    transition-delay: 0s;
-  }
-}
-.components-button.edit-post-sidebar__panel-tab:focus-visible::before {
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-  outline: 2px solid transparent;
-}
-
 h2.edit-post-template-summary__title {
   line-height: 24px;
   margin: 0 0 4px;
@@ -1792,15 +1664,6 @@ h2.edit-post-template-summary__title {
   padding: 6px;
 }
 
-.edit-post-visual-editor__post-title-wrapper {
-  margin-top: 4rem;
-  margin-bottom: var(--wp--style--block-gap);
-}
-.edit-post-visual-editor__post-title-wrapper .editor-post-title {
-  margin-left: auto;
-  margin-right: auto;
-}
-
 .edit-post-visual-editor__content-area {
   width: 100%;
   height: 100%;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-post",
-	"version": "7.24.0",
+	"version": "7.25.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.47.0",
-		"@wordpress/api-fetch": "^6.44.0",
-		"@wordpress/block-editor": "^12.15.0",
-		"@wordpress/block-library": "^8.24.0",
-		"@wordpress/blocks": "^12.24.0",
-		"@wordpress/commands": "^0.18.0",
-		"@wordpress/components": "^25.13.0",
-		"@wordpress/compose": "^6.24.0",
-		"@wordpress/core-commands": "^0.16.0",
-		"@wordpress/core-data": "^6.24.0",
-		"@wordpress/data": "^9.17.0",
-		"@wordpress/deprecated": "^3.47.0",
-		"@wordpress/dom": "^3.47.0",
-		"@wordpress/editor": "^13.24.0",
-		"@wordpress/element": "^5.24.0",
-		"@wordpress/hooks": "^3.47.0",
-		"@wordpress/i18n": "^4.47.0",
-		"@wordpress/icons": "^9.38.0",
-		"@wordpress/interface": "^5.24.0",
-		"@wordpress/keyboard-shortcuts": "^4.24.0",
-		"@wordpress/keycodes": "^3.47.0",
-		"@wordpress/media-utils": "^4.38.0",
-		"@wordpress/notices": "^4.15.0",
-		"@wordpress/plugins": "^6.15.0",
-		"@wordpress/preferences": "^3.24.0",
-		"@wordpress/private-apis": "^0.29.0",
-		"@wordpress/url": "^3.48.0",
-		"@wordpress/viewport": "^5.24.0",
-		"@wordpress/warning": "^2.47.0",
-		"@wordpress/widgets": "^3.24.0",
+		"@wordpress/a11y": "^3.48.0",
+		"@wordpress/api-fetch": "^6.45.0",
+		"@wordpress/block-editor": "^12.16.0",
+		"@wordpress/block-library": "^8.25.0",
+		"@wordpress/blocks": "^12.25.0",
+		"@wordpress/commands": "^0.19.0",
+		"@wordpress/components": "^25.14.0",
+		"@wordpress/compose": "^6.25.0",
+		"@wordpress/core-commands": "^0.17.0",
+		"@wordpress/core-data": "^6.25.0",
+		"@wordpress/data": "^9.18.0",
+		"@wordpress/deprecated": "^3.48.0",
+		"@wordpress/dom": "^3.48.0",
+		"@wordpress/editor": "^13.25.0",
+		"@wordpress/element": "^5.25.0",
+		"@wordpress/hooks": "^3.48.0",
+		"@wordpress/i18n": "^4.48.0",
+		"@wordpress/icons": "^9.39.0",
+		"@wordpress/interface": "^5.25.0",
+		"@wordpress/keyboard-shortcuts": "^4.25.0",
+		"@wordpress/keycodes": "^3.48.0",
+		"@wordpress/media-utils": "^4.39.0",
+		"@wordpress/notices": "^4.16.0",
+		"@wordpress/plugins": "^6.16.0",
+		"@wordpress/preferences": "^3.25.0",
+		"@wordpress/private-apis": "^0.30.0",
+		"@wordpress/url": "^3.49.0",
+		"@wordpress/viewport": "^5.25.0",
+		"@wordpress/warning": "^2.48.0",
+		"@wordpress/widgets": "^3.25.0",
 		"classnames": "^2.3.1",
 		"memize": "^2.1.0",
 		"rememo": "^4.0.2"
@@ -68,5 +68,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "d98dff8ea96f29cfea045bf964269f46f040d539"
+	"gitHead": "fcf61b4beff747222c2c81d09d757ca1a0abd925"
 }

package/src/components/header/header-toolbar/index.js

@@ -105,6 +105,7 @@ function HeaderToolbar( { hasFixedToolbar, setListViewToggleElement } ) {
 				variant={ showIconLabels ? 'tertiary' : undefined }
 				aria-expanded={ isListViewOpen }
 				ref={ setListViewToggleElement }
+				size="compact"
 			/>
 		</>
 	);
@@ -159,17 +160,20 @@ function HeaderToolbar( { hasFixedToolbar, setListViewToggleElement } ) {
 									showIconLabels ? 'tertiary' : undefined
 								}
 								disabled={ isTextModeEnabled }
+								size="compact"
 							/>
 						) }
 						<ToolbarItem
 							as={ EditorHistoryUndo }
 							showTooltip={ ! showIconLabels }
 							variant={ showIconLabels ? 'tertiary' : undefined }
+							size="compact"
 						/>
 						<ToolbarItem
 							as={ EditorHistoryRedo }
 							showTooltip={ ! showIconLabels }
 							variant={ showIconLabels ? 'tertiary' : undefined }
+							size="compact"
 						/>
 						{ overflowItems }
 					</>

package/src/components/header/header-toolbar/style.scss

@@ -39,9 +39,12 @@
 	// here to the original button styles
 	.edit-post-header-toolbar__left > .components-button.has-icon,
 	.edit-post-header-toolbar__left > .components-dropdown > .components-button.has-icon {
-		height: $button-size;
-		min-width: $button-size;
-		padding: 6px;
+		// @todo: override toolbar group inherited paddings from components/block-tools/style.scss.
+		// This is best fixed by making the mover control area a proper single toolbar group.
+		// It needs specificity due to style inherited from .components-accessible-toolbar .components-button.has-icon.has-icon.
+		height: $button-size-compact;
+		min-width: $button-size-compact;
+		padding: 4px;
 
 		&.is-pressed {
 			background: $gray-900;
@@ -49,7 +52,7 @@
 
 		&:focus:not(:disabled) {
 			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 $border-width $white;
-			outline: 1px solid transparent;
+			outline: $border-width solid transparent;
 		}
 
 		&::before {
@@ -79,14 +82,15 @@
 .edit-post-header-toolbar__left {
 	display: inline-flex;
 	align-items: center;
-	padding-left: $grid-unit-10;
+	padding-left: $grid-unit-20;
+	gap: $grid-unit-10;
 
 	// Some plugins add buttons here despite best practices.
 	// Push them a bit rightwards to fit the top toolbar.
 	margin-right: $grid-unit-10;
 
-	@include break-small() {
-		padding-left: $grid-unit-30;
+	@include break-medium() {
+		padding-left: $grid-unit-50 * 0.5;
 	}
 
 	@include break-wide() {
@@ -95,16 +99,14 @@
 }
 
 .edit-post-header-toolbar .edit-post-header-toolbar__left > .edit-post-header-toolbar__inserter-toggle.has-icon {
-	margin-right: $grid-unit-10;
-	// Special dimensions for this button.
-	min-width: 32px;
-	width: 32px;
-	height: 32px;
+	min-width: $button-size-compact;
+	width: $button-size-compact;
+	height: $button-size-compact;
 	padding: 0;
 
 	.show-icon-labels & {
 		width: auto;
-		height: 36px;
+		height: $button-size-compact;
 		padding: 0 $grid-unit-10;
 	}
 }

package/src/components/header/index.js

@@ -7,10 +7,16 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import {
-	privateApis as blockEditorPrivateApis,
+	BlockToolbar,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { PostSavedState, PostPreviewButton } from '@wordpress/editor';
+import {
+	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';
@@ -31,14 +37,12 @@ import FullscreenModeClose from './fullscreen-mode-close';
 import HeaderToolbar from './header-toolbar';
 import MoreMenu from './more-menu';
 import PostPublishButtonOrToggle from './post-publish-button-or-toggle';
-import { default as DevicePreview } from '../device-preview';
 import ViewLink from '../view-link';
 import MainDashboardButton from './main-dashboard-button';
 import { store as editPostStore } from '../../store';
-import DocumentActions from './document-actions';
 import { unlock } from '../../lock-unlock';
 
-const { BlockContextualToolbar } = unlock( blockEditorPrivateApis );
+const { PreviewDropdown } = unlock( editorPrivateApis );
 
 const slideY = {
 	hidden: { y: '-50px' },
@@ -73,7 +77,8 @@ function Header( {
 			blockSelectionStart:
 				select( blockEditorStore ).getBlockSelectionStart(),
 			hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(),
-			isEditingTemplate: select( editPostStore ).isEditingTemplate(),
+			isEditingTemplate:
+				select( editorStore ).getRenderingMode() === 'template-only',
 			isPublishSidebarOpened:
 				select( editPostStore ).isPublishSidebarOpened(),
 			hasFixedToolbar: getPreference( 'core/edit-post', 'fixedToolbar' ),
@@ -119,11 +124,13 @@ function Header( {
 							className={ classnames(
 								'selected-block-tools-wrapper',
 								{
-									'is-collapsed': isBlockToolsCollapsed,
+									'is-collapsed':
+										isEditingTemplate &&
+										isBlockToolsCollapsed,
 								}
 							) }
 						>
-							<BlockContextualToolbar isFixed />
+							<BlockToolbar hideDragHandle />
 						</div>
 						<Popover.Slot
 							ref={ blockToolbarRef }
@@ -150,12 +157,14 @@ function Header( {
 				<div
 					className={ classnames( 'edit-post-header__center', {
 						'is-collapsed':
+							isEditingTemplate &&
+							hasBlockSelected &&
 							! isBlockToolsCollapsed &&
-							isLargeViewport &&
-							isEditingTemplate,
+							hasFixedToolbar &&
+							isLargeViewport,
 					} ) }
 				>
-					{ isEditingTemplate && <DocumentActions /> }
+					{ isEditingTemplate && <DocumentBar /> }
 				</div>
 			</motion.div>
 			<motion.div
@@ -174,8 +183,14 @@ function Header( {
 						showIconLabels={ showIconLabels }
 					/>
 				) }
-				<DevicePreview />
-				<PostPreviewButton forceIsAutosaveable={ hasActiveMetaboxes } />
+				<PreviewDropdown
+					showIconLabels={ showIconLabels }
+					forceIsAutosaveable={ hasActiveMetaboxes }
+				/>
+				<PostPreviewButton
+					className="edit-post-header__post-preview-button"
+					forceIsAutosaveable={ hasActiveMetaboxes }
+				/>
 				<ViewLink />
 				<PostPublishButtonOrToggle
 					forceIsDirty={ hasActiveMetaboxes }

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

@@ -44,7 +44,8 @@ function ModeSwitcher() {
 				select( editorStore ).getEditorSettings().richEditingEnabled,
 			isCodeEditingEnabled:
 				select( editorStore ).getEditorSettings().codeEditingEnabled,
-			isEditingTemplate: select( editPostStore ).isEditingTemplate(),
+			isEditingTemplate:
+				select( editorStore ).getRenderingMode() === 'template-only',
 			mode: select( editPostStore ).getEditorMode(),
 		} ),
 		[]

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

@@ -26,6 +26,7 @@ const MoreMenu = ( { showIconLabels } ) => {
 			toggleProps={ {
 				showTooltip: ! showIconLabels,
 				...( showIconLabels && { variant: 'tertiary' } ),
+				size: 'compact',
 			} }
 		>
 			{ ( { onClose } ) => (