Getting Down to Work With Gutenberg
November 13, 2018
Blocks are the useful way of building website posts.
Adding Blocks to Gutenberg
Gutenberg actually includes a ton of different blocks, divided into different sections:
At the top, you see a list of your Most Used blocks. But if you scroll down you’ll also see sections for Common Blocks, Formatting, Layout Elements, Widgets, and Embeds.
- 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.
Basic Layout with Gutenberg
We will build a basic blog post layout that includes:
- Regular Text
- An Image
- A quote
- An embedded YouTube Video
You will write your entire post in the editor, or you can now write in your favorite text editor. Gutenberg has a very good copy and paste functionality. Now that your content is split into blocks you can hover over the spot where you want to insert your first 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 current WordPress editor:
Next, hover over the spot where you want to insert the pull quote and use the same approach to insert another block. You can either search for “quote” or go to the Common Blocks section:
Then, you will see your new pull quote block. To create your quote all you need to do is click into the block and type.