Google’s Core Web Vitals update is forcing us to update the way we design pages. WordPress itself has modified the way it includes stylesheets. Now the list of rules that are sent along with the page is much smaller and more focused. But we need to change the way we do things as well. For a long time, we’ve been making changes to global stylesheets like “style.css” for a mere handful of elements that we may never use again. Over time, these elements accumulate and clog up our stylesheets with useless rules that aren’t used 99% of the time.
It’s time for a new way of doing things. And with the Gutenberg editor in WordPress, I believe I have found the answer – reusable blocks.
Reusable Blocks Solve the Global CSS Problem
The best way to illustrate this is with an example. WordPress has the “Table” block in Gutenberg. You can select the number of rows and columns when you create the block, and you can add a header and footer. Among other things. It’s great! Except that the default styling is pretty bland. And with certain themes, it looks downright ugly. Here’s an example:
I suppose this doesn’t look too bad. But it’s certainly not catchy! If you want to show important information in a table, it’s better to style it up a bit. But instead of putting the style rules in a global “style.css” page that will continue to get bloated, you should use a Custom HTML block instead. Now the style is inlined and will only be used when the table is actually on the page itself. No more wasted styles.
Here’s what the table looks like when it’s style a bit:
The problem, however, is that if you do this enough times on different pages, then making changes to the designs globally because messy. And if you find a better way to write the styles (or find a bug), you have to go to each block and make the change.
But this is exactly what reusable blocks are for!
Adding to Reusable Blocks
To make this work, click on the Custom HTML block after you’ve written the CSS, then click the three dots on the menu to select “Add to Reusable Blocks” as shown here:
This will bring up a dialog box asking you to give the block a name. Make it something memorable, save your changes, and you’re done!
The next time you make a table on your site, you don’t need to write the CSS all over again. Just search for the new block you created last time and insert it:
In this example, my block is called “Table Style CSS”. Insert this block and it’ll contain the same CSS you saved earlier. And the best part is that all the maintenance is in one place! And change you make to the reusable block will update the CSS everywhere else. So if you get tired of the header color and want to change it, just adjust the block and you’re done!
Here’s a screenshot of another table that I styled using the reusable style:
Manage Reusable Blocks Separately
You can manage all your reusable blocks in WordPress by visiting the following URL:
There’s no intuitive, visual way to reach this in WordPress, so I thought it best to include it as a URL. If you want, you can click the “+” icon in the Gutenberg editor, select the Reusable Blocks tab and go to “Manage Reusable Blocks”. That’ll work too.
From here, you can adjust the code in your blocks and make site-wide changes to your site without impacting your Core Web Vitals in the least!
I’m a NameHero team member, and an expert on WordPress and web hosting. I’ve been in this industry since 2008. I’ve also developed apps on Android and have written extensive tutorials on managing Linux servers. You can contact me on my website WP-Tweaks.com!