Latest Features and Default Theme

Latest Features and Default Theme

The ultimate major update of the 12 months – WordPress 6.4 “Shirley”, is finally released. This new edition merges six Gutenberg releases from 16.2 to 16.7, bringing loads of workflow improvements for a seamless content creation experience.

One big note is the introduction of the Twenty Twenty-4 theme, which pushes the default theme beyond blogging. Combined with performance improvements on this release, WordPress 6.4 is ready to be a flexible content management system out of the box.

Let’s have an in depth look into what’s inside WordPress 6.4.

Twenty Twenty-4 Default Theme

The brand new Twenty Twenty-4 default theme is officially launched alongside WordPress 6.4.

WordPress contributors decided to make this theme as versatile as possible, packing it with 35 patterns, from the standard blog patterns to business and portfolio design.

Twenty Twenty-Four default homepage

Let’s see how you possibly can utilize the default theme besides blogging.

Using Twenty Twenty-4 for Designing a Business Website

The default design of the Twenty Twenty-4 theme’s home template is suitable for an organization landing page, complete with a hero section, business description, and repair list placeholders ready for personalisation. 

All these design elements can be found as block patterns you need to use on other pages or templates, too. To see what this theme offers for business web sites, open the block inserter, select the Patterns tab, and click on Explore all patterns.

Browse the Pages category to see the pre-built page templates that include the theme. For business web sites, you need to use the Business Home, About, Portfolio Project Overview, and RSVP Landing Page to create essential landing pages quickly.

Page patterns in the Twenty Twenty-Four theme

Should you prefer constructing the page section by section, browse the Banner, Call to Motion, Services, and Text categories, and also you’ll find an abundance of useful templates like pricing, four-column team member display, and FAQ.

Call-to-action patterns in the Twenty Twenty-Four theme

Using Twenty Twenty-4 for Designing a Photography Website

Although the default theme design focuses on business web sites, you possibly can either clear the house page template or create a brand new front page template.

Then, open the pattern library again and browse the Pages category. For photography or portfolio web sites, select the Portfolio home image gallery or Portfolio home with post featured images patterns that may showcase images.

There are also templates in your gallery or portfolio pages. Open the Portfolio category, and also you’ll find templates for projects, galleries, and full-screen images.

Portfolio patterns in the Twenty Twenty-Four theme

Pattern Personalization and Customization

As block patterns have gotten a vital a part of block-based site editing, it’s no surprise that WordPress 6.4 introduces more ways to work with them.

Custom Pattern Categories

In WordPress 6.4, you possibly can create custom pattern categories and assign patterns to multiple categories, whether or not they are synced or not.

The category assignation or creation is accessible on the pattern creation prompt box.

Let’s say you might have a gaggle block you must save as a pattern. Select the block, open the Options menu from the block toolbar by clicking the ellipsis button, and click on Create pattern. You will notice the brand new Categories field within the box.

The interface for creating a pattern that has the categories field where users can enter custom categories

To create a brand new category, simply write the brand new category name within the text field, and it should be registered as a brand new category. You should utilize commas or the Enter key so as to add more categories.

Import and Export Patterns as JSON Files

Should you manage multiple WordPress web sites and need custom patterns available on all sites, you don’t need to create them manually on each. In WordPress 6.4, you possibly can import and export patterns as JSON files.

To export a pattern within the Site Editor, open the pattern library and find the one you must export. Click the Actions button (ellipsis icon) below the pattern thumbnail to open the drop-down menu and choose Export as JSON.

The export as JSON option for a pattern

Your computer will then download the file. To import a pattern, click the Create pattern button (plus icon) on the pattern library and choose Import pattern from JSON. Select the pattern you must import, and it should be available in your pattern library.

Import pattern from JSON option

Workflow Improvements

WordPress contributors are constantly improving block editor’s experience through Gutenberg development. As this version merges six Gutenberg releases, you’ll get a whole lot of enhancements.

Higher Block Organization on the List View

In WordPress 6.4, you possibly can higher organize your blocks, especially in content-heavy pages, posts, or templates, through the use of custom-named container blocks, like group, stack, and row blocks.

You may rename a container block via the list view or block toolbar. Either way, all you might have to do is click the Options button (ellipsis icon) and choose Rename. The prompt block will appear, and also you simply add the block name and click on Save

When you group content in custom-named container blocks, navigating to the specified section within the list view becomes much simpler.

One other recent feature within the list view for higher navigation is the thumbnail preview for image and gallery blocks. You’ll see that small thumbnail at the proper side of the image block text, allowing you to discover which image on the content this image block represents.

Even though it’s not as easy to make use of because the custom-named block, it still helps you navigate quicker on the list view panel.

An example of the list view panel with all container blocks renamed and an image block with a small thumbnail

Fix the Toolbar on the Parrent Block for Navigation, List, and Quote Blocks

