Gutenberg

Gutenberg is perhaps the most controversial project in WordPress history. Throughout its development cycle, excitement and optimism gave way to hate and fear. When Gutenberg became available as a plugin, it brought very strong reactions on both ends of the spectrum, but the majority of feedbacks were utterly negative. With the recent release of WordPress 5.0, Gutenberg is now officially part of the core software. While this will not calm thing down, it was unavoidable to move things forward – or toward an exciting new future as phrased by WordPress.

What is Gutenberg?

Gutenberg is the code name of the new editor for WordPress that replaces the TinyMCE editor. Gutenberg completely changes the editing experience by using the concept of blocks, which are small drag-and-drop units. Indeed, instead of a large blank canvas, content is broken up into a series of individual blocks that are independent from the content as a whole¹. Each piece of content – headings, paragraphs, images, quotes, and so on – has its own block type with its own properties, features and abilities. You can manipulate each block individually, i.e. customizing its content and layout, and organize the blocks on the document – either a post or a page – (almost) as you wish.

Is it really worth it?

The least one can say is that calling the new editor after Johannes Gensfleisch zur Laden zum Gutenberg is quite pretentious. The introduction by the latter of the movable-type printing press in Europe is regarded as a milestone of the Printing Revolution. This was instrumental in giving access to knowledge and had a profound impact on society. Is the new editor in line with its ambitions?

In its current form, WordPress allows you to create as rich a post layout as you can imagine – provided that you know 1) Hyper Text Markup Language (HTML) and 2) Cascading Style Sheets (CSS) and that you 3) build your own custom theme. These skills are not, one can admit, within everyone’s reach! I am not a web developer, yet, when I started my podcasting adventure, I had to learn some basics on web languages as recounted below.

The Visual editor (the default editing mode of the previous TinyMCE editor) was, and still is, far from satisfactory – that is very limited – and I didn’t want to depend on plugins to add more functionality to it. Instead, I resolved its shortcomings by using the Text editor (the second editing mode available), which allows to edit the HTML structure of the post content. However, switching between Visual and Text view was causing some of my HTML to be changed or lost. Hence, I ended up composing my posts directly in HTML (in the Text editor).

Typically, the theme controls, among other things, the default styles for the entire website. WordPress 4.7 came with a dedicated feature, namely Additional CSS Customizer, to edit live the style of your theme. This type of functionality is actually a good incentive. Because I wanted to apply styling adjustments, I had to learn CSS as well. As in the case of HTML, I relied on W3Schools, among other great resources, to study this language.

Now, acquiring some basics in HTML and CSS is one thing, building a theme is a completely different story. Moreover, it takes time to master these languages and I am far to know the ins and outs of how to create the website that I envision.

Here comes Gutenberg! It democratizes the publishing process by simplifying content creation for the average non-technical user. You don’t need to be fluent in HTML or CSS to create complex layout elements like buttons, columns and so forth.

You will have more flexibility with how content is displayed.Matt Mullenweg

As previously stated, the new editor current focus is on content creation only (i.e. posts and pages), but eventually it will allow you to build your whole site using blocks. Therefore, it is worth investing the time to be acquainted with Gutenberg in order to reap the benefits of this brand new block-based editor.

When I was looking for information about Gutenberg, I was flooded with negative reviews. Going through so much negativity inevitably dampen my enthusiasm. Even worse, the expressed concerned about its effects on existing websites instigated me blindly to fear Gutenberg’s release as well. Conversely, when I started to see Gutenberg in action and grasped its amazing potential, I began to take this mass rejection with a grain of salt.

More importantly, Gutenberg is now part of WordPress 5; there is no turning back. Skipping a new version of WordPress to avoid using the new editor would be a terrible mistake. Indeed, keeping your site up-to-date is crucial for security.

WordPress 5.0 update

