Gutenberg Editor

What is Gutenberg?

The effort to build a new editing interface for WordPress is known as “Gutenberg,” and it has been in the works since January 2017. It is one of the most important improvements to WordPress in years. It’s based on the concept of writing and designing articles and pages using “blocks.” This will provide the groundwork for future WordPress enhancements, such as the use of blocks to build not just posts and pages, but whole websites. The main objective is to make WordPress more user-friendly for individuals who are creating, editing, publishing, and designing web pages for the first time. The editing experience is designed to provide users with a clearer visual picture of what their post or page will look like after it is published. This was the original kickoff goal:

The editor will work to develop a new page and post building experience that makes authoring rich content simple, including “blocks” to make things like shortcodes, custom HTML, and “mystery meat” embed discovery simple.

The following are some key takeaways:

  • A significant strength of WordPress is the ability to create elaborately laid-out content.
  • We may combine several distinct interfaces into one by adopting blocks as an interaction paradigm. Instead of learning how to write short codes and custom HTML, or copying URLs to embed media, there is a standardized, repeatable process for embedding any type of content.
  • The term “mystery meat” refers to software features that must be discover. Let’s expose the huge number of blocks and 30+ embeds that WordPress already supports.

Gutenberg is being developed by the WordPress organization on GitHub. Since WordPress 5.0, the block editor has been included in the core. The plugin repository has forthcoming features from the Gutenberg project that you may test.

When was Gutenberg started?

The editor’s emphasis began in early 2017, with the first three months dedicated to creating, planning, developing, and testing prototypes to determine how we approach this project. The first plugin was released in June 2017 at Word Camp Europe.

When was Gutenberg merged into WordPress?

In December 2018, Gutenberg was initially integrated into WordPress 5.0. A comprehensive list of Gutenberg plugin versions incorporated into WordPress core releases can be found on the versions on the WordPress page.

What are “blocks” and why are we using them?

When it came to building posts and pages with images, multimedia, embedded content from social media, polls, and other elements, the classic WordPress editor was an open text window—always it’s been a wonderful blank canvas for writing—but it required a mix of different approaches that weren’t always intuitive:

  • Images, multimedia, and authorized files can be found under the media library/HTML.
  • Pasted links for embeds.
  • Short codes for plugins’ specific assets.
  • Images for the featured picture at the top of a post or page.
  • Subheadings are made up of excerpts.
  • Widgets for material on a page’s side.

We began to love the notion of “blocks” as we considered these applications and how to make them apparent and consistent. All of the aforementioned things might be blocks: they’re simple to find and comprehend, and they’re straightforward to move around the page dynamically. The block idea is quite strong, and when properly developed, it may provide an exceptional editing and publishing experience. Ultimately, the goal of blocks is to establish a new common language throughout WordPress, a new mechanism to link users to plugins and to replace a number of older content kinds, like shortcodes and widgets, that need a thorough understanding of WordPress’ quirks.

What is the writing experience like?

Our objective with Gutenberg isn’t only to make it easier to write posts and pages. We also want to make sure that writing is as easy as possible. To put this to the test, go to this demo and give it a shot!

Are there Keyboard Shortcuts for Gutenberg?

Yes. There are a lot of them! A help window appears, displaying all possible keyboard shortcuts.

To see the entire list, go to the new editor’s top right corner menu and choose “Keyboard Shortcuts” (or use the keyboard shortcut Shift+Alt+H on Linux/Windows and ⌃⌥H on macOS).

The following is the standard list of keyboard shortcuts:

Editor shortcuts

Shortcut descriptionLinux/Windows shortcutmacOS shortcut
Display keyboard shortcuts.Shift+Alt+H⌃⌥H
Undo your last changes.Ctrl+Z⌘Z
Save your changes.Ctrl+S⌘S
Redo your last undo.Ctrl+Shift+Z⇧⌘Z
Show or hide the settings sidebar.Ctrl+Shift+,⇧⌘,
Open the list view menu.Shift+Alt+O⌃⌥O
Navigate to the next part of the editor.Ctrl+`⌃`
Navigate to the previous part of the editor.Ctrl+Shift+`⌃⇧`
Navigate to the next part of the editor (alternative).Ctrl+Alt+N⌃⌥N
Navigate to the previous part of the editor (alternative).Ctrl+Alt+P⌃⌥P
Navigate to the nearest toolbar.Alt+F10⌥F10
Switch between visual editor and code editor.Ctrl+Shift+Alt+M⇧⌥⌘M
Toggle fullscreen mode.CMD+Option+Shift+F⇧⌥⌘F

