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 "default" admin CSS #66431

Merged
merged 3 commits into from
Oct 24, 2024
Merged

Conversation

ellatrix
Copy link
Member

@ellatrix ellatrix commented Oct 24, 2024

What?

We are loading a TON of css in the site editor that never use. The culprit seems to be the colors handle, which in turn enqueues wp-admin. wp-admin in turn enqueues basically all css of every admin screen there is:

array(
    'dashicons',
    'common',
    'forms',
    'admin-menu',
    'dashboard',
    'list-tables',
    'edit',
    'revisions',
    'media',
    'themes',
    'about',
    'nav-menus',
    'widgets',
    'site-icon',
    'l10n'
)

I don't know why this was ever done, but that ship has sailed for the normal admin. For the site editor however, we should be a lot more picky and explicitly add the dependencies we need to our own stylesheet. That's already the case: as you will see, even after dequeuing colors, the handles that we need such as dashicons, common, forms etc. are still loading.

Why?

One of the thousand needles that degrades site editing loading performance. Note that each extra stylesheet is a blocking request.

How?

Dequeue colors. This is added to all admin pages here:

https://github.com/WordPress/wordpress-develop/blob/de38e8eeecf80a7ca5ee870ec68a59897216b33b/src/wp-admin/admin-header.php#L93

Testing Instructions

Load the site editor and check that the list-tables CSS file is gone for example.

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.

@youknowriad
Copy link
Contributor

What about the "colors" stylesheet itself, don't we need it? Isn't it what allows us to handle user color schemes properly.

@ellatrix
Copy link
Member Author

@youknowriad I don't believe so. It's a generated stylesheet that targets old admin stuff. We set our own CSS variables and use those variables in our stylesheets. I tested the "modern" admin theme, and the colours still work in the site editor with this PR.

Copy link
Contributor

@youknowriad youknowriad left a comment

Choose a reason for hiding this comment

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

Smoke test this. I can spot any style issue.

@ellatrix ellatrix enabled auto-merge (squash) October 24, 2024 18:42
@ellatrix ellatrix merged commit d2ba0dc into trunk Oct 24, 2024
63 checks passed
@ellatrix ellatrix deleted the try/remove-default-css branch October 24, 2024 18:44
@github-actions github-actions bot added this to the Gutenberg 19.6 milestone Oct 24, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Type] Performance Related to performance efforts
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants