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

Fix zoom out mode background color on Safari #60873

Merged
merged 7 commits into from
Apr 30, 2024
Merged

Fix zoom out mode background color on Safari #60873

Changes from 4 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
9af8e86
moved zoomed out class to the iframe
MaggieCabrera Apr 18, 2024
7eba953
revert changes, add an extra class to the iframe
MaggieCabrera Apr 19, 2024
58b22d6
moved css to block editor
MaggieCabrera Apr 19, 2024
133b07e
changed background color of iframe instead of adding a new class
MaggieCabrera Apr 25, 2024
22318f4
leave background in gray for all cases on the iframe
MaggieCabrera Apr 25, 2024
7530740
removed white background color extra styles
MaggieCabrera Apr 26, 2024
5d18fb7
remove another background color that is no longer needed
MaggieCabrera Apr 26, 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
7 changes: 4 additions & 3 deletions packages/block-editor/src/components/block-canvas/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,13 @@ iframe[name="editor-canvas"] {
width: 100%;
height: 100%;
display: block;
}

iframe[name="editor-canvas"]:not(.has-editor-padding) {
background-color: $white;
&:not(.has-editor-padding) {
background-color: $gray-300;
Copy link
Member

Choose a reason for hiding this comment

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

What if we consistently apply this grey background? Why does it need to be white for non zoom out?

Copy link
Member

Choose a reason for hiding this comment

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

Fair question.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I think it will affect other parts, like isolated views of the nav block for example. But it's a good lead, I will investigate

Copy link
Member

Choose a reason for hiding this comment

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

Isolated views also use the gray background; I don't think white is used anywhere on its own.

Copy link
Member

Choose a reason for hiding this comment

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

Thanks for checking! Why can't we add the background for .has-editor-padding? Might be worth commenting.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Ok I went back to figure out why we need it, and it comes from this PR #57631 and the white color comes from this other one #57330. So in reality right now we could keep the gray background for all cases, I think

}
}


iframe[name="editor-canvas"].has-editor-padding {
padding: $grid-unit-30 $grid-unit-30 0;
}
Loading