The block toolbar can pop up over one other content and block it. To treatment this issue, the WordPress block editor has distraction-free and top toolbar modes to cut back distraction for a greater user experience. 

WordPress 6.4 introduces an excellent higher solution for this issue.

Navigation, list, and quote blocks have built-in child blocks. When working with these child blocks, the toolbar will remain attached to the parent block position, allowing you to work more freely without obstructing the toolbar. 

Simply put, having the toolbar on the highest of the parent block makes it easier to access.

The list block with the toolbar stuck at the top

Easier Access to the Open in Latest Tab Toggle

Even the smallest improvements can have a fantastic impact. We are able to see it from the text hyperlink settings in WordPress 6.4, as an Open in recent tab toggle is now available within the link preview. 

This feature allows you to quickly set the open in a brand new tab attribute to a hyperlink. Before it, users needed to open the link editing interface and the advanced settings to add a hyperlink and configure it.

Now, as a substitute of completing two more steps, you possibly can do it with a straightforward single click.

The "Open in new tab" toggle in the link preview pop-up

Style Revision Updates

Style revision, a feature introduced in WordPress 6.3, receives a few small changes that improve style workflow significantly.

First, a Reset to default button is now available to quickly and simply revert the style to the default settings. Before this, users needed to scroll down the revisions list to search out the earliest stored revision.

The subsequent enhancement is the revision check before style revisions can be found. 

Previously, the style revisions panel was only available if users already made two changes to the styles. If not, users needed to revert manually.

In WordPress 6.4, the check is now set to at least one revision only. Thus, at any time when users change the style and put it aside, the style revisions panel might be available.

Command Palette Updates

WordPress 6.4 introduces more block-centric commands to the Command Palette tool:

  • Group
  • Ungroup
  • Duplicate
  • Remove
  • Add before
  • Add after
  • Transform (could have all transformation options for any given block)

These are tasks that typically require users to navigate through the block toolbar or list view. By having them on the Command Palette, users can just simply type and find them.

As well as, more contextual commands are also now available:

  • Open List View (within the Site Editor)
  • Exit code editor
  • Hide breadcrumbs
  • Show breadcrumbs
  • Enable pre-publish checklist 
  • Disable pre-publish checklist
  • Preview in a brand new tab

As a brief reminder, contextual commands are only available if you’re in a particular editor. For instance, exit code editor might be available if you’re using the code editor view, and enable pre-publish checklist appears within the post editor.

Block Improvements

WordPress constantly enhances its block customizability for creating fascinating content. On this version, we’ve exciting recent features for existing blocks, in addition to the brand new block hooks that allow an excellent more seamless content creation.

Image Block’s Aspect Ratio and Lightbox Tools

The image block receives a pair of recent features in WordPress 6.4.

The primary is the aspect ratio tool within the placeholder. That is handy if you add the image block in a template or upload the image later. Select a certain aspect ratio, and the placeholder will adjust its size accordingly, showing you ways much space the image will occupy.

The image block placeholder with the aspect ratio set to 3:2

The tool is accessible on the image block’s settings panel, with the available aspect ratio as follows:

  • Original aspect ratio
  • Square (1:1)
  • Wide (16:9)
  • Standard (4:3)
  • Classic (3:2)
  • Tall (9:16)
  • Portrait (3:4)
  • Classic Portrait (2:3)

The subsequent recent feature is the native lightbox feature that lets users magnify images in an overlay as a substitute of a brand new tab or page. You may enable the lightbox by clicking the Expand on Click toggle within the image block’s settings.

The

With the arrival of the lightbox feature, creating such a user experience not requires a separate lightbox or slideshow plugin, allowing your WordPress site to run more efficiently and safely.

Background Image Support for Container Block

In WordPress 6.4, you possibly can customize your site using a background image easier because the group, stack, and row blocks now have background image support. 

Follow these steps so as to add a background image:

  1. Select a gaggle, stack, or row block and open the block settings panel.
  2. Open the Styles tab and find the Background section.
  3. Click on the Background image button and select either Open Media Library to pick a picture out of your WordPress Media Library or Upload to upload a brand new image out of your computer.
  4. Should you would love to clear the background image, simply click Reset.
An example of a group block with a custom background image

Nonetheless, the background image support doesn’t have an opacity control and image repositioning tool. Thus, you might have to edit the image with the proper design before uploading it as a background image.

The query loop pagination now permits you to set the variety of pages displayed for the viewers. The setting is accessible within the page numbers block’s settings panel. You’ll see the variety of links field.

This feature is beneficial when you might have loads of blog posts and need to let visitors jump between pages quickly.

Number of links settings for the page numbers block

The subsequent improvement is on the client-side pagination for the query loop block. Client-side retrieves the query dataset on the initial server load. Thus, when visitors navigate to a different page of the query loop block, the browser doesn’t need to reload the page, making a faster and higher browsing experience.

To enable client-side navigation, select the query loop block on the editor, open the block’s settings panel, and disable the Force page reload.

