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.
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 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
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
- PermalinkURL Slug
- Slug Preview i.e. http://localhost:8888/example/sample-page/
- Featured Image
- Page Attributes
- Parent etc…
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.
Gutenberg also comes with a few new page features:
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…)
The block navigation is a list view of all existing blocks on the page.
When the top toolbar is selected Block Controls will appear in the
top toolbar and not on the individual block.
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.
This option is selected by default. Toggles the new editor.
This option toggles a code view just like in the classic editor.
This panel toggles which blocks are available in the editor.
This panel shows a list of shortcuts that can be used on in the editor.
This panel comes from the classic editor it shows which features will be displayed in the editor. i.e. Custom Fields, Yoast SEO.
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!