Skip to content

Block editor: give iframe fallback background color #57330

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
ramonjd merged 2 commits into from
Jan 2, 2024
Merged

Block editor: give iframe fallback background color #57330

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
44761db
Extracts block editor iframe styles and adds a default background color.
ramonjd Dec 22, 2023
2d599a5
Removing duplicate styles that apply to the editor canvas iframe
ramonjd Dec 27, 2023
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
2 changes: 0 additions & 2 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 @@ -63,8 +63,6 @@ export function ExperimentalBlockCanvas( {
ref={ resetTypingRef }
contentRef={ contentRef }
style={ {
width: '100%',
height: '100%',
...iframeProps?.style,
} }
name="editor-canvas"
Expand Down
6 changes: 6 additions & 0 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
@@ -0,0 +1,6 @@
iframe[name="editor-canvas"] {
width: 100%;
height: 100%;
background-color: $white;
Copy link
Contributor

@youknowriad youknowriad Jan 1, 2024

Choose a reason for hiding this comment

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

Do you know if the issue is present in the site editor as well? I know there were a lot of back and forth about the default background there due to the loading mechanics and whether this change could impact it. cc @jasmussen

Copy link
Member Author

@ramonjd ramonjd Jan 1, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

Thanks for checking.

Yes, for empty theme (or any theme with no set background color) the post and site editors will have a default background color of background-color: $gray-900; coming from https://github.com/WordPress/gutenberg/blob/81852a55e700afdaaca7657a2382dd38c0e52b5a/packages/edit-post/src/components/visual-editor/style.scss#L14

Copy link
Contributor

@t-hamano t-hamano Jan 2, 2024

Choose a reason for hiding this comment

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

Do you know if the issue is present in the site editor as well?

This issue has also occurred in the Site Editor in the past, but it has been fixed in #46314. After that, the selector was changed in part of #46752.

There is also an issue where the background color flashes white when the Site Editor loads for the first time (#57001). This problem occurs both in trunk and in this PR, so I think it will need to be fixed in a follow-up.

Copy link
Member Author

@ramonjd ramonjd Jan 2, 2024

Choose a reason for hiding this comment

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

Oh, thanks for correcting me @t-hamano

I meant to say, "without a fallback like this..." 😄

This PR unifies those previous fixes for the site editor with the post editor so they'll work the same, running from the same CSS rule.

Copy link
Contributor

@jasmussen jasmussen Jan 8, 2024

Choose a reason for hiding this comment

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

CC: @jameskoster — you were there for some of these conversations. Do you recall the details?

display: block;
}
1 change: 1 addition & 0 deletions packages/block-editor/src/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
@import "./autocompleters/style.scss";
@import "./components/block-alignment-control/style.scss";
@import "./components/block-canvas/style.scss";
@import "./components/block-icon/style.scss";
@import "./components/block-inspector/style.scss";
@import "./components/block-tools/style.scss";
Expand Down
9 changes: 0 additions & 9 deletions packages/edit-site/src/components/block-editor/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,16 +27,7 @@
// Centralize the editor horizontally (flex-direction is column).
align-items: center;

iframe {
display: block;
width: 100%;
height: 100%;
background: $white;
}

.edit-site-visual-editor__editor-canvas {
height: 100%;

&.is-focused {
outline: calc(2 * var(--wp-admin-border-width-focus)) solid var(--wp-admin-theme-color);
outline-offset: calc(-2 * var(--wp-admin-border-width-focus));
Expand Down