Gutenberg is the newer/updated default editor for WordPress, which seeks to compete with other page builders while maintaining simplicity. Though the simplicity is not developed enough for building informational website pages, it does prove to be useful for blog posts.
Compared to the original WordPress editor, it is more block-based approach to content editing.
A tour of the Gutenberg Interface
- (A) – lets you add new blocks.
- (B) – undo/redo buttons
- (C) – view a list view (outline) of all your blocks – helpful for quickly navigating between blocks
- (D) – 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
- (E) – when you have an individual block selected, this gives you access to settings that are specific to that block
- (F) – lets you access a live preview of your post or publish/update your post
- (G) – once you add some blocks, this is where you’ll actually work with your post’s content
Adding New Blocks
To add a new block, hover where you would like to add your content, until you see either a black box with a + sign, or a blue line with a box that has a + sign.
Then, select the type of content you want to add.
Building a Basic Layout in Gutenberg
You can paste in content from Microsoft Word, and have your paragraphs already separated into paragraph blocks that can be moved around and manipulated as needed. Otherwise, you can type directly into the post – hitting the return key will automatically create a new paragraph block. If you want to put certain paragraphs together, use Return+Shift to do a single line break.
To add an image, hover your cursor where you would add content until the blue line appears, and select Image. This will allow you to insert an image, to which you can directly upload one, or select one from the media library.
Once your image is inserted, you can make minor adjustments to your image, such as changing the alignment, or even the sizing of the image by clicking and dragging the blue dots that appear on the right and bottom of said image.
If you would like to create header text to separate your content, you can insert a new block as demonstrated above, then choose Heading. Alternatively, you can hover over an existing paragraph block and convert it over by clicking the paragraph symbol, then choose Heading.
Creating columns
Gutenberg does allow you to separate your content into columns, via another built-in block. Add a new block, choosing the Columns option. You will then be prompted to choose what widths you’d like to separate them into.
