Since I have just updated to WordPress 5, it seems appropriate to start investigate what changes do I need to keep in mind if I am to switch to Gutenberg.

Headings

This is something that has been bothering me since the first day of Gutenberg.

For the record, when viewing a post, the post title is shown in h1.

<h1 class="entry-title" itemprop="headline">Title of a Post</h1>

On the other hand, the same post title is shown in h2 in post lists.

<h2 class="entry-title" itemprop="headline">Title of a Post</h2>

A weirder thing is that the site title in the main page is also shown in h2, despite occupying the same design space as the post title when viewing the post.

Hence, if the top level heading in a post is h3, Gutenberg will complain, and when you view the post you get a page without h2 in the hierarchy. On the other hand, if the top level heading in a post is h2, the post list will be arranged illogically.

There is indeed a compromise between them: if we accept that sub-headings in a post are never importantly enough to belong to a post excerpt, then we should settle with h2’s and there is no logical inconsistency as long as we stick to the premise. This actually makes sense, but it restricts our freedom a bit. We should not decide what to show in the excerpt for this kind of reasons. I can only say that it is a coincidence that we still have a viable solution.

Since the choices of headings outside post content are made by the theme, I blame Kahuna here. I might some day talk to their authors, though I don’t think they are going to adjust for that, since backward compatibility is a good enough reason to stop them from “fixing” the bug that probably only I am going to care.

Inserting Figures

Classic Editor
Gutenberg Editor

And these are the corresponding code. Of course, I manually changed their dimensions to make for a fair comparison.

<a href="https://blog.ahyangyi.org/wp-content/uploads/2018/10/de_finibus-1.png">
<img class="alignnone size-medium wp-image-626" src="https://blog.ahyangyi.org/wp-
content/uploads/2018/10/de_finibus-1-300x300.png" alt="" width="300" height="300" /></a>
<figure class="wp-block-image"><img src="https://blog.ahyangyi.org/wp-content/up
loads/2018/10/de_finibus-1.png" alt="" class="wp-image-626"/></figure>

Again, there seems to be a theme integration problem. The Kahuna extra option for figures are not triggered by Gutenberg-style images despite the latter is also perfect fine HTML code.

Interacting with Other Plugins

The LaTeX2HTML plugin works fine with Gutenberg.

The custom Prism-based plugin, however, is utterly broken by Gutenberg. It insists to convert a regular block into a “preformatted” one, and forcibly strips all classes that I have manually added and replaces them with a useless class="wp-block-code" clause. It makes my current syntax highlighting solution unusable.

I am pretty sure that there are a few Gutenberg-based solutions to the syntax highlighting problem here. However, it disgusts me that it simply breaks my old way without offering any workaround. I used to think that the generic “Paragraph” block is at least a catch-all thing since I can switch to HTML mode and insert whatever code I want. However, this serves as a cautionary tale to think that way: Gutenberg is dirtier than that. It makes wild assumptions and is not really designed for people who know what they want.

Conclusion

This is an early examination of what Gutenberg can bring to this blog. Some of the problems are caused by the theme, usually by making assumptions that no longer hold under Gutenberg. Other problems seem to be caused by Gutenberg’s philosophy. My hope of the existence of easy work around of all problems seems to have been distinguished, and the problems probably need more efforts to fix.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.