It’s very possible you will have come across a topic that’s been quite high on coverage since the dawn of Full Site Editing and WordPress Block Theming, and that is the lack of responsive controls for blocks in the Gutenberg editor. Specifically things like padding, margin, sizing and spacing at different screen sizes – you know, what we know as “responsiveness”
In pretty much every critique of FSE there will invariably be a reference to this apparent shortcoming – and on paper it is a blatant oversight by the WP core dev team to have left out this now ubiquitous functionality available in every other WordPress page builder. WP core FSE is a page builder, right?
But hang on, surely there must be a reason for this? I mean, if something like responsive control is a given in a modern page builder, why is it missing from WP core?
There is a reason – and that is that WP core has wedded itself to the new-ish “Intrinsic Web Design” methodology – a concept (and the name) introduced to the world by Jen Simmons back in 2018.
It does away with the now traditional media queries approach using breakpoints to load specific CSS at specific screen sizes that creates the responsive mobile-first sites we know today and instead uses the newer CSS math functions min(), max() and clamp() to adjust sizing in a super fluid way – the elements and spacing don’t jump to different sizes when you hit a certain pixel screen width they flow and change with every change in width – it’s really is rather cool.
If you’re not up to speed on what “Intrinsic Web Design” is then I encourage you to pause this video, and check out Brian’s excellent 101 video here: https://youtu.be/ZXJJgxJ_h7o
So it works super well but as Brian says, fluid spacing and typography can only get us 90% of the way there and in today’s vid I’m gonna show you what to do about the other 10% with a system I’ve been using and developing ever since I’ve been creating native block themes.
So let’s get to it – it’s “WordPress Responsive Designs in 2024 !”
👉 *** Grab all the code from this tutorial and tons of other Free WordPress goodies here: https://jakson.co/freebies/
👉 *** Get a Free Site Performance Review here: https://jakson.co/free-site-performance-review/
Ciao!
Jakson
#wordpress #blockthemes #pagebuilder #wordpressdevelopment
Leave a Reply