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

Co-authored-by: youknowriad <youknowriad@git.wordpress.org> Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
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;