Better Block Editor Review: Mastering Responsive Design in WordPress

Building websites within the Block Editor often leads to a frustrating revelation during mobile previews: columns stacking incorrectly, navigation overflowing, fixed-width elements becoming unreadable, and a host of other responsiveness issues. I've personally had to scrap and rebuild numerous layouts after encountering such failures. This Better Block Editor review will introduce a plugin specifically designed to address these common frustrations.

I've thoroughly tested the plugin to assess whether it delivers on its promise of extending the Block Editor's capabilities without the typical bloat associated with traditional page builders. Let's dive into what I discovered!

Better Block Editor: Fast Facts

Better Block Editor directly integrates responsive settings, animations, and hover effects into the standard WordPress editor.

• The free plugin is compatible with any Block theme and includes a library of importable site templates.
• It ensures content portability, meaning deactivating the plugin won't break your site, as everything is built upon core WordPress Blocks.

Better Block Editor Review: Who Needs This Plugin?

The native Block Editor provides some fundamental responsive capabilities across various viewports (grouped into Desktop, Tablet, and Mobile views), but it lacks precise control over how Blocks behave at different screen widths.

If you build websites, you require consistent tools that function across themes without introducing dependencies that complicate project delivery and handoffs. In my experience, a third-party page builder is often overkill for many site designs. My personal preference now is to use the Site Editor (though my own site still uses Genesis) for the sake of consistency. Similarly, Better Block Editor keeps the development process native and familiar.

You might understand basic Block Editor concepts but require visual controls for responsive layouts. If writing custom media queries isn't within your skillset, Better Block Editor provides those essential controls exactly where you expect them.

For those like me who prefer to stay within the existing WordPress and Block Editor ecosystem due to the time invested in learning these native tools, content portability is paramount. Better Block Editor makes the most sense if you prioritize this portability. Your pages will continue to function seamlessly even if you deactivate BBE, as everything is built on core Blocks rather than proprietary components.

Better Block Editor Review: Core Benefits That Change Your Workflow

Better Block Editor effectively solves everyday problems where the Block Editor's native capabilities fall short. For instance, managing mobile layouts becomes significantly easier through breakpoint-specific settings. The same applies to navigation menus, which gain precise collapse breakpoints.

I've encountered situations where a theme's default navigation breaks on tablets or creates awkward layouts when header buttons are added. Better Block Editor allows you to define the exact pixel width at which the menu icon appears and customize hover colors for menu items. This is a feature I foresee myself using for future projects.

An indirect benefit is enhanced visual engagement. On-scroll animations and hover effects can help you highlight elements like pricing tables, while also creating visual interest as users scroll down landing pages. Crucially, these effects are managed through visual controls, not custom code.

Better Block Editor Review: Key Functionality

The plugin introduces responsive settings for Row, Stack, Grid, Columns, and other supported Blocks via a dedicated panel in the editing sidebar. Each Block type offers relevant options: for example, Row Blocks can change orientation from horizontal to vertical at specific breakpoints, and Grid Blocks adjust column counts as screen size changes.

You'll typically work with preset breakpoints (Mobile, Tablet, Desktop) or define custom breakpoints to match your design requirements using the Breakpoints Manager. For instance, adding a 'Large Desktop' breakpoint at 1,400px could be beneficial for sites with substantial desktop traffic.

Responsive visibility controls allow you to show or hide any Block based on device type or custom breakpoints. You can set a default visibility state and then modify it at specific breakpoints. This addresses common scenarios such as hiding desktop-specific content on mobile, removing large images on smaller screens, or displaying alternative navigation elements at different sizes.

As mentioned, the Navigation Block gains specific controls where you can set the exact pixel width for the menu to collapse into a hamburger icon. Additionally, menu and submenu items support custom hover colors via color pickers, aiding in brand consistency.

Beyond Breakpoints

Better Block Editor offers more than just complex breakpoint management. The Buttons Block, for example, accepts orientation, justification, and vertical alignment settings for any breakpoint. This means you could stack buttons vertically on mobile while maintaining a horizontal arrangement on desktop. Individual Button Blocks also feature hover color controls, customizing how each button responds to user interaction.

