Gutenberg Quick Start

The Gutenberg Editor

The Gutenberg editor is the next-generation WordPress post and page editor, replacing the Classic editor. Taking inspiration from popular web building services like Squarespace and Wix, the Gutenberg editor introduces a block-based interface that opens up new possibilities for page layout and organization. Blocks are intended to natively solve some of the problems that have made shortcodes, Advance Custom Fields templates, and page-building plugins necessary in WordPress.

Editing Experience

With Gutenberg, the editing experience has been redesigned. As mentioned above, Gutenberg uses blocks. Blocks are different from standard HTML editors, and provide flexibility for both novices and experts. These new blocks allow for media rich pages without needing any previous coding knowledge.

Blocks

Blocks allow for the creation of engaging content that can be inserted, rearranged, and styled with very little technical expertise. This means the use of custom codes can be avoided, and content creators can instead add blocks and focus on building out site content. There are dozens of blocks available for building out thoughtfully designed posts and pages. Several of the most commonly used blocks can be previewed in this schematic.

Creating Posts and Pages

Before using the Gutenberg editor it’s necessary to create a post or a page. Posts and pages are where content lives on a WordPress site, and where blocks are used to create that content. To get started with creating a post or page, see the instructions below.

Instructions:

1. From the Dashboard of your WordPress site, click either “Posts” or “Pages” from the left-side menu. 
2. On the next page, click “Add New” near the top of the page.

For more information on creating a post or a page, see below:

Important: The post or page has now been created, but it is not yet published (made public). Before the post or page is published, content will need to be built out on the site. If the post or page will be worked on over an extended period of time, it can be saved as a draft before it is published.

Adding a Block

After creating a post or a page, content can now be built out using blocks. First, the header will need to be populated, but then blocks can be added immediately to the main page area. See below for instructions on how to add a Paragraph block.

Instructions:

1. Click the “Add a block button” () found above or below the Header Area.
2. Click “Paragraph” from the dropdown menu.
3. Populate the Paragraph block by typing your desired content in the block.
4. Hit Enter/Return on your keyboard, or click outside the block to create the Paragraph.
5. Click “Save Draft” to save your work.

Important: The post or page now contains content and can be published; however, if there is additional content that needs to be added to the post or page before publishing, continue to click “Save Draft” as the post or page is developed. Once the post or page has been completely built out, click “Publish” to make it public.

Note:  Blocks can also be added to a post or page by using the “/” command. While working down the center of a page, instead of clicking the “Add a block button”, simply type “/” to bring up a list of most frequently used blocks.

Manipulating Blocks

After blocks have been added to a post or page, they can be further manipulated as needed. Changes to a block are made by first clicking on the block itself. Then the block can be changed by editing the content itself, using the toolbar directly above the block, or by adjusting the settings found in the Block right-side panel. If there is a specific change that needs to be made, looking in these three areas will often provide what is needed.

Need Help?

Still unsure of the Gutenberg editor and using blocks? Feel free to reach out with any questions or concerns at go.ncsu.edu/ucomm-dev-request.