Exploring WordPress 6.4 (beta 4)

Font Library (54169)
New blocks: Time to Read (53776), Table of Contents (42229), Scrolling Marquee (41730)
Public Interactivity API – merged, but not available for public use (50906)
Revisions to Templates and Template Parts (57704)
Post Formats for block themes (53049)

WordCamp Atlanta

Next slide

Previous slide

Image Lightbox

Lightbox toggle available for Image block (Global Styles and Block Settings) [51132]

WordCamp Atlanta

Next slide

Previous slide

Placeholder Aspect Ratios

Aspect ratio support for placeholder Image block state [54216]

WordCamp Atlanta

Next slide

Previous slide

Renaming in List View

Rename the Group block in the List View, or under Settings > Advanced [53735]

WordCamp Atlanta

Next slide

Previous slide

Button & Heading Styling

Styling for nested Heading and button blocks within a Group + Columns block [53667][54104]

WordCamp Atlanta

Next slide

Previous slide

Background Image for Group

Add a Background Image to the Group block [53934]

WordCamp Atlanta

Next slide

Previous slide

Write with Ease

The toolbar location is attached to the parent for nested blocks: List, Navigation, and Quote block.

WordCamp Atlanta

Next slide

Previous slide

Vertical Text Orientation

WordCamp Atlanta

Next slide

Previous slide

Buttons in Navigation

Navigation block supports Button block nesting [53966]

WordCamp Atlanta

Next slide

Previous slide

List View

WordCamp Atlanta

Next slide

Previous slide

Page Numbers mid size

Ability to choose how many numbers to show in the Query Page Numbers block [51216]

WordCamp Atlanta

Next slide

Previous slide

Query Loop Pagination

Option to enable enhanced pagination on Query Loop block [53812]

WordCamp Atlanta

Next slide

Previous slide

Fluid Typography min/max viewport

🔴 🟡 🟢

theme.json

"typography": {
	"fluid": {
		"maxViewportWidth": "800px",
		"minViewportWidth": "600px"
	},
}

[53081]

WordCamp Atlanta

Next slide

Previous slide

Block Hooks

Briefly referred to as auto-inserting blocks.

Allows developers to attach blocks and insert them in specified locations:

before – inject before the target block.
after – inject after the target block.
firstChild – inject before the first inner block of the target container block.
lastChild – inject after the last inner block of the target container block.

See: Developer Resources > Block API Reference > Registration > Block Hooks

🔴 🟡 🟢

block.json

{
    blockHooks: {
        'core/verse': 'before'
        'core/spacer': 'after',
        'core/column': 'firstChild',
        'core/group': 'lastChild',
    }
}

WordCamp Atlanta

Next slide

Previous slide

Per-block Layout support

🔴 🟡 🟢

theme.json

"settings": {
    "blocks": {
        "core/buttons": {
            "layout": false
        }
    }
}

[53378]

WordCamp Atlanta

Next slide

Previous slide

Twenty Twenty-Four

Default Theme

WordCamp Atlanta

Next slide

Previous slide

Twenty Twenty-Four

Preview Site

Call for testing Twenty Twenty-Four new default theme

WordCamp Atlanta

Next slide

Previous slide

Write with Ease

Easier access to the ‘Open in a new tab’ for links

WordCamp Atlanta

Next slide

Previous slide

List View

List View – utilize the Esc key to deselect blocks

WordCamp Atlanta

Next slide

Previous slide

List View

Duplicate blocks in List View with keyboard shortcuts ⇧⌘D

WordCamp Atlanta

Next slide

Previous slide

Prevent Editing Blocks

🔴 🟡 🟢

childComponent.js

function ChildComponent( props ) {
	const blockEditingMode = useBlockEditingMode();
	let text = 'Child component';
	if ( blockEditingMode === 'disabled' ) {  
		// Block is disabled, add custom block properties to indicate disabled mode.
	        text+= ' is disabled!';
	}
	
	if ( blockEditingMode === 'default' ) {
	    // Block can be edited, show controls or other editing-related settings.
	    <MyBlockCustomControls />
	}

        return <div { ...props }>{ text }</div>;
}

useBlockEditingMode() [52094]

WordCamp Atlanta

Next slide

Previous slide

Command Palette

New commands for block transforms and options to duplicate, copy, remove, and insert after/before.

WordCamp Atlanta

Next slide

Previous slide

Command Palette

Improved responsiveness to varying viewports for the Command Palette

WordCamp Atlanta

Next slide

Previous slide

Custom Categories

Patterns

Ability to create custom pattern categories

WordCamp Atlanta

Next slide

Previous slide

Import / Export

Patterns

Patterns can be exported and imported between sites as JSON files [54337]

WordCamp Atlanta

Next slide

Previous slide

More, more, more!

Preformatted: Add margin and padding support. (45196)
Social Links: Add Threads Icon. (52685)
Verse: Enable line breaks. (52928)
Details: Add block gap support. (53282)
File: Add margin and padding support. (45107)
Colum: Add stretch alignment (53325).
Image: Keep image size upon replacing an image (49982).
Buttons: Allow using a button element for button blocks (54206).
Post Content: Add block gap support (54282).
Post Content: Add color control support (51326).
Footnotes: Add link, background, and text color support (52897).
Footnotes: Add typography, dimensions, and border block supports (53044).

WordCamp Atlanta

Next slide

Previous slide

Help with Testing 🐛

Join us in testing!

Weekly scheduled Test team meetings: make.wordpress.org/meetings/#test
Download and test on a local development and never in production!
- Local Blueprint – WordPress Beta Tester ❤️ wpeng.in/6-4_beta-1/
- WordPress Beta Tester plugin: wp.org/plugins/wordpress-beta-tester
- WP-CLI – wp core update --version=6.4-beta1
Make.WP.org – Test team “Help Test WordPress 6.4”

WordCamp Atlanta

Next slide

Previous slide

Thanks

The WordPress community is us. Not “we”, or “I,” or “them.”

This presentation was created with the following:

Bounds theme – wp.org/themes/bounds/
Icon Block – wp.org/plugins/icon-block/
Lots and lots of help from Anne McCarthy’s (@annezazu) Source of Truth

WordCamp Atlanta

Back to the beginning