This major release – named in homage to the pioneering Cuban jazz musician Bebo Valdés – features the new editor. Everybody’s advice is to postpone updating. What do they dread? One of the chief concerns is that many installations (i.e. website) will not be ready for (i.e. compatible with) Gutenberg. Moreover, WordPress 5.0 may not be as stable as it should be.

December 5, I have backed up both my site files and database and I am ready for my WordPress 4.9.8 installation to be replaced with the new release.

December 6, I am welcomed with messages about my WordPress version being out of date. Nothing to worry: the auto-update feature of my hosting provider is set to install new major versions 24 hours after their release.

December 7, still nothing! That is odd!

Because of the magnitude of the release, my hosting provider decided to stop temporarily the auto-update system as a precautionary measure. They informed us that they will monitor how the new editor behaves on real sites and address problems early adopters report, if there are any³

IMPORTANT: Auto-updates to new major WordPress versions are currently put on hold. If you wish to update to WordPress 5.0 you will be able to do it through your wp-admin.

Given that the Gutenberg project had been moved into production at a rapid pace, which increases the risk of whatever issue, I was a little reluctant to proceed with the manual update. Not mentioning the climate of fear surrounding this release: there may be server 500 errors or white screens for some users⁴. Furthermore, a series of smaller releases were expected over the following weeks of the major release.

Sure enough, WordPress 5.0.1 was released on December 12 with fixes for seven vulnerabilities and WordPress 5.0.2 was scheduled to be released December 19. In contrast to the former, which was a security release unrelated to Gutenberg, the latter was the first planned follow-up release to WordPress 5.0. Nonetheless, few days after the first update, my hosting provider informed me that my WordPress installation would be updated to the newest version (5.0.1) shortly.

December 19, here it is – WordPress 5.0.1.

After manually updating my theme, I was anxious to check if everything went smoothly. I looked for anomalies with all my page layouts, reviewed my published posts, and double-checked one more time the whole thing. Everything was fine. Granted, my installation is devoid of legacy plugins. Above all, I run a very limited amount of plugins; with only one not being ready (i.e. tested up to WordPress 4.9.9 only) and none interacting with the editor anyway. Furthermore, most content shouldn’t be affected, as it is placed into a Classic block. Yet, I was relieved.

The day after, WordPress 5.0.2 was here. Everything was still working fine after updating again my theme.

Diving into Gutenberg

You are now using WordPress 5. It introduces a brand new block based editor. Take a look at all its exciting features here.

To make the transition as smooth as possible, my hosting provider installed the Classic Editor plugin along with the new WordPress core update. As you may expect from what I have told you so far, I didn’t intend to use it. I was eager to take full advantage of all the great options in Gutenberg.

What better opportunity than New Year’s resolution
to take a leap in the dark!

Now, before to create complex layouts thanks to Gutenberg, the question was – could I, at least, accomplish the same as before? I clicked on the Add New button and ta-da!

Welcome to the wonderful world of blocks! Click the “+” (“Add block”) button to add a new block. There are blocks available for all kinds of content: you can insert text, headings, images, lists, and lots more!

The Document tab of the sidebar, where you control the document as a whole, is not a radical departure from the previous interface. Yet, it has a more modern look and makes the post metadata editing more convenient. For instance, you don’t have to scroll all the way down (as before) to access everything. It is globally intuitive and there is no need to expand on it further. Thus, let me move to the heart of Gutenberg – blocks.

Paragraph

The default block – Paragraph – comes with some formatting settings accessible via the Block toolbar (above the block) and the Block tab (in the sidebar). Happily, it brings some new features, such as Drop Cap (to show a large initial letter) or Background Color (to add a background color). However, it still falls short of functionality (in the same way as TinyMCE) and it was not long before I shifted back to HTML editing. Appreciatively, I didn’t have to shift away from the Visual Editor (Show more tools and options > Code Editor) as I could edit the block independently (More options > Edit as HTML).

You can edit the HTML of one block
without it affecting other blocks.Jeff Chandler

