Basic Editing with Gutenberg

Gutenberg is a block-based editor. Essentially, Gutenberg replaces the single edit field of the old WordPress editor with lots of individual “blocks”.

These blocks allow you to build more complex designs than was possible in the old WordPress editor.

A block can be pretty much anything. For example, you can have blocks for:

• Regular text
• Images
• Video embeds
• Buttons
• Widgets
• Tables
• Etc.

Each block is its own entity that you can manipulate on an individual basis. Because each block is “separate”, you can also add things like custom backgrounds just for specific blocks.

The Gutenberg Interface

(A) – lets you add new blocks.
(B) – undo/redo buttons
(C) – gives you access to document settings, covering things like categories & tags, featured images, etc. This is similar to the current sidebar in the WordPress editor
(D) – when you have an individual block selected, this gives you access to settings that are specific to that block
(E) – lets you access a live preview of your post or publish/update your post
(F) – once you add some blocks, this is where you’ll actually work with your post’s content

Adding a Block

To add a new block, click the +Plus icon and select the type of content you want to add:

• Inline Elements – only contains one block for an inline image.
• Common Blocks – contains basic building blocks like images, paragraphs (regular text), headings, quotes, etc.
• Formatting – let you add more formatted content like pull quotes, tables, or the classic WordPress text editor
• Layout Elements– let you split text into two columns, include buttons, separators, or the “More” tag
• Widgets – let you add shortcodes, latest posts, or categories. It’s even possible to display sidebar widgets right in Gutenberg.
• Embeds – help you embed content from external sources like Twitter, YouTube, Facebook, Instagram, and more.

Building a Basic Block
that includes regular text, an image, a quote and an embedded YouTube video

Write your entire text in the editor or, if you like, write in Microsoft Word or Google Docs and paste it all in. Gutenberg will automatically convert it to blocks.

Hover over the spot where you want to insert your image and click the plus icon. That will create a break. Then, click the plus icon again to insert the image block. This will allow you to insert an image block, from which you can upload or select images in a similar manner to the old WordPress editor.

Hover over the spot where you want to insert a quote and use the same approach to insert another block. You can either search for “quote” or go to the Common Blocks section and select “Quote”. Click into the block and type the text of your quote.

To insert a YouTube video, you first add a YouTube block from the Embeds tab. To insert the video, all you need to do is enter the URL and click “Embed”.

Styling
For basic text styling and alignment, you can use the menu bar that appears when you hover over a block.

For more advanced styling, select the block you want to edit and click the Block tab at the top right of the screen and use the function in the column below.

Use the arrows that appear at the left of the block when you hover over it to move the block up and down or hold your mouse down on the six dots on the left of the block and drag and drop the block.