Editor: Use the Editor component in the post editor. (#62339)

Co-authored-by: youknowriad <[email protected]> Co-authored-by: ramonjd <[email protected]>
WordPress · Jul 2, 2024 · d2da288 · d2da288
1 parent b9e25f3
commit d2da288
Show file tree

Hide file tree

Showing 10 changed files with 241 additions and 304 deletions.
diff --git 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 (
- <>
- <FullscreenMode isActive={ isFullscreenActive } />
- <BrowserURL hasHistory={ hasHistory } />
- <UnsavedChangesWarning />
- <AutosaveMonitor />
- <LocalAutosaveMonitor />
- <EditPostKeyboardShortcuts />
- <EditorKeyboardShortcutsRegister />
- <BlockKeyboardShortcuts />
- <WelcomeGuide />
- <InitPatternModal />
- <PluginArea onError={ onPluginAreaError } />
- { ! isDistractionFree && (
- <Sidebar
+ <SlotFillProvider>
+ <ErrorBoundary>
+ <CommandMenu />
+ <WelcomeGuide postType={ currentPost.postType } />
+ <Editor
+ settings={ editorSettings }
+ initialEdits={ initialEdits }
+ postType={ currentPost.postType }
+ postId={ currentPost.postId }
+ templateId={ templateId }
+ className={ className }
+ styles={ styles }
+ forceIsDirty={ hasActiveMetaboxes }
+ contentRef={ paddingAppenderRef }
+ disableIframe={ ! shouldIframe }
+ // We should auto-focus the canvas (title) on load.
+ // eslint-disable-next-line jsx-a11y/no-autofocus
+ autoFocus={ ! isWelcomeGuideVisible }
  onActionPerformed={ onActionPerformed }
- extraPanels={
+ extraSidebarPanels={
  ! isEditingTemplate && <MetaBoxes location="side" />
  }
- />
- ) }
- <PostEditorMoreMenu />
- <BackButton initialPost={ initialPost } />
- <EditorSnackbars />
- <EditorInterface
- className={ className }
- styles={ styles }
- forceIsDirty={ hasActiveMetaboxes }
- contentRef={ paddingAppenderRef }
- disableIframe={ ! shouldIframe }
- // We should auto-focus the canvas (title) on load.
- // eslint-disable-next-line jsx-a11y/no-autofocus
- autoFocus={ ! isWelcomeGuideVisible }
- >
- { ! isDistractionFree && showMetaBoxes && (
- <div className="edit-post-layout__metaboxes">
- <MetaBoxes location="normal" />
- <MetaBoxes location="advanced" />
- </div>
- ) }
- </EditorInterface>
- </>
+ extraContent={
+ ! isDistractionFree &&
+ showMetaBoxes && (
+ <div className="edit-post-layout__metaboxes">
+ <MetaBoxes location="normal" />
+ <MetaBoxes location="advanced" />
+ </div>
+ )
+ }
+ >
+ <PostLockedModal />
+ <EditorInitialization />
+ <FullscreenMode isActive={ isFullscreenActive } />
+ <BrowserURL hasHistory={ hasHistory } />
+ <UnsavedChangesWarning />
+ <AutosaveMonitor />
+ <LocalAutosaveMonitor />
+ <EditPostKeyboardShortcuts />
+ <EditorKeyboardShortcutsRegister />
+ <BlockKeyboardShortcuts />
+ <InitPatternModal />
+ <PluginArea onError={ onPluginAreaError } />
+ <PostEditorMoreMenu />
+ <BackButton initialPost={ initialPost } />
+ <EditorSnackbars />
+ </Editor>
+ </ErrorBoundary>
+ </SlotFillProvider>
  );
 }
 

diff --git 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;