By doing so, I noticed that my bold text was denoted with the <strong> tag instead of the <b> tag. Likewise, my italic text was denoted with the <em> tag instead of the <i> tag. While I am not trying to boast, this is not the proper way to format the text. Granted, browsers display them the same way. However, there is a difference in the meaning of these tags: <b> and <i> defines bold and italic text, but <strong> and <em> means that the text is ‘important’⁵. Thus, I will still have to edit my text in HTML, even if only to use the <mark> tag to highlight my important text, the <q> tag for inline (short) quotations and the <sup> tag for ^{superscripted} text (e.g. footnotes numbers).

In keeping with this idea, I cannot use the Text Color settings to color only a part of the text; it applies the color change to the all block (i.e. paragraph). Instead, I will have to keep using the <span> tag as illustrated below.

<p>Earlier in this post, the paragraph with the Drop Cap 
has a <span style="color:#253f8c">blue</span> background.
</p>

Admittedly, the Paragraph block is not a game-changing addition to my workflow. However, there are few benefits of using it. For instance, instead of typing this when creating a hyperlink (i.e. a link to another page):

<p>You may consider reading <a 
href="https://blog.cogitactive.com/news/cogitactive-saga/"
><cite>The CogitActive Saga</cite></a>.</p>

From now on, I will simply select (i.e. highlight) the text I want to turn into a link (The CogitActive Saga in the above example), click on the Link icon (in the block toolbar), type relevant keywords (e.g. CogitActive) in the search bar and select the appropriate page from the list of suggestions. Alternatively, if the target page is not within my own website, I can copy and paste its URL on top of the highlighted text. That is it: quick and easy. No more typos and broken links!

Another pro of the Paragraph block is that I can now write some code directly within my text, as exemplified earlier with the different formatting tags. I don’t have to remember that I have to use &lt; instead of < if I want it not to be interpreted as code.

<p class="dialogtext">This paragraph will be displayed
according to my predefined CSS style named dialogtext.
</p>

Custom HTML

As you may have noticed, I use footnotes in my post to provide further information – which is both necessary and supplementary – without disrupting the flow of the writing. When you click on any of these superscripted numbers, the page will scroll to the footnote section at the bottom of the post. From there, you can return to where you left your reading by clicking on the ^ icon next to the corresponding footnote.

To accomplish this, I use anchor links. Just like any regular links, I use the <a> tag to point to the desired destination – the footnote section – and back. Instead of providing an external Uniform Resource Locator (URL) to the href attribute, I use the # symbol followed by an identifier (e.g. href=#footnote). Obviously, for this to work I have to identify the destination by giving it an id attribute (e.g. id=footnote). The destination can be any HTML element; except that Gutenberg does not allow using the id attribute with the Paragraph block⁷. That is a real bummer! Especially, when considering that the Header block has a dedicated HTML Anchor.

Another limitation – inherent to the block-based system – is that each piece of content is in its own block. The corollary is that each block, which is designed for a specific content, cannot diverge from this predefined structure. For example, if I want to include a list of items within a paragraph, I have to use three blocks: a Paragraph block, followed by the List block, and finally a new Paragraph block. I cannot do this within a single Paragraph block. Moreover, the List block doesn’t allow to indent the listed items (compared to the other two Paragraph blocks). Looks unimportant, except that the layout will be quite different: compare the desired layout (left) with the three-block layout (right).

This is a real drawback! Perhaps not manifestly with this particular example, but certainly for another layout that I have used already twice in this post: a box of text. Such a box is composed of a header, as well as several paragraphs, all contained within a div element in order to style them as a whole. You cannot do that with the individual blocks provided by Gutenberg! First, the Header block, unlike the Paragraph block, doesn’t allow Background Color. Second, the outcome would be rendered as several separated items with the same background color without any cohesion; that is not as intended!

– Emendation –
The new Group block – introduced with WordPress 5.3 – solves this problem with its ability to nest other blocks inside it. By addition a custom background color to it, you can now easily divide your page into colorful sections.
December 19, 2019
Source: WordPress 5.3 “Kirk”

