WordPress 6.3, the latest update for the blogging/CMS platform, arrived on August 8th, and with it came a number of changes & enhancements. Below are a few of the ones I’m excited about, but be sure to read the field guide to get all the details!
async and defer Script Attributes
To help assist with script loading strategies for performance, the wp_register_script and wp_enqueue_script functions have been updated to allow the $in_footer parameter to be “overloaded,” meaning it can take its normal attributes of true or false, OR it can now be passed an array containing the loading strategy of async or defer. You can also still pass whether you want it in the footer or not via the array.
// Old method
wp_enqueue_script( 'script-name', 'script-path.js', array( 'dependencies' ), 'VersionNumber1', true );
// New method
wp_enqueue_script( 'script-name', 'script-path.js', array( 'dependencies' ), 'VersionNumber2', array( 'in_footer' => true, 'strategy' => 'async' ) );For clarification, using defer essentially means the script, even if it’s located in your site’s <head>, behaves like it’s being called right before the closing </body> element. Scripts enqueued this way will still load in the order they were added to the DOM, allowing dependency management.
Using the async strategy means your script will load as soon as the browser encounters it, but does not have to load the script in a particular order. It’s like telling the browser, “Hey, I might take a moment, but don’t hold up the rest of the site on my behalf. Keep going, I’ll get done eventually.”
Image Performance Enhancements
WordPress now adds fetchpriority="high" to the image it determines to be the largest one that is within the viewport. This means that image will now be prioritized by the browser to render earlier, thus helping decrease the largest contentful paint metric.
WP Core also now includes the wp_get_loading_optimization_attributes() function to help apply additional loading attributes. Because WordPress has instituted the new function everywhere in core that handles images, it adds consistency to the way fetchpriority and loading attributes are handled for images. Note: currently, the new function only applies to images and iframes.
Lastly, images that appear before the_loop now count towards the threshold for which images get the loading="lazy" attribute, and the threshold has been updated from 1 to 3 to account for multi-column layouts with images.
Layout Supports
Another new addition is you can now add layout support to your custom blocks via properties in the block.json file. This is meant for blocks that contain inner blocks which need to be positioned a particular way, such as in columns. The simplest method to get started is by adding the following code in your block.json’s supports section.
"supports": {
"layout": true
}By default, this uses the “flow” layout, which shows the “Inner blocks use content width” toggle, turned off to start. However, you can also pass an object for layout instead of a boolean value, and utilize several subproperties.
Say you want to default the inner blocks toggle to On instead, aka the “constrained” layout. You can do so by setting the default subproperty type to constrained.
"supports": {
"layout": {
"default": {
"type": "constrained"
}
}
}You also can specify types of "flex" and "grid", though there is a caveat. From my testing, if you only set the type to one of those values, the inner blocks toggle still appears, and clicking on it will remove the options that are specific to flex and grid. To get around that, you can add the layout subproperty of allowInheriting with a value of false, which turns off the toggle.
"supports": {
"layout": {
"default": {
"type": "grid"
},
"allowInheriting": false
}
}New Blocks
Last but not least, WordPress 6.3 comes with 2 new blocks added to core: Details and Footnotes.
The Details block is essentially outputting a details/summary element into the page, with the ability to set whether it’s open or closed by default.
The summary text
You can place as much text & other blocks inside the details block as you wish. For example, I’ve added a YouTube embed inside a Group block with a background color below.
The Footnotes block by itself only adds a section that will display any footnotes added inline inside it. You can move it around wherever you wish inside your content, but if you apply a footnote1 via the block toolbar to inline text without adding the block, it will append the block for you at the end of the content.
So that does it for this roundup, but what do you think of the improvements? Drop me a message and let me know if there’s any that you’re excited to use. Until next time!
- The footnote number links here, and the following link brings you back to the respective text. ↩︎