Gutenberg Tutorial

An introduction to Gutenberg, the editor:

Gutenberg contains a library of visual pre-built elements called “blocks”. These blocks are customizable and include text and images, as well as more advanced components such as buttons and tables.

Table Of Contents

  1. Top Left Bar

    1. Add Block(Plus Button)

    2. Undo and Redo Buttons

    3. Content Structure Button

    4. Block Navigation Button

  2. Top Right Bar

    1. Save Draft Button

    2. Preview Button

    3. Publish Button

    4. Settings Button

    5. More Tools and Options Button

      1. View Section

        1. Top Toolbar

        2. Spotlight Mode

        3. Fullscreen Mode

      2. Editor Section

  3. Settings

    1. Status and Visibility Section

      1. Post Visibility Options

      2. Publish Date Options

      3. Pending Review

    2. Categories Section

    3. Tags Section

  4. Visual Editor

    1. Blocks

      1. Transforming Blocks

      2. Block Options

        1. Hide Block Settings Option

        2. Duplicate Option

        3. Insert Before & After Option

        4. Edit as HTML Option

        5. Add to Reusable Blocks Option

        6. Remove Block Option

      3. Block Review

        1. Paragraph Block

          1. Toolbar

            1. Align text left

            2. Align text center

            3. Align text right

            4. Change typography

              1. Font

              2. Weight

              3. Transform

              4. Size

              5. Line Height

              6. Letter Spacing

              7. No Top Spacing

              8. No Bottom Spacing

            5. Bold

            6. Italic

            7. Link

            8. Code

            9. Inline Image

            10. Strikethrough

            11. Uppercase

          2. Block Settings

            1. Font Size

            2. Drop Cap

            3. Background Color

            4. Text Color

            5. Custom Styles

        2. Image Block

          1. Toolbar

            1. Align Left

            2. Align Center

            3. Align Right

            4. Wide Width

            5. Full Width

            6. Edit Image

          2. Block Settings

            1. Alt Text

            2. Image Size

            3. Image Dimensions

            4. Image Shrink Presets

            5. Reset Shrink Button

            6. Link To

            7. Link URL

            8. Open in New Tab

            9. Link CSS Class

            10. Link Rel

        3. Header Block

          1. Toolbar

            1. Heading 2

            2. Heading 3

            3. Heading 4

          2. Block Options

            1. Heading Level

            2. Text Alignment

        4. List Block

          1. Toolbar

            1. Convert to Unordered List

            2. Convert to Ordered List

            3. Outdent List Item

            4. Indent List Item

          2. Block Options

            1. Default Style

            2. No Style

            3. Checkbox Style

        5. Quote Block

          1. Toolbar

          2. Block Options

            1. Default Style

            2. Large Style

        6. File Block

          1. Toolbar

          2. Block Settings

            1. Link To

            2. Open in New Tab

            3. Download Button Settings

        7. Audio Block

          1. Toolbar

          2. Block Settings

            1. Autoplay

            2. Loop

            3. Preload

        8. Video Block

          1. Toolbar

          2. Block Settings

            1. Autoplay

            2. Loop

            3. Muted

            4. Playback Controls

            5. Preload

            6. Poster Image

        9. Cover Block

          1. Toolbar

          2. Block Settings

            1. Fixed Background

            2. Focal Point Picker

            3. Horizontal Pos. & Vertical Pos

            4. Overlay Color

            5. Background Opacity

        10. Gallery Block

          1. Media Library Option

          2. Upload Option

          3. Toolbar

          4. Block Settings

            1. Columns

            2. Crop Images

            3. Link To

I. TOP LEFT BAR

Gutenberg Tutorial
Gutenberg Tutorial

On the top, below the bar, there is a collection of writing tools – an add block(plus button), undo, redo, content structure, and a block navigation button. 

A. Add Block (Plus Button)

The add block or plus button will let you search for a block(a pre-built element) to add to your post. When you click the plus button and scroll down, you will see groups of blocks that are collapsed. To use a block, click on the one you want to use and you will be able to edit it.

