Template editing: Refactor the post editor template-only mode

packages/edit-post/src/components/header/index.js

@@ -79,7 +79,7 @@ function Header( { setEntitiesSavedStatesCallback } ) {
  hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(),
  hasHistory: !! select( editorStore ).getEditorSettings().goBack,
  isEditingTemplate:
- select( editorStore ).getRenderingMode() === 'template-only',
+ select( editorStore ).getCurrentPostType() === 'wp_template',
  isPublishSidebarOpened:
  select( editPostStore ).isPublishSidebarOpened(),
  hasFixedToolbar: getPreference( 'core', 'fixedToolbar' ),
@@ -159,7 +159,7 @@ function Header( { setEntitiesSavedStatesCallback } ) {
  isLargeViewport,
  } ) }
  >
- { ( isEditingTemplate || hasHistory ) && <DocumentBar /> }
+ { hasHistory && <DocumentBar /> }
  </div>
  </motion.div>
  <motion.div

packages/edit-post/src/components/header/mode-switcher/index.js

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

packages/edit-post/src/components/sidebar/settings-header/index.js

@@ -15,21 +15,18 @@ import { sidebars } from '../settings-sidebar';
 const { Tabs } = unlock( componentsPrivateApis );
 
 const SettingsHeader = () => {
- const { documentLabel, isTemplateMode } = useSelect( ( select ) => {
- const { getPostTypeLabel, getRenderingMode } = select( editorStore );
+ const { documentLabel } = useSelect( ( select ) => {
+ const { getPostTypeLabel } = select( editorStore );
 
  return {
  // translators: Default label for the Document sidebar tab, not selected.
  documentLabel: getPostTypeLabel() || _x( 'Document', 'noun' ),
- isTemplateMode: getRenderingMode() === 'template-only',
  };
  }, [] );
 
  return (
  <Tabs.TabList>
- <Tabs.Tab tabId={ sidebars.document }>
- { isTemplateMode ? __( 'Template' ) : documentLabel }
- </Tabs.Tab>
+ <Tabs.Tab tabId={ sidebars.document }>{ documentLabel }</Tabs.Tab>
  <Tabs.Tab tabId={ sidebars.block }>
  { /* translators: Text label for the Block Settings Sidebar tab. */ }
  { __( 'Block' ) }

packages/edit-post/src/components/sidebar/settings-sidebar/index.js

@@ -48,7 +48,7 @@ export const sidebars = {
 const SidebarContent = ( {
  sidebarName,
  keyboardShortcut,
- isTemplateMode,
+ isEditingTemplate,
 } ) => {
  // Because `PluginSidebarEditPost` renders a `ComplementaryArea`, we
  // need to forward the `Tabs` context so it can be passed through the
@@ -77,7 +77,7 @@ const SidebarContent = ( {
  >
  <Tabs.Context.Provider value={ tabsContextValue }>
  <Tabs.TabPanel tabId={ sidebars.document } focusable={ false }>
- { ! isTemplateMode && (
+ { ! isEditingTemplate && (
  <>
  <PostStatus />
  <PluginDocumentSettingPanel.Slot />
@@ -90,7 +90,7 @@ const SidebarContent = ( {
  <MetaBoxes location="side" />
  </>
  ) }
- { isTemplateMode && <TemplateSummary /> }
+ { isEditingTemplate && <TemplateSummary /> }
  </Tabs.TabPanel>
  <Tabs.TabPanel tabId={ sidebars.block } focusable={ false }>
  <BlockInspector />
@@ -105,7 +105,7 @@ const SettingsSidebar = () => {
  sidebarName,
  isSettingsSidebarActive,
  keyboardShortcut,
- isTemplateMode,
+ isEditingTemplate,
  } = useSelect( ( select ) => {
  // The settings sidebar is used by the edit-post/document and edit-post/block sidebars.
  // sidebarName represents the sidebar that is active or that should be active when the SettingsSidebar toggle button is pressed.
@@ -132,8 +132,8 @@ const SettingsSidebar = () => {
  sidebarName: sidebar,
  isSettingsSidebarActive: isSettingsSidebar,
  keyboardShortcut: shortcut,
- isTemplateMode:
- select( editorStore ).getRenderingMode() === 'template-only',
+ isEditingTemplate:
+ select( editorStore ).getCurrentPostType() === 'wp_template',
  };
  }, [] );
 
@@ -161,7 +161,7 @@ const SettingsSidebar = () => {
  <SidebarContent
  sidebarName={ sidebarName }
  keyboardShortcut={ keyboardShortcut }
- isTemplateMode={ isTemplateMode }
+ isEditingTemplate={ isEditingTemplate }
  />
  </Tabs>
  );

packages/edit-post/src/components/sidebar/template-summary/index.js

@@ -4,16 +4,12 @@
 import { Icon, layout } from '@wordpress/icons';
 import { useSelect } from '@wordpress/data';
 import { Flex, FlexItem, FlexBlock, PanelBody } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import { store as editPostStore } from '../../../store';
+import { store as editorStore } from '@wordpress/editor';
 
 function TemplateSummary() {
  const template = useSelect( ( select ) => {
- const { getEditedPostTemplate } = select( editPostStore );
- return getEditedPostTemplate();
+ const { getCurrentPost } = select( editorStore );
+ return getCurrentPost();
  }, [] );
 
  if ( ! template ) {

packages/edit-post/src/components/visual-editor/index.js

@@ -30,15 +30,18 @@ export default function VisualEditor( { styles } ) {
  renderingMode,
  isBlockBasedTheme,
  hasV3BlocksOnly,
+ isEditingTemplate,
  } = useSelect( ( select ) => {
  const { isFeatureActive } = select( editPostStore );
- const { getEditorSettings, getRenderingMode } = select( editorStore );
+ const { getEditorSettings, getRenderingMode, getCurrentPostType } =
+ select( editorStore );
  const { getBlockTypes } = select( blocksStore );
  const editorSettings = getEditorSettings();
 
  return {
  isWelcomeGuideVisible: isFeatureActive( 'welcomeGuide' ),
  renderingMode: getRenderingMode(),
+ isEditingTemplate: getCurrentPostType() === 'wp_template',
  isBlockBasedTheme: editorSettings.__unstableIsBlockBasedTheme,
  hasV3BlocksOnly: getBlockTypes().every( ( type ) => {
  return type.apiVersion >= 3;
@@ -74,12 +77,12 @@ export default function VisualEditor( { styles } ) {
  const isToBeIframed =
  ( ( hasV3BlocksOnly || ( isGutenbergPlugin && isBlockBasedTheme ) ) &&
  ! hasMetaBoxes ) ||
- renderingMode === 'template-only';
+ isEditingTemplate;
 
  return (
  <div
  className={ classnames( 'edit-post-visual-editor', {
- 'is-template-mode': renderingMode === 'template-only',
+ 'is-template-mode': isEditingTemplate,
  'has-inline-canvas': ! isToBeIframed,
  } ) }
  >

packages/edit-post/src/components/welcome-guide/index.js

@@ -12,23 +12,27 @@ import WelcomeGuideTemplate from './template';
 import { store as editPostStore } from '../../store';
 
 export default function WelcomeGuide() {
- const { isActive, isTemplateMode } = useSelect( ( select ) => {
+ const { isActive, isEditingTemplate } = useSelect( ( select ) => {
  const { isFeatureActive } = select( editPostStore );
- const { getRenderingMode } = select( editorStore );
- const _isTemplateMode = getRenderingMode() === 'template-only';
- const feature = _isTemplateMode
+ const { getCurrentPostType } = select( editorStore );
+ const _isEditingTemplate = getCurrentPostType() === 'wp_template';
+ const feature = _isEditingTemplate
  ? 'welcomeGuideTemplate'
  : 'welcomeGuide';
 
  return {
  isActive: isFeatureActive( feature ),
- isTemplateMode: _isTemplateMode,
+ isEditingTemplate: _isEditingTemplate,
  };
  }, [] );
 
  if ( ! isActive ) {
  return null;
  }
 
- return isTemplateMode ? <WelcomeGuideTemplate /> : <WelcomeGuideDefault />;
+ return isEditingTemplate ? (
+ <WelcomeGuideTemplate />
+ ) : (
+ <WelcomeGuideDefault />
+ );
 }

packages/edit-post/src/plugins/welcome-guide-menu-item/index.js

@@ -7,16 +7,16 @@ import { __ } from '@wordpress/i18n';
 import { store as editorStore } from '@wordpress/editor';
 
 export default function WelcomeGuideMenuItem() {
- const isTemplateMode = useSelect(
+ const isEditingTemplate = useSelect(
  ( select ) =>
- select( editorStore ).getRenderingMode() === 'template-only',
+ select( editorStore ).getCurrentPostType() === 'wp_template',
  []
  );
 
  return (
  <PreferenceToggleMenuItem
  scope="core/edit-post"
- name={ isTemplateMode ? 'welcomeGuideTemplate' : 'welcomeGuide' }
+ name={ isEditingTemplate ? 'welcomeGuideTemplate' : 'welcomeGuide' }
  label={ __( 'Welcome Guide' ) }
  />
  );

packages/edit-post/src/store/actions.js

@@ -498,15 +498,6 @@ export function setIsEditingTemplate() {
  return { type: 'NOTHING' };
 }
 
-/**
- * Switches to the template mode.
- */
-export const __unstableSwitchToTemplateMode =
- () =>
- ( { registry } ) => {
- registry.dispatch( editorStore ).setRenderingMode( 'template-only' );
- };
-
 /**
  * Create a block based template.
  *

packages/editor/src/components/document-bar/index.js

@@ -48,51 +48,33 @@ const icons = {
 };
 
 export default function DocumentBar() {
- const {
- isEditingTemplate,
- templateId,
- postType,
- postId,
- goBack,
- getEditorSettings,
- } = useSelect( ( select ) => {
+ const { postType, postId, goBack } = useSelect( ( select ) => {
  const {
- getRenderingMode,
- getCurrentTemplateId,
  getCurrentPostId,
  getCurrentPostType,
  getEditorSettings: getSettings,
  } = select( editorStore );
- const _templateId = getCurrentTemplateId();
  const back = getSettings().goBack;
+
  return {
- isEditingTemplate:
- !! _templateId && getRenderingMode() === 'template-only',
- templateId: _templateId,
  postType: getCurrentPostType(),
  postId: getCurrentPostId(),
  goBack: typeof back === 'function' ? back : undefined,
  getEditorSettings: getSettings,
  };
  }, [] );
 
- const { setRenderingMode } = useDispatch( editorStore );
-
  const handleOnBack = () => {
- if ( isEditingTemplate ) {
- setRenderingMode( getEditorSettings().defaultRenderingMode );
- return;
- }
  if ( goBack ) {
  goBack();
  }
  };
 
  return (
  <BaseDocumentActions
- postType={ isEditingTemplate ? 'wp_template' : postType }
- postId={ isEditingTemplate ? templateId : postId }
- onBack={ isEditingTemplate || goBack ? handleOnBack : undefined }
+ postType={ postType }
+ postId={ postId }
+ onBack={ goBack ? handleOnBack : undefined }
  />
  );
 }

packages/editor/src/components/editor-canvas/index.js

@@ -91,7 +91,7 @@ function EditorCanvas( {
  wrapperBlockName,
  wrapperUniqueId,
  deviceType,
- hasHistory,
+ showEditorPadding,
  } = useSelect( ( select ) => {
  const {
  getCurrentPostId,
@@ -138,7 +138,8 @@ function EditorCanvas( {
  wrapperBlockName: _wrapperBlockName,
  wrapperUniqueId: getCurrentPostId(),
  deviceType: getDeviceType(),
- hasHistory: !! editorSettings.goBack,
+ showEditorPadding:
+ !! editorSettings.goBack && postTypeSlug !== 'wp_template',
  };
  }, [] );
  const { isCleanNewPost } = useSelect( editorStore );
@@ -302,7 +303,7 @@ function EditorCanvas( {
  height="100%"
  iframeProps={ {
  className: classnames( 'editor-canvas__iframe', {
- 'has-history': hasHistory,
+ 'has-editor-padding': showEditorPadding,
  } ),
  ...iframeProps,
  style: {

packages/editor/src/components/editor-canvas/style.scss

@@ -1,5 +1,5 @@
 .editor-canvas__iframe {
- &.has-history {
+ &.has-editor-padding {
  padding: $grid-unit-60 $grid-unit-60 0;
  }
 }

packages/editor/src/components/post-template/block-theme.js

@@ -24,20 +24,30 @@ const POPOVER_PROPS = {
 };
 
 export default function BlockThemeControl( { id } ) {
- const { isTemplateHidden } = useSelect( ( select ) => {
+ const { isTemplateHidden, getPostLinkProps } = useSelect( ( select ) => {
+ const { getEditorSettings } = select( editorStore );
  const { getRenderingMode } = unlock( select( editorStore ) );
+
  return {
  isTemplateHidden: getRenderingMode() === 'post-only',
+ getPostLinkProps: getEditorSettings().getPostLinkProps,
  };
  }, [] );
  const { editedRecord: template, hasResolved } = useEntityRecord(
  'postType',
  'wp_template',
  id
  );
- const { getEditorSettings } = useSelect( editorStore );
+
  const { createSuccessNotice } = useDispatch( noticesStore );
  const { setRenderingMode } = useDispatch( editorStore );
+ const editTemplate = getPostLinkProps
+ ? getPostLinkProps( {
+ postId: template.wp_id,
+ postType: 'wp_template',
+ canvas: 'edit',
+ } )
+ : {};
 
  if ( ! hasResolved ) {
  return null;
@@ -58,25 +68,15 @@ export default function BlockThemeControl( { id } ) {
  <>
  <MenuGroup>
  <MenuItem
- onClick={ () => {
- setRenderingMode( 'template-only' );
+ onClick={ ( event ) => {
+ editTemplate.onClick( event );
  onClose();
  createSuccessNotice(
  __(
  'Editing template. Changes made here affect all posts and pages that use the template.'
  ),
  {
  type: 'snackbar',
- actions: [
- {
- label: __( 'Go back' ),
- onClick: () =>
- setRenderingMode(
- getEditorSettings()
- .defaultRenderingMode
- ),
- },
- ],
  }
  );
  } }