Skip to content

Commit

Permalink
Site Editor: Update to use the EditorInterface component from the edi…
Browse files Browse the repository at this point in the history
…tor package. (#62146)

Co-authored-by: youknowriad <[email protected]>
Co-authored-by: ramonjd <[email protected]>
Co-authored-by: ellatrix <[email protected]>
  • Loading branch information
4 people authored May 31, 2024
1 parent 362d687 commit fcedde8
Showing 25 changed files with 187 additions and 420 deletions.
2 changes: 2 additions & 0 deletions packages/edit-post/src/components/layout/index.js
Original file line number Diff line number Diff line change
@@ -11,6 +11,7 @@ import {
LocalAutosaveMonitor,
UnsavedChangesWarning,
EditorKeyboardShortcutsRegister,
EditorSnackbars,
store as editorStore,
privateApis as editorPrivateApis,
} from '@wordpress/editor';
@@ -294,6 +295,7 @@ function Layout( { initialPost } ) {
) }
<PostEditorMoreMenu />
<BackButton initialPost={ initialPost } />
<EditorSnackbars />
<EditorInterface
className={ className }
styles={ styles }
21 changes: 4 additions & 17 deletions packages/edit-post/src/components/layout/style.scss
Original file line number Diff line number Diff line change
@@ -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;
}

@include editor-left(".edit-post-layout .components-editor-notices__snackbar");

This file was deleted.

26 changes: 0 additions & 26 deletions packages/edit-site/src/components/block-editor/style.scss
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;
font-size: $default-font-size;
padding: 6px 12px;

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

.edit-site-visual-editor {
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-visual-editor__editor-canvas {
&.is-focused {
outline: calc(2 * var(--wp-admin-border-width-focus)) solid var(--wp-admin-theme-color);
Original file line number Diff line number Diff line change
@@ -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() {
const { canvasMode, currentPostIsTrashed } = useSelect( ( select ) => {
const { getCanvasMode } = unlock( select( editSiteStore ) );

@@ -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
Original file line number Diff line number Diff line change
@@ -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';
@@ -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.
@@ -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 );

function EditorCanvasContainer( {
children,
closeButtonLabel,
@@ -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 */ }
@@ -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 };
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;
Loading

0 comments on commit fcedde8

Please sign in to comment.