To make a long story short, among all the available blocks, the Custom HTML is undeniably my real new best friend.

Quote

The Quote block, as suggested by the name, is usually appropriate for quoting an external source (i.e. a quotation from another person’s work). The quoted text is displayed according to your theme layout, but you can still set its alignment (Left, Center, Right), as well as its Styles (Regular, Large). You can also include a citation (i.e. the author of the quote). Quite surprisingly, you cannot choose the background color or the text color.

Whereas this block is not original, the inclusion of the citation sparked my interest. Unfortunately, when using the Regular style, I could not align the citation independently from the quoted text. I thought that I could use the Large style instead. Indeed, it right-aligns the citation, irrespectively of the quoted text alignment. However, the quoted text (with this style) is excessively large.

Although I will not use the Quote block, this block was not without affecting my workflow. Until now, I was inappropriately using the HTML <blockquote> tag to accentuate any text (not necessarily quoted from another source). Moreover, when using as intended (i.e. for quoting an external source), I was providing neither 1) the source of the quotation (i.e. the URL) nor 2) the citation (i.e. the name of the author). From now on, I will use the <blockquote> tag only to represent content quoted from another source using this specific HTML markup⁸:

<blockquote class="quote" cite="URL to specify the 
source of the quotation">The quotation from another 
person’s work<cite>The other person’s name</cite>
</blockquote>

Pullquote

A pull-quote is a brief, attention-catching quotation taken from the main text of an article and used as a subheading or graphic feature⁹. If you want to call attention to an excerpt in a graphical way, you can use the Pullquote block. It has nice settings that will indeed give special emphasis to your text (right). Yes, but…

… it uses the <blockquote> tag. Semantically, this is incorrect as the latter element is used to reference external sources, not a quote from your own text. Unfortunately, there is no specific pullquote element in HTML 5.

Putting this minor problem aside, there is a concern with my using of pull-quotes. My theme has implemented pull-quotes by pairing the <blockquote> tag with an alignleft or alignright class. You can see (left), how it renders them. Quite different from the attention-catching Pullquote block! In fact, this display is perfectly suited for my purpose. Instead of using them to draw the reader’s attention to noteworthy passage of my post, I exploit their subtle designs either to express an opinion or reaction (alignleft) or to provide further information (alignright) without disrupting the flow of the writing. Needless to say, my using of the blockquote element is inappropriate.

As suggested by the aforementioned proverb, I will not change this, though. Yet, from now on, I will contain my pull-quotes comments in an aside element – a new element in HTML 5 for content that is peripherally relevant to the content immediately surrounding it. Of note, the Pullquote block employs a similar approach (with a figure element).

Reusable blocks

So far, I may have given the impression that I could not use any block to improve radically my workflow. I was composing my posts directly in HTML and I will continue to do so for the most part. Admittedly, some standard blocks are quite convenient – the Image or Column blocks, for instance – and it will be a shame not to make a use of them. However, is there any block groundbreaking?

Let me introduce the Reusable blocks!

If you have some content that you are likely to use again, you can save the corresponding block and re-use it wherever and whenever you need it. For instance, this could be the Author Information that you would displayed at the bottom of your post. You can turn any block into a Reusable block. The block will be available exactly as you have styled and named it. Better than copying and pasting from one post to another, right!

Not convinced yet?

What about blocks requiring regular updating – let say a Call for Action block that changes every week. You don’t want to go through every single instance of this block – every week! Instead, you can access the Manage All Reusable Blocks option (in the sidebar) and edit the block from there. The changes will be automatically applied everywhere, that is in all the posts or pages that feature this Reusable block.

Still unimpressed?

Reusable blocks have another interesting feature; you can change their content without affecting the other instance of the same block. Once added to your post or page, just select the Convert to Regular Block option (in the block toolbar).

Do you see the potential?

