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

Merged
merged 5 commits into from
Dec 3, 2024
Merged

Split view with meta boxes even with legacy canvas #66706

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
2e97c95
Split view with meta boxes with non-iframed canvas
stokesman Sep 11, 2024
dfe6935
Fix scrolling of device previews
stokesman Nov 2, 2024
be563d0
Consolidate styles and add comments
stokesman Nov 4, 2024
d008922
Do the same thing without adding a prop to BlockCanvas
stokesman Nov 19, 2024
2fdda78
Fix horizontal overflow of device previews
stokesman Nov 19, 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
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 @@ -56,7 +56,8 @@ export function ExperimentalBlockCanvas( {
return (
<BlockTools
__unstableContentRef={ localRef }
style={ { height, display: 'flex' } }
className="block-editor-block-canvas"
style={ { height } }
>
<EditorStyles
styles={ styles }
Expand All @@ -67,10 +68,6 @@ export function ExperimentalBlockCanvas( {
ref={ contentRef }
className="editor-styles-wrapper"
tabIndex={ -1 }
style={ {
height: '100%',
width: '100%',
} }
>
{ children }
</WritingFlow>
Expand All @@ -81,6 +78,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',
Copy link
Contributor Author

@stokesman stokesman Nov 19, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

This dates back to #19082 which introduced device previewing and it seems at the time the canvas was not iframed. Now device previews are always iframed and its document is the scrolling context so this rule has no purpose.

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 @@ -148,11 +148,7 @@ function useEditorStyles( ...additionalStyles ) {
] );
}

/**
* @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 @@ -232,22 +228,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"
Copy link
Contributor

Choose a reason for hiding this comment

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

Can we combine two CSS classes into one?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Well, I think since we have to keep edit-post-layout__metaboxes for the sake of plugins we could utilize only that one. Is that what you mean? I suppose that’d be fine.

Copy link
Contributor

Choose a reason for hiding this comment

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

That's right. I thought it would be nice to remove the .edit-post-meta-boxes-main__liner selector and put these styles into the .edit-post-layout__metaboxes selector:

gutenberg/packages/edit-post/src/components/layout/style.scss

Lines 98 to 107 in d008922

.edit-post-meta-boxes-main__liner {
overflow: auto;
// Keep the contents behind the resize handle or details summary.
isolation: isolate;
}
// In case the canvas is not iframe’d.
.edit-post-layout__metaboxes {
clear: both;
}

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 @@ -580,9 +569,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%;
}
1 change: 1 addition & 0 deletions 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 @@ -385,6 +385,7 @@ function VisualEditor( {
'has-padding': isFocusedEntity || enableResizing,
'is-resizable': enableResizing,
'is-iframed': ! disableIframe,
'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