Dos & Don'ts for the WordPress Block Editor
New Post has been published on https://thedigitalinsider.com/dos-donts-for-the-wordpress-block-editor/
Dos & Don'ts for the WordPress Block Editor
The WordPress Block Editor continues to improve. Each new version contains something worth celebrating.
The tool has empowered content creators and designers. You no longer need additional plugins to build a functional page layout. WordPress core includes just about all the basics. Need something more? There are plenty of ways to extend the editor, too.
None of this makes the Block Editor foolproof, however. Itâs still easy to paint yourself into a virtual corner. A simple mistake can mean more difficult maintenance â particularly when clients are involved.
Iâve built quite a few sites with blocks. And not every decision was a good one. Yes, Iâve created a few messes. Cleaning them up can be time-consuming.
Today, Iâm going to share a few things Iâve learned. May these lessons help you avoid a similar fate!
The WordPress Developer Toolbox
WordPress Themes, WooCommerce Themes, Plugins, Web Templates, Newsletter Templates, and much more!
Do: Think about Future Maintenance Needs
Page layouts donât last forever. They must adjust as our content needs evolve. The Block Editor can act as a trap in these situations.
Consider a companyâs staff listing, for example. Letâs say our client wants to display each personâs name, title, and photo.
It sounds simple. We can use the Columns block to create a beautiful and responsive layout. The page looks perfect. But what happens when we need to make changes?
Staff members come and go. Yes, we could replace the departed staffers with the new ones. Then again, our client wants them to display in alphabetical order. The required changes donât follow suit. What do we do now?
The options are less than ideal. We could edit the blockâs code to rearrange each column. Or we could reconstruct the layout from scratch. Both possibilities are rife with peril. OK, perhaps Iâm being a bit dramatic. But itâs not fun.
A custom block may be a better solution. Using Advanced Custom Fields PRO, you could create an interface that allows for easier maintenance. Adding, deleting, and rearranging the list would be built into the block. Thereâs no need to reinvent the wheel when making changes.
The lesson is to think about the future maintenance needs of your layout. Then, implement a strategy that will allow for changes. Youâll be glad when the time comes.
Donât: Allow Users to Switch between the Block and Classic Editors
The WordPress Classic Editor is still alive and well. Millions of websites are using it. Thatâs OK. Thereâs nothing wrong with using a tool youâre comfortable with.
However, mixing the Block and Classic editors can be messy. The Classic Editor plugin has a setting that allows users to switch between editors. You might want to leave this feature turned off.
Letâs say youâve built a complex layout using the Block Editor. But your client doesnât like blocks. Or they arenât familiar with them. They decided to edit this page using the Classic Editor. Hilarity (or tragedy) ensues.
Then, you edit the page and switch back to the Block Editor. You see numerous errors stating that blocks contain invalid content. The âAttempt Block Recoveryâ feature doesnât work. It looks like you have a mess on your hands.
Too much can go wrong in this scenario. Thus, donât allow users to switch between editors. Itâs an accident waiting to happen.
Do: Choose Third-Party Block Plugins Carefully
There are a multitude of plugins for extending the Block Editor. Many of them offer a suite of custom blocks.
Thatâs a good thing. The core blocks included with WordPress arenât always flexible. Thus, installing a custom block may be of help. But itâs worth scrutinizing them first.
Custom blocks are plugins, after all. They can vary in terms of features and quality. The same rules apply when choosing the right one.
Only install what you need. Study each pluginâs reviews and changelog. And remove any block plugins you arenât using.
Whatâs the danger? The wrong plugin could cause bugs or performance issues. Plus, security is always a concern.
Third-party blocks require a commitment. Be sure that youâre ready to take that step.
Donât: Edit Blocks as HTML
The Classic Editor made it easy to switch between visual and code editing. You might use this feature to add HTML or a CSS class. There were some hiccups, but it worked well enough.
The Block Editor has a similar feature. Blocks have an âEdit as HTMLâ interface. You can access it via each blockâs options menu.
I never understood the purpose of this feature. Thatâs likely because I always end up breaking something. Adding a CSS class, for instance, triggers an error when switching to the Visual editor.
A "This block contains unexpected or invalid content" error is displayed. From there, I have to go back in and remove the class. The same issue happens when adding other types of content as well.
Therefore, it may be wise to consider editing block HTML as off-limits. Thereâs more risk than reward.
Plus, you can use the Custom HTML block for similar tasks. Add HTML, CSS, or even JavaScript into the field. You wonât break it!
By the way, you can add CSS classes to blocks via the Advanced tab in the settings panel.
Do: Use the Block Editorâs List View Feature
WordPress allows us to nest blocks inside each other. And blocks are portable. You can drag them anywhere on the screen. That can result in some undesired effects.
For instance, moving blocks to a new spot can be difficult. Itâs easy to make a mistake. The wrong move could undo a lot of hard work.
The List View feature can save you a lot of headaches. It provides a visual outline of each block on your page. It even works with nested blocks.
Even better, you can easily reposition blocks directly within List View. Click on a block and drag it to the desired position. Need to move multiple blocks? Thatâs also possible.
The user experience is infinitely better than wrestling with the editor. Youâll have a better sense of where you are on the page. And it will likely make for easier edits.
Do: Keep Experimenting with the Block Editor
The Block Editor isnât perfect. Like all editors, it has some quirks and annoyances. But itâs still worth testing the limits.
Thatâs often the best way to learn. So, create a local website and experiment. See what works and what doesnât. But donât limit yourself to a single test.
The user experience is evolving. Thus, a technique that didnât work last time may now be possible. You might even install the Gutenberg plugin to get a taste of whatâs coming in future releases.
Doing so will serve you well. Youâll be able to build layouts that stand the test of time. And you might be surprised at what you can accomplish using blocks.