For on-scroll animations, you can apply them to every Block through a dedicated panel offering seven animation effects and 15 easing options. Duration and delay controls enable you to create staggered animations where elements appear sequentially.

It's worth noting that animations load only when BBE detects them on a page via a dedicated API. This design choice ensures minimal performance impact.

Finally, you can jumpstart your designs using the Site Templates screen. This is a separate screen, so you'll need to exit the Site Editor to access it.

The import process brings in all pages, assets, and design settings with a single click. Alternatively, you can copy individual elements to your clipboard for pasting into other pages. I particularly appreciate this feature; it's intuitive and straightforward to use.

Better Block Editor Review: How to Set Up and Use the Plugin

You install and activate Better Block Editor as you would any other plugin from the WordPress Plugin Directory. The panels that the plugin adds to the Block sidebar for Responsive Settings, Visibility, and Animation on Scroll will only appear on supported Blocks and vary based on the Block type.

The top toolbar gains two new buttons: one toggles the visibility of hidden Blocks at the current breakpoint, and another previews animation effects on the current page. Block styles also acquire Hover Color controls and conditional Prevent Shrinking options.

The general workflow involves selecting a breakpoint from the responsive preview options in the editor toolbar, which then displays how your page appears at that specific screen width. The cascading system means desktop settings serve as the defaults, which you then override for smaller sizes.

While mobile-first approaches are increasingly popular and undeniably important, my sites often receive primary traffic from desktops. Therefore, I design with this in mind and then adjust for mobile-specific issues. Better Block Editor's cascading approach feels very natural within my workflow.

Applying Responsive Settings and Creating Animations

For the Responsive Settings panel, select a Block, open the sidebar, and choose the aspect you wish to adjust. For a Row Block, this might involve changing its orientation from horizontal to vertical. The breakpoint selector at the top of the panel indicates which screen size you are currently modifying.

These settings will retain their default values until you explicitly change them for a specific breakpoint. Visual feedback appears immediately in the editor preview, though you need to switch between breakpoint views to observe how changes cascade through different screen sizes. This takes some getting used to but quickly becomes second nature.

The Animation on Scroll panel is available for every Block. Here, you can select an animation type, set the duration in milliseconds, and add a delay if you want to stagger the effect.

The preview button in the toolbar allows you to view animations without leaving the editor. This significantly speeds up the process of adjusting timing and checking how effects appear in sequence.

Better Block Editor Review: Support and Documentation

As Better Block Editor is entirely free, support is provided through the WordPress Plugin Directory forums. For documentation, there's a dedicated website that comprehensively covers virtually all functionality, offering explanations of key concepts, usage instructions, and practical examples.

This documentation is organized into sections for Basics, Responsiveness, Visibility, Hovers, Animation, and Templates. While many pages might not offer extensive detail, I'd argue it's often unnecessary. Crucially, most pages include a video walkthrough of the functionality, which is an excellent addition.

Better Block Editor Review: My Final Thoughts

In short, I'm a fan! Better Block Editor successfully extends the Block Editor with essential responsive controls and visual effects while preserving content portability. The responsive settings solve real-world design problems without requiring you to write custom CSS.

What's more, your content remains fully compatible with core WordPress Blocks. If you are committed to the WordPress ecosystem, as I am, but desire advanced responsive design capabilities without relying on page builder dependencies, this plugin is definitely worth considering.

Related Articles

• Responsive Images in WordPress
• The 60/30/10 Rule
• WordPress Full Site Editing (FSE)

Does this Better Block Editor review provide the insights you need for your WordPress designs? Share your thoughts with me in the comments section below!

Try Better Block Editor (BBE)

Written by Tom Rankin

With a discerning eye for detail and a passion for innovation, Tom brings a wealth of knowledge to the table in WordPress products and content creation. His expertise, honed over years of hands-on experience, has solidified his reputation as a leading figure in the WordPress ecosystem.