Skip to content

Fix zoom out mode background color on Safari #60873

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
richtabor merged 7 commits into from
Apr 30, 2024
Merged

Fix zoom out mode background color on Safari #60873

Show file tree
Hide file tree
Changes from 1 commit
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
Prev Previous commit
Next Next commit
changed background color of iframe instead of adding a new class
  • Loading branch information
@MaggieCabrera
MaggieCabrera committed Apr 25, 2024
commit 133b07e282a4571833827ead59aa32baf3e29ed6
6 changes: 1 addition & 5 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 @@ -3,11 +3,7 @@ iframe[name="editor-canvas"] {
height: 100%;
display: block;

&:not(.has-editor-padding):not(.is-zoomed-out) {
background-color: $white;
}

&.is-zoomed-out {
&:not(.has-editor-padding) {
background-color: $gray-300;
Copy link
Copy Markdown
Member

@ellatrix ellatrix Apr 19, 2024

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
Copy Markdown
Member

@richtabor richtabor Apr 19, 2024

Choose a reason for hiding this comment

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

Fair question.

Copy link
Copy Markdown
Contributor Author

@MaggieCabrera MaggieCabrera Apr 22, 2024

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
Copy Markdown
Member

@richtabor richtabor Apr 25, 2024

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
Copy Markdown
Member

@ellatrix ellatrix Apr 25, 2024

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
Copy Markdown
Contributor Author

@MaggieCabrera MaggieCabrera Apr 25, 2024

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

}
}
Expand Down
1 change: 0 additions & 1 deletion packages/edit-site/src/components/block-editor/editor-canvas.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -164,7 +164,6 @@ function EditorCanvas( {
'edit-site-visual-editor__editor-canvas',
{
'is-focused': isFocused && canvasMode === 'view',
'is-zoomed-out': isZoomOutMode,
}
),
...props,
Expand Down