diff --git a/packages/js/product-editor/changelog/add-product-template-url b/packages/js/product-editor/changelog/add-product-template-url new file mode 100644 index 00000000000..499d19c5e83 --- /dev/null +++ b/packages/js/product-editor/changelog/add-product-template-url @@ -0,0 +1,4 @@ +Significance: minor +Type: add + +Add template URL parameter to allow choosing template directly diff --git a/packages/js/product-editor/src/components/block-editor/block-editor.tsx b/packages/js/product-editor/src/components/block-editor/block-editor.tsx index 90d3d4981cb..a87c4c20b55 100644 --- a/packages/js/product-editor/src/components/block-editor/block-editor.tsx +++ b/packages/js/product-editor/src/components/block-editor/block-editor.tsx @@ -17,6 +17,7 @@ import { __ } from '@wordpress/i18n'; import { useLayoutTemplate } from '@woocommerce/block-templates'; import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts'; import { Product } from '@woocommerce/data'; +import { getPath, getQuery } from '@woocommerce/navigation'; import { // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore No types for this exist yet. @@ -52,6 +53,7 @@ import { BlockEditorProps } from './types'; import { LoadingState } from './loading-state'; import type { ProductFormPostProps, ProductTemplate } from '../../types'; import isProductFormTemplateSystemEnabled from '../../utils/is-product-form-template-system-enabled'; +import useProductEntityProp from '../../hooks/use-product-entity-prop'; const PluginArea = lazy( () => import( '@wordpress/plugins' ).then( ( module ) => ( { @@ -198,6 +200,11 @@ export function BlockEditor( { [ product?.meta_data ] ); + const [ , setProductTemplateId ] = useProductEntityProp( + 'meta_data._product_template_id', + { postType } + ); + const { productTemplate } = useProductTemplate( productTemplateId, hasResolved ? product : null @@ -303,6 +310,18 @@ export function BlockEditor( { setIsEditorLoading( isEditorLoading ); }, [ isEditorLoading ] ); + useEffect( function maybeSetProductTemplateFromURL() { + const query: { template?: string } = getQuery(); + const isAddProduct = getPath().endsWith( 'add-product' ); + if ( isAddProduct && query.template ) { + const productTemplates = + window.productBlockEditorSettings?.productTemplates ?? []; + if ( productTemplates.find( ( t ) => t.id === query.template ) ) { + setProductTemplateId( query.template ); + } + } + }, [] ); + // Check if the Modal editor is open from the store. const isModalEditorOpen = useSelect( ( selectCore ) => { return selectCore( productEditorUiStore ).isModalEditorOpen();