Tuesday, September 1, 2020

WordPress: Learn Gutenberg Blocks

 WordPress' Gutenberg: A Practical Review | by Jonathan Bailey | Medium

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 Dec 31, 2021.

What to do?!

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.)

I have become a huge YouTube fan, so I started my search there. 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.
The "Global UI settings/options" are also on the right-hand control panel. Here is where you can reduce the visible library of blocks available at any time. It is also where you can the "enable top toolbar." This was not mentioned in any of the subsequent tutorial videos I've watched!.

His bonus tip is the keyboard shortcuts, especially how to search for blocks.

Second Video: "6 Tips When Using WordPress Gutenberg Editor" (8-1/2 min) 

This video is from the same guy that produced the previous video! Even though it was produced 5 months earlier, it will help change your attitude.

  1. Clear your mind!
  2. Find a theme. Remember, this video was created in September 2019, before the 2020 theme was released.
  3. Learn the menus (Documents, Blocks makes more sense, now.)
  4. Get Gutenberg plugin
  5. Get Blocked (try other block plugins)
  6. [Gutenberg Is] Not A Page Builder!!
    1. This last is a huge distinction. I found this confusing when I first trying to transition to Gutenberg/Block editing

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.
  1. "What is the WordPress block editor?" (7 minutes) 
    1. This video explains why you should transition to Gutenberg.
  2. "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.
  3. "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.
  4. "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.)
  5. "How to move and transform blocks" (5 minutes)
  6. "How to group and reuse blocks" (7 minutes)
  7. "How to edit blocks with the toolbar" (12 minutes)
  8. "How to edit blocks with the sidebar" (10 minutes)
  9. "How to publish a post" (7 minutes)
  10. "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:

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 about 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.




[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.