What is Gutenberg?
Gutenberg is the project name given to the new WordPress block editor. The block editor replaced the TinyMCE editor as the default editor in WordPress 5.0.
While the block editor was in development, it was referred to as “Gutenberg.” However, it is now built into the WordPress core software and is called the “WordPress block editor” or “WordPress editor.” These terms are used interchangeably when discussing the new editor.
Here is what the old WordPress TinyMCE editor looked like. It is known now as the “classic editor”:
Here is what the new WordPress block editor, Gutenberg, looks like:
How the Gutenberg editor works
Gutenberg is a block-based editor. It replaces the classic editor single line edit fields with multiple individual “blocks”.
These blocks allow you to build more complex designs.
What is a block? A block can be anything from regular text, images, video embed, buttons, widgets, tables, and even more.
A tour of the WordPress block editor interface
A – lets you add new blocks
B – undo/redo buttons
C – gives information about the content structure (counts of words, headings, paragraphs, blocks)
D – block navigation
E – lets you access a live preview or publish/update your post/page.
F – when an individual block is selected, this gives you access to settings that are specific to that block
G – this is where you add blocks that will contain content
Adding new blocks
Blocks build your layout. To add a new block, click on the +Plus icon and select the type of content you want to add.
There are many different types of blocks to choose from, and more are being added.
Most Used – a collection of the most commonly used blocks.
Common Blocks – contains the basic building blocks like paragraphs, images, headings, quotes, list, gallery, quotes, audio, etc.
Formatting – lets you add formatted content like the classic WordPress editor, code, tables, etc.
Layout Elements – lets you add buttons, columns, page breaks, etc.
Widgets – widgets are no longer confined to just a sidebar or footer are, now you can now add widgets to your posts or pages. This also lets you add shortcodes, latest posts, categories and calendars.
Embeds – embed external sources like Facebook, YouTube, Instagram, Twitter, etc.
Yoast Structured Data Blocks – available to users who have the Yoast SEO plugin installed. It allows you to add structured data metadata automatically to content that is added to these blocks.
Each block is its own object that can be controlled individually. For example, here is a post showing how easy it is to rearrange blocks by dragging and dropping or using the toggles.
Thought this was helpful? Stay tuned for my next article, Creating Your First Gutenberg Post.
Also, visit our Gutenberg page and explore our list of ever-growing resources.