Editor: Unify text/code editor between post and site editors (#61934)

Co-authored-by: youknowriad <[email protected]> Co-authored-by: ellatrix <[email protected]> Co-authored-by: bacoords <[email protected]>
WordPress · May 24, 2024 · 2e45b02 · 2e45b02
1 parent 0f7eb13
commit 2e45b02
Show file tree

Hide file tree

Showing 18 changed files with 77 additions and 283 deletions.
diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss
@@ -10,8 +10,7 @@ $z-layers: (
 	".block-library-classic__toolbar": 31, // When scrolled to top this toolbar needs to sit over block-editor-block-toolbar
 	".block-editor-block-list__block-selection-button": 22,
 	".components-form-toggle__input": 1,
-	".edit-post-text-editor__toolbar": 1,
-	".edit-site-code-editor__toolbar": 1,
+	".editor-text-editor__toolbar": 1,
 
 	// These next three share a stacking context
 	".block-library-template-part__selection-search": 2, // higher sticky element

diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js
@@ -38,7 +38,6 @@ import { addQueryArgs } from '@wordpress/url';
 /**
  * Internal dependencies
  */
-import TextEditor from '../text-editor';
 import VisualEditor from '../visual-editor';
 import EditPostKeyboardShortcuts from '../keyboard-shortcuts';
 import InitPatternModal from '../init-pattern-modal';
@@ -62,6 +61,7 @@ const {
 	InterfaceSkeleton,
 	interfaceStore,
 	Sidebar,
+	TextEditor,
 } = unlock( editorPrivateApis );
 const { BlockKeyboardShortcuts } = unlock( blockLibraryPrivateApis );
 

diff --git a/packages/edit-post/src/components/text-editor/index.js b/packages/edit-post/src/components/text-editor/index.js
diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js
@@ -22,7 +22,7 @@ import { store as editPostStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 import { usePaddingAppender } from './use-padding-appender';
 
-const { EditorCanvas } = unlock( editorPrivateApis );
+const { VisualEditor: VisualEditorRoot } = unlock( editorPrivateApis );
 
 const isGutenbergPlugin = globalThis.IS_GUTENBERG_PLUGIN ? true : false;
 const DESIGN_POST_TYPES = [
@@ -105,7 +105,7 @@ export default function VisualEditor( { styles } ) {
 				'has-inline-canvas': ! isToBeIframed,
 			} ) }
 		>
-			<EditorCanvas
+			<VisualEditorRoot
 				disableIframe={ ! isToBeIframed }
 				styles={ styles }
 				// We should auto-focus the canvas (title) on load.

diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss
@@ -2,7 +2,6 @@
 @import "./components/header/fullscreen-mode-close/style.scss";
 @import "./components/layout/style.scss";
 @import "./components/meta-boxes/meta-boxes-area/style.scss";
-@import "./components/text-editor/style.scss";
 @import "./components/visual-editor/style.scss";
 @import "./components/welcome-guide/style.scss";
 
@@ -36,7 +35,7 @@ body.js.block-editor-page {
 
 // Target the editor UI excluding the visual editor contents, metaboxes and custom fields areas.
 .editor-header,
-.edit-post-text-editor,
+.editor-text-editor,
 .editor-sidebar,
 .editor-post-publish-panel {
 	@include reset;

diff --git a/packages/edit-site/src/components/block-editor/editor-canvas.js b/packages/edit-site/src/components/block-editor/editor-canvas.js
@@ -21,9 +21,9 @@ import {
 import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
 
-const { EditorCanvas: EditorCanvasRoot } = unlock( editorPrivateApis );
+const { VisualEditor } = unlock( editorPrivateApis );
 
-function EditorCanvas( { settings, children } ) {
+function EditorCanvas( { settings } ) {
 	const { canvasMode, currentPostIsTrashed } = useSelect( ( select ) => {
 		const { getCanvasMode } = unlock( select( editSiteStore ) );
 
@@ -95,17 +95,15 @@ function EditorCanvas( { settings, children } ) {
 	);
 
 	return (
-		<EditorCanvasRoot
+		<VisualEditor
 			styles={ styles }
 			iframeProps={ {
 				className: clsx( 'edit-site-visual-editor__editor-canvas', {
 					'is-focused': isFocused && canvasMode === 'view',
 				} ),
 				...( canvasMode === 'view' ? viewModeIframeProps : {} ),
 			} }
-		>
-			{ children }
-		</EditorCanvasRoot>
+		/>
 	);
 }
 

diff --git a/packages/edit-site/src/components/code-editor/index.js b/packages/edit-site/src/components/code-editor/index.js
diff --git a/packages/edit-site/src/components/code-editor/style.scss b/packages/edit-site/src/components/code-editor/style.scss
diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js
@@ -39,7 +39,6 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
 /**
  * Internal dependencies
  */
-import CodeEditor from '../code-editor';
 import Header from '../header-edit-mode';
 import WelcomeGuide from '../welcome-guide';
 import { store as editSiteStore } from '../../store';
@@ -64,6 +63,7 @@ const {
 	interfaceStore,
 	SavePublishPanels,
 	Sidebar,
+	TextEditor,
 } = unlock( editorPrivateApis );
 const { useHistory } = unlock( routerPrivateApis );
 const { BlockKeyboardShortcuts } = unlock( blockLibraryPrivateApis );
@@ -346,7 +346,7 @@ export default function Editor( { isLoading } ) {
 							<>
 								{ isEditMode && <EditorNotices /> }
 								{ editorMode === 'text' && isEditMode && (
-									<CodeEditor />
+									<TextEditor />
 								) }
 								{ ! isLargeViewport && showVisualEditor && (
 									<BlockToolbar hideDragHandle />

diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss
@@ -3,7 +3,6 @@
 @import "./components/add-new-template/style.scss";
 @import "./components/block-editor/style.scss";
 @import "./components/canvas-loader/style.scss";
-@import "./components/code-editor/style.scss";
 @import "./components/global-styles/style.scss";
 @import "./components/global-styles/screen-revisions/style.scss";
 @import "./components/global-styles-sidebar/style.scss";