No? I didn’t grasp it either – at first. Then, I realized that these blocks were actually reusable templates. You can create a block (no matter how basic it is – you will edit it afterward) and save it as a Reusable block. Then, heading over to the Manage All Reusable Blocks option, start editing it by adding all the blocks you want. From now on, you can add this customized Reusable block, convert it to a Regular block (see above) and start populating all its elements.

This is clearly a game-changing block
that will speed up my workflow!

Wrapping up

Granted, I am not a WordPress veteran and I might not be a typical user either. Nevertheless, in my humble opinion, the reception (i.e. rejection) of Gutenberg was unfair. The steep learning curve argument is unfounded. The fear of novelty is legitimate, but it should not stand against improvement. There is no reason, from a user perspective, to fear this new editor. On the contrary, Gutenberg is nothing but good news. In fact, I totally concur with the following statement:

If you’re more of an HTML and CSS sort of person, then the blocks won’t stand in your way.Matt Mullenweg

I have composed this entire post with Gutenberg. Admittedly, I often turn to the Custom HTML block as discussed in this post. Nevertheless, the possibility to edit each block independently from the whole document is without a doubt a pleasing functionality. No more cumbersome code to deal with!

To conclude, blocks are not a hindrance to my workflow, quite the contrary. Gutenberg adds another string to my bow. Still, I haven’t explored all the available blocks and there are many to come.

HAPPY NEW EDITOR – HAPPY NEW YEAR!

¹ Jeff Chandler (2018) WordPress 5.0 “Bebo” Released, Lays A Foundation for the Platform’s Future. WP Tavern. ^
² I was lucky enough to enjoy a course published by Morten Rand-Hendriksen. Unfortunately, it was available free only for a limited amount of time. Anyway, I want to thank Jeff Chandler from the WP Tavern for mentioning it in his article. ^
³ Hristo Pandjarov (2018) Our Roll-Out Plan for WordPress 5.0. SiteGround. ^
⁴ Mark Maunder (2018) WordPress 5.0: How and When to Update. Wordfence. ^
⁵ Here is what the W3Schools has to say about this issue: the HTML <b> element defines bold text, without any extra importance whereas the HTML <strong> element defines strong text, with added semantic ‘strong’ importance. Likewise, the HTML <i> element defines italic text, without any extra importance whereas the HTML <em> element defines emphasized text, with added semantic importance. On the other hand, the World Wide Web Consortium (W3C) specify that the <b> element should be used as a last resort when no other element is more appropriate (e.g. <em> for stress emphasis, <strong> for importance and <mark> for text highlighted). ^
⁶ Explaining how to customize the stylesheet file of your WordPress theme is beyond the scope of this post. However, I will address this in the near future. ^
⁷ Granted, I could put the id attribute – for the back destination anchor – directly within the anchor source, that is the <a> tag. However, for a better reading experience, I prefer to put it in the opening tag of the paragraph. ^
⁸ There is some disagreement whether you should use the <cite> tag for the citation (i.e. author’s name) of a quote. Whereas the World Wide Web Consortium (W3C) specifies that it must include the title of the work or the name of the author, the W3Schools limits its use to the title of a work (and adds a note specifying, A person’s name is not the title of a work). This might explain why people have tried to use other tags (e.g. <footer> or <figcaption>) to display the author in the blockquote element. However, the W3C clearly states that the blockquote element can have an optional citation, which must be within a footer or cite element. Yet, they also specify that the attribution for the quotation, may be placed inside the [blockquote] element, but must be within a [cite] element for in-text attributions or within a [footer] element. To complicate things further, the attribute used within the <blockquote> tag to specify the source of the quote (i.e. where the quote originated from) is called “cite” as well. However, the <cite> tag and the cite attribute are two distinct things. As already explained, tags mark the beginning and the end of an element (and apply meaning to it), whereas attributes provide additional information about the element. ^
⁹ Pull-quote (2010) Oxford Dictionary of English – Third Edition. Oxford University Press. ^