With blogging, I am always on the search for ways to make the whole process easier and more proficient. One thing I discovered long ago, the WordPress default editor leaves a lot to be desired. In my humble opinion at least. I believe it is named the TinyMCE editor but don’t sell the farm on that. That’s how much time I spend (or try not to spend) using it.
Photo by Guillaume Bolduc on Unsplash
However, to be fair, I am a Vim fan and replicating that environment or functionality is a tall order. Sublime Text 3 suffices with its Vim key bindings, so that’s my go-to text editor. Unless I am editing Linux config files, then it’s Vim all the way.
That’s why I write and edit all of my blog posts in HTML format (Or WordPress acceptable/allowable HTML) in Sublime Text and then copy the content over to the WordPress editor for final prep prior to publishing.
This blog post does not align with the subject matter I typically write on (Open-source SQL Databases), but with the changes coming to WordPress, I felt it worthy to blog on the topic of Gutenberg and how it handles HTML. For this session, I’ll cover images but may explore other areas in future posts.
To Note: I am not an HTML expert. The only HTML I know is the allowable/acceptable WordPress variety. And out of those, only the tags I use for my own blog, ‘Digital Owl’s Prose’. Which is not all of them. But, I am beginning to learn them in order to gain better proficiency.
The big talk these days in the WordPress ecosystem is Gutenberg and the demise of our beloved platform (LOL just kidding). Unless you’ve been living under a rock (which doesn’t seem like a bad idea to me at times admittedly) you’re well aware of this major change coming in the next major release.
I plan to continue my content writing and editing work-flow in HTML so I may as well face the beast and figure Gutenberg out. Or how it will directly affect me and hopefully, my endless supply of clients just begging for my abilities and services.
Up first, here are the current versions of everything at the time of this blog posts’ writing on my local WordPress install.
- WordPress version 4.9.8
- Gutenberg development plugin version 3.5.0
So normally, if I insert this HTML and shortcode into the WordPress editor (pre-Gutenberg),
I would get:
Screenshot of puppy.
As a reminder, this is all written with the pre-Gutenberg WordPress editor (in text mode) in mind.
I have a development WordPress site installed on my local LAMP stack and there I will use Gutenberg to note any changes in the HTML image code.
From my limited experience, the best I can tell is Gutenberg works in blocks. I will take the same code above and place it in a Gutenberg paragraph block by selecting Edit as HTML from the available menu choices. Here is the same HTML image code from above, but this time I place it in the Gutenberg editor.
Same image code in HTML.
The above code in Gutenberg, renders this:
Caption is not rendering correctly.
Oops… Obviously, something went haywire here. As you can see, the caption is no longer rendered correctly. Let’s see how a Gutenberg-specific image block handles this. In the next screen shot, you will see a choice of blocks. I’ll choose Image:
Gutenberg block choices.
Note: I’ve inserted the caption, title, alt text, and description in the provided fields during the visual upload (not shown) from the WordPress ‘Media’ dashboard. However, I am not interested in the visual experience, but the HTML code Gutenberg generates behind the scenes.
Once a block is ‘established’, you can select the More Options choice and choose Edit as HTML.
Here’s the code in that block now:
<figcaption>Hey I got uploaded! Cool</figcaption>
</figure>
While the img tag and accompanying attributes are the same, there are other visible changes between this Gutenberg edition version and the pre-Gutenberg editor version. Notably the figure and the figcaption HTML tags.
Here’s how the above HTML image code renders now in Gutenberg:
That works with no issues.
While I do not fully understand what is going on behind the scenes in a Gutenberg-specific light, I am learning what I can about the new editor in WordPress. I mean let’s face it, if you are to stay on this platform, may as well learn the nuances that come along with it.
There is supposed to be a plugin for the (old) TinyMCE editor should you need it after Gutenberg becomes part of WordPress core. But I have not explored it. Yet.
What are your experiences, if any with Gutenberg so far? Any specific tips, tricks, or insights? What issues have you run in to? Are your plans to go all-in on Gutenberg and forgo anything to do with the TinyMCE editor? Or, simply install the compatible plugin and keep on keeping on? I’d love if you shared any comments you have below. Thanks so much for reading.
A Call To Action!
Thank you for taking the time to read this post. I truly hope you discovered something interesting and enlightening. Please share your findings here, with someone else you know who would get the same value out of it as well.
Visit the Portfolio-Projects page to see blog post/technical writing I have completed for clients.
Have I mentioned how much I love a cup of coffee?!?!
To receive email notifications (Never Spam) from this blog (“Digital Owl’s Prose”) for the latest blog posts as they are published, please subscribe (of your own volition) by clicking the ‘Click To Subscribe!’ button in the sidebar on the homepage! (Feel free at any time to review the Digital Owl’s Prose Privacy Policy Page for any questions you may have about: email updates, opt-in, opt-out, contact forms, etc…)
Be sure and visit the “Best Of” page for a collection of my best blog posts.
Josh Otwell has a passion to study and grow as a SQL Developer and blogger. Other favorite activities find him with his nose buried in a good book, article, or the Linux command line. Among those, he shares a love of tabletop RPG games, reading fantasy novels, and spending time with his wife and two daughters.
Disclaimer: The examples presented in this post are hypothetical ideas of how to achieve similar types of results. They are not the utmost best solution(s). The majority, if not all, of the examples provided, is performed on a personal development/learning workstation-environment and should not be considered production quality or ready. Your particular goals and needs may vary. Use those practices that best benefit your needs and goals. Opinions are my own.