Nicer UX with custom template part areas

[justintadlock]

By default, there are 3 template part areas that themes can use:

• Header
• Footer
• Uncategorized

In early development, there was once also a Sidebar area, but it was removed. Theme authors can register any custom areas they want via the default_wp_template_part_areas filter hook. This has been around for a while but is undocumented (AFAIK). This would be a super simple tutorial to write (would make for a "good first topic" for a new Dev Blog writer):

PoC of registering a sidebar area:

add_filter( 'default_wp_template_part_areas', function( $areas ) {
	$areas[] = [
		'area'        => 'sidebar',
		'label'       => __( 'Sidebar', 'themeslug' ),
		'description' => __( 'Custom description', 'themslug' ),
		'icon'        => 'layout',
		'area_tag'    => 'div'
	];
	return $areas;
} );

This makes navigating the template editor UI much nicer. For example, in this screenshot, the area is labeled "Sidebar" instead of "General":

[oritwoen]

I don't know if this code even makes sense in the current version of WordPress.

Each new file in the ./parts folder creates a new part visible to the editor and everything works fine. Without any additional code. No PHP needed.

For renaming, you can use theme.json and templateParts:

"templateParts": [
    {
        "name": "sidebar",
	"title": "Awesome sidebar",
	"area": "sidebar"
    }
]

[justintadlock]

There is no sidebar area in WordPress. So, the area in your example code just falls back to uncategorized (label of "General" in the UI). The below screenshot is what the output looks like in the Site Editor when not registering the custom area. Are you seeing something different?

[bph]

Conversation locked. Please continue discussion on the issue:

• Nicer UX with custom template part areas #125

[justintadlock]

Post published here: https://developer.wordpress.org/news/2023/06/upgrading-the-site-editing-experience-with-custom-template-part-areas/