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.

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

Jump to bottom

Only load assets for existing blocks on the frontend #25742

Closed
3 tasks
aristath opened this issue Sep 30, 2020 · 4 comments
Closed
3 tasks

Only load assets for existing blocks on the frontend #25742

aristath opened this issue Sep 30, 2020 · 4 comments
Labels
CSS Styling Related to editor and front end styles, CSS-specific issues. [Feature] Themes Questions or issues with incorporating or styling blocks in a theme. [Type] Performance Related to performance efforts

Comments

@aristath
Copy link
Member

aristath commented Sep 30, 2020 •
edited
Loading

This is a continuation of #5445. That issue has grown too much to be usable and it's difficult to get an overview without reading 50+ long threads.

The gist and what we want to accomplish is to only load styles and scripts for blocks that exist on a page when rendering that page on the frontend. There are many ways to accomplish that, and #22754 implemented it for 3rd-party blocks successfully.
However, core blocks don't currently do that and instead we load a monolithic stylesheet with styles for all blocks.
With Full Site Editing coming soon, this becomes increasingly important for future sustainability.

Steps we need to take in order to accomplish this:

  • Split compiling block styles, so each block has its own stylesheet.
  • Register stylesheets for all core blocks
  • Tweak the block.json files for all blocks, to include references to the stylesheet handles
@aristath aristath added [Feature] Themes Questions or issues with incorporating or styling blocks in a theme. CSS Styling Related to editor and front end styles, CSS-specific issues. [Type] Performance Related to performance efforts labels Sep 30, 2020
@aristath
Copy link
Member Author

aristath commented Oct 2, 2020

I currently have 2 PRs with completely different implementations.
Both of them work, they both accomplish what we need, and they do it in completely different ways.

#25220

In this PR the pre-existing structure and calls are used. It adds stylesheet definitions to block.json files for all blocks and enqueues the separate files both on the frontend and the editor.

#25118

In this PR a new WP_Block_Styles was added, and blocks can load their assets inline, inject them in <head>, add them in the footer, or even add as in inline link. Each block can have multiple stylesheets, and each stylesheet can have a different loading method.
It is by far the most performant and sustainable option.

CC @youknowriad

@youknowriad
Copy link
Contributor

This is something that needs a lot of eyes on it. cc @mcsf @mtias @saramarcondes @jorgefilipecosta @gziolo

At first sight, I have more a preference for the first approach, as it's more declarative and controlled and can scale well to JavaScript as well. There's no reason to not load the JS of each block (if existing) separately as well.

@aristath
Copy link
Member Author

aristath commented Oct 2, 2020 •
edited
Loading

At first sight, I have more a preference for the first approach, as it's more declarative and controlled and can scale well to JavaScript as well. There's no reason to not load the JS of each block (if existing) separately as well.

Ideally I'd like to have a mix of both.
From the 1st one (#25220) I like the syntax and the fact that it's something we already have.
From the 2nd one (#25118) I like the loading methods and the freedom.
One of the problems I have with the 1st one is that it enqueues styles and forces the browser to make additional requests. These are some of the file sizes:

Block Size (bytes)
audio 230
columns 1360
cover 9935
group 158
paragraph 481
social-links 8250

With that in mind, there is absolutely no reason to make an additional request in the browser to get the stylesheet for a paragraph block or an audio block... They are both too small and inlining them would make a lot more sense. Fewer requests, faster response times. For the cover block or social-links it makes sense to load them as stylesheets, they are 8kb+.
But if I have a post that contains a group block and paragraphs inside it, there is no need to make any additional requests, the browser can get the page, serve it and render it all in a single request.

That is the part I like most about the 2nd implementation

@aristath
Copy link
Member Author

Closing this one, #25220 was merged.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
CSS Styling Related to editor and front end styles, CSS-specific issues. [Feature] Themes Questions or issues with incorporating or styling blocks in a theme. [Type] Performance Related to performance efforts
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@youknowriad @aristath