Gutenberg was designed by WordPress to improve the interface of WP sites across devices and to make creating media-rich sites easier. Gutenberg is a block editor, which means that information is embedded by adding “blocks” to a post or page, rather than having one field that mixes text, images, video, etc. Blocks allow for easier customization of pages and movement of content around the page.
Classic Editor
Classic Editor
In the Classic Editor, the editing screen includes a toolbar for text and a variety of menus to insert different types of media or content. With Gutenberg, the editor will help you get to the relevant menus, based on the type of content.
Gutenberg Editor
Gutenberg Editor
In Gutenberg Editor, blocks are created for the specific type of content. Click the circled + in the top left corner, and select the content type.
Basic Editing in Gutenberg
When a user selects the block type, the editor will display menus for settings and customization. If it appears that the site did not update after editing, try refreshing the page or clicking “delete cache” (top tool bar) to update.
For text blocks, a basic editing bar above the block allows for quick hyperlinking and basic text formatting. The block menu to the right gives more customization options for text such as changing font size, color or background, and dropping caps. One example is in the header above, where the text and “inline background” color is customized. “Header” blocks and “Quote” blocks also allow for organizing the text and calling attention to certain elements.
For a single picture, choose “image,” and edit, caption, and select the way the text flows around the picture. Also, click the link icon, and select “media file” from the drop-down menu to allow visitors to your site to click the image and enlarge it in a separate window.
To insert multiple pictures, insert a “gallery” block and arrange the pictures. Add text to the images, and select the way the pictures will be displayed. Don’t forget to add the gallery to your post or page by clicking the button in the lower right of the Edit Gallery screen.
Once the block is in place, Gutenberg allows for easy editing. Select a block, and then click the “Block” button in the top right corner (under “Howdy”). The menu that appears will match the content. For images, adjust image size and linking options.
Moving blocks is easy and does not require cutting and pasting. Click the block. In the left corner just outside the block, arrows allow the user to move the block up and down to the desired location on the post or page.
The document tab (top right corner under “howdy”) houses the menu for publication settings as well as other parameters for that specific post or page. This is the place to save drafts, publish, add privacy settings, see revisions, add categories and tags, and select discussion settings. This is also the menu to access the URL for that page (permalink). Adding a featured image here will place an image next to the post on the blog. Some themes allow a “sticky” post, which will keep that post at the top of the blog roll rather than having the latest post be placed at the top.
For more information or assistance with Gutenberg or ePortfolio, schedule an appointment with a digital consultants at UNE’s Student Academic Success Center, located in the Ripich Commons (#35 on this campus map.
