Click on the Pages menu – black, left side menu.
Click on Add New.

A new page opens. Fill-in the page name
(“G’berg Example” here).

Then, click on Switch to block editor in the Editor selection block to switch to Block mode.

Hover over the plus sign to add a block. It turns red.
Click it.

The Block type selector appears. Click on Heading.

If Heading does not appear, expand the list by clicking on Browse or Search for “heading.” Then, click it.

Heading style options appear. In this case, we want a second-level , subheading, so click on H2.

• Paragraph
• Image
• Heading
• Columns
• Gallery
• List
• Quote
• Audio
• Cover
• File
• Video
• Other categories
• Another reference
• (Click links for more info)

Mistake? Use the undo tool at the top of the page. ctrl-z is the shortcut for undo. This can be especially useful if an unwanted block is inserted.

“Type / to choose a block” appears. To choose the default, a paragraph, just start typing in that space.

• When activating the block selector, This window may appear.
• There is no option to select Columns.
• Click on Browse all (or search for Columns).

A more extensive list of Block types appears.

Explore the list by hovering over the list and scrolling with the mouse wheel.

In some cases a previously chosen block type may “float” to the top.

In this example, click on 50/50 to evenly distribute content between the two columns.

• An “outer” box appears box with inner boxes for choosing a block.
• To enter content, start by clicking the plus on the left column.
• Type / to choose a block appears.
• Enter some text. In this example we will enter text that relates to use of columns, i.e.,
• We proceed by entering text into the left column, that is, “Columns are useful . . ..” illustrated below.

Columns are useful for laying out content and aligning text next to an image. In this example we will add an image. Alignment is better, especially as compared with the Classic editor. (The result is shown below as an image / screen shot). The left column is filled-in; the right column remains empty, to be filled-in next.

Next we select an image to add to the right column.

Proceed by clicking on the Plus sign in the right column.

• This opens a dialog to pick an image.
• Click on Select Image.

Then, select Media Library.

• The desired image was previously uploaded and stored in the folder, G’berg Examples.
• Click on the appropriate source – the G’berg Examples folder in this case.

• Click on the desired image.
• A check-mark appears on its upper right corner and the image is highlighted with a bold, blue border.

• Click on Select at the bottom of the dialog.
• The desired image appears in the right column as, illustrated below.

Columns are useful for laying out content. In this example we will add an image. Columns are especially useful for aligning text along side of an image, especially as compared with the Classic editor.

• A diversion is taken to help understand how to change the color of text. It is illustrated here because the technique is quite different from that used with the Classic editor.
• Start by selecting text. The blue background indicates the text that has been selected.
• A style bar opens. Click on the drop-down to reveal more options and additional variants appear with
  A Highlight, the default at the top of the list.
• Click on A Highlight.
• The next panel appears.

• Select text to be highlighted.
• Click on the down arrow next to the link icon and the color chooser appears.
• Text is highlighted.
  • In previous attempts to color text, bright red was chosen as is reflected in this view.
• Click in a white box in the checkerboard. Next, choose the desired color as described below.

1. Drag the circle in the color bar to the appropriate point – to the left / bright red this example.
2. Click in the far upper-right corner of the hue box. Make sure the color selected is the desired bright red. Some twiddling and diddling may be required to fine tune this. Note that the box above the hue selection area is lit-up brightly red (at 1.), indicating the color desired is active.
3. Click on the text turns on the Highlight. The result appears below.

• A Heading block was created followed by some text. At the end of text entry, <enter> was typed.
• The
  Type / choose a block
  prompt appears.
• Do not use that to choose the block type. Use block chooser at the far lower right.
• Hover over the square black icon with a plus sign in the middle. it turns red. CLICK it.

• To select a Table block type, look for it in a list that appears, or, it can be more easily found by typing “table” into the search box.
• Then, click on the Table icon.

