Make sense of the new editing screen

At first glance the WordPress block editor can be a little confusing. The familiar WYSIWYG editor is gone and it’s a little difficult to know even where to start.

This post is designed to explain how the editing screen is arranged and where to find crucial elements.

When you add or edit a page or post of any kind your going to be faced with a page that looks something like this.

Here is an annotated view of that screen. Showing what the main sections of the page are for.

The Header Bar

  1. Click on the WordPress logo in the upper right corner to return to view all posts
  2. Use the block tools to add blocks or to navigate the block structure of the page
  3. Use the links in the upper right to save, preview or publish the page or post
  4. Use the gear link to show or hide the Right Sidebar.
  5. Use the vertical row of dots to reveal a series of options associated with this editing screen (e.g. what is visible and what is not)

Title & Body

  1. The top-most section of the main Title & Body area is where you type the page title.
  2. The body goes in the area below that. This section will grow to accommodate all content that you put here.
  3. When you hover over the page you will find “Add Block” links represented as a black square with a plus sign inside it. Use these to add different kinds of content to the page.

Right Sidebar

  1. The top row of the right sidebar allows you to toggle between document settings and block settings (and to hide the sidebar)
  2. The first section is always the Status & Visibility section where you define whether the post is published and when.
  3. The permalink section allows you to define the exact name you want to give the page/post in the URL.
  4. Several other sections appear below that. Those that appear may vary depending on the page/post type you’re adding/editing. Use the carat at the far right to open or close any of these panels.

Panels in the Right Sidebar

The following are the standard panels generated by WordPress for all pages/posts.

  • Featured Image – Implementation varies by post type, but generally the featured image is used as the thumbnail for links pointing to this page and in some cases it is used as the image that appears at the top of the page along with the title.
  • Page Attributes – Use this to define whether the page or post has a parent post. This should mirror the hierarchy and structure of the site navigation.

You may also see any or all of the following custom panels.

  • Programs – This allows you to check any programs (e.g. CLCL, DCSL etc.) that the content relates to.
  • Topics – Specify any topics that the content is associated with. This is used in searching and filtering content.
  • Search Exclude – If you need or want to make sure that the page doesn’t show up in site search results, you can check an option in here.
  • Page Options – This is and will be for custom properties of the page. The only option in there (at the time of writing) is a toggle which allows you to specify whether the title should overlap or sit below the page’s featured image.

Custom Field Panels

Below the body content of the page there are a series of panels that contain custom fields. This is for data that is associated with the page that may be used to organize it with respect to other pages, or to modify the nature of how the page is displayed.

In certain post types (e.g. events, people) these custom fields are crucially important for making sure the post is displayed and categorized correctly.

  1. Use the up/down carats to change the order of the panels.
  2. Use the far-right carat (not to be confused with the order-change links) to expand and contract any of the Custom Field Panels
  3. Some of the custom field panels have multiple vertical tabs within the editor. In the instance shown, there are different collections of data associated with this event and you can click on each link to expose the different tab within this panel.
  4. The custom fields themselves usually will have a label and then a form field where you enter a value. Fields that are required should have a red dot beside the label.
  5. In some cases a custom field allows you to enter multiple rows or groups of values. In this case you may see an “Add Row” button.

Some of the Custom Field Panels have been created specifically for PACS and specifically for the type of content being edited. Others are generated by WordPress plugins that we’ve installed to enhance site functionality.

PACS Custom Field Panels

  • Advanced Content – This is a legacy set of tools to allow editors to add a broader set of page layouts and elements than was possible in the old (classic) editor. New pages/posts should use regular blocks instead of this advanced content.
  • Related Links – This allows you to identify pages and posts that are related to the current one. This allows visitors to visit related pages more easily.
  • Hero Area – Pages that are the top level page of a main site section and a few others have the means to specify a background video or full-screen background image for the top of their page. This panels provides all of the options needed to control this.
  • Custom Post Type Specific Fields
    The following post types have custom fields that are contained in panels that appear only within the edit screens for that content.
    • Courses
    • Events
    • News/Blog
    • People
    • Publications
    • Videos
  • Other – There are a number of other field groups that are too small or specific to mention here. The panels function in much the same way as described for the others above.