diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js
index ec79466580cede..cfaaf810b41918 100644
--- a/packages/edit-post/src/components/layout/index.js
+++ b/packages/edit-post/src/components/layout/index.js
@@ -12,6 +12,8 @@ import {
UnsavedChangesWarning,
EditorKeyboardShortcutsRegister,
EditorSnackbars,
+ ErrorBoundary,
+ PostLockedModal,
store as editorStore,
privateApis as editorPrivateApis,
} from '@wordpress/editor';
@@ -25,16 +27,22 @@ import { __, sprintf } from '@wordpress/i18n';
import { useCallback, useMemo } from '@wordpress/element';
import { store as noticesStore } from '@wordpress/notices';
import { store as preferencesStore } from '@wordpress/preferences';
-import { privateApis as commandsPrivateApis } from '@wordpress/commands';
+import {
+ CommandMenu,
+ privateApis as commandsPrivateApis,
+} from '@wordpress/commands';
import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands';
import { privateApis as blockLibraryPrivateApis } from '@wordpress/block-library';
import { addQueryArgs } from '@wordpress/url';
import { decodeEntities } from '@wordpress/html-entities';
+import { store as coreStore } from '@wordpress/core-data';
+import { SlotFillProvider } from '@wordpress/components';
/**
* Internal dependencies
*/
import BackButton from '../back-button';
+import EditorInitialization from '../editor-initialization';
import EditPostKeyboardShortcuts from '../keyboard-shortcuts';
import InitPatternModal from '../init-pattern-modal';
import BrowserURL from '../browser-url';
@@ -46,12 +54,12 @@ import { unlock } from '../../lock-unlock';
import useEditPostCommands from '../../commands/use-commands';
import { usePaddingAppender } from './use-padding-appender';
import { useShouldIframe } from './use-should-iframe';
+import useNavigateToEntityRecord from '../../hooks/use-navigate-to-entity-record';
const { getLayoutStyles } = unlock( blockEditorPrivateApis );
const { useCommands } = unlock( coreCommandsPrivateApis );
const { useCommandContext } = unlock( commandsPrivateApis );
-const { EditorInterface, FullscreenMode, Sidebar } =
- unlock( editorPrivateApis );
+const { Editor, FullscreenMode } = unlock( editorPrivateApis );
const { BlockKeyboardShortcuts } = unlock( blockLibraryPrivateApis );
const DESIGN_POST_TYPES = [
'wp_template',
@@ -92,7 +100,7 @@ function useEditorStyles() {
) ?? [];
const defaultEditorStyles = [
- ...editorSettings.defaultEditorStyles,
+ ...( editorSettings?.defaultEditorStyles ?? [] ),
...presetStyles,
];
@@ -145,12 +153,26 @@ function useEditorStyles() {
] );
}
-function Layout( { initialPost } ) {
+function Layout( {
+ postId: initialPostId,
+ postType: initialPostType,
+ settings,
+ initialEdits,
+} ) {
useCommands();
useEditPostCommands();
const paddingAppenderRef = usePaddingAppender();
const shouldIframe = useShouldIframe();
const { createErrorNotice } = useDispatch( noticesStore );
+ const {
+ currentPost,
+ onNavigateToEntityRecord,
+ onNavigateToPreviousEntityRecord,
+ } = useNavigateToEntityRecord(
+ initialPostId,
+ initialPostType,
+ 'post-only'
+ );
const {
mode,
isFullscreenActive,
@@ -162,35 +184,61 @@ function Layout( { initialPost } ) {
hasHistory,
isEditingTemplate,
isWelcomeGuideVisible,
- } = useSelect( ( select ) => {
- const { get } = select( preferencesStore );
- const { getEditorSettings } = select( editorStore );
- const { isFeatureActive } = select( editPostStore );
+ templateId,
+ } = useSelect(
+ ( select ) => {
+ const { get } = select( preferencesStore );
+ const { isFeatureActive, getEditedPostTemplateId } = unlock(
+ select( editPostStore )
+ );
+ const { canUser, getPostType } = select( coreStore );
- return {
- mode: select( editorStore ).getEditorMode(),
- isFullscreenActive:
- select( editPostStore ).isFeatureActive( 'fullscreenMode' ),
- hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(),
- hasBlockSelected:
- !! select( blockEditorStore ).getBlockSelectionStart(),
- showIconLabels: get( 'core', 'showIconLabels' ),
- isDistractionFree: get( 'core', 'distractionFree' ),
- showMetaBoxes:
- select( editorStore ).getRenderingMode() === 'post-only',
- hasHistory: !! getEditorSettings().onNavigateToPreviousEntityRecord,
- isEditingTemplate:
- select( editorStore ).getCurrentPostType() === 'wp_template',
- isWelcomeGuideVisible: isFeatureActive( 'welcomeGuide' ),
- };
- }, [] );
+ const supportsTemplateMode = settings.supportsTemplateMode;
+ const isViewable =
+ getPostType( currentPost.postType )?.viewable ?? false;
+ const canViewTemplate = canUser( 'read', 'templates' );
+
+ return {
+ mode: select( editorStore ).getEditorMode(),
+ isFullscreenActive:
+ select( editPostStore ).isFeatureActive( 'fullscreenMode' ),
+ hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(),
+ hasBlockSelected:
+ !! select( blockEditorStore ).getBlockSelectionStart(),
+ showIconLabels: get( 'core', 'showIconLabels' ),
+ isDistractionFree: get( 'core', 'distractionFree' ),
+ showMetaBoxes:
+ select( editorStore ).getRenderingMode() === 'post-only',
+ isEditingTemplate:
+ select( editorStore ).getCurrentPostType() ===
+ 'wp_template',
+ isWelcomeGuideVisible: isFeatureActive( 'welcomeGuide' ),
+ templateId:
+ supportsTemplateMode &&
+ isViewable &&
+ canViewTemplate &&
+ currentPost.postType !== 'wp_template'
+ ? getEditedPostTemplateId()
+ : null,
+ };
+ },
+ [ settings.supportsTemplateMode, currentPost.postType ]
+ );
// Set the right context for the command palette
const commandContext = hasBlockSelected
? 'block-selection-edit'
: 'entity-edit';
useCommandContext( commandContext );
-
+ const editorSettings = useMemo(
+ () => ( {
+ ...settings,
+ onNavigateToEntityRecord,
+ onNavigateToPreviousEntityRecord,
+ defaultRenderingMode: 'post-only',
+ } ),
+ [ settings, onNavigateToEntityRecord, onNavigateToPreviousEntityRecord ]
+ );
const styles = useEditorStyles();
// We need to add the show-icon-labels class to the body element so it is applied to modals.
@@ -268,48 +316,63 @@ function Layout( { initialPost } ) {
[ createSuccessNotice ]
);
+ const initialPost = useMemo( () => {
+ return {
+ type: initialPostType,
+ id: initialPostId,
+ };
+ }, [ initialPostType, initialPostId ] );
return (
- <>
-
-
-
-
-
-
-
-
-
-
-
- { ! isDistractionFree && (
-
+
+
+
+
}
- />
- ) }
-
-
-
-
- { ! isDistractionFree && showMetaBoxes && (
-
-
-
-
- ) }
-
-
+ extraContent={
+ ! isDistractionFree &&
+ showMetaBoxes && (
+
+
+
+
+ )
+ }
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
);
}
diff --git a/packages/edit-post/src/components/welcome-guide/index.js b/packages/edit-post/src/components/welcome-guide/index.js
index 1bd2815466d9bc..fc7039fd7a87a3 100644
--- a/packages/edit-post/src/components/welcome-guide/index.js
+++ b/packages/edit-post/src/components/welcome-guide/index.js
@@ -2,7 +2,6 @@
* WordPress dependencies
*/
import { useSelect } from '@wordpress/data';
-import { store as editorStore } from '@wordpress/editor';
/**
* Internal dependencies
@@ -11,21 +10,22 @@ import WelcomeGuideDefault from './default';
import WelcomeGuideTemplate from './template';
import { store as editPostStore } from '../../store';
-export default function WelcomeGuide() {
- const { isActive, isEditingTemplate } = useSelect( ( select ) => {
- const { isFeatureActive } = select( editPostStore );
- const { getCurrentPostType } = select( editorStore );
- const _isEditingTemplate = getCurrentPostType() === 'wp_template';
+export default function WelcomeGuide( { postType } ) {
+ const { isActive, isEditingTemplate } = useSelect(
+ ( select ) => {
+ const { isFeatureActive } = select( editPostStore );
+ const _isEditingTemplate = postType === 'wp_template';
+ const feature = _isEditingTemplate
+ ? 'welcomeGuideTemplate'
+ : 'welcomeGuide';
- const feature = _isEditingTemplate
- ? 'welcomeGuideTemplate'
- : 'welcomeGuide';
-
- return {
- isActive: isFeatureActive( feature ),
- isEditingTemplate: _isEditingTemplate,
- };
- }, [] );
+ return {
+ isActive: isFeatureActive( feature ),
+ isEditingTemplate: _isEditingTemplate,
+ };
+ },
+ [ postType ]
+ );
if ( ! isActive ) {
return null;
diff --git a/packages/edit-post/src/editor.js b/packages/edit-post/src/editor.js
deleted file mode 100644
index 378265c1927788..00000000000000
--- a/packages/edit-post/src/editor.js
+++ /dev/null
@@ -1,118 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-import {
- ErrorBoundary,
- PostLockedModal,
- store as editorStore,
- privateApis as editorPrivateApis,
-} from '@wordpress/editor';
-import { useMemo } from '@wordpress/element';
-import { SlotFillProvider } from '@wordpress/components';
-import { store as coreStore } from '@wordpress/core-data';
-import { CommandMenu } from '@wordpress/commands';
-
-/**
- * Internal dependencies
- */
-import Layout from './components/layout';
-import EditorInitialization from './components/editor-initialization';
-import { store as editPostStore } from './store';
-import { unlock } from './lock-unlock';
-import useNavigateToEntityRecord from './hooks/use-navigate-to-entity-record';
-
-const { ExperimentalEditorProvider } = unlock( editorPrivateApis );
-
-function Editor( {
- postId: initialPostId,
- postType: initialPostType,
- settings,
- initialEdits,
- ...props
-} ) {
- const {
- currentPost,
- onNavigateToEntityRecord,
- onNavigateToPreviousEntityRecord,
- } = useNavigateToEntityRecord(
- initialPostId,
- initialPostType,
- 'post-only'
- );
-
- const { post, template } = useSelect(
- ( select ) => {
- const { getEditedPostTemplate } = select( editPostStore );
- const { getEntityRecord, getPostType, canUser } =
- select( coreStore );
- const { getEditorSettings } = select( editorStore );
-
- const postObject = getEntityRecord(
- 'postType',
- currentPost.postType,
- currentPost.postId
- );
-
- const supportsTemplateMode =
- getEditorSettings().supportsTemplateMode;
- const isViewable =
- getPostType( currentPost.postType )?.viewable ?? false;
- const canViewTemplate = canUser( 'read', 'templates' );
- return {
- template:
- supportsTemplateMode &&
- isViewable &&
- canViewTemplate &&
- currentPost.postType !== 'wp_template'
- ? getEditedPostTemplate()
- : null,
- post: postObject,
- };
- },
- [ currentPost.postType, currentPost.postId ]
- );
-
- const editorSettings = useMemo(
- () => ( {
- ...settings,
- onNavigateToEntityRecord,
- onNavigateToPreviousEntityRecord,
- defaultRenderingMode: 'post-only',
- } ),
- [ settings, onNavigateToEntityRecord, onNavigateToPreviousEntityRecord ]
- );
-
- const initialPost = useMemo( () => {
- return {
- type: initialPostType,
- id: initialPostId,
- };
- }, [ initialPostType, initialPostId ] );
-
- if ( ! post ) {
- return null;
- }
-
- return (
-
-
-
-
-
-
-
-
-
-
- );
-}
-
-export default Editor;
diff --git a/packages/edit-post/src/index.js b/packages/edit-post/src/index.js
index 0ec4388a9af70e..152afc294f4283 100644
--- a/packages/edit-post/src/index.js
+++ b/packages/edit-post/src/index.js
@@ -7,7 +7,7 @@ import {
__experimentalRegisterExperimentalCoreBlocks,
} from '@wordpress/block-library';
import deprecated from '@wordpress/deprecated';
-import { createRoot } from '@wordpress/element';
+import { createRoot, StrictMode } from '@wordpress/element';
import { dispatch, select } from '@wordpress/data';
import { store as preferencesStore } from '@wordpress/preferences';
import {
@@ -22,7 +22,7 @@ import {
/**
* Internal dependencies
*/
-import Editor from './editor';
+import Layout from './components/layout';
import { unlock } from './lock-unlock';
const { BackButton: __experimentalMainDashboardButton } =
@@ -137,12 +137,14 @@ export function initializeEditor(
window.addEventListener( 'drop', ( e ) => e.preventDefault(), false );
root.render(
-
+
+
+
);
return root;
diff --git a/packages/edit-post/src/store/index.js b/packages/edit-post/src/store/index.js
index 567c022d2eb71b..17033b759292d7 100644
--- a/packages/edit-post/src/store/index.js
+++ b/packages/edit-post/src/store/index.js
@@ -9,7 +9,9 @@ import { createReduxStore, register } from '@wordpress/data';
import reducer from './reducer';
import * as actions from './actions';
import * as selectors from './selectors';
+import * as privateSelectors from './private-selectors';
import { STORE_NAME } from './constants';
+import { unlock } from '../lock-unlock';
/**
* Store definition for the edit post namespace.
@@ -23,5 +25,5 @@ export const store = createReduxStore( STORE_NAME, {
actions,
selectors,
} );
-
register( store );
+unlock( store ).registerPrivateSelectors( privateSelectors );
diff --git a/packages/edit-post/src/store/private-selectors.js b/packages/edit-post/src/store/private-selectors.js
new file mode 100644
index 00000000000000..be23227d54a19b
--- /dev/null
+++ b/packages/edit-post/src/store/private-selectors.js
@@ -0,0 +1,52 @@
+/**
+ * WordPress dependencies
+ */
+import { createRegistrySelector } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { store as editorStore } from '@wordpress/editor';
+
+export const getEditedPostTemplateId = createRegistrySelector(
+ ( select ) => () => {
+ const {
+ id: postId,
+ type: postType,
+ slug,
+ } = select( editorStore ).getCurrentPost();
+ const { getSite, getEntityRecords } = select( coreStore );
+ const siteSettings = getSite();
+ // First check if the current page is set as the posts page.
+ const isPostsPage = +postId === siteSettings?.page_for_posts;
+ if ( isPostsPage ) {
+ return select( coreStore ).getDefaultTemplateId( { slug: 'home' } );
+ }
+ const currentTemplate =
+ select( editorStore ).getEditedPostAttribute( 'template' );
+ if ( currentTemplate ) {
+ const templateWithSameSlug = getEntityRecords(
+ 'postType',
+ 'wp_template',
+ { per_page: -1 }
+ )?.find( ( template ) => template.slug === currentTemplate );
+ if ( ! templateWithSameSlug ) {
+ return templateWithSameSlug;
+ }
+ return templateWithSameSlug.id;
+ }
+ let slugToCheck;
+ // In `draft` status we might not have a slug available, so we use the `single`
+ // post type templates slug(ex page, single-post, single-product etc..).
+ // Pages do not need the `single` prefix in the slug to be prioritized
+ // through template hierarchy.
+ if ( slug ) {
+ slugToCheck =
+ postType === 'page'
+ ? `${ postType }-${ slug }`
+ : `single-${ postType }-${ slug }`;
+ } else {
+ slugToCheck = postType === 'page' ? 'page' : `single-${ postType }`;
+ }
+ return select( coreStore ).getDefaultTemplateId( {
+ slug: slugToCheck,
+ } );
+ }
+);
diff --git a/packages/edit-post/src/store/selectors.js b/packages/edit-post/src/store/selectors.js
index 8510cbb501955e..da1f9959e32e91 100644
--- a/packages/edit-post/src/store/selectors.js
+++ b/packages/edit-post/src/store/selectors.js
@@ -14,6 +14,7 @@ import deprecated from '@wordpress/deprecated';
* Internal dependencies
*/
import { unlock } from '../lock-unlock';
+import { getEditedPostTemplateId } from './private-selectors';
const { interfaceStore } = unlock( editorPrivateApis );
const EMPTY_ARRAY = [];
@@ -555,67 +556,15 @@ export function areMetaBoxesInitialized( state ) {
* @return {Object?} Post Template.
*/
export const getEditedPostTemplate = createRegistrySelector(
- ( select ) => () => {
- const {
- id: postId,
- type: postType,
- slug,
- } = select( editorStore ).getCurrentPost();
- const { getSite, getEditedEntityRecord, getEntityRecords } =
- select( coreStore );
- const siteSettings = getSite();
- // First check if the current page is set as the posts page.
- const isPostsPage = +postId === siteSettings?.page_for_posts;
- if ( isPostsPage ) {
- const defaultTemplateId = select( coreStore ).getDefaultTemplateId(
- { slug: 'home' }
- );
- return getEditedEntityRecord(
- 'postType',
- 'wp_template',
- defaultTemplateId
- );
- }
- const currentTemplate =
- select( editorStore ).getEditedPostAttribute( 'template' );
- if ( currentTemplate ) {
- const templateWithSameSlug = getEntityRecords(
- 'postType',
- 'wp_template',
- { per_page: -1 }
- )?.find( ( template ) => template.slug === currentTemplate );
- if ( ! templateWithSameSlug ) {
- return templateWithSameSlug;
- }
- return getEditedEntityRecord(
- 'postType',
- 'wp_template',
- templateWithSameSlug.id
- );
- }
- let slugToCheck;
- // In `draft` status we might not have a slug available, so we use the `single`
- // post type templates slug(ex page, single-post, single-product etc..).
- // Pages do not need the `single` prefix in the slug to be prioritized
- // through template hierarchy.
- if ( slug ) {
- slugToCheck =
- postType === 'page'
- ? `${ postType }-${ slug }`
- : `single-${ postType }-${ slug }`;
- } else {
- slugToCheck = postType === 'page' ? 'page' : `single-${ postType }`;
+ ( select ) => ( state ) => {
+ const templateId = getEditedPostTemplateId( state );
+ if ( ! templateId ) {
+ return undefined;
}
- const defaultTemplateId = select( coreStore ).getDefaultTemplateId( {
- slug: slugToCheck,
- } );
-
- return defaultTemplateId
- ? select( coreStore ).getEditedEntityRecord(
- 'postType',
- 'wp_template',
- defaultTemplateId
- )
- : null;
+ return select( coreStore ).getEditedEntityRecord(
+ 'postType',
+ 'wp_template',
+ templateId
+ );
}
);
diff --git a/packages/editor/src/components/editor/index.js b/packages/editor/src/components/editor/index.js
index 5fb671f3714155..6201ca9ae17c7e 100644
--- a/packages/editor/src/components/editor/index.js
+++ b/packages/editor/src/components/editor/index.js
@@ -20,20 +20,16 @@ function Editor( {
templateId,
settings,
children,
+ initialEdits,
// This could be part of the settings.
onActionPerformed,
// The following abstractions are not ideal but necessary
// to account for site editor and post editor differences for now.
- className,
- styles,
- customSaveButton,
- forceDisableBlockTools,
- title,
- iframeProps,
+ extraContent,
extraSidebarPanels,
- enableRegionNavigation = true,
+ ...props
} ) {
const { post, template, hasLoadedPost } = useSelect(
( select ) => {
@@ -63,12 +59,7 @@ function Editor( {
}
return (
-
+ <>
{ hasLoadedPost && ! post && (
{ __(
@@ -76,21 +67,25 @@ function Editor( {
) }
) }
-
-
- { children }
-
+ { !! post && (
+
+
+ { extraContent }
+
+
+ { children }
+
+ ) }
+
);
}
diff --git a/packages/editor/src/private-apis.js b/packages/editor/src/private-apis.js
index 429f7ffc7f3f9b..48e43e7737fec8 100644
--- a/packages/editor/src/private-apis.js
+++ b/packages/editor/src/private-apis.js
@@ -6,7 +6,6 @@ import * as interfaceApis from '@wordpress/interface';
/**
* Internal dependencies
*/
-import { ExperimentalEditorProvider } from './components/provider';
import { lock } from './lock-unlock';
import { EntitiesSavedStatesExtensible } from './components/entities-saved-states';
import EditorContentSlotFill from './components/editor-interface/content-slot-fill';
@@ -14,14 +13,12 @@ import useBlockEditorSettings from './components/provider/use-block-editor-setti
import BackButton from './components/header/back-button';
import CreateTemplatePartModal from './components/create-template-part-modal';
import Editor from './components/editor';
-import EditorInterface from './components/editor-interface';
import PluginPostExcerpt from './components/post-excerpt/plugin';
import PreferencesModal from './components/preferences-modal';
import { usePostActions } from './components/post-actions/actions';
import ToolsMoreMenuGroup from './components/more-menu/tools-more-menu-group';
import ViewMoreMenuGroup from './components/more-menu/view-more-menu-group';
import ResizableEditor from './components/resizable-editor';
-import Sidebar from './components/sidebar';
import {
mergeBaseAndUserConfigs,
GlobalStylesProvider,
@@ -33,10 +30,8 @@ export const privateApis = {};
lock( privateApis, {
CreateTemplatePartModal,
BackButton,
- ExperimentalEditorProvider,
EntitiesSavedStatesExtensible,
Editor,
- EditorInterface,
EditorContentSlotFill,
GlobalStylesProvider,
mergeBaseAndUserConfigs,
@@ -46,7 +41,6 @@ lock( privateApis, {
ToolsMoreMenuGroup,
ViewMoreMenuGroup,
ResizableEditor,
- Sidebar,
// This is a temporary private API while we're updating the site editor to use EditorProvider.
useBlockEditorSettings,
diff --git a/packages/editor/src/private-apis.native.js b/packages/editor/src/private-apis.native.js
index 7c302c9c87d3aa..5ba2d8e4406739 100644
--- a/packages/editor/src/private-apis.native.js
+++ b/packages/editor/src/private-apis.native.js
@@ -7,7 +7,6 @@ import * as interfaceApis from '@wordpress/interface';
* Internal dependencies
*/
import VisualEditor from './components/visual-editor';
-import { ExperimentalEditorProvider } from './components/provider';
import { lock } from './lock-unlock';
import { EntitiesSavedStatesExtensible } from './components/entities-saved-states';
import useBlockEditorSettings from './components/provider/use-block-editor-settings';
@@ -22,7 +21,6 @@ const { store: interfaceStore, ...remainingInterfaceApis } = interfaceApis;
export const privateApis = {};
lock( privateApis, {
VisualEditor,
- ExperimentalEditorProvider,
EntitiesSavedStatesExtensible,
PluginPostExcerpt,
PreferencesModal,