This page introduces the Guttenberg page editor and suggests approaches for mastering it quickly. It also introduces editor extensions provided by Kadence, the theme for the LLIR website. If you are not familiar with these terms, read the overview of our platform.

Suggestion for Getting Started

Start by creating a new page that you can use as a learning area to gain experience. You can make mistakes on this page but nobody can see and you can do no harm to the website. Then have fun experimenting by trying to build whatever content you want. The best way to learn the editor quickly is to look around, click the various button/symbols and see what they do. The interface is quirky in places and not always intuitive, but is easy to master if you have experience with a variety of text editors and/or desktop publishing software. You may find various online tutorials and product help useful if you are stuck.

  • For practice work, create a page to which the website no has links. Give this page an explanatory titles like Patricia’s Practice Page.
    Delete the page when it is no longer of use.
  • When you are performing an update that is extensive or affects more than one page in the live website, work at times when few users visit the website. Develop in small increments by making a few small changes at a time and testing frequently.

See also First Principle of Testing.

Think in Blocks

Guttenberg is a block-oriented editor. Everything on the page is a component or block. Headings and paragraphs are examples of simple blocks that contain characters. You can apply style attributes specific characters or to the entire block.

For example, this paragraph has a yellow background and the word yellow highlighted with colours yellow on black. When you give a paragraph a background, you can also add padding so that no characters touch the edge of the background box.

On many pages, headings and paragraphs simply follow each in a sequence.

Discover Blocks that Provide Flexible Layout and Presentation Options

Becoming a proficient web page builder is largely a matter of knowing what building blocks are available. Exploring the options when you see the Add block symbol — + — is time well spent. Click the + and then Browse all to open a panel that lists all blocks. To look for something specific such Google Maps, a Spacer bar or an Accordion block, type the name into the Search Bar.

Many bocks come in simple a version from Guttenberg and an advanced version from Kadence. Usually, the Kadence blocks have additional style settings or provide interactive features. Just a few examples of the former are:

  • Guttenburg includes a Heading block and a Paragraph block.
    The Paragraph is default block type for insertions and using it is probably the quickest and easiest way to add text.
    Kadence provides the Advanced Text block. It has a setting to switch between a heading or a paragraph and has additional style options.
  • Guttenburg provides List block for numbered/ordered or bulleted/unordered lists.
    Kadence adds Icon List block with additional options, some of which you can see in an example below.
  • Setting the display size of an Advanced Image is more flexible than for a regular Image.

Discover Container Blocks that Provide Flexible Layout Options

Several kinds of blocks are containers: like envelopes, they can contain other blocks. Below is an example of three Section blocks arranged side by side in a Row Layout block. Within this Row Layout, each section has a different background colour. The section on the right shows how different types of blocks are nested within the Row Layout.

List

  1. This is a simple List that has 6 items.
  2. This kind of list comes with the Guttenberg editor.
  3. This example is a numbered list.
  4. You can also create a bulleted list by setting the style of the list.
    • This is an indented List Item.
  5. You can apply styles to characters contained within each List Item.

Icon List

  • This is an Icon list that has 6 items.
  • Icon List is an example of a Kadence block.
  • Each item starts with an icon that you can select.
  • You can set the icon style for the entire List or specific List Items.
  • This List has two indented List Items.
  • You can apply styles to characters contained within each List Item.
  • Row Layout
    • Section (style: blue background)
      • Advanced Text (heading level 3)
      • List (style: numbered)
        • 6 List Items in sequence
    • Section (style: green background)
      • Advanced Text (heading level 3)
      • Icon List (style: green icon)
        • 6 List Items in sequence
          (2 items are indented)
    • Section (style: grey background)
      • This List

The key concept to grasp is the rules of nesting: blocks can be totally contained within other blocks but blocks can never overlap. As a result, the entire page has a hierarchical structure. Think of the page as the top-level container that holds all the blocks on page. If you move or delete a block, all everything it contains moves or is deleted together.

Creating layouts such as the example above can be fiddley, but the visually effects are usually worth the effort.

Become Familiar with Two Important Editor Panels

WordPress page authors make extensive use of two panels that open beside the main editing panel.

The Settings Panel

The Settings panel open on the right and displays the style options and other settings for all blocks on the page. To open this panel:

  • Hover the mouse over the icons on the upper right of the WordPress window and see the name of the icon pop up.
  • Click the icon named Settings to open the Settings panel. Click again or click the X on the top right to close the panel.
  • What you see in the Setting panel is specific to the type of block currently selected in the page.
    Exploring the options is a great way of discovering what you can do with the various types of blocks.

If you click anywhere in a page while this panel is open, you see the style and other settings available for the block you clicked.
Click the word Page at the top of the panel to see customizable settings for the whole page. If you are editing a page that users should never see, you should check the Search Exclude box so that website users cannot find your trial page by searching for words that happen to appear in it.

The Document Overview Panel

The Document Overview panel displays the structure of the page that is open for editing. The panel on the right of the two lists in the example above is based on an extract from the Document Overview of this page. Often the easiest way to select a block so that you can work with its styles and settings is to pick it out of the Document Overview panel, especially when blocks are nested within other blocks and occupy the same area on the screen, like the Sections within a Row Layout. To open this panel:

  • Hover the mouse over the icons on the upper left of the WordPress window and see the name of the icon pop up.
  • Click the icon named Document Overview to open or close the panel. Select List View to see the breakdown of the entire page.
  • When the document panel is open, you can click the arrowheads to the right of container blocks to show or hide the blocks contained within.

The three vertical dots to the right of each block in Document Overview opens menu of Options you can take such as copying or deleting the block or inserting another block before or after it.

Suggestion

For a learning exercise, create a trial page and try to reproduce the following display from scratch.

List

  1. This is a simple List that has 6 items.
  2. This kind of list comes with the Guttenberg editor.
  3. This example is a numbered list.
  4. You can also create a bulleted list by setting the style of the list.
    • This is an indented List Item.
  5. You can apply styles to characters contained within each List Item.

Icon List

  • This is an Icon list that has 6 items.
  • Icon List is an example of a Kadence block.
  • Each item starts with an icon that you can select.
  • You can set the icon style for the entire List or specific List Items.
  • This list has two indented List Items.
  • You can apply styles to characters contained within each List Item.

Note: Creating the original copy of these lists that appears higher in this page took several minutes. But recreating the two-column display was very quick. What I did:

  • Located the Row Layout in the Document Overview panel, clicked the three vertical dots that appear to its right when when hovering over the block to open its Options menu and clicked Copy.
  • Pasted this copy to under the heading Suggestion.
  • Again in the Document Overview panel, located the third Section in the copy of the Row Layout, opened its Options menu and clicked Delete.
  • Selected the Row Layout and opened the Settings panel. Set the number of Columns to 2.
  • Added this note to the bottom of the page.