In this blog post, I’ll take exisitng HTML, consisting of a heading and 2 paragraphs, and convert them to a Gutenberg Block.
Note: To my knowledge, this HTML still needs to be WordPress acceptable/allowable HTML.
Here is the existing HTML we want to upload into Gutenberg and convert it into a ‘blog post’ to publish.
1 2 3 4 | <h4>My Cool Heading</h4> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam quaerat beatae quos voluptas fugiat modi, ratione ipsum ducimus! Similique minima temporibus voluptatem iusto, cupiditate reiciendis numquam placeat nulla blanditiis quos. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam quaerat beatae quos voluptas fugiat modi, ratione ipsum ducimus! Similique minima temporibus voluptatem iusto, cupiditate reiciendis numquam placeat nulla blanditiis quos. |
Up first, in Gutenburg, you can choose Custom HTML from the selection block. Once chosen, you will see this:
Next, paste in the HTML content you want (in our case, the content from above) and from the right menu selection, choose Convert to Blocks
Convert to Blocks
After choosing Convert to Blocks here is the final visual look (not in HTML mode)
Finished product in Gutenberg block.
And it’s that easy to ‘import’ and convert existing HTML heading and paragraphs into a Gutenberg-ready format (AKA ‘Block’).
I hope you enjoyed this quick tip and please share in the comments below your tips, tricks, aggravations, and insights with Gutenberg. 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, are 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.