After a little more than two years of existence, we can now affirm it. WordPress and Gutenberg, its new publisher, have radically revolutionized the create/design a website, more specifically create content for the Web.
Exit editor TinyMCE and the rigidity of publishing in word processing mode, hello Gutenberg flexibility, creativity, freedom.
Launched with shyness in December 2018 (and yet WordPress's leading figure in its version 5.0), not always very well received, by the historical users in particular, the new publisher of CMS ended up conquering gradually the heart of these, and perhaps even that of the new ones webmakers, shows the utilization curve Always climbing the most used CMS in the world.
Change, but why?
1. Improve user experience
Created in 2003, WordPress did not wait until 2020 to renew itself, and it is rather in a constant way that the CMS has adapted to the uses of its users. In spite of this, we must admit: the contribution and publishing of the contents was one of the only parts of CMS to have changed very little over time. So it was time to lean on it.
In terms of publishing, Gutenberg did not create anything and it is not always necessary to reinvent good ideas when they are already there. The new WordPress editor has rather been inspired by the best emerging publishing experiences, including the clean and block edition of the Blogging Medium platform, created in 2012. Yes, the contribution in the form of blocks, Gutenberg's basic principle, already existed more than 8 years ago!
2. Dealing with competing external solutions
Many online websites have been created in recent years. Wix, Weebly, Squarespace, to name but a few, make the promise to their users to quickly and simply create their website, without any particular technical knowledge.
In terms of contribution experience, WordPress had no choice but to get closer to these promises, while retaining the specificities that made its popularity: free, open-source, flexible, expandable, documented, community, So-friendly. With Gutenberg, edition user-friendly So comes to add to this list of good points for CMS, and after two years of existence, it can be said that it is a successful bet.
3. Taking over within your own ecosystem
WP Bakery (Visual Composer for the 👴 / 👵 ), Elementor, Divi or Beaver Builder (among others) are well installed as page builders (page builders). Why? Because they meet a specific user need: to be able to contribute its WordPress content with an improved user experience, simplified and very visual.
Before Gutenberg, these needs, WordPress had never really answered natively. With his new publisher, the idea was to return to the game freed and creative publishing. Okay, but how can we dislodge these mastodons from content editing?
A gain in time and performance
Compared to its competitors, Gutenberg has a huge advantage: it is integrated into the heart of WordPress. No extension or dependency, so no extra load backoffice side, a more undeniable face to these page builders gas plants. With Gutenberg, it's easy and fast: we install WordPress, we open the backoffice, we create its content.
An easy grip
The editor is therefore technically integrated with WordPress, but it is also visually. Indeed, Gutenberg uses native WordPress components without visual overlay, unlike the page builders. No matter where it is located in the backoffice, in the edition of a page in Gutenberg mode or elsewhere, the contributor remains in the mind and native interface of WordPress permanently, which encourages to not doubt a faster learning of the use of the editor.
An approach that goes beyond mere contribution
What makes Gutenberg a different publisher is also his different approach of contribution, on the technical aspect of course, but also and especially in mind. In reality, Gutenberg is not a page builder but one content builder : the difference is slight, but it is there and important. We don't think page anymore or template with Gutenberg. We're breaking it up a little bit, we're thinking more, we're thinking content, transversality and reusability !
And it's good because that's exactly how the web is built today. At all levels, from design to development, everything is now done in component mode. Gutenberg and its blocks are totally part of this movement. The contributor thus joins the webdesigner and developer in this vision and organization of things, and it is as if everything finally became logical and coherent in the way of making the web.
With Gutenberg, all the links in the web production chain are now on the same wavelength.
4. Approving modern technologies
Faced with the arrival of ever more fluid and reactive interfaces based on the Javascript language, WordPress is offered the opportunity of a small lift, but also to take a decisive turn for its evolution. Even though the JavaScript jQuery library has been integrated into the heart of WordPress for a very long time, it will no longer be enough to pass a course.
JavaScript has evolved at exponential speed over the last 5 years, and frameworks and libraries that rely on this language as well. You will now have to look at a more solid bookshop or framework like Angular, React, VueJS (for the best known) which are finally very recent but already essential to make the web modern, light and interactive.
For Gutenberg, WordPress will choose React, an open source solution since 2013, created by Facebook, which began to come out of the lot at the time when it was necessary to make a choice. Like WordPress, React enjoys growing popularity, an important community and solid documentation. This choice will also have the advantage of attracting new specialized developers and expanding a little more the WordPress community.
Gutenberg in practice, what does it look like?
Native, additional, custom-made, reusable, embedded in composition, the block is central in the use of Gutenberg and puts itself at the service of the contribution, with almost exclusively the creativity of the contributor.
1. Block types
Native blocs
To date, Gutenberg has made approximately 70 native blocks available to the contributor. If we add to this the number of possible combinations and interlocks between them, but also the number of customization options offered for each block, the possibilities are enormous.
With all this freedom offered, one can then understand that the contributor can feel at the same time all-powerful but also perhaps a little lost, feeling that can be reinforced by the very clean interface of the publisher.
Fortunately, Gutenberg itself being extensible and well documented, it is possible to customize and optimize the editor by easily adding (in code or via an extension) some backoffice safeguards: restriction of the number of blocks available to the only ones that will be useful to you, customization of block options (for example, choices of colors limited to the site's charter), limitation of access to blocks by content type or even by contributing role.
Gutenberg's freedom is to be able to use it but also to be able to customize it as you like.
Additional blocks
Because you may need blocks not available natively, know that very many packs of blocks have been developed, in the form of extension for the majority of them, allowing you to extend fairly widely the list of available blocks base. As when you choose an extension, however, make sure that the package you choose does not degrade the quality, SEO, accessibility or even the performance of your site.
For existing extensions before Gutenberg, the adaptation to this new editor was made gradually. Today, most large extensions offer one or more Gutenberg blocks, instead of the features they previously offered in the form of short code (shortcode). Don't worry if the block of your favorite extension doesn't exist, shortcodes are always managed by Gutenberg who offers a dedicated native block.
Custom blocks
Thanks to a technically open editor, coded in the spirit of WordPress, and a complete documentation for designers/developers, know that it is quite accessible to create its own blocks, and in different ways:
- The JavaScript / React solution: consistent but time-consuming
If you want to completely blend into the user experience offered natively by Gutenberg, including live editing, then you will need to create your own Gutenberg React blocks. This solution is the most logical, as it uses Gutenberg fully, but also the most complex, as it will require advanced JavaScript and React library skills to have or acquire. - PHP / ACF solution: a little bit old school but very effective
The second solution is to use one of the most popular extensions in the community: Advanced Custom Fields PRO. ACF PRO allows the declaration and creation of blocks in PHP. With this technique, the contributor will lose a little fluidity in contribution experience, since the block editing will be done via input masks (ACF fields), but this solution will also prove to be more natural and quick to implement.
There are therefore several ways to create your own blocks, according to your language affinities, but also the time and budget you have.
2. Blocks and beyond
Gutenberg also offers contributors functionality that allows them to make the most of the use of blocks, and to make maximum use of the component concept directly from backoffice.
Reusable blocks
Reusable blocks allow to share between several pages of the site a Gutenberg block (native, additional or tailor-made) already contributed and set by the contributor. Once converted (and this is reversible), the block then joins the specific library of reusable blocks, and is immediately available for all Gutenberg content on the site.
This feature is mainly used to create a library of project-specific "pre-designed blocks", allowing the contributor(s) to save time on the contribution, while being certain to maintain a graphic homogeneity between pages.
Compositions (or patterns)
Gutenberg compositions have the same overall functioning and objectives as reusable blocks: mutualize, promote homogeneity of pages, and industrialize a little more the contribution.
Unlike reusable blocks, compositions cannot be created by the contributor from backoffice. They must be defined by the graphic charter and created in code directly in the project theme.
If the reusable blocks are rather content oriented, and intended not to contribute content several times, the compositions are instead there to allow the contributor to have predefined and elaborate layouts, which can contain one or more blocks. For comparison, a composition is in the block what a template is on the page.
A proven and approved solution
If you have to remember one thing from Gutenberg, it is that in terms of contribution, the publisher does not impose any rules: take/do what interests you. Adapt the solution to your needs and problems, and not the other way around (that was before).
Today, with almost 8 major new versions of WordPress since the release of Gutenberg, the publisher has grown, expanded and continues to refine a little more every day. Each new version of WordPress also leaves more and more room for its editor.
With the arrival very close to the full site editing (by the end of 2021), Gutenberg will then be a must and will make sense by allowing you to edit far more elements than the simple content area. The headers, feet of pages, menus, widgets (...) will in fact also be of the party.
So, because it's never too late, jump on the train and adopt Gutenberg 💪 Hey!
