register template part variations server side.

lib/class-wp-theme-json-resolver.php

@@ -318,7 +318,7 @@ private static function get_user_data_from_custom_post_type( $should_create_cpt
 				'order'       => 'desc',
 				'post_type'   => $post_type_filter,
 				'post_status' => $post_status_filter,
-				'tax_query'      => array(
+				'tax_query'   => array(
 					array(
 						'taxonomy' => 'wp_theme',
 						'field'    => 'name',

packages/block-library/package.json

@@ -27,7 +27,8 @@
 	"sideEffects": [
 		"build-style/**",
 		"src/**/*.scss",
-		"src/navigation-link/index.js"
+		"src/navigation-link/index.js",
+		"src/template-part/index.js"
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.13.10",

packages/block-library/src/template-part/index.js

@@ -9,13 +9,14 @@ import { startCase } from 'lodash';
 import { store as coreDataStore } from '@wordpress/core-data';
 import { select } from '@wordpress/data';
 import { layout } from '@wordpress/icons';
+import { addFilter } from '@wordpress/hooks';
 
 /**
  * Internal dependencies
  */
 import metadata from './block.json';
 import edit from './edit';
-import './variations';
+import { enhanceTemplatePartVariations } from './variations';
 
 const { name } = metadata;
 export { metadata, name };
@@ -42,3 +43,10 @@ export const settings = {
 	},
 	edit,
 };
+
+// Importing this file includes side effects. This is whitelisted in block-library/package.json under sideEffects
+addFilter(
+	'blocks.registerBlockType',
+	'core/template-part',
+	enhanceTemplatePartVariations
+);

packages/block-library/src/template-part/index.php

@@ -125,6 +125,31 @@ function render_block_core_template_part( $attributes ) {
 	return "<$html_tag $wrapper_attributes>" . str_replace( ']]>', ']]&gt;', $content ) . "</$html_tag>";
 }
 
+/**
+ * Returns an array of variation objects for the template part block.
+ *
+ * @return array Array containing the block variation objects.
+ */
+function build_template_part_block_variations() {
+	$variations    = array();
+	$defined_areas = gutenberg_get_allowed_template_part_areas();
+	foreach ( $defined_areas as $area ) {
+		if ( 'uncategorized' !== $area['area'] ) {
+			$variations[] = array(
+				'name'        => $area['area'],
+				'title'       => $area['label'],
+				'description' => $area['description'],
+				'attributes'  => array(
+					'area' => $area['area'],
+				),
+				'scope'       => array( 'inserter' ),
+				'icon'        => $area['icon'],
+			);
+		}
+	}
+	return $variations;
+}
+
 /**
  * Registers the `core/template-part` block on the server.
  */
@@ -133,6 +158,7 @@ function register_block_core_template_part() {
 		__DIR__ . '/template-part',
 		array(
 			'render_callback' => 'render_block_core_template_part',
+			'variations'      => build_template_part_block_variations(),
 		)
 	);
 }

packages/block-library/src/template-part/variations.js

@@ -2,41 +2,16 @@
  * WordPress dependencies
  */
 import { store as coreDataStore } from '@wordpress/core-data';
-import { store as editorStore } from '@wordpress/editor';
-import { store as blocksStore } from '@wordpress/blocks';
-import { dispatch, select, subscribe } from '@wordpress/data';
+import { select } from '@wordpress/data';
+import * as icons from '@wordpress/icons';
 
-const unsubscribe = subscribe( () => {
-	const definedVariations = select(
-		editorStore
-	).__experimentalGetDefaultTemplatePartAreas();
-
-	if ( ! definedVariations?.length ) {
-		return;
+export function enhanceTemplatePartVariations( settings, name ) {
+	if ( name !== 'core/template-part' ) {
+		return settings;
 	}
-	unsubscribe();
-
-	const variations = definedVariations
-		.filter( ( { area } ) => 'uncategorized' !== area )
-		.map( ( { area, label, description, icon } ) => {
-			return {
-				name: area,
-				title: label,
-				description,
-				icon,
-				attributes: { area },
-				scope: [ 'inserter' ],
-			};
-		} );
 
-	/**
-	 * Add `isActive` function to all `Template Part` variations, if not defined.
-	 * `isActive` function is used to find a variation match from a created
-	 *  Block by providing its attributes.
-	 */
-	variations.forEach( ( variation ) => {
-		if ( variation.isActive ) return;
-		variation.isActive = ( blockAttributes, variationAttributes ) => {
+	if ( settings.variations ) {
+		const isActive = ( blockAttributes, variationAttributes ) => {
 			const { area, theme, slug } = blockAttributes;
 			// We first check the `area` block attribute which is set during insertion.
 			// This property is removed on the creation of a template part.
@@ -51,10 +26,21 @@ const unsubscribe = subscribe( () => {
 			);
 			return entity?.area === variationAttributes.area;
 		};
-	} );
 
-	dispatch( blocksStore ).addBlockVariations(
-		'core/template-part',
-		variations
-	);
-} );
+		const variations = settings.variations.map( ( variation ) => {
+			return {
+				...variation,
+				...( ! variation.isActive && { isActive } ),
+				...( typeof variation.icon === 'string' && {
+					icon: icons[ variation.icon ],
+				} ),
+			};
+		} );
+
+		return {
+			...settings,
+			variations,
+		};
+	}
+	return settings;
+}