Gutenberg – a whole new way to use WordPress

October 4, 2018 2:46 pm Categorised in:

Depending on how involved you are in the WordPress community, you may or may not be familiar with the upcoming WordPress Gutenberg editor. This post will help you understand what Gutenberg is and how it is going to impact the WordPress development field.

What is Gutenberg?
Briefly, Gutenberg is the upcoming replacement to the WordPress TinyMCE editor (the current WYSIWYG text editor where you write your posts and pages).
It is more than an editor. According to Gutenberg Team, while the editor is the focus right now, the project will ultimately impact the entire publishing experience including customization (the next focus area).

gutenberg view

The editor will create a new page – and post – building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTML, or “mystery meat” embed discovery. — Matt Mullenweg

Gutenberg looks at the editor as more than a content field, revisiting a layout that has been largely unchanged for almost a decade. This allows them to holistically design a modern editing experience and build a foundation for things to come.

When will Gutenberg be a part of WordPress?
Gutenberg will not officially become a part of the WordPress core until the next major release – WordPress 5.0.

Currently, WordPress 5.0 is scheduled for November 19, 2018. Having said that, the team has built in some flexibility to those dates. If testing takes longer than expected, it could be pushed until November 27, 2018. And if that’s still not enough time, the release date will be further pushed back to January 22, 2019 to avoid releasing it over the holidays.

Until then, you can still install and use the WordPress Gutenberg editor right now via a plugin.

How the WordPress Gutenberg editor works

Essentially, Gutenberg replaces the edit field of the current WordPress TinyMCE editor with lots of individual “blocks”.
These blocks then allow you to build more complex designs than those allowed in the current WordPress editor.
Here’s why they’re looking at the whole editing screen, as opposed to just the content field:

  • – The block unifies multiple interfaces.
  • – By revisiting the interface, the writing, editing, and publishing experience can be modernized with usability and simplicity in mind, benefitting both new and casual users.
  • – When singular block interface takes center stage, it demonstrates a clear path forward for developers to create premium blocks, superior to both shortcodes and widgets.
  • – Considering the whole interface lays a solid foundation for the next focus, full site customization.
  • – Looking at the full editor screen also gives them the opportunity to drastically modernize the foundation, and take steps towards a more fluid and JavaScript powered future that fully leverages the WordPress REST API.

So, what’s a block?
Well, a block can be pretty much anything. For example, you can have blocks for:

  • – Regular text
  • – Images
  • – Video embeds
  • – Buttons
  • – Widgets (yes, those same widgets you use in your sidebar)
  • – Table
  • – Etc.

Gutenberg has three planned stages. The first, aimed for inclusion in WordPress 5.0, focuses on the post editing experience and the implementation of blocks. This initial phase focuses on a content-first approach. The use of blocks allows the user to focus on how the content will look without the distraction of other configuration options. This ultimately will help all users present their content in a way that is engaging, direct, and visual.

These foundational elements will pave the way for stages two and three, planned for the next year, to go beyond the post into page templates and ultimately, full site customization.
Gutenberg is a big change, and as they say, there will be ways to ensure that existing functionality (like shortcodes and meta-boxes) continue to work while allowing developers the time and paths to transition effectively. Ultimately, it will open new opportunities for plugin and theme developers to better serve users through a more engaging and visual experience that takes advantage of a toolset supported by core.

Posts are backwards compatible, and shortcodes will still work. They are continuously exploring how highly-tailored metaboxes can be accommodated, and are looking at solutions ranging from a plugin to disable Gutenberg to automatically detecting whether to load Gutenberg or not.

How to install Gutenberg on your site
Like we already said, Gutenberg will replace the default WordPress editor in WordPress 5.0. But for now, your only option to play around with it is to install the Gutenberg plugin.

Gutenberg is still in beta, so we do not recommend that you install it on a live website.

Here’s how to install the Gutenberg plugin:

  • – Go to PluginsAdd New
  • – Search for “Gutenberg”
  • – Click Install Now
  • – Wait for the Install Now button to change to Activate
  • – Click Activate

Once you activate the plugin, your site will automatically use the Gutenberg editor when you go to PostsAdd New.

While Gutenberg is designed to work with any WordPress theme, choosing a theme that specifically offers Gutenberg compatibility will offer some real benefits.

Themes can offer built-in styling for the Gutenberg blocks. Better yet, themes can load these styles inside the editor which means you can see the real styling for your blocks as you build your content for a better WYSIWYG experience.

Gutenberg is more than an editor. It’s also the foundation that’ll revolutionize customization and site building in WordPress.

Victor Rusu

Victor enjoys programming, learning new ways to solve problems and sharing his new knowledge with others.

Related Posts

Top 5 programming languages featured

Top 5 Programming Languages Used in Web Development

When it comes to web development, there are an overwhelmingly large [...]