One thing that annoys me with the native block editor of WordPress, Gutenberg, it that it doesn’t include media queries settings out of the box.
This is an essential feature. Most WordPress users don’t know how to code, so they can’t easily refine blocks to apply responsive fixes.
If you’re running a business website and aren’t familiar with this term, media queries are what make your site look consistent across all sorts of screen resolutions: on phones, tablets, and desktops.
Without media queries, your website would work on a specific screen resolution and displayed as completely broken on other devices. There are strategy to write responsive CSS without media queries. However you can’t expect this from the current blocks included with Gutenberg.
When your site doesn’t display properly on your users’ phones, you’re losing sales.
If you use Gutenberg, there’s an easy and free solution for this on WordPress: Generate Blocks. This plugin adds 6 key blocks, and all of them include settings to target specific screen sizes when necessary.
Even without technical experience, with Generate Blocks you can build three different versions of each block: “All screens”, “Tablets”, and “Mobile”.
Quick Overview
- There’s a pro version, but honestly, I never needed it. All the essential features are included in the free version of Generate Blocks.
- It’s a lightweight plugin that doesn’t bloat your website.
- You will use mostly 2 of 6 blocks included in Generate Blocks, and this is incredibly helpful. Once you learn how to use them, you will easily build responsive layouts, and you can build endless designs that normally in WordPress will require custom coding, or custom CSS fixes.
How to use Generate Blocks
The fundamental two blocks of this plugin are the Container, and the Grid. Here’s what you can do whenever you need to refine a page section to apply responsive fixes to it.
- Add to your page a Container or a Grid block, depending on what you’re trying to build. You can find 1-minute guides about them here for the Container block and on this page for the Grid block.
- The first thing you will notice when you look at the block settings on the right side of your editor, is that these blocks include several extra options: background, borders, spacing settings, and way more.
- After adding this block to your page, drag the content and the other blocks you need inside this new wrapper.
- Click again on the new Generate Block you just added. First, tweak its settings for desktop and larger screen. Test your website, and check if the layout looks as expected.
- After the desktop version is ready, try to visit that same page with other devices: preferably a tablet, and then a smartphone. You can then apply your fixes first on tablet devices and then on smartphones (in this exact order), by clicking on the menu indicated in the image below.
In brief, you should build the layout for desktop first, then tweak it for smaller screens as needed.
For complex layouts, you might still need professional help. But this plugin has saved me countless hours of work, and I’ve seen it do the same for business owners who manage their own websites.
You can download this plugin here from the official WordPress repository.
Getting responsive design right directly affects your ability to attract and convert customers. Right now the native WordPress blocks are responsive, but they’re not always precise when it comes to building your layout, sometimes they’re broken on specific devices. And you can fix this with Generate Blocks.
If you have any questions or something is not clear, leave a comment below.
I’ve also created a video on my YouTube channel about Generate Blocks: