Changing the Layout, Menus, and Colors of a Block Theme Like Twenty Twenty Three TM

The newer WordPress themes that used content blocks for layout of the overall site, as well as the content of individual pages and posts, open up more possibilities but also change some of the details of how you accomplish basic tasks like editing the site menu.

As initial documentation, here’s the announcement of the new Twenty Twenty Three TM theme that uses this approach.

A new and much more customizable website design (WordPress theme) is now available on Toastmost.org and can be downloaded for use on other websites. This video covers the essential differences.

You may find this theme perfectly useful “out of the box,” but it will particularly appeal to those who would like the freedom to change the basic layout of their website. Don’t feel the obligation to go crazy with all the available options, but it’s good to know they’re there if you want them.

How the newer block themes are different

The Twenty Twenty Three TM and Twenty Twenty Two TM themes available on Toastmost are different from the previous generation of themes, where limited customization options were available through a Customize option on the administrator’s menu.

Instead of Customize, the newer themes have an Edit Site option that allows the website administrator to adjust the basic structure of the website, including header and footer elements. Among other things, this changes how menus are edited. Previously, that was handled through the Customize tool.

When you click Edit Site, you get the entire site loaded into the editor, where the navigation menu is just a type of content block you can edit, similar to the way you would adjust the size of a heading or the format of an image by selecting the content blocks for those items.

Navigation Menu Controls

When you’re working with the navigation menu in a block theme, WordPress displays a floating button bar that looks like this.

You would click the + sign down the end of the row to add an additional page link to the end of the menu, typically a page from the website (although it’s also possible to add a link to an external web page).

To move menu links left or right within the menu, you can use the left/right arrows: Or you can click the button that looks like a little gripper (to the left of the arrows) to drag-and-drop a selected menu item into position. Using the left/right arrows tends to be easier.

To add a submenu, you would first select one of the top level menu items, then click the submenu button, which looks like thisand then add the additional pages that should be displayed as drop-down selections underneath.

Seeing where you are in the block hierarchy

In more complicated layouts where blocks are nested inside of other blocks, it helps to turn on the outline view, which is accessed from the block outline button in the upper left corner of the editor screen.

In the example below, we can see how the header is organized with a layout group element and row elements, with the navigation block wrapped within a row and individual page links embedded within the navigation block.

The group element can have properties like background color, margin, and padding associated with it, while rows are used to space elements horizontally across the page and can have their own adjustable formatting properties.

Style variations

Another innovation introduced with recent Toastmasters themes are style variations, with which a theme can offer the site administrator options for the use of colors and fonts. The Twenty Twenty Three TM theme comes with style variations built around the colors recommended in the official Toastmasters International brand manual.

You can choose a Loyal Blue background or a True Maroon background with white text, or more subtle use of those colors as borders around your web page. Click the shaded half-circle icon in the upper left corner of the screen, then Browse Styles to access these standard style variations.

The style variations for colored borders (the ones with “Frame”) in their name won’t show an immediate change in the editor, but you will see it when you view the website.

Jargon warning

The dictionary definition of template is “anything that serves as a pattern or a model.”

In a WordPress theme, a template defines a layout and styling options that can be applied to many pages, blog posts, or other types of content.

In the RSVPMaker events plugin that WordPress for Toastmasters and Toastmost use, a “template” is a document used to define a series of repeating events, where each event starts out as a copy of the template but than can be modified independently.

Same concept, two very different uses.

More About Theme Templates and Template Parts

A theme is made up of different templates for different types of content (front page, page, blog listing, blog post) and parts (header, footer, etc.) that can be used throughout your site.

In general, a page or blog post will be displayed in a default template for that type of content. However, it is possible to switch to a different template, for example, the Wide Content Area to display content like a photo gallery or video that you want to give more space.

Or here’s an example of changing the layout for a contact page to use a “cover block” where the title is superimposed on the featured image.

The result is:

The procedure:

1. Select the Post or Page tab of your sidebar to see the current template.
2. Click on the link to display the choices.
3. Make your selection and update the page.
4. Optionally, use the Edit Template link to create a custom version of it specifically for the page or post you’re working with.

For more on working with templates and template parts, including creating your own custom templates, see

https://wordpress.com/go/web-design/12-uses-for-wordpress-block-theme-templates-and-template-parts/

Adding or changing the featured image

Many of these layouts make use of a featured image associated with a page or blog post. Look for the Featured Image section within the editor sidebar of the document you’re working with (page, post, or event) to add, change, or remove that image.

Layout Blocks: Group, Row, Stack, and Columns

The Group and Row layout blocks seem to generally be the ones most used in WordPress template layouts, but Column and Stack blocks can also be used. I’m still learning when each is most appropriate, but here are some pointers to documentation.

Group – Wraps around any series of content blocks and can be used to set properties that will be applied to the whole group, such as a default background and foreground color.

Row – Contains a series of blocks that will be spaced horizontally. Each new item you add will be spaced an even distance away from the rest (wrapping to the next line if there is no room for it to fit, based on its margin and padding).

Here is a paragraph in the same row.

Followed by another paragraph.

Columns – Used to define up to 6 horizontally spaced columns. Each column can contain multiple paragraphs, images, or other content blocks. The Twenty Twenty Three TM theme uses a two-column layout with a wider column on the left and a narrower right-hand column as a sidebar.

Stack – Like a row, except that the content blocks are spaced vertically rather than horizontally.

Undoing a Mistake

If you make a mistake while editing a template or template part, and you realize your mistake right away, just close the editing window without saving your changes. If you don’t realize your mistake until you see it on your website, and it’s not an easy one to reverse, you can go back to the default version and start over.

In the example shown below, the blue dot indicates that the Header has been customized. If you click the three dots menu on the right, it will reveal an option to “Clear customizations,” which will revert the header to its original defaults.

Version for Download

For users of the Toastmost service, the Twenty Twenty Three TM theme is one of the available options for users to select from Appearance -> Themes on the administrator’s dashboard.

The Twenty Twenty Three TM theme is available for use by Toastmasters clubs and districts who use the Toastmost hosting service. Clubs and districts who use other WordPress web hosting can download and install this version, which is current as of Nov. 20, 2022.