Working with WordPress 5.9 Workshop

New Features to Note

  • Full site editing
    • WordPress takes the framework of blocks for building content to building site layout.
    • Customize block defaults for your entire site
    • Change styles – change colors, typography, layouts across your site
  • More choices and controls for the blocks you already know.

Tackling WordPress Jargon

  • Block theme
    • A block theme is a theme that uses blocks for all parts of a site, including navigation menus, header, content, and site footer.
  • Site editor
    • Feature that allows users to build their entire site with blocks, including using a few new theme blocks, and customize it using a new styling system.
  • Template editor
    • Feature that allows block editor users to edit and create templates that a page or posts uses.
  • Template parts
    • Block that can be used with a block theme or a theme that supports template editing. They often come with your theme and are used to organize and display your site structure.
  • Styles
    • Allows you to customize your site as much as you’d like with different colors, typography, layouts, and more.
  • Navigation Block
    • Enables you to edit your site’s navigation menu, both in terms of structure and design.
  • List view
    • A tool to help you navigate between layers of content and nested blocks.
  • Block Patterns
    • Are a collection of predefined blocks that you can insert into posts and pages and then customize with your own content.

Conceptual Frameworks

Blocks inside of Blocks

Normally when people build their content in posts or pages they tend to think of the blocks as being stacked on top of each other like this:

image of wordpress blocks stacked on top of each other
WordPress bIocks stacked on top of each other

What is important to note that there are layout and theme blocks that function differently. What this means is some blocks are actually containers for other blocks. So, you can begin to imagine blocks more like this:

image of blocks nested inside each other
Blocks can be nested inside of each other

When you begin to deal with site design it is important to know that these things are possible and are the main way a lot of themes are doing the layout of your header and footer areas.

List View

Now you may be wondering how will you keep straight which block is inside of which block. This can be a challenge for people at first, but WordPress provides another view that can help you understand what is going on and that is the List View. Any place you are editing content or your templates you’ll find the list view option along the top of the editing.

screenshot of the location of list view toggle
List view looks like a staggered 3 lined menu button

This toggle opens up a panel on the left-hand side of the screen that lets you see all the different elements happening on your page.

screenshot of the list view expanded in wordpress editor
So much nesting!

Let’s Talk About…

New Block Options

With every block you add you have a contextual menu.

screenshot of contextual block menu
This is a paragraph block and the default options

There are more settings and controls available in WordPress 5.9. When in the editor and using a block they should appear in the right hand column but you can always get to it via the 3 dot menu (1) and selecting Show more settings (2).

screenshot of show more settings

There you can see there new controls over typography, color, and more.

The Header Area (styling the top of your site)

Often times people want to change the header area of their site. In a block theme this is done through the site editor.

By default when you open the site editor it will open up the home template for editing. The home template is going to contain some template parts (like a header and footer). In order to change the header itself we want to focus on that template part.

You can focus in on the header only when you are in the site editor by clicking the WordPress symbol in the corner (1) and selecting template parts (2).

By default the Twenty-Twenty Two theme has 4 template parts. The “Header” template part is also included in “Header (Dark, small)” and “Header (Dark, large”). So you can even nest template parts in to to templates parts!

In the past we’ve thought about the menu as something that was confined to the header of our site. With WordPress 5.9 menu choices exist inside a navigation block and inside a navigation block you can select from different menus to display and edit.

In the Twenty-Twenty Two theme by default the navigation block is using a menu called “header navigation”. This menu only contains a page list block which shows all your published pages in publication order. This display was usually the default behavior of themes if you never created or changed your menu.

Most people want to have more control over this so if we want to edit change this we have to do a couple of things. We can either get rid of the block entirely or select the “edit” button in the contextual menu for the page list which will prompt us with this:

This changes this block from one page list block in to multiple blocks representing all the pages. From here you can add, re-order, add sub-menus, and a few more features in to the menu. Think about the navigation block as a container for your menu.

Styles (the overall look at feel of your site)

You can change something things from the styles editor like typography of text and links, theme palette, colors of certain elements of the site, and you can even customize the appearance of specific blocks for the entire site. For example you like to use the buttons block a lot and instead of the default colors and font every time you use it you can change it to a different default.

What is important to note that when you change things from Styles is that it changes things sitewide unless a block already has customization done to it. So, any block that has not be customized will change to match and any future block you add will also use the new stylings.

The best time to engage with the Styles editor is at the beginning of building a website. It can help you create a cohesive look and feel when you layout your site.

To find the Styles editor you’ll need to open the Site Editor and click on the little half moon icon to bring up the options on the right hand side of the screen. Click it again to hide it.

screenshot of the styles editor button in wordpress site editor
Accessing the Styles editor function

Tips, Tricks, and Best Practices

  • If you are trying to make design changes to a block and it seems like nothing is happening you should think, “Maybe I need to go up a level?”
  • Pay attention to the blue boxes. These let you know what block you are about to click in to.