Tutorial Written: September 3, 2018
Updated: September 28, 2018
This Gutenberg tutorial and guide works for both posts and pages and is heavy in explanation and screenshots to make it easier for you. In saying this, you can also watch a video on YouTube by WP.Crafter.com WordPress for Non-Techies (he does a great job for beginners), where he explains the new interface. Sometimes watching a video rather than reading helps, I know it does for me. So watch his video, then come back and go over the details here.
WordPress Gutenberg Tutorial For Content Writers & Editors by WP.Crafter.com WordPress for Non-Techies
NOTE: As of January 2019, I haven’t gone through any of these instructions. Some things may have changed since I wrote it because changes to Gutenberg were made faster than I could write this tutorial. But I think if you are willing to learn Gutenberg, this tutorial and the video will help.
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
- Images
- Videos
- Buttons
- Widgets (the same widgets you use in your sidebar)
- Tables
- Etc.
Each block is separate from the 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
Gutenberg
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.
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.
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22
The Media Uploader / Media Library
Tips Before Creating Your First Post/Page
Create Your First Post/Page with the Gutenberg Block-Based Editor
1) Add Block: Click to select the type of content block you want to add to your blog post.
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.
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 a 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 of 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 is 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 two page breaks, 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 an 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 selected block. It’s that simple!
2) Undo: Undo your last action.
top
3) Redo: Redo your last action.
top
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.
top
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.
top
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.
top
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.
top
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 autosaves 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.
top
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 the default), then publish date (today’s date is the default), and 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.
top
13) More Options: Once clicked, it will show the following:
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.
14) Document Tab: All of the options available for this post/page.
15) Block Tab: The block tab options will only be available once you have started adding content and click on that content. Each type of block content has it’s own set of block options.
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.
top
17) Status & Visibility: The status and visibility for this post/page.
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 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 is 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 it 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 tables 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!
b) Set Featured Image: Click to upload a new image or pick an image that was previously uploaded to the Media Library. Please read more about The Media Uploader below in #23 below.
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 override 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.
22) Discussion: The discussion settings are usually taken care of within the dashboard under Settings / Discussion. However, you can override the settings here for each blog post.
b) Allow Comments: Check or un-check to change this setting.
c) Allow Pingbacks & Trackbacks: Check or un-check to change this setting.
The Media Uploader / Media Library
I wanted to go over the Media Uploader / Media Library. But first, I wanted to give a very very important tip before you upload any images to your blog or website. Images directly from a camera or phone are huge, too big for the internet. If you don’t resize your images before uploading, eventually your blog or website will take too long to load and you will lose readers, members, shoppers, etc. and you eventually will require more space from your web host, which means more money spent on the hosting service. I wrote a blog post about this very thing and show you how to resize images using an easy free online program called Canva. You can read the post here: How to Resize your Blog Posts using Canva
There are 2 ways to upload images: upload all images before writing a post or 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.
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 these instructions.
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 additional information about the image is added.
b) Permalink: The permanent direct link to the image.
c) Image: The image 😉
d) Edit Image: When this button is clicked, it will allow edits such as rotate, scale, and crop (for image files only). I will not go into detail, you should be editing your images before upload.
e) Caption: The caption should also be short and sweet, a brief explanation about the image or the image copyright, etc. Once you have written a caption for the image, it will appear directly under the image.
f) Alternative Text: This should be a summary description of the image. This is very good for SEO (Google loves alt text) and is also used by users who are visually or hearing impaired. The alt text is used in search engine IMAGE searches and is seen by users.
g) Description: This is a more detailed description of what the image is about, also good for SEO. The description is also used in search engine IMAGE searches and is seen by users.
h) Media Details: All of the items outlined within the red border: date uploaded, file URL, file name, file type, file size, and image dimensions.
i) Regenerate Thumbnails: You will only have this if the Regenerate Thumbnails plugin has been installed. You will more than likely NOT need to use this. It may have been installed at the time a designer was working on your design. You can read more about the Regenerate Thumbnails plugin on the Plugins page.
j) Delete Permanently: The delete button. Click to delete the image permanently from the server and off of WordPress.
k) Update: Click to update any changes made.
B) Upload Images While Writing Post:
2) Click on: Upload and browse to find the image you want to upload and click on the Open button:
3) Next, you will see the image added and above it some alignment options and on the right under the Block tab, more image information options:
c) Change Block Type: Hover over this button and click on the arrows to reveal changes you can make to the image block: Change to a cover image, a file, or a gallery.
d) Alignment: These three options are align left, align center and align right. I like for all my images to be center aligned.
e) Wide Width: This will make the image go beyond the boundaries of the width of the blog. At this time I am not familiar with the coding for this new feature. Until I understand it more, I will not show an example.
f) Full Width: Full width is what I use for my own images and what I suggest my own clients use. The image stays within the boundaries of the container it is in, i.e. the blog post content area or the blog sidebar. However, I wouldn’t use this button because it does something very strange with the image. I will be showing you how to make sure your images are on full width from the options on the right-hand side Block Tab, see (k) Image Settings below.
g) Edit Image: This button will open the Media Library edit page where you can: check the image URL, add/edit the title, add/edit a caption, add/edit alt text, add/edit the image description, and if the plugin is installed, regenerate the thumbnail, or choose a different image to use.
h) More Options: These are the same options explained above under 1) Add Block j) Other Movement Options & How to Delete Blocks
i) Resize Image Blue Dots: Any one of the blue dots allows you to drag the image to resize it.
j) Write Caption: The caption should be short and sweet, a brief explanation about the image or the image copyright, etc. Options will appear above the caption writing area for you to make the text: bold, italic, link the text, or make a strikethrough. Once you have written a caption for the image, it will appear directly under the image.
k) Image Settings:
1) Alt Text (Alternative Text): This should be a summary description of the image. This is very good for SEO (Google loves alt text) and is also used by users who are visually or hearing impaired. The alt text is used in search engine IMAGE searches and is seen by users.
2) Image Size: Click on the down arrow to view different sizes to use that are pre-coded into the theme. You can test each one by going through each of them, but my suggestion is to just always use the Full Sized option. It will always look good and resize according to the screen size.
3) Image Dimensions: This is the width and height of the image you have uploaded and are using in this post.
4) 25%, 50%, 75%, 100%: This is by a percentage that you want to resize the image. So if you want to resize the image by 50% of what is showing in the width and height, select the 50% button, etc.
5) Reset: Click on the Reset button to reset the image back at the original uploaded size. Clicking on the 100% will do the same thing.
l) Link Settings:
1) Link to: Click on the down arrow to view different link to options. In this sample, you will see that I chose to link the image to a custom URL.
2) Link URL: Place a complete URL into this box if you are using: media file, attachment page, or custom URL in the Link to section. You will see that I placed a complete URL for this sample. If you choose none for the Link to, you will not be able to put anything into this box.
m) Advanced:
1) Additional CSS Class: This option allows the user to add CSS Class coding for the image. Unless you are HTML savvy, you should not use this option.
Tips Before Creating Your First Post/Page
1) Resize images BEFORE you upload them to WordPress, as well as rename them appropriately to the post you are using them on. This is very important AND good for SEO and I wrote a tutorial on why and how to do that here.
2) DO NOT draft your posts in a word processor program. Read why you shouldn’t here. You should be drafting your posts IN the post editor (Classic or Gutenberg) in WordPress. But if you must draft your posts outside of WordPress, you should use Notepad or Wordpad on a Windows PC and TextEdit on a Mac. However!!!!
Create Your First Post/Page with the Gutenberg Block-Based Editor
Now that I’ve covered almost everything that I can think of, or that I can see that hasn’t changed on Gutenberg since I started writing this guide, it’s time to write your first blog post using the Gutenberg editor. I will take you through my own process for a very easy post that will include a few images and text, along with some categories. You should practice a few posts using items that you normally post, so if your own post is complex, go for it, you’ll do great! If you do something wrong, put the post in draft mode and fix it 😉
A quick and easy workflow using some of the basic Gutenberg features:
1) Within your WordPress Dashboard, go to POSTS / ADD NEW
2) Add a Post Title.
3) Add an Image Block to add an image to be shown first in the post.
4) Add a Paragraph Block and write your post or copy and paste it from Notepad, Wordpad, or TextEdit.
5) Add additional Image Blocks, Paragraph Blocks, or other Blocks as needed to complete the content of the post.
6) On the right-hand side under the Document Tab, set the: Status & Visibility, Categories, Tags, Featured Image, Excerpt, and Discussion.
7) Set your Post SEO, located under the post editor area.
8) Save as a Draft and Preview your post.
9) Edit as needed.
10) Schedule post for a future date or PUBLISH now!
11) Viola, you are done!
If you find something that doesn’t seem right in my instructions or you have any questions at all about this guide, please do not hesitate to contact me, I would be happy to help you or at least try to find the answer for you. And please, let me know if you are going to use Gutenberg, if you’ve already used it, what are your thoughts about it, are you going to continue using it, etc. I’d love to hear what you think about the new editor.