• In this example we accept the default layout, 2 rows, 2 columns.
• Click in the “count” box and use the up / down spinner to change the row or column count, or, enter the number desired directly.
• Click on Create Table
• A new, empty Table appears:

• In this frame, we start by creating a 3-column by 2-row table (1.)
• Notice that on the right (2.), the Block properties dialog opens.
• In the next frame, information has been typed into the table cells.
• NOTE that a leading space is part of the text in each cell, below. This was done to get around unavailable cell formatting options, cell padding in this case. The text in the first column for each row was made bold to make row labels.

• The finished table appears here, in edit mode.
• BUT, the live view of tables is likely to be different than what is seen in edit mode. See the second view. Use Preview to see the result.
• Notice the lack of padding in the header row, especially in column 1.
• On the right, the drop-down for
  Table settings is activated.
• The option to turn on a Header section was activated, enabling addition of titles for each column of data, making for a better, more informative table.
• Note also that, because the cursor (invisible here) was located in a cell, that text styling bar appeared.
• The difference between Edit and Live views is illustrated in the two images, below.

• Adjust column alignment:
• Click in a cell – the “I-bar” mouse pointer appears.
• Click on the
  Change text alignment
  icon, indicated by the arrow.
• The icon lights up red.

• Alignment options appear.
• Click on
  Align columns center.
• Do this for each column to be aligned. “Surprise” – not what was expected. in Edit view. But . . .

The illustration, to the right, shows an image with a link included in the caption. While it may be possible to link an image itself, this is a favored approach to deal with the vagaries of Gutenberg.

The procedure is illustrated, below, step by step.

• Open the Block selector
• Click on Image

Select Media Library

Click on the Folder in which the image was uploaded to (G'berg Example in this case).

Upload Files to make the desired image available.

• The Select or Upload pane appears.
• Click Select Files

• In this example, a file manager opens.
• he image to be uploaded is highlighted and “Open” was clicked to initiate upload.
• (This file manager looks different from one used in Windows.)

• The uploaded image appears, highlighted with a blue border.
• Click on Select to insert the image.

• The selected image appears.
• Image block options are available in the bar above the image.
• Handles also appear – the little red circles – to adjust image size.
• The caption area also appears – not visible here, but in the next view.

• In the caption area we have entered text, “Example image with A Link.”
• Select only the text, “A Link.”
• Click on the URL icon, circled in red to initiate link insertion.

• In this example we have entered the URL for RiderwoodLife, i.e.,
  https://www.Riderwoodlife.com
• Click on Open in new tab
• Finalize by clicking on the hooked-arrow (⤾) to commit.

• After the above steps, the caption appears as above. The link appears blue and underscored.
• More styling enhances the caption.

• Here we have selected all of the text in the caption.
• Hovering over B in the block styles turns it read and
  Bold Ctrl+B
  appears as a tool tip.

• Make caption text more prominent / bold click on the B
• The difference is subtle in this view, better in live view.

• Open the Block selector.
• Using down arrow key, highlight Buttons.

A button block opens with a blank button, gray in the above red rectangle.

Add text to the fill-in area. In this case, we typed in “Home Page.”

To create a link in the button, select the text. The selected text is highlighted in blue.

• In the top box, enter the URL for the link to go to – the link for our Home Page in this case.
• Be sure to activate the
  Open in new tab option.
• Lastly, click on the hooked arrow (⤾) to complete insertion of linked text.
• The result appears as below.

With the cursor placed in the block with the newly created button, hover over the plus sign +. It lights up red. Click
Add button.

A new, blank button appears.

Proceed as above to add text and to link the text.

Make button text larger with the Typography Size setting, set here to 20 px. We also adjusted the Border Radius to make it rounded. Try it – click on the new button, below.

Experience gained during creation of these example reveals that some of the “advanced” features for styling buttons have not functioned as anticipated. For example, changing the color of the foreground (text) and background failed miserably. YMMV with attempts to use other features.