Dev: Learning the Page Editor

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.

After you are finished the getting started, you can jump directly to the following topics:
Think in blocks
Discover blocks that provide varied presentation options
Discover blocks that support flexible layouts
Become familiar with two important editor panels
Try a suggested learning exercise
Continue to page Page Editor Hints when you are comfortable with the concepts introduced below.

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 Varied 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.
Note: These Developer Notes adopt a convention of capitalizing the the names of blocks type to distinquish them from ordinary English words.

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

Here is one Row Layout block that contains three Section blocks. Each Section has a different background colour: blue, green or yellow. The Row Layout has a pale grey background. The Section with a yellow background contains a List to describe the structure of the entire Row Layout: words in italics within the yellow section name types of blocks used and the indentation reflects how the blocks are nested. Some of the style settings for each block are given in text with no highlight. For example, what looks like a title in the blue and green Sections is an Advanced Text block set to heading level 3 and then centred. Both the blue and green Sections contain an Advanced Text block followed by a different type of list block.

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 ( style: grey background)
    • 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 contain other blocks completely. Blocks can never overlap. As a result, the entire page has a hierarchical structure. Think of the whole page as the top-level container that contains all the blocks on the page. If you move or delete a block, everything it contains moves or is deleted together.

Creating layouts such as the Row Layout above can be fiddley, but the visual effects are usually worth the effort.

Become Familiar with Two Important Editor Panels

WordPress page authors make extensive use of two panels that open on either side of the main editing 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.


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.

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.

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.

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