The force page reload toggle setting for the query loop block

Block Hooks

WordPress 6.4 introduces Block Hooks, a brand new feature that enables blocks to insert themselves into similar blocks mechanically. This provides an extensibility mechanism for block themes, just like how filters and actions extend classic themes.

For instance, you possibly can modify blocks to mechanically add a post date block after inserting a post content block.

To make use of block hooks, you possibly can include blockHooks property within the block.json file:

{
    blockHooks: {
        'core/[key]': '[value]',
    }
}

Where:

  • Key – the goal block you must hook into.
  • Value – the position relative to the important thing block.

In WordPress 6.4, there are 4 available position values to insert the block:

  • before – before the goal block.
  • after – after the goal block.
  • firstChild – before the primary child block contained in the goal container block.
  • lastChild – after the last child block contained in the goal container block.

Here’s an example of the blockHooks property:

{
    blockHooks: {
        'core/query-loop': 'before',
        'core/post-content': 'after',
        'core/row': 'firstChild',
        'core/group': 'lastChild',
    }
}

Performance Improvements

Each major WordPress update introduces performance optimizations and developer-oriented upgrades. Let’s delve into the backend enhancements and see what WordPress 6.4 has to supply.

After raising the minimum PHP requirement to 7.0.0 in WordPress 6.3, the PHP support is now upgraded again, with WordPress 6.4 beneficial to run on PHP 8.1 or 8.2.

As WordPress code relies on PHP, it’s crucial to make use of the beneficial versions to maintain it secure and functional. Check together with your hosting provider for the supported PHP versions and upgrade yours if essential.

Split Queries in Object Caching

WordPress 6.4 brings many improvements to object caching, leading to higher handling of filters, reduced database queries, and improved overall system efficiency. 

Considered one of the important thing changes is the introduction of split queries, which permit WordPress to interrupt down complex queries into smaller, more efficient ones. This could significantly reduce the load time of the web site and minimize the strain in your database, especially for sites with a whole lot of content. 

Template Loading Improvement

The WordPress 6.4 release introduces several template loading enhancements to enhance performance and efficiency for each WordPress developers and users. Listed below are the brand new updates:

  • Reduced file lookups and file system access. WordPress 6.4 introduces a brand new WP_Theme::get_block_patterns()caching method to store block patterns within the cache and reduce file lookups. This variation reduces CPU usage overhead and improves overall performance.
  • Optimized block template lookup. The WP_Theme::get_block_template_folders() caching method now provides quicker and more efficient lookups of block template folders inside themes. This improvement advantages each developers and users working with block themes.
  • Improved error handling. When retrieving theme data, WordPress will now confirm the theme’s existence first before looking up the file. This update avoids any unnecessary file checks and improves the get_block_theme_folders() function’s reliability.

Latest Admin Notice Functions

Admin notices are messages exhibited to WordPress users within the admin area. They commonly provide feedback, comparable to informing users about updates, settings changes, or potential errors.

Before WordPress 6.4, admin notices were created using a combination of HTML and PHP code. This made it difficult to keep up consistency and apply global styling to notices.

To deal with these challenges, WordPress 6.4 introduces two recent admin notice functions for creating and displaying admin notices.

  • wp_get_admin_notice(). This function generates the HTML markup for an admin notice. It takes a message, an array of arguments, an optional type, a dismissible flag, an ID, and extra classes as parameters.
  • wp_admin_notice(). This function outputs the HTML markup for an admin notice on to the page. It accepts the identical parameters as wp_get_admin_notice().

Aside from promoting higher consistency for admin notices, the brand new functions also enable arguments and filters that developers can use to customize the looks and behavior of the notices. 

Discuss with the admin notice developer note for more detailed information in regards to the function’s parameters, filters, and actions.

Updating Your Website to WordPress 6.4

With the discharge of WordPress 6.4, it’s crucial to organize your website for a seamless transition. We recommend taking the next steps to make sure a secure WordPress update process:

  1. Back up your WordPress website. Before embarking on any update, making a comprehensive backup of your website is paramount. This safeguards your data in case of unexpected circumstances.
  2. Test WordPress 6.4 within the staging environment. A staging environment provides a secure space to check WordPress 6.4 without affecting your live website. This includes checking themes, plugins, and overall site performance.
  3. Address compatibility issues. Should you encounter any compatibility issues during testing, promptly address them inside the staging environment. This will likely involve updating plugins, themes, or resolving specific conflicts.
  4. Push the update to the live site. When you’re confident that your website is compatible with WordPress 6.4, proceed with the update in your live site.

By following these steps, you possibly can ensure a successful transition to WordPress 6.4, keeping your website running optimally and securely.

Author

Leo is a WordPress fanatic and contributor. He likes maintaining with the most recent WordPress news and updates, and sharing his knowledge to assist people construct successful web sites. When he isn’t working, he contributes to WordPress documentation team and pampers his dogs.