Gutenberg – The New WordPress Block Editor: The Basics

As of December 6, 2018, and the release of WordPress 5.0, the content management system has a whole new editor. Here’s what you need to know.

Originally called “Gutenberg,” but now being referred to as simply “Wordpress editor” or “block editor,” the new editor will replace the TinyMCE as the default editor in the new version of WordPress. If you haven’t yet updated to WordPress 5.0, now might be time to do so, as the new block editor offers more features, and WordPress promises an easier-to-use interface with loads more flexibility.

One big change will completely alter editing in WordPress

The biggest change is that the editor moves from a single edit field to a block-based approach. So rather than popping everything into one field and editing it there, you’ll place different elements in fully customizable blocks. Now, the following bits of content will be placed in their own blocks.

  • Paragraphs of texts
  • Tables and other charts
  • Images and galleries
  • Headings
  • Lists and columns
  • Quotes
  • Code and shortcodes
  • Buttons
  • Widgets
  • Embeds

Additionally, your developers and others will be able to create custom blocks that are accessible via plugins.

Benefits of block editing

So why all the hype surrounding this new editor? For starters it will allow you to create much more complex designs than TinyMCE.

This block approach enables you to gain a clearer visual of each website page, and you will have much greater control in how you arrange and present different components on your website. The new editor boasts:

  • New customization options. Each block is separate from one another and receives its own layout and settings. That enables you to customize each block, for example, with backgrounds and fonts.
  • Drag-and-drop functionality. You can easily move the blocks around until you find a look you like.
  • User-friendliness. The initial impression is that the new block editor is more intuitive and easier to use, especially for first-time WordPress users. Plus, you can save each of the blocks and reuse them, so it cuts down on the time you spend creating web pages.
  • On-the-go editing. The new block editor offers a mobile-friendly interface, enabling you to make changes—and fix mistakes—right from your phone.
  • Improved editing experience. It offers more screen space with fewer distracting elements. Plus, it provides tighter integration of the core, plugins and themes, so the overall editing experience is better.

Overall, the new block editor provides a cleaner, simpler interface, and offers users more flexibility and customization.

The downsides for now

Of course, nothing is perfect, and the new block editor does have some issues, including:

  • Everything is in blocks. Paragraphs, images and headings are put in their own boxes, and the content is never treated as a single entity. That can take some getting used to, especially if you like to use shortcuts. Any of those shortcuts will only apply to the box you are working within, not the entire post or page, and other shortcuts don’t function similarly at all.
  • Developers may have accessibility problems. If your developers rely on APIs for building and integrating themes and plug-ins, they may not be able to access the block editor, because they currently are missing from it. That could change soon, however.
  • Some WordPress users might experience compatibility problems. It’s possible that your themes and plugins won’t work with the new block editor, so at least initially, your developer may have a great deal of work to do to make the transition. There is a Classic Editor plugin available for those who want to hold onto the classic editor a little longer.

Basically, expect some growing pains—and a learning curve if you are versed in TinyMCE, as the new block editor is very different. It is a safe to say that the block editor will continue to evolve as glitches and problems are discovered and fixed.

How Can We Help?

If you are experiencing some growing pains—and a learning curve give us call!