Building websites in the Block Editor means you could eventually preview your design on mobile and see disaster: columns stacking wrong, navigation overflowing, fixed-width elements crushing into unreadable chunks, and plenty of other issues. I’ve trashed and rebuilt too many layouts after discovering these sort of responsive failures. This Better Block Editor review will present a plugin that addresses these exact frustrations.

I’ve spent some time testing the plugin to see whether it delivers on its promise of extending the Block Editor without the bloat of traditional page builders. Let me show you what I’ve found!

Better Block Editor Review: Fast Facts

• Better Block Editor adds responsive settings, animations, and hover effects directly to the standard WordPress editor.
• The free plugin works with any Block theme and includes a library of importable site templates.
• The plugin maintains content portability, which means deactivating it won’t break your site since everything builds on core Blocks.

Better Block Editor Review: Who Needs This Plugin

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

If you build sites, you’ll need consistent tools that work across themes without introducing dependencies that complicate delivery and handoffs. I’ve worked on too many site designs where a third-party page builder is overkill. In fact, my own preference is to use the Site Editor now (although my own site uses Genesis still) because I want consistency. Similarly, Better Block Editor keeps things native and familiar.

It could be that you understand basic Block Editor concepts but need visual controls for responsive layouts. Writing media queries might not be in your skillset, but Better Block Editor gives you those controls right where you expect them.

If you’re like me, you could prefer to stay within the existing WordPress and Block Editor ecosystem due to the time you’ve invested to learn these native tools. I’m in this camp and I value content portability above everything else.

Better Block Editor makes most sense when you value that portability. Your pages can continue working if you deactivate BBE since everything builds on core Blocks rather than proprietary components.

Better Block Editor Review: The Core Benefits That Change Your Workflow

Better Block Editor can solve some day-to-day problems where the Block Editor’s capabilities fall short. For instance, mobile layouts can become manageable through breakpoint-specific settings. It’s a similar situation for navigation menus with precise collapse breakpoints.

I’ve had some instances where a theme’s default navigation will often break on tablets or create awkward layouts when adding header buttons. However, Better Block Editor will let you define exactly when the menu icon appears and customize hover colors for menu items. I could see myself using this for future projects.

There’s also an indirect benefit related to visual engagement. On-scroll animations and hover effects could help you highlight pricing tables, while the same visual interest can create some interest as a user scrolls down landing pages. These effects work through visual controls rather than custom code.

Better Block Editor Review: Looking at the Key Functionality

The plugin adds responsive settings across Row, Stack, Grid, Columns, and other supported Blocks through a dedicated panel in the editing sidebar. Each Block type offers relevant options: For example, Row Blocks 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 matching your design requirements through the Breakpoints Manager. I could see how adding a Large Desktop breakpoint at 1,400px might help sites with significant desktop traffic, for example.

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

As I’ve touched on, you can give the Navigation Block specific controls where you set the exact pixel width where the menu collapses to a hamburger icon. Also, menu and submenu items accept custom hover colors through color pickers, which can help maintain brand consistency.

Away From Breakpoints

Of course, Better Block Editor offers more than complex breakpoint management. The Buttons Block accepts orientation, justification, and vertical alignment settings for any breakpoint you get.

So, you could stack buttons vertically on mobile while keeping them horizontal on desktop, for instance. Individual Button Blocks get hover color controls customizing how each button responds to user interaction.

If you use on-scroll animations, you can apply them to every Block through a dedicated panel that lets you choose from seven animation effects and 15 easing options. The duration and delay controls let you create staggered animations where elements appear sequentially.

Something to note is that animations load only when BBE detects them on a page through a dedicated API. It means the performance impact can be minimal.

Finally, you can get a headstart in your designs through the Site Templates screen. This is a separate screen so you’ll need to come out of the Site Editor to access it.

The import process brings in all pages, assets, and design settings in one click. However, you can also copy individual elements to the clipboard to paste into your other pages. I like this: 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 typical 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 show on supported Blocks and will vary based on Block type.

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

The general workflow is to select a breakpoint from the responsive preview options in the editor toolbar, which will show how your page appears at that screen width. The cascading system means desktop settings serve as the defaults, which you then override at smaller sizes.

Mobile-first approaches are more popular and it’s definitely important. However, my sites often see traffic primarily from desktops so I design with this in mind then adjust for mobile-specific issues. Better Block Editor’s cascading approach feels natural within this workflow for me.

Applying Responsive Settings and Creating Animations

For the Responsive Settings panel, select a Block, open the sidebar, and choose which aspect you want to adjust. For a Row Block, this might be changing orientation from horizontal to vertical. The breakpoint selector at the top of the panel shows which screen size you’re currently modifying.

These settings will remain at 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 see how changes cascade through different screen sizes. This takes some getting used to but becomes second nature after a few uses.

The Animation on Scroll panel appears for every Block. Here, choose 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 shows animations without leaving the editor. This speeds up the process of adjusting timing and checking how effects look in sequence.

Better Block Editor Review: Support and Documentation

Because Better Block Editor is completely free, support is through the WordPress Plugin Directory forums. As for documentation, there’s a dedicated site that covers practically all of the functionality with explanations of key concepts, usage instructions, and practical examples.

This documentation splits into different sections for Basics, Responsiveness, Visibility, Hovers, Animation, and Templates. While there isn’t a lot of detail for many of the pages, I’d argue you don’t need it. Anyway, most pages offer a video walkthrough of the functionality, which is excellent to see.

Better Block Editor Review: My Final Thoughts

In short, I’m a fan! Better Block Editor succeeds for me in extending the Block Editor with responsive controls and visual effects while maintaining content portability. The responsive settings solve real problems that don’t need you to write CSS.

What’s more, your content remains compatible with core WordPress Blocks. If you’re committed to the WordPress ecosystem as I am but want responsive design capabilities without page builder dependencies, this is a plugin you should consider.

Related Articles

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