WordPress Responsive Design in 2024 - the good and the bad!

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.

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 !”

Ciao!
Jakson

#wordpress #blockthemes #pagebuilder #wordpressdevelopment

[DiegoPereyra]

Cool...
I´m enjoying your channel very much, great presentation and delivery.
Thank you!

[calebmatteis]

This is awesome!!! Jakson thank you, sir.

[vishalmukadam]

When I watched your previous video about Transparent background with Twenty Twenty
Four Theme, I choose to go with CSS way to do it but when I check the responsiveness it was breaking so added additional CSS.

[Sonya_Makepeace]

I want to be able to use a certain Hero image for desktop, then a different one for tablet and phone. But this isn't possible using the block theme.

[Whatreally]

Hi,

I created a custom block using one of the core blocks. Added few extra lines of code generated from ChatGPT. I am no developer. However, the plugin folder is huge around 250mb. the zip file is itself around 70mb. I created the custom block locally on WP Studio and VS Code. How do I export the plugin to be installable but not be so huge in mb?

[JimKernix]

Every CSS rule has !important? I don't think that's good.