Skip to content

Stretch Widgets editor layout to full height #32905

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

Merged
tellthemachines merged 1 commit into from
Jun 24, 2021
Merged

Stretch Widgets editor layout to full height #32905

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
19 changes: 18 additions & 1 deletion packages/edit-widgets/src/components/widget-areas-block-editor-content/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,27 @@
.edit-widgets-block-editor {
position: relative;
background: $gray-100;

// This is the default font that is going to be used in the content of the areas (blocks).
font-family: $default-font;

// Block list needs to stretch to full screen height so blocks can
// be deselected when clicking outside widget areas.
display: flex;
flex-direction: column;
flex-grow: 1;

> div:last-of-type,
.block-editor-writing-flow,
.block-editor-writing-flow > div {
display: flex;
flex-direction: column;
flex-grow: 1;
}
Comment on lines +9 to +19
Copy link
Member

@kevin940726 kevin940726 Jun 23, 2021

Choose a reason for hiding this comment

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

Could we do this?

Suggested change
display: flex;
flex-direction: column;
flex-grow: 1;
> div:last-of-type,
.block-editor-writing-flow,
.block-editor-writing-flow > div {
display: flex;
flex-direction: column;
flex-grow: 1;
}
&,
> div:last-of-type,
.block-editor-writing-flow,
.block-editor-writing-flow > div {
display: flex;
flex-direction: column;
flex-grow: 1;
}

Also not a fan of those div selectors, but not that I have any better ideas 😅.

Copy link
Contributor Author

@tellthemachines tellthemachines Jun 24, 2021

Choose a reason for hiding this comment

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

Hmm, I don't love the &, trick as it makes the code less legible at a glance. Just like with .parent-selector &, it means we write less lines of code at the expense of taking longer to decipher what it does 😅 and in this case it doesn't even make a difference in the compiled output so there's no performance gain.

Yeah, the divs are not great; it might be something to look into later - are those divs really needed? If so, should they have classnames? - the last-of-type in particular makes me a bit anxious as it can break really easily 😬


.edit-widgets-main-block-list {
height: 100%;
}

// The button element easily inherits styles that are meant for the editor style.
// These rules enhance the specificity to reduce that inheritance.
// This is copied from edit-post/src/components/style.scss but without the padding.
Expand Down