Gutenberg Tutorial
Gutenberg Tutorial

B. Undo and Redo Buttons

The undo and redo buttons, will undo and redo changes.

C. Content Structure Button

The content structure button will give you statistics on the number of words, headings, paragraphs, and blocks in your post.

Gutenberg Tutorial
Gutenberg Tutorial

D. Block Navigation Button

The block navigation button will give you an outline on the blocks you use in your post.

Gutenberg Tutorial
Gutenberg Tutorial

II. TOP RIGHT BAR

Below the admin bar and in the right, there is a collection of tools and options – a save draft, preview, and publish button, settings, and more tools and options.

A. Save Draft Button

The save draft button will only appear once you start typing in the editor. When you click the button, your post will be saved and will not be published so you can leave the page and continue editing the post when you come back.

B. Preview Button

The preview button will save your post as a draft and will show what your post would look like if it was published in a new tab. To get back to the editor, close the preview tab.

C. Publish Button

The publish button will show you a pre-publish check that will ask you to confirm the settings. If you double check your settings, you can press the publish button. You should see a message that informs you that your website is now live and gives you a URL and buttons to view the post and copy the URL.

Gutenberg Tutorial
Gutenberg Tutorial

Gutenberg Tutorial
Gutenberg Tutorial

D. Settings Button

The settings button contains all of the settings for your document and blocks that you are working with.

E. More Tools and Options Button

In more tools and options (the button that looks like a triple colon), you can see many tools and option sections – view, editor, plugins, tools, and options. I am going to go over the view and editor sections because these are the most popular settings.

1. View Section

In the view section, you can customize the layout of the editor.

Gutenberg Tutorial
Gutenberg Tutorial

a) Top Toolbar

If you select Top Toolbar, instead of having the settings above the block that you are editing, the settings are at the top, in the middle of the top left bar and top right bar.

b) Spotlight Mode

Spotlight Mode will grey out other blocks that you are not currently editing.

c) Fullscreen Mode

If you don’t want the left menu or the admin bar distracting you, you can enable Fullscreen Mode and the menu and bar will be hidden.

2. Editor Section

In the Editor section, there are two options – Visual Editor and Code Editor. The visual editor is the editor which contains blocks and would probably be the one that you use, but if you have some experience coding, you can use the code editor, which is more customizable but takes longer to create a post.

Gutenberg Tutorial
Gutenberg Tutorial

III. SETTINGS

On the right of the editor, you will find the settings for the document and individual blocks. There are a lot of settings to scroll through, so I will go over the Status and Visibility, Categories, and Tags sections because they most used/important sections.

Gutenberg Tutorial
Gutenberg Tutorial

A. Status and Visibility Section

In the Status and Visibility section, there are settings for the visibility of the post, when the post is going to be published, and if you want the post to be a pending review. 

1) Post Visibility Options

If you click on “Public”, you will see the available options for post visibility; public, private, and password protected. Usually, when you create a post, you would want to set it to public.

Gutenberg Tutorial
Gutenberg Tutorial

2) Publish Date Options

The next setting is for when you want the post to be published. By default, immediately will publish the post when you click the publish button. If you want to schedule when you want the post to be published, or you want to change the publish date back in time, click on “Immediately”. Using the calendar, you can set the date and time.

Gutenberg Tutorial
Gutenberg Tutorial

2) Pending Review

The final option, Pending Review, will set the post in a review state and signal to other editors that your post needs to be reviewed before it is published.

B. Categories Section

To open up the next section, categories, select the arrow on the right of the section. In categories, you will see a couple premade categories for organizing your posts. To add you post to a category, simply check the box on the category(s) you want.

Gutenberg Tutorial
Gutenberg Tutorial

C. Tags Section

