Gutenberg Blocks

WHY IS IMPORTANT?

First, it is necessary to understand the flexible content approach.

Any page/post type in WordPress comes with a Rich Text editor by default. This is quite limited and exists in two ways to extend this functionality and create different block types like galleries, links, quotations, etc.

1. Third party blocks builder plugins like Visual Composer, are a good tool for small websites self managed. They give the user flexibility to play with the layout.

But for a very bespoke website with a complex design concepts, these kind of plugins are very rigid and can create a lot of bloated code that will harm the performance.

2. ACF Flexible Content gives developers the flexibility required to build whatever the conceptual design requires, no bloated code added, easy to maintain and a better approach for the administrators to add engaging content.

The second option became the most popular on bespoke WordPress development, but the demands of nicer and highly customisable content are creating more abstraction between the website frontend and the admin area in the WordPress CMS.

Gutenberg blocks that are built using React and WordPress REST API are filling this gap, bringing the frontend view layout to the admin area – it feels like you are editing your website, rather than editing data in a CMS that does not feel like the website.

With this improvement you can change the background colour or the width of your block and see how will look for all the users immediately, rather than saving and then going to the website to view – a big advantage.

NEXT STEP?

This looks obvious, move all the custom flexible content blocks already built to custom Gutenberg blocks.

Sounds easy, but there are a bunch of questions that we need to solve during the process to deliver the best experience for content editors without sacrificing customisation options, performance and maintainability.

At Fanatic we have begun an R&D project to experiment with how Gutenberg should be used, and its limitations. We would like to find an approach, given the added flexibility, that still allows for easy editing in a way that is not overbearing to the typical website editor, but delivers an effortless flow to the website editing which will feel more live, and connected to the front end.