Tutorial Written: September 3, 2018
This Gutenberg tutorial and guide works for both posts and pages.
What is Gutenberg?
Gutenberg is the replacement WordPress TinyMCE Text Editor (WYSIWYG Text Editor) where you write your posts and page text. Here is what the new editor will look like in comparison to what it does now:
So, they just made it look different, things are in different spots and some items have different titles. No biggie, right? No, not quite! It’s more than just an aesthetic update. Gutenberg is going to completely change the editing experience by moving to a block-based approach to content. What does that even mean?
Gutenberg Block-Based Editing
The current text editor requires a lot of us to use shortcodes and know HTML to make our posts and pages “fancy”, or create different page layouts like 2 columns vs 1. If you don’t know HTML you’d have to contact your web designer to create these layouts and of course, that comes with a fee. Gutenberg replaces the single edit field of the current WordPress TinyMCE editor with individual “blocks”. So, you could create a layout on a post/page where you have several columns with images and NOT know a single bit of HTML, AT ALL! How does that sound? COOL!!
What is a block?
A block can anything. For example, you can have blocks for:
- Regular Text
- Widgets (the same widgets you use in your sidebar)
Each block is separate from each other in that you can manipulate each one on an individual basis. For example, you will be able to easily rearrange blocks of content just by clicking a button.
Let’s visually take a look at what blocks are via the editor and the actual blog post in the screenshots below before we get into the nitty-gritty. The image on the left is from the Gutenberg Editor. Each of the items in the red squares is a Block. So basically, everything you do will be using some kind of block: A Title Block, an Image Block, a Heading Block, a Paragraph Block, a Button Block, a Column Block (2-6 Columns), a Category Block, a blank Spacer Block, and so many more. Can you spot the blank Spacer Block in the first image below? It’s right above the Categories Heading Block. The image on the right shows each of those blocks of content on the actual post. The Spacer Block gave about 10 pixels extra space above that Header, which is needed. Don’t worry, after we get through this guide, this will make more sense.
How to Install the Gutenberg Block-Based Editer
As of today’s date, all you have to do is install and activate the Gutenberg plugin. Otherwise, Gutenberg will automatically be installed with the new WordPress 5.0 update and every update thereafter.
- Go to: Plugins / Add New
- Search for: Gutenberg (by Gutenberg Team)
- Click on: Install Now
- Click on: Activate
If you have previously activated the WordPress Classic Editor, you must go into the plugins area and deactivate it before the Gutenberg Editor will appear on the left hand side as an option:
- Go to: Plugins / Installed Plugins
- Look for: Classic Editor
- Click on: Deactivate
- Click on: Delete
On the left-hand side Menu of your dashboard, scroll down and hover over Gutenberg and you will see: Demo, Support, Feedback, and Documentation. In this tutorial, I will not be going over any of these options; however, you can go back and read to get a better understanding of the Gutenberg Editor. I MAY REFERENCE THE DEMO LATER IN THIS TUTORIAL.
A Tour of the Gutenberg Block-Based Editor
After you have installed and activated Gutenberg, go to Posts / Add New. You will notice that you are met with Tips that you can go ahead and click through then continue on here OR click the x and continue on here. NOTE: The Tips are not in detail and only include 4 in total.
NOTE: What I am NOT showing you in this screenshot is everything that is below the editor, like the Theme SEO Settings, Layout Settings, and Scripts, etc., because these are all the same as in the Classic Editor, none of it has changed so I feel no need to go over them in this tutorial.
b) Most Used: This is a list of your most used blocks for easy access. The order will change as you use blocks. See Common blocks below for a detail of each type of block.
c) Inline Elements: Strange thing.. as I am writing this tutorial and going over elements, this section disappeared from my options. So I can’t tell you exactly what it is, what the options are, or WHY it disappeared. Glitch maybe?
Update: I think I know what this is, but I can’t find any documentation. I think this is for adding an IMAGE INSIDE of another block. But don’t quote me on it. As I was creating a table, this Inline Element block reappeared. So I think if you are working on a block that you may want to ADD an image inside of, it appears. But again, this is just my hunch.
d) Common Blocks: The basic blocks that are available to use and come with the Gutenberg editor.
Important: Let’s talk more about the COLOR settings options: IF you have an existing theme and have added and activated the Gutenberg editor, it has its own default color palette in the color settings area that most likely will not match your theme design. Using any of the colors WILL override what has been customized into your WordPress theme and may not match your blog design, thus making your design and blog post look bad in the long run. Please think before using these additional options. In saying this, these colors can be customized into your theme to match your design. You will have to contact me for a quote (this is so new I have yet to work out my fees for this type of service) to get this done. Here is what it looks like with the default color options in comparison to custom color options:
2. File: A file could be a freebie you are allowing someone to download directly from the post. You can upload a new file or select a file from the media library. On the right-hand side under the Block tab, you will have additional formatting options for the file.
3. Image: Add an image to your post. You will be prompted to drag an image, upload a new image or select an image from the media library and select different alignment settings. On the right-hand side under the Block tab, you will have additional formatting options for the image. Please read more about The Media Uploader below in #23 below.
4. Heading: Use this to create a Heading or several Headings within the post. You’ll be presented with options for different sized headings, bold, italics, linking, etc. On the right-hand side under the Block tab, you will have additional formatting options. Please note that this Heading is different than the blog post title.
5. Gallery: Add an image gallery to your post. You will be prompted to drag images, upload new images or select images from the media library and select different alignment settings. On the right-hand side under the Block tab, you will have additional formatting options for the image gallery.
6. List: Add ordered and/or unordered lists to your blog post. You will be prompted to pick either style and pick different formatting options.
7. Quote: Add a quote (your own or someone else’s) and the citation to your blog post. The styling and alignment are done in the WordPress theme coding. However, you can override this and change the alignment and pick different formatting options. One of the options is to go from regular size to a larger size and this option is right above where you type, see the quote icons in A below. If you hover over the quote icons, it will change to a switch icon to “change block type”, see B below. Click on it to view the 2 sizes to choose from: the regular and the larger, see C below. Hover over the larger and it will show you a preview of it to the right-hand side. Click on the larger button to select it. You can use this toggle to go back and forth between the 2 sizes. Please see my note below the examples.
Important: Let’s talk more about the 2 size options: IF you have an existing theme and have added and activated the Gutenberg editor, it has its own default style for the larger quote and most likely will NOT look the same as the regular sized quote, thus not match your theme design. The larger quote can be customized to match the regular sized quote. See the last sample below. You will have to contact me for a quote (this is so new I have yet to work out my fees for this type of service) to get this done.
8. Audio: Add an audio file to your blog post. You will be prompted to drag an audio file, upload a new audio file, select an audio file from the media library, or use a direct link for the audio file. There are different alignment settings to choose from.
9. Cover Image: Add a full-width image to the blog post and layer text over it. You will be prompted to drag an image, upload a new image or select an image from the media library and select different alignment settings. On the right-hand side under the Block tab, you will have additional formatting options.
10. Video: Add a video to your blog post. You will be prompted to drag an video file, upload a new video file, select a video file from the media library, or use a direct link for the video file. There are different alignment settings to choose from and on the right-hand side under the Block tab, you will have additional formatting options.
e) Formatting: These types formatting blocks are not used by the typical blogger, but they are available to you.
2. Classic: This drops the WordPress Classic Editor and almost all of its text formatting options right into a block for your use in writing a paragraph. Hey, why Not?
3. Custom HTML: This block allows you to use HTML within your blog post AND preview it as you are writing it.
4. Preformatted: Preformatted text is similar to the Code text (above) in that it is usually styled into the WordPress theme using a simple default monospace font, spacing, and sometimes a background color. The text will be displayed in a fashion that resembles “computer code” and is not used by the typical blogger. For example:
5. Pullquote: Again, not a formatting option that the typical blogger uses; however, it is available. Quote vs Pullquote. The Quote is just a regular quote, something you are quoting. The Pullquote is a way to highlight small excerpts of text pulled from your own blog post by displaying it in a manner that stands out from the rest of the text. The pullquote is styled into the WordPress Theme and can be a simple design to a very elaborate design. For example, here is a paragraph and a pullquote highlighting an excerpt of that paragraph:
6. Table: Use to create a table — perfect for sharing charts and data. Once clicked you will be presented with options for the amount of Columns and Rows needed and editing/formatting options. On the right-hand side under the Block tab, you will have a few formatting options. Example:
7. Verse: This is something new that I have never heard of that the developers of Gutenberg thought it was important? It’s apparently for citing poetry. The styling on this theme that I am using for a sample, is exactly like the Preformatted block. Example:
f) Layout Elements: Layout elements are used to help format the text or appearance of your post/page.
Important: Let’s talk more about the COLOR settings options: IF you have an existing theme and have added and activated the Gutenberg editor, it has its own default color palette for the button background and text in the color settings area that most likely will not match your theme design. Using any of the colors WILL override what has been customized into your WordPress theme and may not match your blog design, thus making your design and blog post look bad in the long run. Please think before using these additional options. In saying this, these colors can be customized into your theme to match your design. You will have to contact me for a quote (this is so new I have yet to work out my fees for this type of service) to get this done. Here is what it looks like with the default color options in comparison to custom color options:
Important: Let’s talk more about the actual design of the button. IF you have an existing theme and have added and activated the Gutenberg editor, it has its own default button design (pill shape) that most likely will not match the rest of the buttons on your blog or website. The Gutenberg button can be customized to match the rest of your site buttons. You will have to contact me for a quote (this is so new I have yet to work out my fees for this type of service) to get this done.
Below is a sample of what a button looks like with the hover effect on a custom WordPress theme; to the right, the default Gutenberg button with the hover effect used on the same WordPress theme. It doesn’t match the rest of the blog buttons!
2. Spacer: Sometimes you just need extra space. Add the spacer block to add a bit of space between elements. Use the blue dot to drag the space shorter or longer or use the right-hand side Height in Pixels option under the Block tab.
3. Columns (beta): This block is still in Beta as of today’s date of 9/16/18 and for me was a little hard to figure out. Maybe once it’s out of Beta, it will be easier. These instructions may need to change if the actual block changes once it is out of Beta.
Once you add the column block, you will be presented with 2 columns to start. By default, these are paragraph blocks, notice the block tab on the right-hand side, the options are for a paragraph. However, you can see the + indicator in each block and be able to add any type of block inside the column that you want. For instance. You can add an image in the left-hand block and text in the right-hand block:
Add new columns, but add 3 columns: Add a new column block, you will only see 2 columns with the options on the Block tab on the far right-hand side for a paragraph. When you hover over the second column block, you will notice you get a blue outline around the second column (See A Below). If you hover your mouse to the right outside of the second block, you will notice that the blue outline covers both blocks (See B Below) and the arrow icon of the mouse now turns into a hand icon, which you can’t see in the screenshot below because it’s a screenshot (believe me, it’s there), but the hand icon will appear right where you see the letter B below. Now click in that blank space to the right (where you see the letter B) and your block tab on the right-hand side NOW turns into options for more columns (See C Below). Click the up arrow to make the 2 columns a 3 column. You can now place text or whatever other type of block inside each of the three columns (See D Below).
Repeat the above for up to 6 columns. Here is what your post/page would look like with the columns, see E below. You will notice that the columns are a bit squished together. This is the default for some reason. I’m hoping that it is because it’s still in Beta. However, I can add a bit of space in between each of the columns so that they look better. See F below for better spacing on columns. You will have to contact me for a quote (this is so new I have yet to work out my fees for this type of service) to get this done.
4. More: The More block is basically a Read More button. If your WordPress theme is already set up to automatically include excerpts or summaries of your posts with a Read More button, you won’t need this. But if your theme doesn’t and you have a very lengthy post, you may want to use this block. Just write your post and insert this block where you want to cut off the text and have your readers click the Read More button to read the rest of the post. I tested this block on several different themes and it picked up the design of the blog, so there shouldn’t be a need to customize this block. But if for some reason it doesn’t match your design, you can contact me for a quote (this is so new I have yet to work out my fees for this type of service) to get this done.
5. Page Break: This block allows you to set breakpoints on your post/page. Visitors to your blog are then presented with content split into multiple pages. If you were to add 2 pagebreaks, there would be 3 pages to visit.
6. Separator: The separator block will insert a horizontal line where you want to create a break between ideas on your blog post/page. When you add this block, the default is a “short” line. But there are 3 designs of lines to choose from. If you hover over the down arrow you see in A below, it will change to Change Block Type, see B below. Click on it to view the 3 different lines styles to choose from, see C below.
This is what a post would look like with Separators added. Quite nice, but sometimes these lines need a bit of customization. The default is a very dark line, see D below. And you can also see, the short line isn’t even a short line. In sample E below, you can see how much better the lines are customized. They have a softer color and good spacing. You will have to contact me for a quote (this is so new I have yet to work out my fees for this type of service) to get this done.
g) Widgets: You can now add widgets directly to your blog posts or pages. Yes, like the ones you add to your sidebar! There are just a few of them now, but I bet they add more later;)
When you add the Shortcode Block, you will be prompted to add the shortcode, see A and B below. Once the shortcode is saved, you will be able to see the widget within your post/page. For instance, you will see in sample C below, I have added a silly shortcode to this blog post that would hopefully get people to donate to one of my least expensive obsessions. Once the link is clicked, you are taken to a PayPal donation page that lets you log into your own account and buy me a coffee!
2. Archives: Add a list of blog archives to the blog post/page. When you add the Archives Block, you will be presented with the list of the archives with alignment options right above it. On the right-hand side under the Block tab, you will have additional setting options for the archives.
Once you have added the archives within the post/page, you may notice that they do not match what you have showing on the sidebar, see below. If you want them the same, you will have to contact me for a quote (this is so new I have yet to work out my fees for this type of service) to get this done.
3. Categories: Add a list of blog categories to the blog post/page. When you add the Categories Block, you will be presented with the list of categories with alignment options right above it. On the right-hand side under the Block tab, you will have additional setting options for the categories.
Once you have added the categories within the post/page, you may notice that they do not match what you have showing on the sidebar, see below. If you want them the same, you will have to contact me for a quote (this is so new I have yet to work out my fees for this type of service) to get this done.
4. Latest Comments: Add a list of latest blog comments to the blog post/page. When you add the Latest Comments Block, you will be presented with the list of comments with alignment options right above it. On the right-hand side under the Block tab, you will have additional setting options for the comments.
Once you have added the latest comments within the post/page, you may notice that they do not match what you have showing on the sidebar. If you want them the same, you will have to contact me for a quote (this is so new I have yet to work out my fees for this type of service) to get this done.
5. Latest Posts: Add a list of latest blog posts to the blog post/page. When you add the Latest Posts Block, you will be presented with the list of posts with alignment options right above it. On the right-hand side under the Block tab, you will have additional setting options for the posts.
Once you have added the latest posts within the post/page, you may notice that they do not match what you have showing on the sidebar. If you want them the same, you will have to contact me for a quote (this is so new I have yet to work out my fees for this type of service) to get this done.
h) Embeds: The Embeds block allows you to add a block that displays content pulled from other sites, like Twitter, Instagram or YouTube. There are too many to list and I will not go through each of them, you get the idea.
When you add an Embed Block, you will be presented with alignment options right above it. On the right-hand side under the Block tab, you may or may not have additional setting options. Here is a screenshot of what is available as of the date of this guide.
i) Moving Blocks: Once you have added a few blocks and maybe you need to move a few around and rearrange the blocks, how do you do that? If you click on any of the blocks and hover your mouse to the left outside of the block you will notice a up/down arrow appear. Use the arrows by clicking on them to move the block up or down, it’s that simple!
j) Other Movement Options & How to Delete Blocks: If you click on any of the blocks and view the options above each block you will notice the last option has three dots, this is the More Options button. Click it and you will see additional options for this particular block.
2. Duplicate: This option will duplicate the current block.
3. Insert Before: This option will open a new block area above the current block.
4. Insert After: This option will open a new block area below the current block.
5. Edit as HTML: This option allows the user to edit the selected block in HTML mode. I advise only advanced HTML users to use this mode. Once you are done editing in this mode, select the More Options again and select Edit Visually.
6. Add to Reusable Blocks: Again, this option is geared for the more advanced users. Essential this option is good for those who modify a block so much and use the modifications quite often that you could “create” a new block for the modifications. BoldGrid wrote a great very short tutorial for this if you want to learn to create your own Blocks: Create a Reusable Block in the Gutenberg Editor.
7. Remove Block: The delete button, delete the selcted block. It’s that simple!
2) Undo: Undo your last action.
3) Redo: Redo your last action.
4) Content Structure: Information about the contents of this post/page, i.e. how many words, headings, paragraphs, and blocks for this post/page as well as document outline of headings. This item will be grayed out and not show as clickable until you start adding blocks to your post/page.
5) Title: The title for the post/page.
6) Add Block: Another instance to add a new block to the content. Each time you add a block and complete it, the + icon will show right under the last block.
7) Write your story: The area where you add your content: text/images, etc. The default is to start adding text, the Paragraph block. If you always add an image to your posts first, you should click on the + icon to add the Image block.
8) Additional Blocks Section: As you add blocks, you will see to the far right-hand side this section of icons to add blocks. These will be 3 of your most used blocks for this post/page so that you can select them easier.
9) Save Draft: This option is grayed out until you start typing your post. Once you start typing your post, you can click it (often) to save your post as a draft. WordPress auto saves a draft every so often, but please do not rely on that. Once you publish your post, it will then turn into a Switch to Draft button, if you need to go back to draft mode.
10) Preview: Click to preview your post in a new window.
11) Publish: Click to publish your post. After you have clicked publish, you will be presented with another box to make changes in your visibility (public is default), the publish date (today’s date is default), and to add tags if you’d like to. If no changes are needed, click on Publish to publish your post/page.
Once your post is published, the Publish button will turn into an Update button so that you can edit and update your post at any time:
12) Settings: Click to “hide” the right-hand sidebar options giving you access to even more of your screen. It is similar to the available distraction-free writing mode in the Classic Editor. Click settings again to un-hide the sidebar options.
b) Spotlight Mode: Spotlight: I played with this a little bit and didn’t see anything change other than the editor reduces in viewing opacity to about 50%. Not sure why this is necessary. Until I can find out what this is and why we would use it, I’d say don’t use it.
c) Visual Editor: This option is the default and will be check marked. This allows the user to write and edit the blocks in the WYSIWYG (what you see is what you get) way. Meaning, you will see all of the text and images, etc. vs. the Code Editor (see below), which should not be used unless you are HTML savvy. You can, however, switch back and forth between the two if you need to without losing content.
d) Code Editor: This option allows the user to write and edit the blocks using HTML coding. Unless you are HTML savvy, you should not use this option. If you do use this option, you can switch back and forth between the Code Editor and Visual Editor if you need to without losing content.
e) Show Tips: This option is the default and will be check marked. I toggled this on and off to see the difference. I did see about 4 tips after I turned it back on, then saw nothing else after that. So, it’s up to you to leave it on or turn it off.
f) Keyboard Shortcuts: After clicking this, a popup dialog box of all Keyboard Shortcuts will appear. Click the x if the upper right-hand side to close. Click to view them at any time.
g) Copy All Content: This option copies all of the blog post content, then you can open a new block and paste. From what I see, there are some issues. The columns did not copy and paste correctly, they are now paragraphs and the horizontal lines also didn’t copy and paste correctly. There are some other editing problems as well. Unless they plan to fix this, you will have to go back through and fix issues.
16) (x) Close Settings: Like the Settings buttons (see #12 above), this will “hide” the right-hand sidebar options giving you access to even more of your screen. It is similar to the available distraction-free writing mode in the Classic Editor. To un-hide the sidebar options, click the Settings button.
b) Visibility: The default is Public. Click on Public and you will now have two more options to choose from: Private and Password Protected.
- Public: This post will be viewable to everyone who visits the blog.
- Private: This allows you to privately publish a post on your blog. The private posts will be visible only to users who have editing privileges on your site.
- Password Protected: This option takes your blog post out of public view and requires the user to enter in a password in order to view it. After checking this, you are prompted to enter in the password and click ok to set it.
c) Publish: The default is the date and time you created the new post/page. You can click on this date and time to change it. A small calendar will appear and you may change it to a later date and time OR an earlier date and time.
d) Stick to the Front Page: Checking this will allow you to make your post sticky to the front page of your blog. Sticky posts are like featured content that are displayed on top of all other posts and will remain on top even if you publish a new post. Uncheck it to remove the post from being sticky.
e) Pending Review: Checking this will allow you to flag this post for review by another logged in user. Within the list of posts, it will show Pending next to the title of the post. Once the post has been reviewed and is ok, the user then un-checks the Pending Review button and saves as a draft or publishes the post.
f) Move to Trash: This allows you to delete your post. Deleted posts live under trash. You can always restore deleted posts, they will remain under trash for up to 30 days.
g) Revisions: When you first start a new post, you will not see this under the Status & Visibility options. Once you start writing your post and click on save draft, this will appear and show how many times (revisions) you have saved the draft. You can click on the Browse link to view the latest revision of the post with a scroll bar on top. Sliding the button on the scroll bar will take you to different revisions of your post and allow you to UNDO changes.
18) Categories: Categories (and tags, below #19) help you organize your content in a meaningful and browsable format. Not only can your users easily find your content, but it’s also good for your site SEO. Think of the categories (and tags) as folders in a filing cabinet.
Categories are general topics or table of contents for your site. They are there to help identify what your blog is really about and to help your readers in finding the right content on your site. You MUST categorize your posts. If you do not categorize your posts, they will be categorized under the “uncategorized” category by default. Blog posts can have as many categories (or tags) as you need.
b) Categories: The list of all your categories.
c) Add New Category: Click this to add a new category or sub-category. Be sure to click on the Add New Category Button on the bottom to complete the add. The new category will be automatically added to the list of categories to choose from for each new post thereafter.
19) Tags: As stated above in categories, tags help you organize your content in a meaningful and browsable format. Tags describe specific details of your posts. Think of them as your site’s index words. You are not required to add any tags. So, you can write posts and add categories but never tag them. Blog posts can have as many tags as you need.
For example: You have a personal blog and write about your life. Your categories are: Family, Food, Fashion, Travel, and Books. When you write a post about the steakhouse restaurant you ate at, you will use the Food category and use tags like steak, baked potato, salad, etc.
b) Add New Tag: Add each tag word separated by a comma. Once used, a tag word will auto-populate when you start typing it for each new post thereafter.
c) List of Tags: Once tags have been added, this is how it will look showing the list of tag words used. Click the x to delete a tag word.
20) Featured Image: The Featured Image is basically a thumbnail or smaller sized version of an image and is used on some themes in various places like the homepage to show post summaries and their image or “featured image” or on the sidebar to also show post summaries and their “featured image”. If you are unsure about whether your theme uses a featured image anywhere, your best bet is to go ahead and set it, it never hurts!
Don’t forget to click on the Select button to set the Featured Image.
b) Replace Image: If you need to use a different image, click this button to replace the image selected, using the same instructions as before.
c) Remove Featured Image: Click this link to completely remove the featured image for this post.
21) Excerpt: Click to add a small amount of text that will be the excerpt (or quick summary) for this post. Some themes have excerpts automatically built into their theme, so using this will over-ride the automatically added text and the amount of text used for the excerpt (which normally would be the first lines of text you wrote).
b) Write an Excerpt (optional): Where you write your short summary for this blog post. I’m not quite sure WHY it says optional; otherwise, you just wouldn’t even use it? lol
c) Learn More About Manual Excerpts: Clicking this link will open a new page to read about WordPress Excerpts.
b) Allow Comments: Check or un-check to change this setting.
c) Allow Pingbacks & Trackbacks: Check or un-check to change this setting.
23) The Media Uploader / Media Library: I wanted to give more attention and information for the Media Uploader / Media Library. There are 2 ways to upload images: A) Upload all images before writing a post or B) Upload the images needed as you are writing the post. Most people upload their images as they are writing their posts. I will go over both ways because one leads into the other:
Please Note: The Gutenberg Editor doesn’t change the way the Media Uploader or Media Library behaves from the Classic Editor. However, because I am writing this tutorial and guide for beginners, I think this is necessary to add the instructions for this area as well.
A) Upload Images Before Writing the Post:
2) Go to: Media / Add New — Drag the image(s) or use the Select button to browse to find the image you want to upload. Once the image is uploaded, you will see an Edit link underneath the Media Uploader area. Click it to open a new window to Edit the image file you just uploaded.
3) Edit Media: This is where you add information about the new image.
B) Upload Images While Writing Post:
24) Tips Before Creating Your First Post/Page:
25) Create Your First Post/Page with the Gutenberg Editor: