How To Use
Gutenberg Blocks
in WordPress
I want to share how I learned to use Gutenberg...
The only alternative to Gutenberg and block editing is the WordPress "Classic Editor" It was designed by WordPress contributors and is available as a plugin.
Unfortunately, support for the Classic Editor will end on December 31, 2021.
What to do by Dec 31?!
Learn/Use Gutenberg Blocks, now!
The obvious answer is that developers and users should begin now to learn and use the Gutenberg Block editor.
Personally, the few times I've tried Gutenberg I've found it confusing . In May, 2020, I posted an article that said "Block Editing is a new way to look at data!" (The link will open in a new tab.)
October 1 ~ Update: A month after I posted this article I found a sentence that put everything in perspective. I am sharing it first despite me having found it last!
- Visualize a page as a stack of blocks, one block at a time on top of each other.
- There is one block per row.
- Each block is designed to display content in a specific format.
- Among these formats are:
- paragraphs (text),
- titles,
- images,
- videos,
- literally dozens of other formats.
- Some of these blocks are free, some are sold as a premium, and some may be part of a theme package. The names "block editor" and "Gutenberg" are used interchangeably.
- Each block can be formatted differently from the preceding and following blocks.
- Each block can contain other blocks.
- There are special blocks for layout. One such block can contain columns!
- And yes, you can embed blocks inside the columns.
- A typical page might look like this (7 blocks in 6 rows):
- Title block
- Image block, centered
- Text block - 1st paragraph
- Text block - 2nd paragraph
- Column block - 2 columns
- Left column - image block
- Right column - text block (for description)
- Text block - Another paragraph
There is still a lot to learn - and to master - from learning what blocks are available to learning how to format each block individually, how to save blocks for repeated use, how to embed and stack blocks.
End of Oct 1 Update
Read on....
I have become a huge YouTube fan, so I started my search there in August. Videos can demonstrate mouse clicks and show the results. I have watched hours of content! Below is a curated list of how and what I've learned.
Make a pot of coffee (or pour your favorite adult beverage) and spend a couple hours watching these videos!
First Video: 5 Tips that make Gutenberg easier for WordPress (12 minutes)
This video teaches button-ology. It's a great way to begin, and will serve you well later.
It introduces you to navigating the Gutenberg tools on a new, blank WordPress page. This was recorded 6 months ago and some of the icons have already changed.
- The video starts with the "upper-left control area." this shows how to add blocks and navigate between blocks on the page.
- The second tip deals with editing a block using "inline block tools." That leads us to the "right-hand control panel," which adds even more editing options.
His bonus tip is the keyboard shortcuts, especially how to search for blocks.
Yoast SEO Academy
After viewing many many hours of Gutenberg tutorials, this series is the best! I found the videos to be a bit Pollyannish, but they are straight forward.
They teach: click here, do this and watch this. The series appeals to my engineering background.
This is the order in which I recommend you watch them. The videos will open in new tabs so you can view them, then return here when you close that window. I have also created a playlist, and it's in the bibliography section at the bottom.
- "What is the WordPress block editor?" (7 minutes)
- This video explains why you should transition to Gutenberg.
- Remember, watch the video, then close that tab to return here.
- "What's the difference between posts and pages in WordPress?" (4 min)
- The only concept you should learn from this short video is that posts and pages are edited with the same set of tools. What you learn here will apply to both posts and pages.
- Remember, watch the video, then close that tab....
- "How To Use Blocks in the WordPress Gutenberg Editor" (14 min)
- This video is by someone other than Yoast, but I like the way it categorizes the different blocks. Pour a cup of coffee or your favorite adult beverage, then just sit back and watch. The follow videos are more watch-and-do tutorials.
- Watch the video, then...
- "How to add blocks" (10 minutes)
- This video adds blocks to a post, but the same techniques are applied to using Gutenberg and adding blocks to a page. (Remember two videos; posts & pages are created using the same block tools.)
- (You've learned the drill, by now...)
- "How to move and transform blocks" (5 minutes)
- "How to group and reuse blocks" (7 minutes)
- "How to edit blocks with the toolbar" (12 minutes)
- "How to edit blocks with the sidebar" (10 minutes)
- "How to publish a post" (7 minutes)
- "More tools and options" (7 minutes)
There is one more Yoast video to watch at your leisure: "How to switch to the block editor: Transitioning from the classic editor" (6 min)
WordPress Gutenberg: Workflow
Building A Website
Content is still King!
I write content in Microsoft Word because spelling and grammar are still important. Then I transfer it, paragraph by paragraph, to my website.
Set up a work environment:
I use a the same simple file structure for every website I build. I take advantage of the built-in alphabetical sorting done by File Manager.
- FullDomainName
- Archives (folder) ~ I hate to destroy anything I've created or used. I move files to this folder to save them for reference or future use.
- cPanel (folder)
- Images (folder)
- 1_[Home].docx (file)
- 2_[Step1].docx (file)
- 9_[About].docx (file)
- FullDomainName
I use a fixed naming structure for my content documents.
- The first digit shows the menu order. Since no menu is supposed to have more than 7 choices (5 is better!) then a single digit is sufficient.
- The underscore ("_") is a separator that makes the name easy to read
- The single word use in the menu appears in square brackets
My Workflow:
A Yoast video shows how to cut and past content from a document into a WordPress paragraph block. (Note: A [Crtl]-[Shift]-[V] pastes plain text without bringing any formatting from Word.)
- I write all the content and collect the pictures
- I install WordPress, create pages, then copy-and-paste the content into each block on each page.
- I publish each page when it's complete
- At the end, I create the menu system
- Finally I turn off the "maintenance" message.
That's over 2-3 weeks of work....
Bibliography & Reading
FYI: I am a digital immigrant (vs a digital native, AKA millineals). My analogies and stories are best understood and enjoyed by people born before 1980. I like to share what I've learned, and I like the word free.
Videos
- YouTube Playlist For your convenience I've created a play list in my YouTube channel with the Yoast videos above. It's an hour of continuous watching.
- "6 Tips When Using WordPress Gutenberg Editor" (8-1/2 min)
- "Top 7 Amazing WordPress Gutenberg Block Plugins in 2019" (17 min)
- "40+ Free Blocks for Gutenberg in WordPress" (13 min)
- "The history of WordPress" (9 minutes)
- "Intro to Publishing with the Block Editor" (40 min) This video is from WordPress.org
Articles
Websites
- Yoast SEO
- ABCInc Playlist for all these videos
[PS:] I found a video that discourages Gutenberg.
Technical Summary: the video says that the basic job of WordPress is to read content from an SQL data base, then present it on the screen. Your website will be more flexible to future changes when less formatting is stored in SQL with your content. Some themes, like divi, store everything in the SQL database. Those themes use proprietary techniques to retrieve and present your content. That practice pretty much locks that WordPress website to that theme forever!
Remember, the only alternative to Gutenberg is the Classic Editor, and support for that ends in 2021.
No comments:
Post a Comment
Your comment will be reviewed before it is posted. Please check back later.