Malabar Design gives you its first impressions and talks to you about the impact of this new element in the WordPress ecosystem.
Gutenberg is a tool that enhances the possibilities offered by the classic WordPress editor to easily insert preformatted content, without having to act on the code. It is therefore supposed to allow you to create more complex formatting for your content, without having to go through the HTML box. Available until now in the form of a plugin to install, you will now have no choice but to use it… unless you download an extension to deactivate it. Gutenberg is now the new content editor for your WordPress pages.
Gutenberg: Expanding the Field of Possibilities
From a UX perspective, where you used to have to settle for a single field to populate, Gutenberg now lets you manage your post content line by line, choosing from the various predefined content blocks presented.
Gutenberg presents 5 groups of content blocks:
- Commons : basic blocks: titles, paragraphs, lists, quotes, images…
- Formatting : the different formats in which you can write your content: classic, HTML, source code, preformatted text, etc.
- Layout : blocks for structuring content: separators, columns, buttons, spacing, mixed text/image content, etc.
- Widgets : blocks allowing you to directly integrate content from WordPress widgets into your posts.
- Embed : content embedded from other platforms (YouTube, Flickr, Twitter, Tumblr, etc.).
We immediately see the interest of this mode of operation by dedicated blocks: the user is guided as much as possible to format his content. By stacking the lines of blocks, themselves segment able into columns of blocks, the WordPress post editing interface now opens the field of possibilities to the average user and this without having to touch a line of code since all the blocks are rendered in front by the single PHP instruction.
To learn more, visit the extension website: https://wordpress.org/gutenberg/
Gutenberg: Addons for the Addon
At first glance, Gutenberg seems very attractive. However, after a few hours of testing, we quickly realize that the new possibilities offered will quickly come up against a need that was not anticipated. For example, the proposed image gallery, although very easy to feed, does not have a very attractive rendering. The images are displayed in a grid that is not very configurable and the links to see each image in real size open in the same window… We are therefore still far from the slide shows that allow us to make the display of this type of element more digestible and dynamic…
The customization of modules is therefore often too limited. It is not possible to act on the margins of the blocks, to decide whether a column line should stack from such a breakpoint…
Therefore, it will be necessary to quickly consider adding an extension to Gutenberg to enrich the existing one. There are already a good number of them on the market. For example, Advanced Gutenberg allows you to expand the blocks to the following elements:
- 1. Accordion
- 2. Advanced button
- 3. Advanced Image
- 4. Advanced List
- 5. Advanced Table
- 6. Advanced Video
- 7. Contact form
- 8. Container
- 9. Counter
- 10. Image Slider
- 11. Map
- 12. Newsletter
- 13. Recent articles
- 14. Social Media Link
- 15. Summary
- 16. Tabs
- 17. Testimonials
- 18. WooCommerce Products
This addon also allows you to display the editor in full width on the admin page, to create user profiles in order to restrict access to the different blocks, and to create default templates so as not to need to set the right colors each time you insert a button for example.
Gutenberg: a tool within everyone’s reach?
With its ultra-clean interface, the first use of the tool can be confusing. The action buttons only appear when rolled over or clicked. The blocks are presented almost as they will be displayed on the front, without adding a grid that would allow to better distinguish the positions of each. If the efforts made to lighten the interface are to be commended, the fact remains that for an inexperienced user, placing your block in the right place can be quite difficult, especially if the nesting of the blocks is a little advanced.
Also, each new page must be filled “from scratch”. The publisher has more interest in knowing what content is to be placed and what Gutenberg elements have been used for other similar pages of the site.
Gutenberg: a tool to put in everyone’s hands?
Giving the publisher complete freedom regarding the formatting of their editorial content, on paper, everyone approves. But the reality on the ground can be quite different. At Malabar Design, when a client entrusts us with the development of their website on a WordPress base, our creative team puts all its heart into establishing a graphic charter and page templates dedicated to their universe, to best serve the content they have to offer.
In a multi-device context (the same page must adapt to the device on which it is viewed) where UX is at the forefront, the page templates we create tend to go beyond the often too conventional framework proposed by blog-type CMSs. Therefore, even with a powerful Page Builder, letting the client build their page by themselves would herald at least two problems:
- The client does not have time to dig into the possibilities offered by a tool. They are mostly looking for a ready-to-use solution that will guide them in structuring their content in accordance with the page templates validated during the design of the site.
- Compliance with the Graphic Charter cannot be done effectively if the entire style must be reapplied to each new line. Colors, font size, icons… leaving the scope for action on these properties will inevitably lead to non-compliance with the graphic charter.
Gutenberg: the best solution?
When you do a beautiful HTML / CSS integration to the pixel of a very creative DA, you really don’t want it to be spoiled by too many constraints in terms of feeding the content via the administration tool. To avoid this, Malabar Design creates an overlay on the WordPress page and post editing page. With a plugin like Advanced Custom Fields Pro, the devs spend part of the project time cutting the content into elementary elements and transposing this cutting onto the administration interface using dedicated fields set up using the ACF plugin. This is a significant and time-consuming step (you also have to intervene on the front end to print each field in the expected place on the page template) but which is the assurance for the client to have a simple, intuitive tool (therefore requiring a minimum of training), guaranteeing compliance with the templates and the charter. Everything is already there, all that’s left to do is fill it in!
So should we abandon everything in favor of Gutenberg? Certainly not. We could, if necessary, customize the classes printed on the front for the elements inserted via Gutenberg in order to put them by default in the charter, but the work for the editor would remain far too substantial and the content management process would represent a far too large amount of work for the client.
Gutenberg: but what to do?
Yes, but whether we like it or not, Gutenberg is there, by default, ready to draw. Should we remove it straight away? Not necessarily. Page Builders and other plugins designed to enhance content administration possibilities are or will soon be compatible with the Gutenberg editor. It is therefore practice that will determine the trend in terms of usage. And this may well depend on the topology of each site. A site presenting mainly “news” type content on a “classic” layout will most certainly be able to satisfy itself with the possibilities offered by Gutenberg, possibly coupled with an addon. A brand site, where work on the form is more demanding, will continue to require a more personalized administration interface that limits the user to what is provided by the page templates and the style of the charter.
An experimental period is coming, where Pages Builders and Gutenberg will coexist to find the best balance according to the scenario. The specificities of each need will not fail to make the editor evolve in its next versions.