In the Tags section, you will see a box that you can type tags into. To add a tag, write the tag you want to add to the post and hit enter. When you write a tag, you may see a dropdown list containing all of the tags that contain what you entered, where you can select a pre-made tag. If you want to create a new tag, you can continue writing it and press enter, as long as you have not selected a pre made tag, where you have to continue writing or press the esc key to get rid of the dropdown. To delete a tag, click the x button or hit the delete key.

Gutenberg Tutorial
Gutenberg Tutorial

IV. VISUAL EDITOR

The visual editor is where you create your post using blocks. To start creating a post, click where it says Add title and type what you want to call your post. Next, click Start writing…

Gutenberg Tutorial
Gutenberg Tutorial

A. Blocks

On the left, you can find the add block button and on the right you can see the three of your most used blocks. When you click the add block button or hit the slash key, you will see a popup, which was the same one in the top left bar. If you collapse the Most Used section or scroll down, you can find a lot of other sections which hold a lot of blocks.

Gutenberg Tutorial
Gutenberg Tutorial

Open up the section for Common Blocks and select Paragraph. The Paragraph block is the most used block which lets you write anything. There is a toolbar with commonly used features such as aligning text, typography settings, and rich text controls.

Gutenberg Tutorial
Gutenberg Tutorial

1. Transforming Blocks

To change the Paragraph block(or any block) to another block, click on the Pilcrow(?) and a Transform To popup will appear. 

Gutenberg Tutorial
Gutenberg Tutorial

In the Transform To popup, select the block and everything you typed in will be converted to that block. For example, if you selected the Heading block, your text would look like this:

Gutenberg Tutorial
Gutenberg Tutorial

2. Block Options

In the triple colon menu, there is a variety of options that you can use.

Gutenberg Tutorial
Gutenberg Tutorial

a) Hide/Show Block Settings Option

The Hide/Show Block Settings option will hide or show the settings tab on the right.

Gutenberg Tutorial
Gutenberg Tutorial

b) Duplicate Option

The Duplicate option will create a copy of the block

Gutenberg Tutorial
Gutenberg Tutorial

c) Insert Before & After Options

The Insert before & after options will insert a new block before or after the block that you are currently editing.

Gutenberg Tutorial
Gutenberg Tutorial

Gutenberg Tutorial
Gutenberg Tutorial

d) Edit as HTML Option

Edit as HTML will convert the block to HTML code and if you know how to code in HTML, you can change the block using code.

Gutenberg Tutorial
Gutenberg Tutorial

e) Add to Reusable Blocks Option

The Add to Reusable Blocks option will add the block that you are currently editing to a collection of blocks called Reusable blocks. When you save it and give your block a name, the next time you create a new block and scroll down to the bottom, you will see a new category called Reusable

Gutenberg Tutorial
Gutenberg Tutorial

When you hover over your block, you will see a preview of it.

Gutenberg Tutorial
Gutenberg Tutorial

When you click the block, it will add it to the editor

Gutenberg Tutorial
Gutenberg Tutorial

If you want to edit the block, click the edit button. Click save if you want to save the updated block as a reusable block. If you want to delete the reusable block from the reusable block collection, select the option in the triple colon called Remove from reusable blocks. If you want to convert it to a regular block, go to the triple colon and select Convert to Regular Block.

Gutenberg Tutorial
Gutenberg Tutorial

f) Remove Block Option

The Remove Block option will delete the block that you are currently editing.

3. Block Review

a) Paragraph Block

The paragraph block is the most useful and popular block. With the paragraph block, you can write anything you want. The paragraph block also includes many tools to customize the text you write.

(1) Toolbar

Gutenberg Tutorial
Gutenberg Tutorial

(a) Align text left – aligns the text to the left side of the editor

(b) Align text center – aligns the text to the middle of the editor

(c) Align text right – aligns the text to the right side of the editor

(d) Change typography

Gutenberg Tutorial
Gutenberg Tutorial

