Add block variations for individual template parts (#42454)

* Show individual template parts in the inserter * Use proper icons * Add example * Fix icon/area mixup * lint * Fix block previews for variations when the main block has no example * Prevent the fallback to the block description * Truncate inserter items to 3 lines of text * Avoid removing public stable PHP function * Fix typo
WordPress · Jul 27, 2022 · 8d2e12d · 8d2e12d
1 parent f42ea1a
commit 8d2e12d
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 17 deletions.
diff --git a/packages/block-editor/src/components/inserter-list-item/index.js b/packages/block-editor/src/components/inserter-list-item/index.js
@@ -11,6 +11,7 @@ import {
 	createBlock,
 	createBlocksFromInnerBlocksTemplate,
 } from '@wordpress/blocks';
+import { __experimentalTruncate as Truncate } from '@wordpress/components';
 import { ENTER } from '@wordpress/keycodes';
 
 /**
@@ -135,7 +136,9 @@ function InserterListItem( {
 							<BlockIcon icon={ item.icon } showColors />
 						</span>
 						<span className="block-editor-block-types-list__item-title">
-							{ item.title }
+							<Truncate numberOfLines={ 3 }>
+								{ item.title }
+							</Truncate>
 						</span>
 					</InserterListboxItem>
 				</div>

diff --git a/packages/block-editor/src/components/inserter/preview-panel.js b/packages/block-editor/src/components/inserter/preview-panel.js
@@ -5,7 +5,6 @@ import {
 	isReusableBlock,
 	createBlock,
 	getBlockFromExample,
-	getBlockType,
 } from '@wordpress/blocks';
 import { __ } from '@wordpress/i18n';
 
@@ -16,31 +15,24 @@ import BlockCard from '../block-card';
 import BlockPreview from '../block-preview';
 
 function InserterPreviewPanel( { item } ) {
-	const { name, title, icon, description, initialAttributes } = item;
-	const hoveredItemBlockType = getBlockType( name );
+	const { name, title, icon, description, initialAttributes, example } = item;
 	const isReusable = isReusableBlock( item );
 	return (
 		<div className="block-editor-inserter__preview-container">
 			<div className="block-editor-inserter__preview">
-				{ isReusable || hoveredItemBlockType?.example ? (
+				{ isReusable || example ? (
 					<div className="block-editor-inserter__preview-content">
 						<BlockPreview
 							__experimentalPadding={ 16 }
-							viewportWidth={
-								hoveredItemBlockType.example?.viewportWidth ??
-								500
-							}
+							viewportWidth={ example?.viewportWidth ?? 500 }
 							blocks={
-								hoveredItemBlockType.example
+								example
 									? getBlockFromExample( item.name, {
 											attributes: {
-												...hoveredItemBlockType.example
-													.attributes,
+												...example.attributes,
 												...initialAttributes,
 											},
-											innerBlocks:
-												hoveredItemBlockType.example
-													.innerBlocks,
+											innerBlocks: example.innerBlocks,
 									  } )
 									: createBlock( name, initialAttributes )
 							}

diff --git a/packages/block-library/src/template-part/index.php b/packages/block-library/src/template-part/index.php
@@ -159,11 +159,11 @@ function render_block_core_template_part( $attributes ) {
 }
 
 /**
- * Returns an array of variation objects for the template part block.
+ * Returns an array of area variation objects for the template part block.
  *
  * @return array Array containing the block variation objects.
  */
-function build_template_part_block_variations() {
+function build_template_part_block_area_variations() {
 	$variations    = array();
 	$defined_areas = get_allowed_block_template_part_areas();
 	foreach ( $defined_areas as $area ) {
@@ -183,6 +183,60 @@ function build_template_part_block_variations() {
 	return $variations;
 }
 
+/**
+ * Returns an array of instance variation objects for the template part block
+ *
+ * @return array Array containing the block variation objects.
+ */
+function build_template_part_block_instance_variations() {
+	$variations     = array();
+	$template_parts = get_block_templates(
+		array(
+			'post_type' => 'wp_template_part',
+		),
+		'wp_template_part'
+	);
+
+	$defined_areas = get_allowed_block_template_part_areas();
+	$icon_by_area  = array_combine( array_column( $defined_areas, 'area' ), array_column( $defined_areas, 'icon' ) );
+
+	foreach ( $template_parts as $template_part ) {
+		$variations[] = array(
+			'name'        => sanitize_title( $template_part->slug ),
+			'title'       => $template_part->title,
+			// If there's no description for the template part don't show the
+			// block description. This is a bit hacky, but prevent the fallback
+			// by using a non-breaking space so that the value of description
+			// isn't falsey.
+			'description' => $template_part->description || '&nbsp;',
+			'attributes'  => array(
+				'slug'  => $template_part->slug,
+				'theme' => $template_part->theme,
+				'area'  => $template_part->area,
+			),
+			'scope'       => array( 'inserter' ),
+			'icon'        => $icon_by_area[ $template_part->area ],
+			'example'     => array(
+				'attributes' => array(
+					'slug'  => $template_part->slug,
+					'theme' => $template_part->theme,
+					'area'  => $template_part->area,
+				),
+			),
+		);
+	}
+	return $variations;
+}
+
+/**
+ * Returns an array of all template part block variations.
+ *
+ * @return array Array containing the block variation objects.
+ */
+function build_template_part_block_variations() {
+	return array_merge( build_template_part_block_area_variations(), build_template_part_block_instance_variations() );
+}
+
 /**
  * Registers the `core/template-part` block on the server.
  */