Gutenberg Block Editor – Tips

Advanced Editing Using the Gutenberg Editor

Start Here:

    • gutenberg pressIf not previously viewed, visit Gutenberg Block Editor – First Steps
    • Beginning editing tips are in-prep (1/12/22).
    • NOTE: these tips are meant as a quick intro to the Gutenberg (Block) editor. Refer to links at the bottom of this page
      Return / More G’berg Tips
      for more advanced tips, e.g., converting a Classic page to a Block mode page.

Useful Features

The Gutenberg advanced editor is for those ready to take a step up in writing pages for RiderwoodLife. It enables advanced layout and other features for web pages. The abbreviation “GE” will be used below to designate the Gutenberg Editor. Advantages of GE include,

  • Columns
  • Tables
  • Images and with adjacent text without alignment problems sometimes encountered in the Classic editor
  • Buttons to click for actions, e.g., going to another web page
  • And (as they say) – much more.

Expertise Required

Use of the Gutenberg editor is for those feeling the need for more advanced features and with more than a passing acquaintance with editing documents. It is a step up from the Classic editor and use requires wrapping ones mind around a new way of thinking: layout in BLOCKS.

Think of blocks as containers for elements making up a web page. A block may contain

  • A heading
  • A paragraph of text
  • An image
  • An image plus adjacent text on one side and an image on the other side
  • Columns
  • A Table
  • Etc.

Moving to Gutenberg from the Classic Editor

No Going Back

If a page has been written with GE and it is opened in Classic mode, this warning will be issued:image warning

Thus, if one continues with the Block Editor (GE), one can not go back and use the Classic Editor without the likely lose of formatting. Therefore, Writers may wish to not open a page created with the Classic Editor and to Continue to Classic Editor.

If the image to the right appears, refer to this guidance and return to this page.

This also applies when viewing a live view of a page when logged in as in the following image.

live [age bottom edit option

Activating Gutenberg / Classic vs. Gutenberg

From the Pages Menu

A page originally composed in Classic mode will present in the Pages list as bellow.

To edit such pages with Gutenberg, click on Edit (block editor). This invokes the Block editor.

 

 

 

 

 

This leads to opening of the Welcome greetings, mentioned above.

Copy / Reuse Blocks & Pages

This example goes a step further into more advanced editing, highlighting a method to show advanced editing. More appear on other Tips pages, indexed below at Return / More G’berg Tips.

Block Copy

Here is one example of the powerful tools available in Gutenberg. Your “tutor” found a hidden gem while scouring for Writers of RiderwoodLife.com: how to copy Blocks for use elsewhere, even on other pages. In this excerpt from a page, the text beginning with “Questions . . ..” is in our target Block. Click on the text within the Block, e.g., on “club.”

The Block styling tool appears. Click on the three-dots, which extends the editing options available.

The expanded menu includes a choice to Copy. Clicking on Copy places a copy of the BLOCK on the clipboard.

Move to another area of the document, or even a different document, position the cursor at the point of insertion and paste with ctrl-v.

  • Note also the option to Add Reusable blocks — see this WordPress tutorial, Blocks » Reusable Block. Useful for repeated use of block(s) of content within or on a different page.

Copy A Whole Page

To copy a whole page done with Gutenberg, here are two options.

1. Easiest: On the Pages menu, in the list of pages, click on Copy to create a  copy of the page.

  • IF the intent is to work with this copy and replace the original with the new content, copy and paste from the new doc into the old page, completely replacing the old content.
  • The duplicate / edited page will not be indexed in menus so use the above method, or, rename the page to the original, source page name.

2. More advanced method:

  • On the source page, enter  Text mode, which reveals the underlying HTML for a page.
  • Select all content and copy to clipboard (ctrl-c).
  • Open a new, destination document.
  • in Text mode, paste the html from the clipboard (ctrl-v) into the new document.

In both cases, Proceed with cautions. To err is problematic!

Guides and Tutorials for Gutenberg

The Gutenberg Interface

The Gutenberg Interface

introduces users, new to Gutenberg, to the three main sections of the editing interface. Written by WordPress, it is recommend as quick was to become familiar with the somewhat different “look and feel” of the editor by discussion three main sections:

  1. Editing ToolBar
  2. Content Area, including the “Block Toolbar” (for styling text, inserting links, etc.)
  3. Advanced Settings
image from gutenberg interface page

Example Illustration from The Gutenberg Into

wpbeginnerguide(s)

image for tutorial videoHow to Use the WordPress Block Editor:

 

Tutorial too fast? Slow it down (jump for speed tip)

Search for specifics about types of blocks:

Go to wpbeginnerguide and search for a topic:

wpbeginner banner

Example Search on wpbeginner

Another wpbeginner guide

    • How To Use Gutenberg for WordPress – Beginners Tutorial – 2021
    • Another tutorial also recommended by your site Admins.
    • The info useful to our Writer / Editors is presented in the first 15:35 of the video.
    • The remainder promotes add-ons not available for our level of service.

More WordPress Guides

Control YouTube Viewing Speed.

Use gear to access viewing speed – click it.

gear youtube settings

Ciick onPlayback speed to adjust speed:

access playback speed

Click on a preferred speed. Dismiss the menu by touching the Esc key or Resume with the Play arrow.speed selector

Return

Go to Tips Index Page, the top-level, Tips for Writers index page wherein additional Tips for Guttenberg are to be found.