(1. Font – changes the font library of the text

(2. Weight – changes the style of the text

(3. Transform – changes all of the text to uppercase, lowercase, or capitalizes all words

(4. Size – changes the font size

(5. Line Height – changes the distance between lines

(6. Letter Spacing – changes the spacing between each character

(7. No Top Spacing – removes the spacing from the top

(8. No Bottom Spacing – removes the spacing from the bottom

(e) Bold – makes the text bold

(f) Italic- makes the text italic

(g) Link – turns the selected text into a link

Gutenberg Tutorial
Gutenberg Tutorial

The search box will search the site for pages and posts that match the text typed in, or will link to a URL if a website address is entered in.

To edit the link, click the edit button.

Gutenberg Tutorial
Gutenberg Tutorial

To make the link open in a new tab, open the link settings dropdown and check the option that says Open in New Tab.

Gutenberg Tutorial
Gutenberg Tutorial

To delete the link, click on the Unlink button on the toolbar.

Gutenberg Tutorial
Gutenberg Tutorial

(h) Code – turns the selected text into a codebox, which specially formats code.

Gutenberg Tutorial
Gutenberg Tutorial

(i) Inline Image – adds an image in the same line as the text.

Gutenberg Tutorial
Gutenberg Tutorial

(j) Strikethrough – makes the text have a line passing through the middle of it

(k) Uppercase – makes the text selected or the text entered after enabling uppercase all caps. To stop making all the text entered caps, or to turn all the text converted to uppercase back to original, click the uppercase button again.

(2) Block Settings

Gutenberg Tutorial
Gutenberg Tutorial

(a) Font Size – changes the font size using presets or by a number

(b) Drop Cap – makes the first letter big

(c) Background Color – changes the background color of the text

(d) Text Color – changes the color of the text

If you want a custom color for either the background or text color, click custom color.

Gutenberg Tutorial
Gutenberg Tutorial

Here, you will see a hue slider and a box to choose the color you want. If you have a hex code you can enter it in the text box.

Gutenberg Tutorial
Gutenberg Tutorial

If you want to enter RGB values, click the arrow and put in the values in the boxes.

(e) Custom Styles – Changes the custom styles for the paragraph

b) Image block

The image block is very useful in posts and pages when you want to display an image.

When you add the image block to Gutenberg, you will see a grey box that gives you multiple options where you want to get the image from. You can upload a file that you want using the file picker, use an existing image from the media library or upload files from there, you can use an image from a URL, or drag and drop an image.

Gutenberg Tutorial
Gutenberg Tutorial

Once you added your image, the editor should look something like this:

Gutenberg Tutorial
Gutenberg Tutorial

To shrink or expand the image, hold one of the blue dots and pull in or out.

(1) Toolbar

Gutenberg Tutorial
Gutenberg Tutorial

(a) Align Left – aligns the image to the left side

(b) Align Center – aligns the image to the center

Gutenberg Tutorial
Gutenberg Tutorial

(c) Align Right – aligns the image to the right side

(d) Wide Width – will make the image take up all the space horizontally

Gutenberg Tutorial
Gutenberg Tutorial

(e) Full Width – will make the image take up all the space until the right and left border of the image touches the end of the page.

Gutenberg Tutorial
Gutenberg Tutorial

(f) Edit Image – opens the media viewer to change the image details or to select a new image

Gutenberg Tutorial
Gutenberg Tutorial

(2) Block Settings

Gutenberg Tutorial
Gutenberg Tutorial

(a) Alt Text – change the alternative text of the image so people who can’t see it can listen to a description of the image

(b) Image Size – scale your image to one of the presets

(c) Image Dimensions – change the width and height of your image

(d) Image Shrink Presets – use the percentages to shrink your image by the percentage

(e) Reset Shrink Button – resets any shrinking you applied to the image using the percentages

(f) Link To – choose one of the presets or choose your own URL to direct the image to a URL you pick

(g) Link URL – customize the URL that the image links to

(h) Open in New Tab – setting that opens the link in a new tab when the image is clicked

Gutenberg Tutorial
Gutenberg Tutorial

The last two options are advanced.

(i) Link CSS Class – customize the css class for the link

(j) Link Rel – customize the link’s rel attribute

c) Header Block

The header block is useful when you are typing multiple sections in WordPress and want to separate the sections. Using the header block, there are three different section sizes (font sizes) that you can use to differentiate sections inside your pages and posts. A bigger heading size will have a smaller font.

(1) Toolbar

Gutenberg Tutorial
Gutenberg Tutorial

Note that there are other options in the toolbar that I am not going to go over since I already went over the same options in the paragraph block review.

(a) Heading 2 – sets the text to the heading 2 preset

Gutenberg Tutorial
Gutenberg Tutorial

(b) Heading 3 – sets the text to the heading 3 preset

Gutenberg Tutorial
Gutenberg Tutorial

(c) Heading 4 – sets the text to the heading 4 preset

Gutenberg Tutorial
Gutenberg Tutorial

(2) Block Options

Gutenberg Tutorial
Gutenberg Tutorial

The color settings were already went over in the paragraph review.

a) Heading Level – set the heading preset for the text. Has level 1, 5, and 6, which are not in the toolbar.

b) Text Alignment – aligns the text to either left, center, or right.

d) List Block

(1) Toolbar

Gutenberg Tutorial
Gutenberg Tutorial

(a) Convert to Unordered List – converts the current list to a bullet point list

(b) Convert to Ordered List – converts the current list to a numbered list

(c) Outdent List Item – makes the list item outdent or the equivalent of shift-tab

(d) Indent List Item – makes the list item indent or the equivalent of tab

(2) Block Options

Gutenberg Tutorial
Gutenberg Tutorial

(a) Default Style – sets the list style to default which has the bullets or numbers before the list item

Gutenberg Tutorial
Gutenberg Tutorial

(b) No Style – removes the style which removes any bullet or number prefix

Gutenberg Tutorial
Gutenberg Tutorial

(c) Checkbox Style – sets the list style to checkbox which adds checkboxes before the list item

Gutenberg Tutorial
Gutenberg Tutorial

e) Quote block

The quote block is used to display a quote in your page or post.

Gutenberg Tutorial
Gutenberg Tutorial

(1) Toolbar

The toolbar is identical to the toolbar of the paragraph block

(2) Block Options

Gutenberg Tutorial
Gutenberg Tutorial

(a) Default Style – shows the quote in a normal font 

Gutenberg Tutorial
Gutenberg Tutorial

(b) Large Style – shows the quote in a large font

Gutenberg Tutorial
Gutenberg Tutorial

f) File Block

The file block is used for giving readers access to a file using a download link or by clicking on the filename.

When you add a file block, you can either specify the file from the media library or upload it to your site.

Gutenberg Tutorial
Gutenberg Tutorial

(1) Toolbar

The toolbar is identical to the toolbar of the image block, but also includes additional rich text controls.

Gutenberg Tutorial
Gutenberg Tutorial

(2) Block Settings

Gutenberg Tutorial
Gutenberg Tutorial

(a) Link To – set where the text will link to

(b) Open in New Tab – will open the link in a new tab

(c) Download Button Settings – will hide or show the download button

g) Audio Block

