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

Site Editor: Update to use the EditorInterface component from the editor package. #62146

Merged
merged 3 commits into from
May 31, 2024
Merged

Site Editor: Update to use the EditorInterface component from the editor package. #62146

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
096ea04
Site Editor: Update to use the EditorCanvas component from the editor…
youknowriad May 30, 2024
20cd981
Cleanup editor private apis
youknowriad May 30, 2024
7e94d0c
Fix e2e tests
youknowriad May 31, 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
2 changes: 2 additions & 0 deletions 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 @@ -11,6 +11,7 @@ import {
LocalAutosaveMonitor,
UnsavedChangesWarning,
EditorKeyboardShortcutsRegister,
EditorSnackbars,
store as editorStore,
privateApis as editorPrivateApis,
} from '@wordpress/editor';
Expand Down Expand Up @@ -294,6 +295,7 @@ function Layout( { initialPost } ) {
) }
<PostEditorMoreMenu />
<BackButton initialPost={ initialPost } />
<EditorSnackbars />
Copy link
Contributor Author

Choose a reason for hiding this comment

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

The snackbars need to be rendered only once in the site editor (or the post editor) so I left this responsibility out of the EditorCanvas component for now.

<EditorInterface
className={ className }
styles={ styles }
Expand Down
21 changes: 4 additions & 17 deletions packages/edit-post/src/components/layout/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,25 +9,12 @@
}

