6. Get to know the page editing interface and options

Navigating the WordPress editing interface

1. Admin toolbar: After you login to your WordPress site you will see a black bar at the top of your browser. This is the WordPress admin toolbar. The admin toolbar can be accessed by you from both the live site and the dashboard. It contains three toggle buttons you will use often:

• Edit page/View page toggle.
• Website homepage/Dashboard toggle.
• Dashboard options on the left side, like the Media library, Posts and Pages.

2. Settings sidebar toggle: In the upper right-hand corner of the editing interface, you will see a small square icon with a line on one side. This is the Settings toggle. This will show and hide the settings for the page or post that you are working on. You will usually want to show this, as you will be accessing it all the time.

When shown, it has two tabs:

• Page/Post tab: The name of this tab will change depending on whether you are working on a Page or a Post, and will give you options to customize the Page/Post settings, such as the permalink, categories, tags, and featured image.
• Block tab: The Block tab contains the block settings whichever block you have selected. For a paragraph, it will show paragraph options. For an image, image options.

3. The Top toolbar: The toolbar at the top of the editing interface provides quick access to common actions like saving, previewing, and publishing your content. It features persistent options, as well as options that are specific to each block. You can also access the block inserter, undo/redo buttons, and other useful tools from here. Learn more about the Top toolbar below.

4. The Block Inserter: The “+” button in the upper left of the toolbar opens the block inserter, which allows you to add new content blocks like headings, paragraphs, images and more to your page or post.

Customizing your editing experience

Just to the right of the Setting sidebar toggle, you will see the “three dot” Options menu. The first section of this contains “View” options which you can use to customize your editing interface. Play around with the settings to decide how you like to work.

1. Top toolbar: When you work on a block, a “toolbar” menu will appear with options for that block. By default, it will appear in the page, just above the block you are working on. Some people prefer to have the toolbar always display at the top. This option toggles the view of the toolbar from the top of the page to the “above the block” location.

2. Editing modes: This customizes how much of the editing interface you see when you are working.

• Spotlight mode: focuses on only one block at a time. Others are “grayed out.”
• Fullscreen mode: shows/hides the black admin bar and dashboard options.
• Distraction free mode: “tucks away” a lot of the options at the top of the editing interface for a “distraction free” working space. Great, unless you forget where your options disappeared to. Hover at the top of the page to make the options reappear.
• Keyboard shortcuts: See a guide to the many keyboard shortcuts available in The WordPress editor.
• Welcome Guide: The welcome guide will give you a very brief pop-up tutorial on how to edit a page using blocks. On the last frame you may link to a web guide that gives more information and is worth a look.

Working with blocks

You can organize content in WordPress into different types of blocks, each serving a unique purpose.

1. Blocks for page layout:

• Columns
• Group

2. Blocks for content:

• Heading
• Paragraph
• List
• Buttons
• Image

Where to find block settings

Each block has specific settings and features. You can access these in the top toolbar, the block editor panel on the right and the universal Options (three dot) menu.

Top toolbar

The top toolbar changes options based on the block you have selected. The most commonly used settings have their own buttons, then additional settings, when present, can be found in the More menu.

Block editor panel options

Located on the right side of the editor, this panel allows you to customize a block, adjust spacing and colors.

Some blocks have two tabs within the Block editor tab: Settings and Styles. For example, an image block has file information in the Settings tab:

And an image block also has a Styles tab with styling options:

Options menu

You will find the Options (three dot) menu in the Top toolbar at all times. Most of the options are not block specific, but they are very helpful when building a page. You can the Options menu in two places: In the Top toolbar and in the List view tab under the Document overview:

There are many helpful page building options in this menu:

• Add before and Add after provide precise block placement.
• Copy and paste styles.
• Group–select multiple blocks and put them in a Group block for better organization and management of content.
• Rename–name a Group or other block and the name appears in the Document overview list view.
• Delete–much more precise than the delete button, select a block and choose Delete to remove it.