diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss
index 52476cd03228f6..55ad2f9c6313f3 100644
--- 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
index 6db95b6694a686..fde9319a348daf 100644
--- 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
deleted file mode 100644
index af3818e1778859..00000000000000
--- a/packages/edit-post/src/components/text-editor/index.js
+++ /dev/null
@@ -1,63 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
- PostTextEditor,
- PostTitleRaw,
- store as editorStore,
-} from '@wordpress/editor';
-import { Button } from '@wordpress/components';
-import { useDispatch, useSelect } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
-import { displayShortcut } from '@wordpress/keycodes';
-import { useEffect, useRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { store as editPostStore } from '../../store';
-
-export default function TextEditor() {
- const isRichEditingEnabled = useSelect( ( select ) => {
- return select( editorStore ).getEditorSettings().richEditingEnabled;
- }, [] );
- const { switchEditorMode } = useDispatch( editorStore );
-
- const { isWelcomeGuideVisible } = useSelect( ( select ) => {
- const { isFeatureActive } = select( editPostStore );
-
- return {
- isWelcomeGuideVisible: isFeatureActive( 'welcomeGuide' ),
- };
- }, [] );
-
- const titleRef = useRef();
-
- useEffect( () => {
- if ( isWelcomeGuideVisible ) {
- return;
- }
- titleRef?.current?.focus();
- }, [ isWelcomeGuideVisible ] );
-
- return (
-
- { isRichEditingEnabled && (
-
-
{ __( 'Editing code' ) }
-
-
- ) }
-
-
- );
-}
diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js
index 43ee2458ceba24..f6686b5977dd4e 100644
--- 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,
} ) }
>
- {
const { getCanvasMode } = unlock( select( editSiteStore ) );
@@ -95,7 +95,7 @@ function EditorCanvas( { settings, children } ) {
);
return (
-
- { children }
-
+ />
);
}
diff --git a/packages/edit-site/src/components/code-editor/index.js b/packages/edit-site/src/components/code-editor/index.js
deleted file mode 100644
index 8c27a48b01cec9..00000000000000
--- a/packages/edit-site/src/components/code-editor/index.js
+++ /dev/null
@@ -1,94 +0,0 @@
-/**
- * External dependencies
- */
-import Textarea from 'react-autosize-textarea';
-
-/**
- * WordPress dependencies
- */
-import { __unstableSerializeAndClean } from '@wordpress/blocks';
-import { store as coreStore } from '@wordpress/core-data';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
-import { __ } from '@wordpress/i18n';
-import { Button, VisuallyHidden } from '@wordpress/components';
-import { useMemo } from '@wordpress/element';
-import { useInstanceId } from '@wordpress/compose';
-import { store as editorStore } from '@wordpress/editor';
-
-/**
- * Internal dependencies
- */
-import { store as editSiteStore } from '../../store';
-
-export default function CodeEditor() {
- const instanceId = useInstanceId( CodeEditor );
- const { shortcut, content, blocks, type, id } = useSelect( ( select ) => {
- const { getEditedEntityRecord } = select( coreStore );
- const { getEditedPostType, getEditedPostId } = select( editSiteStore );
- const { getShortcutRepresentation } = select( keyboardShortcutsStore );
- const _type = getEditedPostType();
- const _id = getEditedPostId();
- const editedRecord = getEditedEntityRecord( 'postType', _type, _id );
-
- return {
- shortcut: getShortcutRepresentation( 'core/editor/toggle-mode' ),
- content: editedRecord?.content,
- blocks: editedRecord?.blocks,
- type: _type,
- id: _id,
- };
- }, [] );
- const { editEntityRecord } = useDispatch( coreStore );
- // Replicates the logic found in getEditedPostContent().
- const realContent = useMemo( () => {
- if ( content instanceof Function ) {
- return content( { blocks } );
- } else if ( blocks ) {
- // If we have parsed blocks already, they should be our source of truth.
- // Parsing applies block deprecations and legacy block conversions that
- // unparsed content will not have.
- return __unstableSerializeAndClean( blocks );
- }
- return content;
- }, [ content, blocks ] );
-
- const { switchEditorMode } = useDispatch( editorStore );
- return (
-
-
-
{ __( 'Editing code' ) }
-
-
-
-
- { __( 'Type text or HTML' ) }
-
-
-
- );
-}
diff --git a/packages/edit-site/src/components/code-editor/style.scss b/packages/edit-site/src/components/code-editor/style.scss
deleted file mode 100644
index 17431de27b896c..00000000000000
--- a/packages/edit-site/src/components/code-editor/style.scss
+++ /dev/null
@@ -1,95 +0,0 @@
-.edit-site-code-editor {
- position: relative;
- width: 100%;
- min-height: 100%;
- background-color: $white;
-
- &__body {
- width: 100%;
- padding: $grid-unit-15;
- max-width: $break-xlarge;
- margin-left: auto;
- margin-right: auto;
-
- @include break-large() {
- padding: $grid-unit-30;
- }
- }
-
- // Exit code editor toolbar.
- &__toolbar {
- position: sticky;
- z-index: z-index(".edit-site-code-editor__toolbar");
- top: 0;
- left: 0;
- right: 0;
- display: flex;
- background: rgba($white, 0.8);
- padding: $grid-unit-05 $grid-unit-15;
-
- @include break-small() {
- padding: $grid-unit-15;
- }
-
- @include break-large() {
- padding: $grid-unit-15 $grid-unit-30;
- }
-
- h2 {
- line-height: $button-size;
- margin: 0 auto 0 0;
- font-size: $default-font-size;
- color: $gray-900;
- }
- }
-}
-
-textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area {
- border: $border-width solid $gray-600;
- border-radius: 0;
- display: block;
- margin: 0;
- width: 100%;
- box-shadow: none;
- resize: none;
- overflow: hidden;
- font-family: $editor-html-font;
- line-height: 2.4;
- min-height: 200px;
- transition: border 0.1s ease-out, box-shadow 0.1s linear;
- @include reduce-motion("transition");
-
- // Same padding as title.
- padding: $grid-unit-20;
- @include break-small() {
- padding: $grid-unit-30;
- }
-
- /* Fonts smaller than 16px causes mobile safari to zoom. */
- font-size: $mobile-text-min-font-size !important;
- @include break-small {
- font-size: $text-editor-font-size !important;
- }
-
- &:focus {
- border-color: var(--wp-admin-theme-color);
- box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-
- // Elevate the z-index on focus so the focus style is uncropped.
- position: relative;
- }
-
- &::-webkit-input-placeholder {
- color: $dark-gray-placeholder;
- }
-
- &::-moz-placeholder {
- color: $dark-gray-placeholder;
- // Override Firefox default.
- opacity: 1;
- }
-
- &:-ms-input-placeholder {
- color: $dark-gray-placeholder;
- }
-}
diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js
index d8ebf2c1f54861..ba4d751de5ae08 100644
--- 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 && }
{ editorMode === 'text' && isEditMode && (
-
+
) }
{ ! isLargeViewport && showVisualEditor && (
diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss
index 5b5acffd2596e4..7416b055cae7ce 100644
--- 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";
diff --git a/packages/editor/src/components/text-editor/index.js b/packages/editor/src/components/text-editor/index.js
new file mode 100644
index 00000000000000..5bfb53c574aa30
--- /dev/null
+++ b/packages/editor/src/components/text-editor/index.js
@@ -0,0 +1,48 @@
+/**
+ * WordPress dependencies
+ */
+import { Button } from '@wordpress/components';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import PostTextEditor from '../post-text-editor';
+import PostTitleRaw from '../post-title/post-title-raw';
+
+export default function TextEditor() {
+ const { switchEditorMode } = useDispatch( editorStore );
+ const { shortcut, isRichEditingEnabled } = useSelect( ( select ) => {
+ const { getEditorSettings } = select( editorStore );
+ const { getShortcutRepresentation } = select( keyboardShortcutsStore );
+
+ return {
+ shortcut: getShortcutRepresentation( 'core/editor/toggle-mode' ),
+ isRichEditingEnabled: getEditorSettings().richEditingEnabled,
+ };
+ }, [] );
+
+ return (
+
+ { isRichEditingEnabled && (
+
+
{ __( 'Editing code' ) }
+
+
+ ) }
+
+
+ );
+}
diff --git a/packages/edit-post/src/components/text-editor/style.scss b/packages/editor/src/components/text-editor/style.scss
similarity index 89%
rename from packages/edit-post/src/components/text-editor/style.scss
rename to packages/editor/src/components/text-editor/style.scss
index ab248317de1dbf..c8589fed6de6e3 100644
--- a/packages/edit-post/src/components/text-editor/style.scss
+++ b/packages/editor/src/components/text-editor/style.scss
@@ -1,4 +1,4 @@
-.edit-post-text-editor {
+.editor-text-editor {
position: relative;
width: 100%;
background-color: $white;
@@ -31,7 +31,7 @@
}
}
-.edit-post-text-editor__body {
+.editor-text-editor__body {
width: 100%;
padding: 0 $grid-unit-15 $grid-unit-15 $grid-unit-15;
max-width: $break-xlarge;
@@ -44,9 +44,9 @@
}
// Exit code editor toolbar.
-.edit-post-text-editor__toolbar {
+.editor-text-editor__toolbar {
position: sticky;
- z-index: z-index(".edit-post-text-editor__toolbar");
+ z-index: z-index(".editor-text-editor__toolbar");
top: 0;
left: 0;
right: 0;
diff --git a/packages/editor/src/components/editor-canvas/edit-template-blocks-notification.js b/packages/editor/src/components/visual-editor/edit-template-blocks-notification.js
similarity index 100%
rename from packages/editor/src/components/editor-canvas/edit-template-blocks-notification.js
rename to packages/editor/src/components/visual-editor/edit-template-blocks-notification.js
diff --git a/packages/editor/src/components/editor-canvas/index.js b/packages/editor/src/components/visual-editor/index.js
similarity index 98%
rename from packages/editor/src/components/editor-canvas/index.js
rename to packages/editor/src/components/visual-editor/index.js
index dc13d72074895d..6007cd8f33e45a 100644
--- a/packages/editor/src/components/editor-canvas/index.js
+++ b/packages/editor/src/components/visual-editor/index.js
@@ -96,7 +96,7 @@ function checkForPostContentAtRootLevel( blocks ) {
return false;
}
-function EditorCanvas( {
+function VisualEditor( {
// Ideally as we unify post and site editors, we won't need these props.
autoFocus,
styles,
@@ -373,7 +373,7 @@ function EditorCanvas( {
return (