Many of you may have noticed a new editor when logging into WordPress. On December 6, 2018 WordPress released a major upgrade known as “Gutenberg” or WordPress 5. This upgrade is the beginning of the future of WordPress, and will be the new standard in a few short years.

WordPress 4 and earlier versions were fully built using PHP Server-Side Language. WordPress 5 (Gutenberg) is based on the popular Javascript framework React. This means Gutenberg is more Javascript based. This addition allows users to update content in real-time instead of waiting on a page reload to see your changes.

A huge portion of WordPress users see the new editor and assume WordPress is broken, and have no clue what’s going on. Because of the misinformation, I would like to take the time to shed some light on this upgrade.

Welcome To Block Based Editing!

The new editor is centered on block based editing, so each block can have their own settings and layout. In a few years, the block editor will be the new standard. Here’s a quick tour of the new editor:

Adding Blocks

Adding content into the Gutenberg Editor requires you to add a block. Keep in mind that in WordPress 5 (Gutenberg) everything is a block. There are a set of basic blocks that are available straight out of the box. Here is a list of blocks located in the common blocks category that can be used for creating a page or post.

Common Blocks, Paragraph, Image, Heading, Gallery, List, Quote, Audio, Cover, File, Video

Document Options

The document options are pretty much the same. They are located in the right column of the editor. This is where you will find the following options:

  • Status & Visibility
  • Visibility
  • Publish
  • PermalinkURL Slug
  • Slug Preview i.e. http://localhost:8888/example/sample-page/
  • Featured Image
  • Discussion
  • Page Attributes
  • Order
  • Templates
  • Parent etc…

Block Options

When a block is highlighted in the editor, the options for that block will appear in the right column. These options can also appear on the top bar or the block itself for a visual editing experience.

Additional Options

Gutenberg also comes with a few new page features:

Content Structure

The content structure panel shows stats of the current page of post that you are working on (i.e a word count, number of headings, block count, etc…)

Block Navigation

The block navigation is a list view of all existing blocks on the page.

Top Toolbar

When the top toolbar is selected Block Controls will appear in the
top toolbar and not on the individual block.

Spotlight Mode

Spotlight mode highlights the current selected block all other blocks will show up with a grey opacity. Rest easy, it’s not broken!

Full Screen Mode

Full screen mode is a full display of the editor. It removes the left navbar and provides more space for editing.

Visual Editor

This option is selected by default. Toggles the new editor.

Code Editor

This option toggles a code view just like in the classic editor.

Block Manager

This panel toggles which blocks are available in the editor.

Keyboard Shortcuts

This panel shows a list of shortcuts that can be used on in the editor.

Options Panel

This panel comes from the classic editor it shows which features will be displayed in the editor. i.e. Custom Fields, Yoast SEO.

Conclusion

Gutenberg can be overwhelming at times, but it’s something that WordPress users should become more familiar with. The best way to master Gutenberg is to use it!