The audio block lets readers listen to a MP3 file you select.

When you add the audio block, it will ask you to select a file. The file selection box is the same as the photo block.

Gutenberg Tutorial
Gutenberg Tutorial

(1) Toolbar

The toolbar is identical to the toolbar of the image block, but when you click the edit button (the pencil), it will go back to the file selection box.

Gutenberg Tutorial
Gutenberg Tutorial

(2) Block Settings

Gutenberg Tutorial
Gutenberg Tutorial

(a) Autoplay – will automatically play the mp3 file when a reader loads the page or post

(b) Loop – will loop the music file as soon as it ends

(c) Preload – will preload the audio metadata as soon as the reader enters the post or page (the information embedded in the audio file)

h) Video Block

When you add the audio block, it will ask you for a video file. The file selection box is the same as the photo block and audio block.

Gutenberg Tutorial
Gutenberg Tutorial

(1) Toolbar

The toolbar is the same as the audio block

Gutenberg Tutorial
Gutenberg Tutorial

(2) Block Settings

Gutenberg Tutorial
Gutenberg Tutorial

(a) Autoplay – will automatically play the video when a reader visits the page or post

(b) Loop – will loop the video as soon as it reaches the end

(c) Muted – Will mute all of the audio coming out the video

(d) Playback Controls – will give controls to the reader such as playing the video, scrolling through the video, changing volume and making the video fullscreen.