Selection shortcuts

Shortcut descriptionLinux/Windows shortcutmacOS shortcut
Select all text when typing. Press again to select all blocks.Ctrl+A⌘A
Clear selection.EscEsc

Block shortcuts

Shortcut descriptionLinux/Windows shortcutmacOS shortcut
Duplicate the selected block(s).Ctrl+Shift+D⇧⌘D
Remove the selected block(s).Shift+Alt+Z⌃⌥Z
Insert a new block before the selected block(s).Ctrl+Alt+T⌥⌘T
Insert a new block after the selected block(s).Ctrl+Alt+Y⌥⌘Y
Move the selected block(s) up.Ctrl+Alt+Shift+T
Move the selected block(s) down.Ctrl+Alt+Shift+Y⌥⌘⇧Y
Change the block type after adding a new paragraph.//
Remove multiple selected blocks.delbackspace

Text formatting

Shortcut descriptionLinux/Windows shortcutmacOS shortcut
Make the selected text bold.Ctrl+B⌘B
Make the selected text italic.Ctrl+I⌘I
Underline the selected text.Ctrl+U⌘U
Convert the selected text into a link.
Remove a link.Ctrl+Shift+K⇧⌘K
Add a strikethrough to the selected text.Shift+Alt+D⌃⌥D
Display the selected text in a monospaced font.Shift+Alt+X⌃⌥X

Is Gutenberg built on top of TinyMCE?

No. TinyMCE is only used for the “Classic” block.

What browsers does Gutenberg support?

Gutenberg is compatible with all contemporary browsers, including Internet Explorer 11.

How do I make my own block?

The Create a Block Tutorial is the best place to start.

Does Gutenberg involve editing posts/pages in the front-end?

No, Gutenberg is primarily intended to be a substitute for the post and page editing windows. Front-end editing, on the other hand, is frequently mistaken with an editor that appears precisely like the front end. And Gutenberg will make this possible since themes will be able to customize individual blocks and send those styles to the editor. We feel it is not optimal to develop or design posts from a single front-end experience since the content is meant to be disseminated across so many various experiences—from desktop and mobile to full-text feeds and syndicated article platforms.

How can plugins extend the Gutenberg UI?

The primary point of extension we want to highlight is the creation of new blocks. Plugins are used to add blocks to the block editor; for more information, see the Create a Block Tutorial.

Are Custom Post Types still supported?

Indeed. Gutenberg may be used in a variety of ways by custom post kinds. The idea is for them to be able to define the blocks they support as well as a default block for each post type. Although this isn’t the case right now, if a post type hides the content field, the “advanced” part at the bottom of the page would occupy the entire page.

Does Gutenberg support columns?

In Gutenberg, a columns block is provided.

Does Gutenberg support nested blocks?

Yes, it’s possible. Multiple layers of nesting are possible — blocks inside blocks within blocks.

Does drag and drop work for rearranging blocks?

Yes, you may alter the arrangement of the blocks by dragging and dropping them.

Can themes style blocks?

Yes. Blocks can either give their own styles that themes can add to or override, or they can provide no styles at all and rely entirely on the theme.

How do block styles work in both the front-end and back-end?

Blocks can offer structural CSS styles as a foundation, and themes can add styles on top of that. Some blocks, such as a Separator (<hr/>), are unlikely to require any front-end styles, but others, such as a Gallery, would.

Other features, like the new full-width and wide-width alignment choices, are just CSS classes applied to blocks that support this alignment. We’re looking at how a theme may enable this feature, such as through the use of add_theme_support.

What are block variations? Are they the same as block styles? 

Block variants, on the other hand, are various versions of a single basic block with comparable functionality but minor variances in implementation or settings (attributes, InnerBlocks, etc). Users can’t see block variants, and once one is registered, it appears as a new block. The embed block, for example, registers several block variants for embedding material from certain sources.

Block styles, on the other hand, allow you to give existing blocks different looks by adding a className to the block’s wrapper. Once a block has registered block styles, a block style picker will display in the block’s sidebar, allowing users to choose among the many styles that have been registered.

How do editor styles work?

