Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 2 commits into from
May 24, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
903958f
Editor: Unify text/code editor between post and site editors
youknowriad May 24, 2024
85b5cf6
Fix native
youknowriad May 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions packages/base-styles/_z-index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion packages/edit-post/src/components/layout/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -62,6 +61,7 @@ const {
InterfaceSkeleton,
interfaceStore,
Sidebar,
TextEditor,
} = unlock( editorPrivateApis );
const { BlockKeyboardShortcuts } = unlock( blockLibraryPrivateApis );

Expand Down
63 changes: 0 additions & 63 deletions packages/edit-post/src/components/text-editor/index.js
View file
Open in desktop

This file was deleted.

4 changes: 2 additions & 2 deletions packages/edit-post/src/components/visual-editor/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 );
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This PR includes a rename to this component as it's clearer this way. The canvas can hold both code and visual editors but what we used to call "canvas" represents just the visual editor actually.


const isGutenbergPlugin = globalThis.IS_GUTENBERG_PLUGIN ? true : false;
const DESIGN_POST_TYPES = [
Expand Down Expand Up @@ -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.
Expand Down
3 changes: 1 addition & 2 deletions packages/edit-post/src/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand Down Expand Up @@ -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;
Expand Down
10 changes: 4 additions & 6 deletions packages/edit-site/src/components/block-editor/editor-canvas.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 ) );

Expand Down Expand Up @@ -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>
/>
);
}

Expand Down
94 changes: 0 additions & 94 deletions packages/edit-site/src/components/code-editor/index.js
View file
Open in desktop

This file was deleted.

95 changes: 0 additions & 95 deletions packages/edit-site/src/components/code-editor/style.scss
View file
Open in desktop

This file was deleted.

4 changes: 2 additions & 2 deletions packages/edit-site/src/components/editor/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -64,6 +63,7 @@ const {
interfaceStore,
SavePublishPanels,
Sidebar,
TextEditor,
} = unlock( editorPrivateApis );
const { useHistory } = unlock( routerPrivateApis );
const { BlockKeyboardShortcuts } = unlock( blockLibraryPrivateApis );
Expand Down Expand Up @@ -346,7 +346,7 @@ export default function Editor( { isLoading } ) {
<>
{ isEditMode && <EditorNotices /> }
{ editorMode === 'text' && isEditMode && (
<CodeEditor />
<TextEditor />
) }
{ ! isLargeViewport && showVisualEditor && (
<BlockToolbar hideDragHandle />
Expand Down
1 change: 0 additions & 1 deletion packages/edit-site/src/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down
Loading
Loading