• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

Startup Hero

The Official Blog Of Name Hero

Learn To Fly Above The Competition Get Started
  • HomeWelcome
  • CoursesVideo Training Center
  • About UsWhat is StartupHero?
  • BlogGet the latest
  • Start HereStartup 101
  • SpeakingPodcast & Media
  • ResourcesTools to help You
    • Reselling WordPress Hosting
    • Resell Hero
    • How To Start A Blog
  • NameHeroCloud Web Hosting

Gutenberg Allows You To Replace Code Insertion Plugins

By Bhagwad Park on January 30, 2019 0

Gutenberg Allows You To Replace Code Insertion Plugins

For a long time now, web pages have been more than just text on a screen. Even posts in WordPress which are ostensibly articles, are now a lot more than just the posts themselves. There are all kinds of hidden elements in pages that are not visible to the use. Schema markup, HTML tags, tracking scripts, and much more.

WordPress was originally designed to deal with “text only” in its posts. The standard way to insert HTML was to use the “Text” or “Code” editor tab and writer your HTML there. And even then, it was far from perfect for two reasons:

  1. You couldn’t see non-rendering HTML
  2. WordPress would mess up your HTML while converting it to the visual layout

As a result, it was unpredictable at best and outright terrible at worst, to use the HTML or code layout in the traditional WordPress editor to insert snippets, and custom code. It was even a bad idea to use the code layout for “regular” HTML elements like <div> etc. You never knew what the classic editor was going to do to your code.

Plugins to Solve these Problems

To deal with this issue, many themes took it upon themselves to dedicate separate areas below posts to allow users to add code. This took the form of “metaboxes” as shown here:

Extra Body Scripts Meta Tag in Theme

This screenshot is from the Genesis theme framework, which gives you extra options below posts to add header and body scripts. In the same way, many other plugins were used to do the same thing – to add extra code to WordPress because the classic editor was insufficient and didn’t do the job well.

With Gutenberg however, things have changed completely. Now we can insert code – both visible and invisible – into posts, without the additional overload of using plugin and theme extensions.

Using the “HTML” Block in Gutenberg

With the introduction of “blocks” in the latest Gutenberg editor in WordPress 5.0, we can now explicitly have different types of content in the editor, without having to restrict ourselves only to text and images. That means we can use the “HTML” block to insert code for which we previously would have needed either a plugin or a theme.

One great example here is schema markup. I’d written a post earlier explaining how we can use the JSON review schema markup to get “star” ratings in the Google search results. In that tutorial, I recommended inserting the code into a metabox – either from a theme or a plugin.

But now with Gutenberg, we can just use the “Custom HTML” block at the end of the post as shown here:

Custom HTML Block in Gutenberg WordPress

Just type slash (/) followed by the name of the block – in this case HTML. And then paste the schema into the block like this:

Insert Custom HTML

Now when you preview the post, none of this will render because the <script> tag doesn’t output any human visible text. But when we go to the structured data testing tool provided by Google, you can see that it’s picked up the schema markup:

Review Schema Picked up By Google

This is great because now that HTML block is permanently attached to our post regardless of plugin or theme. Which makes sense, because it is part of the post. And this is just one example. You can use the same HTML block for Javascript code and all other kinds of JSON that normally would have required a 3rd party solution.

So while I still find the concept of separating paragraphs into blocks annoying, this is another benefit of Gutenberg that I’ll be making full use of going forward!

Bhagwad Park Profile Picture
Bhagwad Park

I’m a NameHero team member, and an expert on WordPress and web hosting. I’ve been in this industry since 2008. I’ve also developed apps on Android and have written extensive tutorials on managing Linux servers. You can contact me on my website WP-Tweaks.com!

Reader Interactions

Leave a Reply Cancel 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.

Primary Sidebar

Connect With Us!

Superhero Resources

Fix Common Issues

  • How To Setup Free And Automatic SSL Certificates
  • How To Setup Cloudflare With Railgun
  • How To Fix Memory Exhausted Errors In WordPress
  • How To Edit PHP Version/Upload Limit/Add Extensions
  • How To Move/Migrate Your Business To Name Hero

Free Guides

  • How To Setup NameHero Hosting
  • How To Create A Web Hosting Business With WordPress
  • How To Start A WordPress Blog
  • How To Migrate WordPress To A VPS
  • How To Speed Test And Optimize Your WordPress Website
  • Magento 2.X Installation Guide
  • How To Clean Up A WordPress Hack

Training

Recent Posts

  • Why I Don’t Use AWS S3 For Website Backups
  • How To Add A “Vary: Accept-Encoding” Header To Apache
  • Managed vs Unmanaged VPS: The NameHero Difference
  • Why I Don’t Use Jetpack Backup
  • How To Share A Post Draft In WordPress
  • How To Use The Layout Grid Block By Automattic
Subscribe in a reader
  • Web Hosting
  • WordPress Hosting
  • Reseller Hosting
  • VPS Hosting
  • Twitter
  • Facebook
  • LinkedIn
  • YouTube
  • FTC Disclosure
  • Earnings Disclosure
  • Privacy Policy

Copyright © 2022 · Smart Passive Income Pro on Genesis Framework · WordPress · Log in