Gutenberg Tutorial
Gutenberg Tutorial

(e) Preload – will preload the metadata of the video

(f) Poster Image – sets the image that the readers will see when they first see the video (like a thumbnail)

i) Cover Block

The cover block adds a text overlay over an image or video

When you add the cover block, it will ask for an image or video. The file selection box is the same as the file block.

Gutenberg Tutorial
Gutenberg Tutorial

(1) Toolbar

The cover block has two toolbars, one is the paragraph toolbar that is used to type the text overlay, although you can also use a heading and button block instead of the paragraph block. The cover block is similar to the photo block, but it also has a typography setting.

Gutenberg Tutorial
Gutenberg Tutorial

(2) Block Settings

Gutenberg Tutorial
Gutenberg Tutorial

(a) Fixed Background – the fixed background option will zoom into the spot that you picked in the focal point picker

(b) Focal Point Picker – chooses what area the image will be displayed below the overlay

Gutenberg Tutorial
Gutenberg Tutorial

(c) Horizontal Pos. & Vertical Pos. – moves the focal point picker using horizontal and vertical positions

(d) Overlay Color – customizes the color of the overlay

Gutenberg Tutorial
Gutenberg Tutorial

Gutenberg Tutorial
Gutenberg Tutorial

(e) Background Opacity – sets how much the overlay is visible

j) Gallery Block

The gallery block will..

When you add the gallery block, you will see a file selection box which is the same as the file selection box and the cover selection box.

Gutenberg Tutorial
Gutenberg Tutorial

(1) Media Library Option

If you clicked media library to upload an image, you will go into the media library and will be able to select more than one image for the gallery.

Gutenberg Tutorial
Gutenberg Tutorial

Gutenberg Tutorial
Gutenberg Tutorial

When you finished selecting the images, click Create a new gallery on the bottom right.

Gutenberg Tutorial
Gutenberg Tutorial

You will see a new page called Edit Gallery where you can reorder the images you picked, caption them, and remove them. If you forgot an image, or just want to add a new one, click Add to Gallery on the side and choose more images.

When you finished reordering the images, click on Insert gallery to add your gallery to the editor. You will see the images being displayed visually

Gutenberg Tutorial
Gutenberg Tutorial

(2) Upload option

If you selected the upload option, you will see the visual gallery editor instead of the media library gallery editor.

When you upload an image, you will see the image displayed and a plus button under it that says Upload an image, which will add a new image.

Gutenberg Tutorial
Gutenberg Tutorial

To delete or write a caption for an image, click on the image you want to add a caption to and type in the caption. If you want to delete the image, click the x button 

Gutenberg Tutorial
Gutenberg Tutorial

If you want to rearrange the image, click on the edit button (pencil) on the toolbar.

Gutenberg Tutorial
Gutenberg Tutorial

You will see the edit gallery page which was explained in the media library option.

Gutenberg Tutorial
Gutenberg Tutorial

(3) Toolbar

The toolbar of the gallery is the same as the image toolbar

(4) Block Settings

Gutenberg Tutorial
Gutenberg Tutorial

(a) Columns – customize the amount of columns are in the gallery

(b) Crop Images – crops the images to align to the gallery

(c) Link To – makes the individual images link to the attachment page or the file

Leave a Reply

Your email address will not be published. Required fields are marked *