With Gutenberg coming full-on to WordPress core soon, I’ve committed to try to learn all I can about it. I may as well face the fact that I am going to have to use it. Honestly, so far, I have not found it to be all that bad.
Photo by Zany Jadraque on Unsplash
At the time of writing, the below Gutenberg samples are from a WordPress development site I have installed locally on a LAMP stack.
Current version:
- WordPress 4.9.8
- Gutenberg development plugin 3.6.2
This blog post is a continuation to the other related Gutenberg posts I’ve written and shared lately: Getting a handle on Gutenberg… slowly. and Convert existing HTML to Gutenberg block – With examples. Be sure and visit those posts as well.
A little background…
All the blog posts I have written on Gutenberg so far, stem from my personal blogging work flow. I write and edit my blog posts in HTML then move the content over to WordPress before finalizing and publishing. I am a Vim and Sublime Text kind of person and the default TinyMCE (Would you believe I just recently learned its name!?) editor just can’t compete on that level IMO. Admittedly, with Gutenberg I was worried it would hinder my work flow or force me to change (Afraid of that word aren’t we?) up how I write, edit, and structure content. But so far, I have not run into any major issues.
Digital Owl’s Prose is an open-source SQL Database blog so I typically include numerous MySQL or PostgreSQL code samples/snippets in any given blog post. I use shortcodes and a plugin (see supporting paragraph below) for SQL syntax highlighting. I feel this is integral for any programming or coding related blog and I wanted to be sure Gutenberg allowed this. Wait. Let me clean that up a bit. What I really meant is, I need to confirm I can continue to use them (plugin and shortcode) as I do in my current work flow, with editing in allowable HTML.
(Note: I use the CodeColorer plugin for all code/syntax examples in my blog posts on Digital Owl’s Prose.) Just FYI.
Suppose I use a shortcode in the TinyMCE editor in ‘Text’ mode to showcase (syntax highlight) this SQL command:
Shortcode used in TinyMCE editor.
In Gutenberg, I can accomplish the same snippet two different ways that I am aware of so far. I will provide examples of both.
First, I use the Custom HTML block type and paste in the above code like so:
Shortcode in Custom HTML Gutenberg block.
Producing:
Rendered from Gutenberg Custom HTML block.
All good there. However, I can choose another option from the Gutenberg block selection.
An actual Shortcode block is available. I will paste in the same shortcode from my HTML file but this time, in the shortcode block as shown here:
Shortcode inside a Gutenberg Shortcode block.
That shows:
Rendered code from Gutenberg shortcode block.
As you can see, either Custom HTML or Shortcode blocks in Gutenberg, for this particular shortcode, work seamlessly.
Oftentimes, I use the shortcodes for SQL keywords and syntax, outside of an entire block. Here is where inline shortcodes are utilized. For example, I want to ‘inline’ a CREATE TABLE SQL command just like the one in this sentence.
How does Gutenberg work with inline shortcodes?
Let’s find out.
I’ll create a Shortcode block like above except here, I will include the other surrounding text along with the actual shortcode:
Inline shortcode in Gutenberg
Any problems rendering that?
Rendered inline shortcode from Gutenberg block.
You can see, no issues there.
I hope you found this blog post helpful and informative. As I continue to study and explore Gutenberg, I look forward to learning more about the soon-to-be default editor, and sharing my findings here. I would love to know your experiences with Gutenberg. Feel free to leave any comments below. Thanks 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.