Product Form Template: populate the template selector control with the PFTs (#48327)

* switch setting templates order

* pull product_form from the entity store

* fix typo

* set post excerpt with template description

* update the description for the Simple template

* rename type for product form post

* introduce isProductFormTemplateEnabled() helper

* render the PFTs into the templates selector

* changelog

* tscripting

* remopve dropdown

* re-write changelog files

* change and rename isProductFormTemplateSystemEnabled

* remove unused component

* try change the template version name

packages/js/product-editor/changelog/update-pft-populate-template-selector

@@ -0,0 +1,4 @@
+Significance: patch
+Type: update
+
+Product Block Editor: populate the template selector with the product form templates

packages/js/product-editor/src/blocks/product-fields/product-details-section-description/edit.tsx

@@ -39,10 +39,12 @@ import {
 } from '../../../utils/get-product-error-message';
 import type {
 	ProductEditorBlockEditProps,
+	ProductFormPostProps,
 	ProductTemplate,
 } from '../../../types';
 import { ProductDetailsSectionDescriptionBlockAttributes } from './types';
 import * as wooIcons from '../../../icons';
+import isProductFormTemplateSystemEnabled from '../../../utils/is-product-form-template-system-enabled';
 
 export function ProductDetailsSectionDescriptionBlockEdit( {
 	attributes,
@@ -93,6 +95,20 @@ export function ProductDetailsSectionDescriptionBlockEdit( {
 	const [ unsupportedProductTemplate, setUnsupportedProductTemplate ] =
 		useState< ProductTemplate >();
 
+	// Pull the product templates from the store.
+	const productFormPosts = useSelect( ( sel ) => {
+		// Do not fetch product form posts if the feature is not enabled.
+		if ( ! isProductFormTemplateSystemEnabled() ) {
+			return [];
+		}
+
+		return (
+			sel( 'core' ).getEntityRecords( 'postType', 'product_form', {
+				per_page: -1,
+			} ) || []
+		);
+	}, [] ) as ProductFormPostProps[];
+
 	const { isSaving } = useSelect(
 		( select ) => {
 			// eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -189,6 +205,12 @@ export function ProductDetailsSectionDescriptionBlockEdit( {
 		return <Icon icon={ icon } size={ 24 } />;
 	}
 
+	/**
+	 * Returns a function that renders a MenuItem component.
+	 *
+	 * @param {Function} onClose - Function to close the dropdown.
+	 * @return {Function} Function that renders a MenuItem component.
+	 */
 	function getMenuItem( onClose: () => void ) {
 		return function renderMenuItem( productTemplate: ProductTemplate ) {
 			const isSelected =
@@ -278,7 +300,7 @@ export function ProductDetailsSectionDescriptionBlockEdit( {
 		}
 	}
 
-	function toogleButtonClickHandler( isOpen: boolean, onToggle: () => void ) {
+	function toggleButtonClickHandler( isOpen: boolean, onToggle: () => void ) {
 		return function onClick() {
 			onToggle();
 
@@ -326,7 +348,7 @@ export function ProductDetailsSectionDescriptionBlockEdit( {
 						<Button
 							aria-expanded={ isOpen }
 							variant="link"
-							onClick={ toogleButtonClickHandler(
+							onClick={ toggleButtonClickHandler(
 								isOpen,
 								onToggle
 							) }
@@ -344,6 +366,22 @@ export function ProductDetailsSectionDescriptionBlockEdit( {
 								) }
 							</MenuGroup>
 
+							{ isProductFormTemplateSystemEnabled() && (
+								<MenuGroup>
+									{ productFormPosts.map( ( formPost ) => (
+										<MenuItem
+											key={ formPost.id }
+											icon={ resolveIcon( 'external' ) }
+											info={ formPost.excerpt.raw }
+											iconPosition="left"
+											onClick={ onClose } // close the dropdown for now
+										>
+											{ formPost.title.rendered }
+										</MenuItem>
+									) ) }
+								</MenuGroup>
+							) }
+
 							{ unsupportedProductTemplates.length > 0 && (
 								<MenuGroup>
 									<Dropdown

packages/js/product-editor/src/components/block-editor/block-editor.tsx

@@ -17,7 +17,6 @@ import { __ } from '@wordpress/i18n';
 import { useLayoutTemplate } from '@woocommerce/block-templates';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import { Product } from '@woocommerce/data';
-import { SelectControl } from '@wordpress/components';
 import {
 	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 	// @ts-ignore No types for this exist yet.
@@ -51,7 +50,8 @@ import { store as productEditorUiStore } from '../../store/product-editor-ui';
 import { ProductEditorSettings } from '../editor';
 import { BlockEditorProps } from './types';
 import { LoadingState } from './loading-state';
-import type { ProductFormTemplateProps, ProductTemplate } from '../../types';
+import type { ProductFormPostProps, ProductTemplate } from '../../types';
+import isProductFormTemplateSystemEnabled from '../../utils/is-product-form-template-system-enabled';
 
 const PluginArea = lazy( () =>
 	import( '@wordpress/plugins' ).then( ( module ) => ( {
@@ -87,9 +87,6 @@ export function BlockEditor( {
 	productId,
 	setIsEditorLoading,
 }: BlockEditorProps ) {
-	const isProductEditorTemplateSystemEnabled =
-		!! window.wcAdminFeatures?.[ 'product-editor-template-system' ];
-
 	const [ selectedProductFormId, setSelectedProductFormId ] = useState<
 		number | null
 	>( null );
@@ -224,7 +221,7 @@ export function BlockEditor( {
 				per_page: -1,
 			} ) || []
 		);
-	}, [] ) as ProductFormTemplateProps[];
+	}, [] ) as ProductFormPostProps[];
 
 	// Set the default product form template ID.
 	useEffect( () => {
@@ -246,7 +243,7 @@ export function BlockEditor( {
 	const productFormTemplate = useMemo(
 		function pickAndParseTheProductFormTemplate() {
 			if (
-				! isProductEditorTemplateSystemEnabled ||
+				! isProductFormTemplateSystemEnabled() ||
 				! selectedProductFormId
 			) {
 				return undefined;
@@ -262,11 +259,7 @@ export function BlockEditor( {
 
 			return undefined;
 		},
-		[
+		[ productForms, selectedProductFormId ]
-			isProductEditorTemplateSystemEnabled,
-			productForms,
-			selectedProductFormId,
-		]
 	);
 
 	useLayoutEffect(
@@ -284,7 +277,7 @@ export function BlockEditor( {
 			 * If the product form template is not available, use the block instances.
 			 * ToDo: Remove this fallback once the product form template is stable/available.
 			 */
-			const editorTemplate = productFormTemplate ?? blockInstances;
+			const editorTemplate = blockInstances ?? productFormTemplate;
 
 			onChange( editorTemplate, {} );
 
@@ -336,34 +329,8 @@ export function BlockEditor( {
 		);
 	}
 
-	const formTemplateSelectValues = productForms?.map( ( form ) => ( {
-		label: form.title.raw,
-		value: String( form.id ),
-	} ) );
-
 	return (
 		<div className="woocommerce-product-block-editor">
-			{ isProductEditorTemplateSystemEnabled && (
-				<div style={ { margin: '32px', width: '250px' } }>
-					<SelectControl
-						label={ __(
-							'Choose form template type',
-							'woocommerce'
-						) }
-						options={ formTemplateSelectValues }
-						onChange={ ( value: string ) =>
-							setSelectedProductFormId( parseInt( value, 10 ) )
-						}
-						disabled={ ! productForms }
-						className="woocommerce-product-block-editor__product-type-selector"
-						help={ __(
-							'This is a temporary setting.',
-							'woocommerce'
-						) }
-					/>
-				</div>
-			) }
-
 			<BlockContextProvider value={ context }>
 				<BlockEditorProvider
 					value={ blocks }

packages/js/product-editor/src/types.ts

@@ -50,7 +50,7 @@ export interface TaxonomyMetadata {
 	hierarchical: boolean;
 }
 
-export type ProductFormTemplateProps = {
+export type ProductFormPostProps = {
 	id: number;
 	date: string;
 	date_gmt: string;

packages/js/product-editor/src/utils/is-product-form-template-system-enabled.ts

@@ -0,0 +1,3 @@
+export default function isProductFormTemplateSystemEnabled() {
+	return !! window.wcAdminFeatures?.[ 'product-editor-template-system' ];
+}

plugins/woocommerce/changelog/update-pft-populate-template-selector

@@ -0,0 +1,4 @@
+Significance: patch
+Type: update
+
+WooCommerce: store the template description in the `product_form` excerpt property.

plugins/woocommerce/src/Admin/Features/ProductBlockEditor/ProductFormsController.php

@@ -109,7 +109,7 @@ class ProductFormsController {
 							'ID'           => $post->ID,
 							'post_title'   => $file_data['title'],
 							'post_content' => BlockTemplateUtils::get_template_content( $file_path ),
-							'post_excerpt' => __( 'Template updated by the (PFT) Product Form Template system', 'woocommerce' ),
+							'post_excerpt' => $file_data['description'],
 						)
 					);
 				}
@@ -129,7 +129,7 @@ class ProductFormsController {
 					'post_status'  => 'publish',
 					'post_type'    => 'product_form',
 					'post_content' => BlockTemplateUtils::get_template_content( $file_path ),
-					'post_excerpt' => __( 'Template created by the (PFT) Product Form Template system', 'woocommerce' ),
+					'post_excerpt' => $file_data['description'],
 				)
 			);
 		}

plugins/woocommerce/templates/product-form/simple.php

@@ -4,11 +4,11 @@
  *
  * Title: Simple
  * Slug: simple
- * Description: This is the template description.
+ * Description: A single physical or virtual product, e.g. a t-shirt or an eBook
  * Product Types: simple, variable
  *
  * @package WooCommerce\Templates
- * @version 9.1.0
+ * @version 9.1.0-beta.1
  */
 
 if ( ! defined( 'ABSPATH' ) ) {