-
Notifications
You must be signed in to change notification settings - Fork 2k
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
Styles: Load the @wordpress/components stylesheet #45724
Conversation
Here is how your PR affects size of JS and CSS bundles shipped to the user's browser: App Entrypoints (~2232 bytes removed 📉 [gzipped])
Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used. Sections (~27 bytes removed 📉 [gzipped])
Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to. Legend What is parsed and gzip size?Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory. Generated by performance advisor bot at iscalypsofastyet.com. |
There, if you input the email of a passwordless account, you should get a Woo-branded "magic login" splash screen (and email). I hope that works on the first try, if not, please ping me :) |
Thanks a bunch, @DanReyLop, that did the job! 👍 💯 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM. App promo looks fine.
Good catch!
They'll be imported globally by #45724
9fc330a
to
e47e308
Compare
I vaguely remember there was something funky about importing these component styles but I can't trace now what it was: wp-calypso/client/landing/gutenboarding/style.scss Lines 1 to 3 in 6e49fb4
|
BTW you can always import sass styles as well, but you'd have to make variables available with |
e47e308
to
067433c
Compare
@jsnajdr @saramarcondes This might be something worth investigating more in Gutenberg. While wp-dmin will likely have to load this monolithic CSS file for the foreseeable future, we don’t really want to lose the ability to load styles per component in calypso. |
067433c
to
31e2a87
Compare
31e2a87
to
1a37854
Compare
@griffbrad while I agree this isn't an ideal approach, it is something that helps unblock us for now. We'd like to start using I'd very much like to start investigating solutions for being more modular with these styles and even if we want to merge this now, we'll definitely consider ways to get there in the future, both here and in the Gutenberg core. So, does anyone have any objections to merging this as-is? cc @Automattic/luna @Automattic/team-calypso |
@sgomes do I remember right that we've talked about this in context of Gutenboarding in the past? Were there some ideas written down after those convos?
No objections, and would be great to have a clear road to better situation in near-term. |
I haven't tested or reviewed this closely. No objections to the approach, I think a global fix like this makes sense at this time. Ideally, it will help continued adoption of these components. |
@simison I don't remember any conversations around making Gutenberg styles more modular, sorry. But that could very well be the fault of my forgetful brain 😄 I do recall previous discussions with regards to build-time CSS-in-JS experiments; is that what you're referring to? |
Thanks, folks! Shipping this for now, with the idea to explore a modular style import approach in mind. |
They'll be imported globally by #45724
* WIP: WordPress components gallery * Update type definition depdency version * Fix linting errors * Fit name of new page on one line Co-authored-by: Marin Atanasov <[email protected]> * Update client/devdocs/design/wordpress-components-gallery/autocomplete.scss Co-authored-by: Marin Atanasov <[email protected]> * Make autocomplete match real-world examples * Rename default exports to be more descriptive * Remove importing of WP components styles They'll be imported globally by #45724 Co-authored-by: Marin Atanasov <[email protected]>
We've started using
@wordpress/components
for some components here and there in Calypso, but there is a fundamental issue with that: we're not loading any@wordpress/components
styles yet. The reason is that the styles are decoupled from the package itself, and they're usually loaded through either of the following methods:wp_enqueue_style()
directly or as a dependency of another enqueued stylesheet - for WP environments.So this PR is including the stylesheet directly. This isn't a great solution, because that way we're including the entire stylesheet and don't benefit from tree shaking for those styles. However, improving that may and likely will require architectural changes in the way that the component styles are defined and consumed in the Gutenberg project. And this is a task for another time.
Finally, by including this stylesheet, we have to verify all the instances that use
@wordpress/components
already look well.Changes proposed in this Pull Request
@wordpress/components
stylesheet globally.@wordpress/components
stylesheet fromEditorDeprecationDialog
as it'll now be loaded globally above.Testing instructions
/read
.shouldRenderAppPromo
prop insideReaderSidebarPromo
that lives at the bottom of the sidebar.Before fixing the button height after loading the
@wordpress/components
stylesheet:After fixing the button height after loading the
@wordpress/components
stylesheet:Notes
cc @allendav @Automattic/hydra - any idea how we could repro the "Woo DNA" flow so we could test the magic login step? This also appears to be usingThanks to @DanReyLop for the testing instructions.@wordpress/components
.