Exploring WordPress 6.3

Say hello to WordPress 6.3 “Lionel,” named after Lionel Hampton, the celebrated American jazz artist. 6.3 brings with it the ability to edit your site cohesively. This video tutorial will cover some new features that landed with WordPress 6.3.

Learning outcomes

1. Using and navigating the new layout of the Site Editor.
2. Utilizing the Command Palette.
3. Activating distraction-free mode.
4. Previewing block themes before activating them.
5. Using Styles Revisions.
6. Setting aspect ratios for images within a pattern.
7. Adding and using the Details block.
8. Adding footnotes to your content.
9. Resizing the Site Editor to view it on smaller screen sizes.

Comprehension questions

1. What are the benefits of bringing content, templates, and patterns together in the Site Editor?

Transcript

Introduction

Welcome to Learn WordPress. Let’s explore various new features that have landed with WordPress 6.3. Let’s jump straight in. 6.3 brings with it the ability to edit your site cohesively. You can now create and launch your site within the Site Editor. When you open the Site Editor, you will see an enhanced site view sidebar, which allows you to navigate between navigation menus, styles, pages, templates, and patterns. Let’s start at the top with navigation.

Navigation

Say goodbye to the hassle of managing navigation menus within a template. You can now easily edit and manage your menus from here, streamlining your workflow. You can make simple edits directly, like reordering or deleting menu items. You can also rename, duplicate and delete your menus as required. If opened in editing mode, you can make certain changes without any distractions, and updates will sync across your entire site.

Styles

The Styles area, which was previously separate, is also now available in the sidebar, granting you quick access to style customization. You’ll be able to browse style variations, use the style book and get easy access to open the overall style system. Also, if you click on an individual block in the style book, you will now automatically be taken to those specific block settings in the styles interface.

Pages

The new pages section lets you navigate through your pages. If you select a page, you can edit it right in the site editor, or if you go back and click on the plus icon top right, you can also create a new page. Let’s go ahead and create a new test page. Please note if you’re editing a page in the site editor, you will add content to the Post Content block. To customize other parts of the page, like the header and footer, you have to edit the template, and you can do so by clicking on Edit Template at the bottom right of the settings sidebar. This will take you to your template assigned to this page, where you can modify your header and footer.

Templates

Templates are, of course, used to express the layout of your site. When you open templates, you’ll have a seamless view and control over the various templates utilized on your site. Here, for example, I’ve opened my page template, which displays a single page. If I go to the single post template, we will see the structure for a single post. Having pages and templates in the Site Editor brings a clear distinction between editing a page’s content and its template, making it easier for you to switch between the two modes and view them in the appropriate context. You, therefore, don’t have to go to pages in your dashboard to add content. It can be done in the Site Editor. Dynamic pages powered by templates like 404 and search pages are now included under pages, enhancing the user experience.

Edit site

While we’re on the topic of templates when viewing the front end of your site while using a block theme, you can now select Edit site, and the current template powering the content you’re viewing will be opened. Previously, this option would open the overall site editor.

Patterns

A brand new feature in WordPress 6.3 is the ability to create patterns. When you open patterns, you can see and manage your own patterns you have created, synced, or not. When you create your own pattern, you can choose for it to remain static. That means it will not be updated when changes are made. Or you can sync patterns, which means updates will be made across your site wherever the pattern has been added. This was previously known as Reusable blocks.

Below your own patterns, we will see the patterns provided by your theme. Right at the bottom of patterns, we can access our header, footer, and general template parts. Template parts are synced reusable components that can be used across your site. These are most commonly used for headers and footers. At the top, you can also create a new template part or manage the ones you have already created.

Command Palette

6.3 also introduces an incredible addition called the Command Palette. This new tool allows you to complete tasks and navigate the site editor swiftly. To access it, open the Site Editor and use the keyboard shortcut Command+K on Mac or Ctrl+K on Windows. You will also find it in the site view sidebar by clicking on the search icon, or you can click on the title bar. There are various commands which allow you to edit or create new content types, as well as navigate to different parts of your site.

Distraction-free mode

Next, the distraction-free mode has expanded to the site editor. When you select this, you can enjoy a clutter-free one-to-one preview of your site’s front end, allowing you to focus entirely on your site’s content while remaining within the editor. A distraction-free mode is a visual option that creates a focused writing experience by hiding various parts of the editor interface. When enabled, any open sidebars are closed, and toolbars fade away, leaving your content to take center stage. You can toggle this on and off as you please.

Preview a block theme

Have you been looking for a way to preview your site using a different theme? Well, now you can. WordPress 6.3 enables you to preview block themes before activating them. When you enter the Site Editor, you can see how your site will look and feel with the new theme and even make changes without activating it. Once you’ve made the changes and decided to switch, you can click on Activate and Save. Your changes will be instantly reflected on the front end. This will hopefully simplify the transition to a new block theme.

Styles Revisions

Next, let’s talk about style revisions and having more control. The new styles revisions feature adds a visual way to browse changes to your styles over time. You can easily revert to a previous state. If you find a style you prefer or want to revert to a previous version, you must select the version and click Apply.

Another feature worth mentioning is the aspect ratio controls introduced for images. This enhancement ensures that patterns or grouped blocks containing images remain visually intact, regardless of the dimensions of the upload images. You can therefore select an aspect ratio, and then any image you replace it with will change accordingly and maintain the aspect ratio set. This allows you to keep design integrity within patterns.

Details block

A new block to look out for is the Details block. This new block allows you to hide content until a reader chooses to engage with it with a simple open-close arrow icon. The hidden content will appear or disappear when you click on the arrow.

Footnotes

I also want to introduce to you a new feature called Footnotes. Footnotes allow you to easily add comments, citations, etc., to your content at the bottom of your post or page. First, select the relevant content. In your block toolbar, select the drop-down arrow, select footnote, and then at the bottom, type in the comment or citation.

Resizing the Site Editor for smaller screens

To end off, you also now have the ability to resize your Site Editor, allowing you to preview how it will appear on smaller screens, such as mobile devices. If you resize to engage the full screen, you’ll automatically be placed in Edit View to begin editing.

Happy exploring and visit Learn WordPress for more tutorials and training material.