Wordpress 5.0 - Gutenberg
Explore the block structure of Wordpress 5.0. The update helps organize, edit, and create content through the use of blocks.
Transcript
Hi this is Jordan from ipso Creative and this video is an overview of the Wordpress editor called Gutenberg.
We’re gonna take a look at the new page structure, and how to edit content using the block editor. Let’s dive in.
As you can see the Gutenberg update changed both the page layout and the content editor. First, let’s walk through the new layout.
The page title is located at the top of the editor as a permanent block. Page settings and formatting options are on the right. In the top bar you have your “Save Draft” , Preview , and “Publish” buttons. The gear icon hides and displays the document and block settings. And the icon with three dots provides you additional options for editing this document.
The Document settings are very similar to the previous editor. You have your status & Visibility settings. You can edit your permalink here, or if you click on the page title you can edit it there as well. There’s also the featured image field, discussion options, and your page attributes.
Now let’s talk about the new Gutenberg editor. It’s considered a block editor because every content element is added as its own block within the page. To add a block, look for the plus sign icon, which you can find in multiple places throughout the editor. Once clicked, it opens up a window with different categories of block elements that you can add in. There is also a search bar which is very helpful if you know which block you want. Let’s add a Heading Block to our page.
Above each block is a styles toolbar. The icon on the far left identifies the type of block. And depending on the type of block, it will allow you to transform into a different block. For instance, we can transform our heading into a paragraph, or quote block. Our toolbar also has some basic formatting and styling options, and clicking the three dots shows us more actions we can take…hide...
If we look to the right, we see the Block tab is selected in our settings sidebar. Each block has different settings and styles that can be managed here. For our heading block we have a list of our different heading tags, and can choose the text alignment.
There’s also an advanced settings section. For our heading, we can set an anchor tag which let’s you link directly to that section of the page. Most blocks also have this CSS field. This allows developers to create additional styles that can be applied to blocks by adding the CSS class here.
Let’s add a new block after our heading. If we start typing, it automatically creates a Paragraph block. With Gutenberg, each paragraph is created as its own block. Selecting the paragraph we can see our styling and formatting options have changed in both the toolbar and the block settings. Paragraphs have a color settings control, where you can add a background color or change the text color based on the defined brand colors.
Let’s add an image. Adding images is very simple in Gutenberg. If not contained in a column, the image will appear full size. Choosing alignment, however, will allow text to wrap the image.
Another common element are buttons. Buttons are also added as their own block. Click inside the button to change the button text, edit the url underneath, and align the button. Clicking the button icon shows us our button styles, as does our settings sidebar on the right, along with our color options for the background and text color.
Now, let’s take a look at some layout elements. Two of the most common layout elements are the columns block and the spacer block. The columns block allows you build out a row with a varying number of columns. The number of columns can be changed in the settings sidebar. Once the columns block is added you can begin to add content within the columns.
The last block we’ll add is the spacer block. The spacer block is perfect if you want to add padding or spacing in between elements on your page. It simply acts as blank space or white space on your page. You can adjust the amount of spacing by adjusting the pixels in the settings sidebar.
There’s a few additional features that are helpful as you build out your document:
* As you add new blocks of content you’ll notice 3 icons display faintly in the corner of the row. These are your three most frequently used blocks which get updated as you add content and build out your page.
* You can also move content elements around by hovering over the block and clicking the up and down arrows, or grabbing the block and dropping where you want.
* On the top left of the page, You can view an outline of the content elements on your page, and quickly navigate between items.
* You can also view some basic data about your document
* Undo & Redo content changes, and add new blocks.
Well, that wraps our overview of the Wordpress block editor, Gutenberg. Hopefully this video was helpful in showing you the new page structure, settings, and formatting options, as well as learning how to manage content using the Gutenberg editor. Check out the description for other helpful CMS videos, and thanks for watching.