Regular editor styles are opt-in and, in most situations, operate as they should. The following hook can be used by themes to load additional stylesheets:

function gutenbergtheme_editor_styles() {
wp_enqueue_style( 'gutenbergtheme-blocks-style', get_template_directory_uri() . '/blocks.css');
add_action( 'enqueue_block_editor_assets', 'gutenbergtheme_editor_styles' );

Should I be concerned that Gutenberg will make my plugin obsolete?

Gutenberg’s objective is not to put anyone out of business. It’s to improve WordPress so that there’s more business for everyone in the future.

A meta objective is to bring WordPress forward as a platform, in addition to offering a great post and page creation experience. Not just through updating the user interface, but also by updating the foundation.

We are aware that this is a significant shift. We also believe that plugins will have a lot of new potentials. WordPress is expected to come with a set of basic blocks, but there will be plenty of opportunities for paid plugins to enhance or add to the mix.

Is it possible to opt out of Gutenberg for my site?

There’s a “Classic” block that’s almost identical to the current editor but in block form.

There’s also the Classic Editor plugin, which restores the former editor; for more details, check the plugin page. The Classic Editor Plugin will be supported by the WordPress Core team until December 2021.

How do custom TinyMCE buttons work in Gutenberg?

Custom TinyMCE buttons are still functional in the “Classic” block, which is a block version of the classic editor that you are familiar with.
Gutenberg includes a new universal inserter tool that provides you searching access to all accessible blocks, organized by recency and categories. This inserter utility creates a level playing field for all plugins that add material to the editor by providing a single user interface.

How do shortcodes work in Gutenberg? 

Shortcodes continue to function as before.
The block, on the other hand, is a development of the [shortcode]. You can utilize the universal inserter tray to choose a block and receive a nicer interface for both customizing and previewing it instead of typing out code. We propose that users convert their shortcodes to blocks in the future.

Should I move shortcodes to content blocks?

We believe this for several reasons, including but not limited to:

  • Visual editing is incorporated into blocks, resulting in a more rich, dynamic experience when designing your site.
  • Blocks are just html and don’t save anything on the frontend that the browser doesn’t understand. Disabling a plugin that powers a shortcode, on the other hand, results in odd frontend graphics (often just showing the shortcode in plain text).
  • With the debut of the block directory, blocks will be more easily discovered in a manner that shortcodes could never be, allowing more users to get access to greater functionality.

Finally, Blocks are intended to be a visual representation of the final appearance, and with the introduction of the Block Directory in WordPress 5.5, they will become the standard way for users to discover and input content.

Is Gutenberg made to be properly accessible? 

Accessibility is not a last-minute consideration. At the present, not all of Gutenberg’s features are available. You may look at the issues that have been reported here. We recognize that WordPress is a platform for everyone, and that accessibility is all about inclusiveness. For us, this is a critical value.

If you’d like to help improve Gutenberg’s accessibility, we could always use more testers and contributors.

How is data stored? I’ve seen HTML comments, what is their purpose?

Our strategy, as mentioned in the technical overview introduction, is to supplement the existing data format in a way that doesn’t jeopardize WordPress’s decade-and-a-half-long content fabric. To put it another way, this optimizes for a format that emphasizes human readability (the web’s HTML page) and easy-to-render-anywhere over a machine-friendly file (JSON in post-meta) that solely helps the editing context.

This also allows us to maintain token references for those blocks that are fundamentally distinct from the content stream (reusable parts like widgets or short post type components) and store them elsewhere.

To learn more about how this component of the project works, we recommend looking at the Gutenberg core principles.

How can I parse the post content back out into blocks in PHP or JS?

In JS:

var blocks = wp.blocks.parse( postContent );


$blocks = parse_blocks( $post_content );

WordPress is already the world’s most popular publishing platform. Why change the editor at all?

The Editor is where the majority of the activity in WordPress happens on a regular basis, and it was a location where we could refine and improve the block experience in a controlled setting. Furthermore, we feel it is important for WordPress to continue to innovate and try to make the core experience easy and pleasant for all users as an open-source project. Gutenberg has the potential to accomplish precisely that as a community effort, and we’re thrilled to work together to achieve this objective. We encourage you to share anything you find on GitHub if you want to test, contribute, or provide comments.

That’s all for this article if you have any queries please contact us through our website or email us at [email protected]

Leave a Comment