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 pages to which the website no has links. Give this each an explanatory title like Patricia’s Practice Page.
    Delete the page when it is no longer of use.
  • As a new WebMaster, you are taking over a website with a well-established structure. The headers, menus and styles customized for a consistent look and feel were developed, tested and approved by the Website Rejuvenation committee in 2023. Therefore you can start by updating existing pages within the existing framework. Becoming comfortable using the editor is an excellent initial goal.
  • When you make any 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 changes at a time, publishing frequently and testing thoroughly. Refer to the First Principle of Testing.

Frankly, the best way to learn is to invest time in experimentation. See what options are provided by the various toolbars that pop up. The trial and error approach may create a mess. When you are stuck, you can recover by exiting the editor and deleting the page.

Think in Blocks

Guttenberg is a block-oriented editor. Everything on a webpage 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. The word “yellow” in the previous sentence is highlighted with yellow text on a black background. When you give a paragraph a non-white background, you can also add padding to the paragraph so that no characters touch the edge of the background box.

On many pages, headings and paragraphs simply follow each each other in a sequence. Each is a separate block.

Discover Blocks that Provide Flexible Layout and Presentation Options

Becoming a proficient webpage builder is largely a matter of knowing what blocks are available in the editor and where you can put them. 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 blocks come in a simple 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 are:

  • Guttenburg includes a Heading block and a Paragraph block.
    The Paragraph is default block type for insertions and using using this default is 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 a List block for numbered/ordered or bulleted/unordered lists.
    Kadence adds an Icon List block with additional options, some of which you can see in the example below.
  • Setting the display size of a Kadence Advanced Image is more flexible than for a Guttenberg Image.

Discover Container Blocks that Provide Flexible Layout Options

Several kinds of blocks are containers: like envelopes, that can contain various papers, container blocks wrap around other blocks. Below is an example of three Section blocks arranged side by side in one Row Layout block. Unlike Paragraphs and Headings, Row Layouts and Sections are containers. Sections and Row Layouts are among the most useful blocks for arranging chunks of material within a webpage.

The Row Layout contains three sections, each of which has a different background colour, blue, green or yellow. The sections contain lists. The bulleted list on the right (in the section with a yellow background) shows what blocks are nested in the the first two sections and names some of the styles applied to the blocks.

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
          (1 List Item is indented)
    • Section (style: green background)
      • Advanced Text (heading level 3)
      • Icon List (style: green icon)
        • 6 List Items in sequence
          (2 List items are indented)
    • This Section (yellow background)
      • This List (style: bulleted)

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 Row Layout 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 opens on the right of the editing panel. Use it to set style options and other settings for individual 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 Settings panel is specific to the type of the block currently selected in the page.

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. Exploring the options is in the Settings panel a great way of discovering what you can do with the various types of blocks.


Click the word Page at the top of the Settings 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 at the bottom of the Settings panel so that website users cannot find the 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 currently open for editing. 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. This panel is especially useful 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 each icon pop up.
  • Click the icon named Document Overview to open or close the panel. Select List View to see what blocks make up page being edited.
  • When the document panel is open, you can click the arrowhead [ > ] to the right of each container blocks to show or hide the blocks nested inside.

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.

A Suggested Learning Exercise

For a learning exercise, try to reproduce the following display from scratch. Start by creating a new work page. Add Row Layout with two sections to the page and then start building the content of each section. If you open the work page in a new browser tab, you can compare your page with the two lists below.

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. Below are the steps I took to add the row layout immediately above by copying the row layout with 3 sections that appears higher up this page.

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