G’berg Examples

Example Uses of the Block Editor

  • These examples are intended to help those new to the Gutenberg Block editor learn basic skills.
  • Refer to the top-level G’berg Page — First Steps — for basics of the block editor.
  • Gutenberg Block Editor – Tips includes a basic discussion of The Gutenberg Interface.
  • Editing is best done on a PC monitor rather than on a narrow screen cell phone or tablet.
  • Hint: open TWO browser windows and view this guide in one while editing in the second window.
  • This page of examples was created using the Gutenberg Block editor, taking screen shots during the development of the page to illustrate what a user will see.
  • Columns were used extensively to position text next to images.

Create A New Page




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.

  • A box opens with grayed-out “Heading” text.
  • Place the cursor in the box and, in this example, we typed “Create Heading and Text.”
  • The new heading appears, Block Chooser in this example.

Block Chooser

  • There are several ways to insert a block:
  • Firstly, when in a block, e.g., a Paragraph block, touching <enter> opens a prompt appears: “Type / to choose a block” – just start typing if new paragraph is preferred.
  • The gray text is an INSTRUCTION to either start typing text, or, to type a forward slash to bring up the block-type selector.
  • Type a forward slash (“/”) and the block type chooser appears. Again, if text is desired, just start typing. The default will be in Paragraph mode.
  • If typing a paragraph, typing <enter> opens a new block for entry of text, etc.
  • Another method to open a new block is to hover the cursor between blocks; a read line with a plus sign appears.
  • Click the plus sign and the block chooser appears.
  • Some “choosers” change color when hovering over the plus sign as a signal that one is about to activate that function.

Types of Blocks – Quick Ref

Correcting Mistakes

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.

Shortcut Keys

  • Gutenberg has a few shortcut keys, a list of which appears by touching
    shift-alt-h.
  • Note: shortcut keys used with the Classic editor may be re-assigned to other functions in G’berg!

Create A Heading and Text


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

This text is an example of a new paragraph. IF we touch <enter>, an option to enter a new BLOCK appears.

If one hovers between blocks, an option to add Block
appears in the form of a Red Line with a Plus symbol.
—-+—–

Clicking on the plus sign brings up the Block chooser options. NOW, at this point, to continue with more text touch <enter> and a prompt appears – the
Type / to choose a block prompt. When it appears, just type away to enter a new paragraph.

This new paragraph jumped into life when we started typing in the above noted prompt. But let’s get on to something new – columns.

Column Creation

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

This is the result (the real thing):



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.

Example image

Diversion – Colored Text (“Highlighting”)

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

Colored Text (“Highlighting“)

Table Creation

Caveats

  • Tables in WordPress, even in Gutenberg, are rudimentary at best.
  • Simple tables can be useful in presenting information (data) to viewers.
  • It is usually much easier to create tables in a Word Processor, as a text document or a spreadsheet, than in WP.
    • Then convert such documents to a PDF and upload.
    • Create a Paragraph, write a word description of the table, and, provide a link for viewing and downloading.
    • Use PDFs and NOT WORD or other formats – not all viewers will have the software to view such documents, and, they are to be discouraged because they can be vectors for malicious content that attacks on open!
  • Final caveat: don’t even try to copy-and-paste a table into Gutenberg – just don’t go there.

Create a Table – Steps

  • 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:

Completing the Table

  • If not open, activate the Block properties options on the right side of the screen. It may be necessary to click on the three-dot menu activator, far-top-right
  • Turn on Header section – it appears red, lower right.
  • Fill in cells – prompts appear, e.g., HEADER LABEL.
  • Move from cell-to-cell by placing the mouse cursor in a cell and typing in desired content.
  • As shown below, table cells have been filled-in with example data for sake of illustration.
  • The caption area has also been filled-in.
    • Cells “automagically” change size and justification to accommodate content.
    • Start a new line within a cell by touching <enter>.

More Complex Example:

  • 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.
cOMBO shoe color sock COLOR
One Black Brown
Two White White
Example Table

Table Cell Alignment

  • 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 . . .
cOMBO shoe color sock COLOR
One Black Brown
Two White White
Example Table – Columns Centered

After editing, it appears as above in the edit screen. But truth is had when viewing the live version of the page, as shown below.

More Advice About Tables

  • Sadly, WP tables are quite rudimentary when edited with Gutenberg without using optional plugins. Add-ons have proven to be problematic in some cases by not “playing well” with core functions and other plugins. Various approaches using custom CSS have been tried, to no avail. SO, attend to the Caveats at the beginning of this section.
  • No-nos: it is poor practice to used tables for page layout. Why? Because they are intended for presentation of data. And, not ADA friendly.

Image With A Link



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.

Example image with A Link

First Step – Add Image

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

The selected image appears. There is a lot to “digest” here. Most importantly,
Add caption is the space in which we shall add text and a link. In addition, Image block options are available in the bar above the image as well as in the right-hand column. “Handles” also appear – the little red circles – to adjust image size.

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

Final Product The Link is “live.” Click it! A new tab is opened with the Home Page.

Example Image with A Link

Buttons

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

Make the button oval by adjusting the Radius with the slider or by entering a number in the Border Radius box.

Add More Buttons

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.

Buttons – Caveats


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.

Return

Return to top-level Tips Page