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.

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

Site Editor: remove content styles outside canvas #66432

Merged
merged 2 commits into from
Oct 25, 2024

Conversation

ellatrix
Copy link
Member

What?

In the Site Editor, we always load the content in an iframe, so it's not necessary to load the content styles outside the canvas.

Why?

Unnecessary styles loading.

How?

We can remove wp-edit-blocks. There was an implicit dependency on common and forms that I've now made explicit.

Testing Instructions

Sanity check styles in the Site Editor.

Testing Instructions for Keyboard

Screenshots or screencast

@ellatrix ellatrix added the [Type] Performance Related to performance efforts label Oct 24, 2024
Copy link

github-actions bot commented Oct 24, 2024

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: ellatrix <[email protected]>
Co-authored-by: youknowriad <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@@ -410,7 +410,7 @@ function gutenberg_register_packages_styles( $styles ) {
$styles,
'wp-edit-site',
gutenberg_url( 'build/edit-site/style.css' ),
array( 'wp-components', 'wp-block-editor', 'wp-editor', 'wp-edit-blocks', 'wp-commands', 'wp-preferences' ),
array( 'wp-components', 'wp-block-editor', 'wp-editor', 'common', 'forms', 'wp-commands', 'wp-preferences' ),
Copy link
Contributor

Choose a reason for hiding this comment

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

Do you know why edit-blocks needs common and forms?

Copy link
Member Author

Choose a reason for hiding this comment

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

Inside the canvas it's currently needed for placeholders (another reason to do the shadow DOM finally).
Outside the canvas we depend on it for all UI. Which is a bit surprising because I'd expect the components package to handle everything.

Copy link
Contributor

Choose a reason for hiding this comment

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

Inside the canvas it's currently needed for placeholders (another reason to do the shadow DOM finally).

Same for me inside the canvas. I expect components to handle everything, so I wonder why we need it there at all. Maybe we don't need it either and it just there for historic reasons?

@ellatrix ellatrix merged commit 8a2480a into trunk Oct 25, 2024
66 of 67 checks passed
@ellatrix ellatrix deleted the remove/site-editor-block-styles branch October 25, 2024 12:23
@github-actions github-actions bot added this to the Gutenberg 19.6 milestone Oct 25, 2024
@t-hamano
Copy link
Contributor

t-hamano commented Oct 27, 2024

I think wp-edit-blocks (block-library/editor.css) is necessary even outside of the iframe. Blocks may apply their own styles to the sidebar UI.

The most notable example is the following: In the Site Logo block, the image in the button no longer has a size applied.

Expected Actual
image image

t-hamano added a commit that referenced this pull request Oct 29, 2024
@cbravobernal cbravobernal added the [Feature] Site Editor Related to the overarching Site Editor (formerly "full site editing") label Oct 30, 2024
@stokesman
Copy link
Contributor

I got here from a git bisect to track down why the inserter button in the default block appender is overlapping the placeholder (Site editor only):

inserter-button-placeholder-overlap

That bisect was done on trunk after #66556 landed so that didn’t restore it. I haven’t dug in to pinpoint what affected this but I hope someone here might have a clue. I also tested WP 6.7 RC2 on playground and wasn’t seeing this issue so I think the wp/6.7 branch should be okay.

@ellatrix
Copy link
Member Author

@stokesman Thank you, I can reproduce! I'll check what's causing it.

@ellatrix
Copy link
Member Author

@stokesman Fixed in #66630. The cause is a misplaced CSS rule.

karthick-murugan pushed a commit to karthick-murugan/gutenberg that referenced this pull request Nov 13, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Site Editor Related to the overarching Site Editor (formerly "full site editing") [Type] Performance Related to performance efforts
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants