+
) }
diff --git a/packages/edit-post/src/components/header/header-toolbar/style.scss b/packages/edit-post/src/components/header/header-toolbar/style.scss
index 84de5011a39de3..fc3bd59f4232fe 100644
--- a/packages/edit-post/src/components/header/header-toolbar/style.scss
+++ b/packages/edit-post/src/components/header/header-toolbar/style.scss
@@ -1,5 +1,6 @@
.edit-post-header-toolbar {
display: inline-flex;
+ flex-grow: 1;
align-items: center;
border: none;
@@ -117,25 +118,27 @@
// Move toolbar into top Editor Bar.
@include break-wide {
- position: static;
- left: auto;
- right: auto;
- background: none;
- border-bottom: none;
-
- .is-sidebar-opened & {
+ &:not(.is-pushed-down) {
+ position: static;
+ left: auto;
right: auto;
- }
+ background: none;
+ border-bottom: none;
- .block-editor-block-toolbar {
- border-left: $border-width solid $gray-300;
- }
+ .is-sidebar-opened & {
+ right: auto;
+ }
- .block-editor-block-toolbar .components-toolbar-group,
- .block-editor-block-toolbar .components-toolbar {
- $top-toolbar-padding: ($header-height - $grid-unit-60) / 2;
- height: $header-height;
- padding: $top-toolbar-padding 0;
+ .block-editor-block-toolbar {
+ border-left: $border-width solid $gray-300;
+ }
+
+ .block-editor-block-toolbar .components-toolbar-group,
+ .block-editor-block-toolbar .components-toolbar {
+ $top-toolbar-padding: ($header-height - $grid-unit-60) / 2;
+ height: $header-height;
+ padding: $top-toolbar-padding 0;
+ }
}
}
}
diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js
index cd5457ff3d29e3..639ba8424aeab8 100644
--- a/packages/edit-post/src/components/header/index.js
+++ b/packages/edit-post/src/components/header/index.js
@@ -19,7 +19,8 @@ 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 MainDashboardButton from '../header/main-dashboard-button';
+import MainDashboardButton from './main-dashboard-button';
+import TemplateSaveButton from './template-save-button';
function Header( { setEntitiesSavedStatesCallback } ) {
const {
@@ -28,6 +29,7 @@ function Header( { setEntitiesSavedStatesCallback } ) {
isSaving,
showIconLabels,
hasReducedUI,
+ isEditingTemplate,
} = useSelect(
( select ) => ( {
hasActiveMetaboxes: select( 'core/edit-post' ).hasMetaBoxes(),
@@ -41,6 +43,7 @@ function Header( { setEntitiesSavedStatesCallback } ) {
hasReducedUI: select( 'core/edit-post' ).isFeatureActive(
'reducedUI'
),
+ isEditingTemplate: select( 'core/edit-post' ).isEditingTemplate(),
} ),
[]
);
@@ -60,30 +63,35 @@ function Header( { setEntitiesSavedStatesCallback } ) {
- { ! 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.
-
+ { ! isEditingTemplate && (
+ <>
+ { ! 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.
+
+ ) }
+
+
+
+
) }
-
-
-
+ { isEditingTemplate &&
}
{ ( isLargeViewport || ! showIconLabels ) && (
<>
diff --git a/packages/edit-post/src/components/header/template-save-button/index.js b/packages/edit-post/src/components/header/template-save-button/index.js
new file mode 100644
index 00000000000000..57c660d65ef167
--- /dev/null
+++ b/packages/edit-post/src/components/header/template-save-button/index.js
@@ -0,0 +1,100 @@
+/**
+ * WordPress dependencies
+ */
+import { EntitiesSavedStates, store as editorStore } from '@wordpress/editor';
+import { Button } from '@wordpress/components';
+import { store as coreStore } from '@wordpress/core-data';
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { useSelect, useDispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { ActionsPanelFill } from '../../layout/actions-panel';
+import { store as editPostStore } from '../../../store';
+
+function TemplateSaveButton() {
+ const [
+ isEntitiesReviewPanelOpen,
+ setIsEntitiesReviewPanelOpen,
+ ] = useState( false );
+ const { setIsEditingTemplate } = useDispatch( editPostStore );
+ const { editEntityRecord } = useDispatch( coreStore );
+ const { getTemplateInfo, getEditedEntityRecord } = useSelect(
+ ( select ) => {
+ return {
+ getTemplateInfo: select( editorStore )
+ .__experimentalGetTemplateInfo,
+ getEditedEntityRecord: select( coreStore )
+ .getEditedEntityRecord,
+ };
+ },
+ []
+ );
+ return (
+ <>
+
+
+
+ {
+ // The logic here should be abstracted in the entities save handler/component
+ // and not duplicated accross multi-entity save behavior.
+ if ( entities?.length ) {
+ entities.forEach( ( entity ) => {
+ const edits = {};
+ if (
+ entity.kind === 'postType' &&
+ entity.name === 'wp_template'
+ ) {
+ const record = getEditedEntityRecord(
+ entity.kind,
+ entity.name,
+ entity.key
+ );
+ edits.title =
+ getTemplateInfo( record ).title ??
+ entity.title ??
+ record.slug;
+ }
+
+ if (
+ entity.kind === 'postType' &&
+ [
+ 'wp_template',
+ 'wp_template_part',
+ ].includes( entity.name )
+ ) {
+ edits.status = 'publish';
+ }
+
+ editEntityRecord(
+ entity.kind,
+ entity.name,
+ entity.key,
+ edits
+ );
+ } );
+ }
+ setIsEntitiesReviewPanelOpen( false );
+ if ( entities?.length ) {
+ setIsEditingTemplate( false );
+ }
+ } }
+ />
+
+
+ );
+}
+
+export default TemplateSaveButton;
diff --git a/packages/edit-post/src/components/header/template-title/index.js b/packages/edit-post/src/components/header/template-title/index.js
new file mode 100644
index 00000000000000..deb2b905ee9e34
--- /dev/null
+++ b/packages/edit-post/src/components/header/template-title/index.js
@@ -0,0 +1,43 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { store as editorStore } from '@wordpress/editor';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import { store as editPostStore } from '../../../store';
+
+function TemplateTitle() {
+ const { template, isEditing } = useSelect( ( select ) => {
+ const { getEditedPostAttribute } = select( editorStore );
+ const { __experimentalGetTemplateForLink } = select( coreStore );
+ const { isEditingTemplate } = select( editPostStore );
+ const link = getEditedPostAttribute( 'link' );
+ const _isEditing = isEditingTemplate();
+ return {
+ template: _isEditing
+ ? __experimentalGetTemplateForLink( link )
+ : null,
+ isEditing: _isEditing,
+ };
+ }, [] );
+
+ if ( ! isEditing || ! template ) {
+ return null;
+ }
+
+ return (
+
+ {
+ /* translators: 1: Template name. */
+ sprintf( __( 'Editing template: %s' ), template.slug )
+ }
+
+ );
+}
+
+export default TemplateTitle;
diff --git a/packages/edit-post/src/components/header/template-title/style.scss b/packages/edit-post/src/components/header/template-title/style.scss
new file mode 100644
index 00000000000000..b4d6132c089757
--- /dev/null
+++ b/packages/edit-post/src/components/header/template-title/style.scss
@@ -0,0 +1,5 @@
+.edit-post-template-title {
+ display: inline-flex;
+ flex-grow: 1;
+ justify-content: center;
+}
diff --git a/packages/edit-post/src/components/layout/actions-panel.js b/packages/edit-post/src/components/layout/actions-panel.js
index 5ac15a9c253c91..e1ad347a4bf7d7 100644
--- a/packages/edit-post/src/components/layout/actions-panel.js
+++ b/packages/edit-post/src/components/layout/actions-panel.js
@@ -3,7 +3,7 @@
*/
import { EntitiesSavedStates, PostPublishPanel } from '@wordpress/editor';
import { useSelect, useDispatch } from '@wordpress/data';
-import { Button } from '@wordpress/components';
+import { Button, createSlotFill } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { useCallback } from '@wordpress/element';
/**
@@ -12,6 +12,10 @@ import { useCallback } from '@wordpress/element';
import PluginPostPublishPanel from '../sidebar/plugin-post-publish-panel';
import PluginPrePublishPanel from '../sidebar/plugin-pre-publish-panel';
+const { Fill, Slot } = createSlotFill( 'ActionsPanel' );
+
+export const ActionsPanelFill = Fill;
+
export default function ActionsPanel( {
setEntitiesSavedStatesCallback,
closeEntitiesSavedStates,
@@ -92,6 +96,7 @@ export default function ActionsPanel( {
isOpen={ isEntitiesSavedStatesOpen }
close={ closeEntitiesSavedStates }
/>
+
{ ! isEntitiesSavedStatesOpen && unmountableContent }
);
diff --git a/packages/edit-post/src/components/sidebar/post-status/index.js b/packages/edit-post/src/components/sidebar/post-status/index.js
index 11311e91849c2b..ad2437e4c1f1a0 100644
--- a/packages/edit-post/src/components/sidebar/post-status/index.js
+++ b/packages/edit-post/src/components/sidebar/post-status/index.js
@@ -18,6 +18,7 @@ import PostSlug from '../post-slug';
import PostFormat from '../post-format';
import PostPendingStatus from '../post-pending-status';
import PluginPostStatusInfo from '../plugin-post-status-info';
+import PostTemplate from '../post-template';
/**
* Module Constants
@@ -35,6 +36,7 @@ function PostStatus( { isOpened, onTogglePanel } ) {
{ ( fills ) => (
<>
+
diff --git a/packages/edit-post/src/components/sidebar/post-template/index.js b/packages/edit-post/src/components/sidebar/post-template/index.js
new file mode 100644
index 00000000000000..9c3380860aacbf
--- /dev/null
+++ b/packages/edit-post/src/components/sidebar/post-template/index.js
@@ -0,0 +1,91 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { PanelRow, Button } from '@wordpress/components';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { createInterpolateElement } from '@wordpress/element';
+import { store as editorStore } from '@wordpress/editor';
+import { store as coreStore } from '@wordpress/core-data';
+import { store as noticesStore } from '@wordpress/notices';
+
+/**
+ * Internal dependencies
+ */
+import { store as editPostStore } from '../../../store';
+
+function PostTemplate() {
+ const { template, isEditing, isFSETheme } = useSelect( ( select ) => {
+ const {
+ getEditedPostAttribute,
+ __unstableIsAutodraftPost,
+ getCurrentPostType,
+ } = select( editorStore );
+ const { __experimentalGetTemplateForLink } = select( coreStore );
+ const { isEditingTemplate } = select( editPostStore );
+ const link = getEditedPostAttribute( 'link' );
+ const isFSEEnabled = select( editorStore ).getEditorSettings()
+ .isFSETheme;
+ return {
+ template:
+ isFSEEnabled &&
+ link &&
+ ! __unstableIsAutodraftPost() &&
+ getCurrentPostType() !== 'wp_template'
+ ? __experimentalGetTemplateForLink( link )
+ : null,
+ isEditing: isEditingTemplate(),
+ isFSETheme: isFSEEnabled,
+ };
+ }, [] );
+ const { setIsEditingTemplate } = useDispatch( editPostStore );
+ const { createSuccessNotice } = useDispatch( noticesStore );
+
+ if ( ! isFSETheme || ! template ) {
+ return null;
+ }
+
+ return (
+
+ { __( 'Template' ) }
+ { ! isEditing && (
+
+ { createInterpolateElement(
+ sprintf(
+ /* translators: 1: Template name. */
+ __( '%s (Edit)' ),
+ template.slug
+ ),
+ {
+ a: (
+
+ ),
+ }
+ ) }
+
+ ) }
+ { isEditing && (
+
+ { template.slug }
+
+ ) }
+
+ );
+}
+
+export default PostTemplate;
diff --git a/packages/edit-post/src/components/sidebar/post-template/style.scss b/packages/edit-post/src/components/sidebar/post-template/style.scss
new file mode 100644
index 00000000000000..d625e897224368
--- /dev/null
+++ b/packages/edit-post/src/components/sidebar/post-template/style.scss
@@ -0,0 +1,13 @@
+.edit-post-post-template {
+ width: 100%;
+ justify-content: left;
+
+ span {
+ display: block;
+ width: 45%;
+ }
+}
+
+.edit-post-post-template__value {
+ padding-left: 6px;
+}
diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js
index e51b8f4f691898..cf87daa479eda9 100644
--- a/packages/edit-post/src/components/visual-editor/index.js
+++ b/packages/edit-post/src/components/visual-editor/index.js
@@ -2,8 +2,8 @@
* WordPress dependencies
*/
import {
- PostTitle,
VisualEditorGlobalKeyboardShortcuts,
+ PostTitle,
} from '@wordpress/editor';
import {
WritingFlow,
@@ -28,8 +28,15 @@ import { useSelect } from '@wordpress/data';
export default function VisualEditor() {
const ref = useRef();
- const deviceType = useSelect( ( select ) => {
- return select( 'core/edit-post' ).__experimentalGetPreviewDeviceType();
+ const { deviceType, isTemplateMode } = useSelect( ( select ) => {
+ const {
+ isEditingTemplate,
+ __experimentalGetPreviewDeviceType,
+ } = select( 'core/edit-post' );
+ return {
+ deviceType: __experimentalGetPreviewDeviceType(),
+ isTemplateMode: isEditingTemplate(),
+ };
}, [] );
const hasMetaBoxes = useSelect(
( select ) => select( 'core/edit-post' ).hasMetaBoxes(),
@@ -61,9 +68,11 @@ export default function VisualEditor() {
style={ resizedCanvasStyles || desktopCanvasStyles }
>
-
+ { ! isTemplateMode && (
+
+ ) }