// Adjust the position of the notices
.edit-post-layout .components-editor-notices__snackbar {
.components-editor-notices__snackbar {
position: fixed;
right: 0;
bottom: 16px;
padding-left: 16px;
padding-right: 16px;
}

.is-distraction-free {
.components-editor-notices__snackbar {
bottom: 16px;
}
}

// Adjust the position of the notices when breadcrumbs are present
.has-block-breadcrumbs {
.components-editor-notices__snackbar {
bottom: 40px;
}
bottom: 24px;
padding-left: 24px;
padding-right: 24px;
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Simplified the position of the snackbars in the post editor (to be a fixed position like the site editor)

}

@include editor-left(".edit-post-layout .components-editor-notices__snackbar");
24 changes: 0 additions & 24 deletions packages/edit-site/src/components/block-editor/site-editor-canvas.js
View file
Open in desktop

This file was deleted.

26 changes: 0 additions & 26 deletions packages/edit-site/src/components/block-editor/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,29 +1,3 @@
// The button element easily inherits styles that are meant for the editor style.
// These rules enhance the specificity to reduce that inheritance.
// This is duplicated in visual-editor.
.edit-site-block-editor__editor-styles-wrapper .components-button {
font-family: $default-font;
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 style is already in the editor package (so inherited in the site editor)

font-size: $default-font-size;
padding: 6px 12px;

&.is-tertiary,
&.has-icon {
padding: 6px;
}
}

.edit-site-visual-editor {
height: 100%;
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 style moved to the specific editor-canvas-container component. It's only useful there.

background-color: $gray-300;

// Controls height of editor and editor canvas container (style book, global styles revisions previews etc.)
iframe {
display: block;
width: 100%;
height: 100%;
}
}

.edit-site-visual-editor__editor-canvas {
&.is-focused {
outline: calc(2 * var(--wp-admin-border-width-focus)) solid var(--wp-admin-theme-color);
Expand Down
49 changes: 9 additions & 40 deletions .../components/block-editor/editor-canvas.js → ...s/block-editor/use-editor-iframe-props.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,22 +8,17 @@ import clsx from 'clsx';
*/
import { useSelect, useDispatch } from '@wordpress/data';
import { ENTER, SPACE } from '@wordpress/keycodes';
import { useState, useEffect, useMemo } from '@wordpress/element';
import { useState, useEffect } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import {
store as editorStore,
privateApis as editorPrivateApis,
} from '@wordpress/editor';
import { store as editorStore } from '@wordpress/editor';

/**
* Internal dependencies
*/
import { unlock } from '../../lock-unlock';
import { store as editSiteStore } from '../../store';

const { VisualEditor } = unlock( editorPrivateApis );

function EditorCanvas( { settings } ) {
export default function useEditorIframeProps() {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Mostly this enables the site editor to have the "click on canvas" behavior that is not present and not needed in the post editor. I wish it could be just an onClick prop to the EditorCanvas component but for now, I just left it as is and just passed down the iframeProps prop.

const { canvasMode, currentPostIsTrashed } = useSelect( ( select ) => {
const { getCanvasMode } = unlock( select( editSiteStore ) );

Expand Down Expand Up @@ -75,36 +70,10 @@ function EditorCanvas( { settings } ) {
readonly: true,
};

const styles = useMemo(
() => [
...settings.styles,
{
// Forming a "block formatting context" to prevent margin collapsing.
// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context

css: `body{${
canvasMode === 'view'
? `min-height: 100vh; ${
currentPostIsTrashed ? '' : 'cursor: pointer;'
}`
: ''
}}}`,
},
],
[ settings.styles, canvasMode, currentPostIsTrashed ]
);

return (
<VisualEditor
styles={ styles }
iframeProps={ {
className: clsx( 'edit-site-visual-editor__editor-canvas', {
'is-focused': isFocused && canvasMode === 'view',
} ),
...( canvasMode === 'view' ? viewModeIframeProps : {} ),
} }
/>
);
return {
className: clsx( 'edit-site-visual-editor__editor-canvas', {
'is-focused': isFocused && canvasMode === 'view',
} ),
...( canvasMode === 'view' ? viewModeIframeProps : {} ),
};
}

export default EditorCanvas;
19 changes: 4 additions & 15 deletions packages/edit-site/src/components/editor-canvas-container/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@
import { Children, cloneElement, useState } from '@wordpress/element';
import {
Button,
privateApis as componentsPrivateApis,
__experimentalUseSlotFills as useSlotFills,
} from '@wordpress/components';
import { ESCAPE } from '@wordpress/keycodes';
Expand All @@ -24,7 +23,7 @@ import {
import { unlock } from '../../lock-unlock';
import { store as editSiteStore } from '../../store';

const { ResizableEditor } = unlock( editorPrivateApis );
const { EditorContentSlotFill, ResizableEditor } = unlock( editorPrivateApis );

/**
* Returns a translated string for the title of the editor canvas container.
Expand All @@ -45,15 +44,6 @@ function getEditorCanvasContainerTitle( view ) {
}
}

// Creates a private slot fill.
const { createPrivateSlotFill } = unlock( componentsPrivateApis );
const SLOT_FILL_NAME = 'EditSiteEditorCanvasContainerSlot';
const {
privateKey,
Slot: EditorCanvasContainerSlot,
Fill: EditorCanvasContainerFill,
} = createPrivateSlotFill( SLOT_FILL_NAME );
Copy link
Contributor Author

Choose a reason for hiding this comment

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

The creation and the rendering of the slot has moved to the editor package. So any editor (post or site editor) can decide to actually update the "content" are using a fill. (like we do for style book and style revisions). There are probably better ways to do implement this behavior but I didn't want to change too much here.

Copy link
Member

Choose a reason for hiding this comment

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

There are probably better ways to do implement this behavior but I didn't want to change too much here.

What do you think? Do you mean in terms of restricting the behavior to the post editor or finding a different way to swap editor content in and out?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

There are a few thoughts that I have here:

  • I don't like that we're switching the canvas using a Slot, I'd prefer a children prop or something maybe.

  • I wonder if we're actually switching canvas here, I wonder if stylebook or style revisions are actually the same "editor", maybe it's the whole thing that should be swapped (so no need for Slot or anything). This is clearer for things like:

  • Why I have an inserter and the different block tools for stylebook and style revisions (we have a dedicated prop to remove these but the prop shouldn't exist in the first place) => in other words the header is completely different

  • The "document" sidebar or the "block" sidebar don't make sense anymore. In these modes. We're focused on "global styles". => in other words, the left sidebar is completely different

  • There's no need for list view or inserter => right sidebar is completely different.

This is to say, in my mind, there are two valid paths forward:

  • Build a completely different UI (the whole thing, not just the canvas) for these modes. (Could share some very small things like save button and undo/redo)
  • Continue with the "editor" but instead of hacking things around like we're doing now, switch the "active entity" (currentPostType, and currentPostId) by passing a different "post" object to EditorProvider, and that post would be the "global styles" post. In which case, the "editor" would know that we're editing the global styles and would switch the UI accordingly.

Both of these can be valid, right now, I'm thinking the former is probably better but it's a very loosely held opinion.

Copy link
Member

Choose a reason for hiding this comment

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

Thanks a lot for the thorough feedback!

Build a completely different UI (the whole thing, not just the canvas) for these modes. (Could share some very small things like save button and undo/redo)

I could see this as an alternative, particularly if we could isolate it to the site editor.

I guess we have access to context/edited post in the site editor Editor component.

Worth an experiment.

I'll create an issue and put it on the backlog.

Thank you!

Copy link
Member

Choose a reason for hiding this comment

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

The important feature, at least for global style revisions, was to have a "separate" editor view that could be edited independently of the main editor canvas.

So changes could be made to styles etc in the alt. canvas view, and when it closes, the user is returned to the main editor canvas in whatever state they left it.


function EditorCanvasContainer( {
children,
closeButtonLabel,
Expand Down Expand Up @@ -123,7 +113,7 @@ function EditorCanvasContainer( {
const shouldShowCloseButton = onClose || closeButtonLabel;

return (
<EditorCanvasContainerFill>
<EditorContentSlotFill.Fill>
<div className="edit-site-editor-canvas-container">
<ResizableEditor enableResizing={ enableResizing }>
{ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }
Expand All @@ -145,14 +135,13 @@ function EditorCanvasContainer( {
</section>
</ResizableEditor>
</div>
</EditorCanvasContainerFill>
</EditorContentSlotFill.Fill>
);
}
function useHasEditorCanvasContainer() {
const fills = useSlotFills( privateKey );
const fills = useSlotFills( EditorContentSlotFill.privateKey );
return !! fills?.length;
}

EditorCanvasContainer.Slot = EditorCanvasContainerSlot;
export default EditorCanvasContainer;
export { useHasEditorCanvasContainer, getEditorCanvasContainerTitle };
8 changes: 8 additions & 0 deletions packages/edit-site/src/components/editor-canvas-container/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,13 @@
.edit-site-editor-canvas-container {
height: 100%;
background-color: $gray-300;

// Controls height of editor and editor canvas container (style book, global styles revisions previews etc.)
iframe {
display: block;
width: 100%;
height: 100%;
}

.edit-site-layout.is-full-canvas & {
padding: $grid-unit-30 $grid-unit-30 0;
Expand Down
Loading
Loading