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

Split view with meta boxes even with legacy canvas (#66706) #68228

Open
wants to merge 1 commit into
base: wp/6.7
Choose a base branch
from
+45 −37
Open

Split view with meta boxes even with legacy canvas (#66706) #68228

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
8 changes: 3 additions & 5 deletions packages/block-editor/src/components/block-canvas/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,8 @@ export function ExperimentalBlockCanvas( {
return (
<BlockTools
__unstableContentRef={ localRef }
style={ { height, display: 'flex' } }
className="block-editor-block-canvas"
style={ { height } }
>
<EditorStyles
styles={ styles }
Expand All @@ -52,10 +53,6 @@ export function ExperimentalBlockCanvas( {
ref={ contentRef }
className="editor-styles-wrapper"
tabIndex={ -1 }
style={ {
height: '100%',
width: '100%',
} }
>
{ children }
</WritingFlow>
Expand All @@ -66,6 +63,7 @@ export function ExperimentalBlockCanvas( {
return (
<BlockTools
__unstableContentRef={ localRef }
className="block-editor-block-canvas"
style={ { height, display: 'flex' } }
>
<Iframe
Expand Down
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/use-resize-canvas/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ export default function useResizeCanvas( deviceType ) {
marginLeft: marginHorizontal,
marginRight: marginHorizontal,
height,
overflowY: 'auto',
maxWidth: '100%',
};
default:
return {
Expand Down
23 changes: 5 additions & 18 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 @@ -170,11 +170,7 @@ function useEditorStyles() {
] );
}

/**
* @param {Object} props
* @param {boolean} props.isLegacy True when the editor canvas is not in an iframe.
*/
function MetaBoxesMain( { isLegacy } ) {
function MetaBoxesMain() {
const [ isOpen, openHeight, hasAnyVisible ] = useSelect( ( select ) => {
const { get } = select( preferencesStore );
const { isMetaBoxLocationVisible } = select( editPostStore );
Expand Down Expand Up @@ -254,22 +250,15 @@ function MetaBoxesMain( { isLegacy } ) {

const contents = (
<div
className={ clsx(
// The class name 'edit-post-layout__metaboxes' is retained because some plugins use it.
'edit-post-layout__metaboxes',
! isLegacy && 'edit-post-meta-boxes-main__liner'
) }
hidden={ ! isLegacy && isShort && ! isOpen }
// The class name 'edit-post-layout__metaboxes' is retained because some plugins use it.
className="edit-post-layout__metaboxes edit-post-meta-boxes-main__liner"
hidden={ isShort && ! isOpen }
>
<MetaBoxes location="normal" />
<MetaBoxes location="advanced" />
</div>
);

if ( isLegacy ) {
return contents;
}

const isAutoHeight = openHeight === undefined;
let usedMax = '50%'; // Approximation before max has a value.
if ( max !== undefined ) {
Expand Down Expand Up @@ -600,9 +589,7 @@ function Layout( {
}
extraContent={
! isDistractionFree &&
showMetaBoxes && (
<MetaBoxesMain isLegacy={ ! shouldIframe } />
)
showMetaBoxes && <MetaBoxesMain />
}
>
<PostLockedModal />
Expand Down
8 changes: 3 additions & 5 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 @@ -107,11 +107,9 @@
}

.has-metaboxes .editor-visual-editor {
flex: 1;

&.is-iframed {
isolation: isolate;
}
// Contains z-indexes of children so that the block toolbar will appear behind
// the drop shadow of the meta box pane.
isolation: isolate;
}

// Adjust the position of the notices
Expand Down
3 changes: 2 additions & 1 deletion packages/editor/src/components/editor-interface/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,5 +8,6 @@
}

.editor-visual-editor {
flex: 1 0 auto;
// Fits the height to the parent — flex-shrink ensures it doesn’t create overflow.
flex: 1 1 0%;
}
3 changes: 2 additions & 1 deletion packages/editor/src/components/visual-editor/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -389,7 +389,8 @@ function VisualEditor( {
{
'has-padding': isFocusedEntity || enableResizing,
'is-resizable': enableResizing,
'is-iframed': shouldIframe,
'is-iframed': ! disableIframe,
Copy link
Contributor

Choose a reason for hiding this comment

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

I believe this should be unchanged:

Suggested change
'is-iframed': ! disableIframe,
'is-iframed': shouldIframe,

Otherwise, this class will be absent for device previews which are indeed iframed.

For reference in trunk it was changed in #65887 and that was not backported for 6.7.

Copy link
Contributor

Choose a reason for hiding this comment

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

Should we backport #65887 first? The problem #65887 is trying to solve is not new to WP 6.7, but to make it easier to backport this PR, it may be better to backport #65887 first.

'is-scrollable': disableIframe || deviceType !== 'Desktop',
}
) }
>
Expand Down
35 changes: 29 additions & 6 deletions packages/editor/src/components/visual-editor/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@
position: relative;
display: flex;
background-color: $gray-300;
// Allows the height to fit the parent container and avoids parent scrolling contexts from
// having overflow due to popovers of block tools.
overflow: hidden;

// Centralize the editor horizontally (flex-direction is column).
align-items: center;
Expand All @@ -14,12 +17,6 @@
padding: $grid-unit-30 $grid-unit-30 0;
}

// In the iframed canvas this keeps extra scrollbars from appearing (when block toolbars overflow). In the
// legacy (non-iframed) canvas, overflow must not be hidden in order to maintain support for sticky positioning.
&.is-iframed {
overflow: hidden;
}

// 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 edit-site.
Expand All @@ -33,4 +30,30 @@
padding: 6px;
}
}

// The cases for this are non-iframed editor canvas or previewing devices. The block canvas is
// made the scrolling context.
&.is-scrollable .block-editor-block-canvas {
overflow: auto;

// Applicable only when legacy (non-iframed).
> .block-editor-writing-flow {
display: flow-root;
min-height: 100%;
box-sizing: border-box; // Ensures that 100% min-height doesn’t create overflow.
}

// Applicable only when iframed. These styles ensure that if the the iframe is
// given a fixed height and it’s taller than the viewport then scrolling is
// allowed. This is needed for device previews.
> .block-editor-iframe__container {
display: flex;
flex-direction: column;

> .block-editor-iframe__scale-container {
flex: 1 0 fit-content;
display: flow-root;
}
}
}
}
Loading