Hi there
I spent a lot of time in the WP block editor for a client project this week, and learned a lot about the way CSS for blocks is handled.
Even though those last two weeks were way too short and therefore felt kind of unproductive, I enjoyed the long weekend and easter break with the family and spent some time off the computer.
Frontend Development
✨ A deep dive into the :where CSS function
The new-ish CSS pseudo-class function :where gives us the option to simplify selection of multiple elements at once. Pelumi Akintokun takes a deep dive into how the function works and shows a few example use-cases.
LogRocket – Deep dive into the CSS :where() function
🏗 Cool things to do with URLs
Alex Pounds collected some examples of URLs that are used in creative and useful ways. It’s something that is often overlooked, but could be such a nice extension to many services.
WordPress
🚀 How loading CSS for blocks differently can impact Core Web Vitals
There were some enhancements introduced in WordPress 5.8 to the way CSS styles for blocks are loaded. This article by Amsive Digital looks into the impact this can have on your Core Web Vitals. The change, which is explained in detail in the original introductory post, makes it possible to load the CSS for blocks only when a block is actually used and rendered on a page, instead of loading all the styles all the time. I only briefly tested it and in my test installation I somehow got a slightly bigger size when activating the filter, but I’m pretty sure there’s something sketchy going on with my site and will need to have a look at it again.
Amsive Digital – How New WordPress 5.8 Block Loading Enhancement Supports Your Core Web Vitals
🤓 Understanding WordPress Block CSS
While digging through and trying to customize some blocks CSS, I landed on this article by Thomas Kräftner. Actually, I’m not 100% sure everything in it is still up-to-date, but it still gives you a good overview of how block styles are being written and included in WordPress.
Thomas Kräftner – Understanding WordPress Block CSS
😵 Building your own WordPress Core Block CSS
Adding onto his first post, Thomas Kräftner explains how to completely replace the core block styles with your own. While this sounds completely overkill, and as said above, I’m not sure if it’s up to date and there might be better ways to go about this today, it’s still a fun read and I learned a thing or two about the core build processes.
Thomas Kräftner – Building your own WordPress Core Block CSS
Other / Random
🕵️♀️ Private Click Measurement – PCM
It’s the first time I heard about Private Click Measurement, PCM for short. It was introduced by WebKit this year and promises a way to measure conversions or clicks, without all the user-tracking that usually comes with it. Sounds like a good idea to me and I would love to see other browsers adapting it.
Webkit – Introducing Private Click Measurement, PCM
👋