Template API: Store edited product in context (#40450)

packages/js/product-editor/changelog/add-edited-product-in-context

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Store edited product in product editor context.

packages/js/product-editor/src/blocks/attributes/edit.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { BlockEditProps, BlockAttributes } from '@wordpress/blocks';
+import { BlockAttributes } from '@wordpress/blocks';
 import { createElement } from '@wordpress/element';
 import { useWooBlockProps } from '@woocommerce/block-templates';
 import { ProductAttribute } from '@woocommerce/data';
@@ -14,8 +14,11 @@ import { useEntityProp, useEntityId } from '@wordpress/core-data';
  * Internal dependencies
  */
 import { Attributes as AttributesContainer } from '../../components/attributes/attributes';
+import { ProductEditorBlockEditProps } from '../../types';
 
-export function Edit( { attributes }: BlockEditProps< BlockAttributes > ) {
+export function Edit( {
+	attributes,
+}: ProductEditorBlockEditProps< BlockAttributes > ) {
 	const [ entityAttributes, setEntityAttributes ] = useEntityProp<
 		ProductAttribute[]
 	>( 'postType', 'product', 'attributes' );

packages/js/product-editor/src/blocks/attributes/index.ts

@@ -22,5 +22,5 @@ export const init = () =>
 	registerWooBlockType( {
 		name,
 		metadata: metadata as never,
-		settings,
+		settings: settings as never,
 	} );

packages/js/product-editor/src/blocks/catalog-visibility/edit.tsx

@@ -11,12 +11,11 @@ import { Product } from '@woocommerce/data';
  * Internal dependencies
  */
 import { CatalogVisibilityBlockAttributes } from './types';
+import { ProductEditorBlockEditProps } from '../../types';
 
 export function Edit( {
 	attributes,
-}: {
-	attributes: CatalogVisibilityBlockAttributes;
-} ) {
+}: ProductEditorBlockEditProps< CatalogVisibilityBlockAttributes > ) {
 	const { label, visibility } = attributes;
 
 	const blockProps = useWooBlockProps( attributes );

packages/js/product-editor/src/blocks/catalog-visibility/index.ts

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { BlockConfiguration } from '@wordpress/blocks';
 import { registerWooBlockType } from '@woocommerce/block-templates';
 
 /**
@@ -9,20 +8,20 @@ import { registerWooBlockType } from '@woocommerce/block-templates';
  */
 import blockConfiguration from './block.json';
 import { Edit } from './edit';
-import { CatalogVisibilityBlockAttributes } from './types';
 
-const { name, ...metadata } =
-	blockConfiguration as BlockConfiguration< CatalogVisibilityBlockAttributes >;
+const { name, ...metadata } = blockConfiguration;
 
 export { metadata, name };
 
-export const settings: Partial<
-	BlockConfiguration< CatalogVisibilityBlockAttributes >
-> = {
+export const settings = {
 	example: {},
 	edit: Edit,
 };
 
 export function init() {
-	return registerWooBlockType( { name, metadata, settings } );
+	return registerWooBlockType( {
+		name,
+		metadata: metadata as never,
+		settings: settings as never,
+	} );
 }

packages/js/product-editor/src/blocks/checkbox/edit.tsx

@@ -11,8 +11,11 @@ import { useWooBlockProps } from '@woocommerce/block-templates';
 /**
  * Internal dependencies
  */
+import { ProductEditorBlockEditProps } from '../../types';
 
-export function Edit( { attributes }: { attributes: BlockAttributes } ) {
+export function Edit( {
+	attributes,
+}: ProductEditorBlockEditProps< BlockAttributes > ) {
 	const blockProps = useWooBlockProps( {
 		className: 'woocommerce-product-form__checkbox',
 		...attributes,

packages/js/product-editor/src/blocks/checkbox/index.ts

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { BlockConfiguration } from '@wordpress/blocks';
 import { registerWooBlockType } from '@woocommerce/block-templates';
 
 /**
@@ -10,7 +9,7 @@ import { registerWooBlockType } from '@woocommerce/block-templates';
 import blockConfiguration from './block.json';
 import { Edit } from './edit';
 
-const { name, ...metadata } = blockConfiguration as BlockConfiguration;
+const { name, ...metadata } = blockConfiguration;
 
 export { metadata, name };
 
@@ -19,4 +18,9 @@ export const settings = {
 	edit: Edit,
 };
 
-export const init = () => registerWooBlockType( { name, metadata, settings } );
+export const init = () =>
+	registerWooBlockType( {
+		name,
+		metadata: metadata as never,
+		settings: settings as never,
+	} );

packages/js/product-editor/src/blocks/collapsible/edit.tsx

@@ -7,7 +7,14 @@ import type { BlockAttributes } from '@wordpress/blocks';
 import { createElement } from '@wordpress/element';
 import { InnerBlocks } from '@wordpress/block-editor';
 
-export function Edit( { attributes }: { attributes: BlockAttributes } ) {
+/**
+ * Internal dependencies
+ */
+import { ProductEditorBlockEditProps } from '../../types';
+
+export function Edit( {
+	attributes,
+}: ProductEditorBlockEditProps< BlockAttributes > ) {
 	const blockProps = useWooBlockProps( attributes );
 	const { toggleText, initialCollapsed, persistRender = true } = attributes;
 

packages/js/product-editor/src/blocks/collapsible/index.ts

@@ -19,4 +19,8 @@ export const settings = {
 };
 
 export const init = () =>
-	registerWooBlockType( { name, metadata: metadata as never, settings } );
+	registerWooBlockType( {
+		name,
+		metadata: metadata as never,
+		settings: settings as never,
+	} );

packages/js/product-editor/src/blocks/conditional/block.json

@@ -16,6 +16,7 @@
 			"default": []
 		}
 	},
+	"usesContext": [ "editedProduct" ],
 	"supports": {
 		"align": false,
 		"html": false,

packages/js/product-editor/src/blocks/conditional/edit.tsx

@@ -4,33 +4,26 @@
 import type { BlockAttributes } from '@wordpress/blocks';
 import { createElement, useMemo } from '@wordpress/element';
 import { InnerBlocks } from '@wordpress/block-editor';
-import { useSelect } from '@wordpress/data';
 import { useWooBlockProps } from '@woocommerce/block-templates';
 import { DisplayState } from '@woocommerce/components';
-import { Product } from '@woocommerce/data';
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore No types for this exist yet.
-// eslint-disable-next-line @woocommerce/dependency-group
-import { useEntityId } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import { ProductEditorBlockEditProps } from '../../types';
+
+export interface ConditionalBlockAttributes extends BlockAttributes {
+	mustMatch: Record< string, Array< string > >;
+}
 
 export function Edit( {
 	attributes,
-}: {
-	attributes: BlockAttributes & {
-		mustMatch: Record< string, Array< string > >;
-	};
-} ) {
+	context,
+}: ProductEditorBlockEditProps< ConditionalBlockAttributes > ) {
 	const blockProps = useWooBlockProps( attributes );
 	const { mustMatch } = attributes;
 
-	const productId = useEntityId( 'postType', 'product' );
-	const product: Product = useSelect( ( select ) =>
-		select( 'core' ).getEditedEntityRecord(
-			'postType',
-			'product',
-			productId
-		)
-	);
+	const product = context.editedProduct;
 
 	const displayBlocks = useMemo( () => {
 		for ( const [ prop, values ] of Object.entries( mustMatch ) ) {

packages/js/product-editor/src/blocks/conditional/index.ts

@@ -19,4 +19,8 @@ export const settings = {
 };
 
 export const init = () =>
-	registerWooBlockType( { name, metadata: metadata as never, settings } );
+	registerWooBlockType( {
+		name,
+		metadata: metadata as never,
+		settings: settings as never,
+	} );

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

@@ -4,7 +4,6 @@
 import { __ } from '@wordpress/i18n';
 import { createElement, useState } from '@wordpress/element';
 import {
-	BlockEditProps,
 	BlockAttributes,
 	BlockInstance,
 	parse,
@@ -20,6 +19,7 @@ import { useEntityProp } from '@wordpress/core-data';
  */
 import { ContentPreview } from '../../components/content-preview';
 import { ModalEditor } from '../../components/modal-editor';
+import { ProductEditorBlockEditProps } from '../../types';
 
 /**
  * Internal dependencies
@@ -45,7 +45,9 @@ function clearDescriptionIfEmpty( blocks: BlockInstance[] ) {
 	return blocks;
 }
 
-export function Edit( { attributes }: BlockEditProps< BlockAttributes > ) {
+export function Edit( {
+	attributes,
+}: ProductEditorBlockEditProps< BlockAttributes > ) {
 	const blockProps = useWooBlockProps( attributes );
 	const [ isModalOpen, setIsModalOpen ] = useState( false );
 	const [ description, setDescription ] = useEntityProp< string >(

packages/js/product-editor/src/blocks/description/index.ts

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { BlockConfiguration } from '@wordpress/blocks';
 import { registerWooBlockType } from '@woocommerce/block-templates';
 
 /**
@@ -10,7 +9,7 @@ import { registerWooBlockType } from '@woocommerce/block-templates';
 import blockConfiguration from './block.json';
 import { Edit } from './edit';
 
-const { name, ...metadata } = blockConfiguration as BlockConfiguration;
+const { name, ...metadata } = blockConfiguration;
 
 export { metadata, name };
 
@@ -19,4 +18,9 @@ export const settings = {
 	edit: Edit,
 };
 
-export const init = () => registerWooBlockType( { name, metadata, settings } );
+export const init = () =>
+	registerWooBlockType( {
+		name,
+		metadata: metadata as never,
+		settings: settings as never,
+	} );

packages/js/product-editor/src/blocks/images/edit.tsx

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { BlockEditProps, BlockAttributes } from '@wordpress/blocks';
+import { BlockAttributes } from '@wordpress/blocks';
 import { DropZone } from '@wordpress/components';
 import classnames from 'classnames';
 import { createElement, useState } from '@wordpress/element';
@@ -20,11 +20,18 @@ import { recordEvent } from '@woocommerce/tracks';
 // eslint-disable-next-line @woocommerce/dependency-group
 import { useEntityProp } from '@wordpress/core-data';
 
+/**
+ * Internal dependencies
+ */
+import { ProductEditorBlockEditProps } from '../../types';
+
 type Image = MediaItem & {
 	src: string;
 };
 
-export function Edit( { attributes }: BlockEditProps< BlockAttributes > ) {
+export function Edit( {
+	attributes,
+}: ProductEditorBlockEditProps< BlockAttributes > ) {
 	const [ images, setImages ] = useEntityProp< MediaItem[] >(
 		'postType',
 		'product',

packages/js/product-editor/src/blocks/images/index.ts

@@ -22,5 +22,5 @@ export const init = () =>
 	registerWooBlockType( {
 		name,
 		metadata: metadata as never,
-		settings,
+		settings: settings as never,
 	} );

packages/js/product-editor/src/blocks/inventory-email/edit.tsx

@@ -11,7 +11,6 @@ import {
 	createInterpolateElement,
 } from '@wordpress/element';
 import { getSetting } from '@woocommerce/settings';
-import { BlockEditProps } from '@wordpress/blocks';
 import { useInstanceId } from '@wordpress/compose';
 import {
 	BaseControl,
@@ -28,11 +27,12 @@ import { useEntityProp } from '@wordpress/core-data';
  */
 import { useValidation } from '../../contexts/validation-context';
 import { InventoryEmailBlockAttributes } from './types';
+import { ProductEditorBlockEditProps } from '../../types';
 
 export function Edit( {
 	attributes,
 	clientId,
-}: BlockEditProps< InventoryEmailBlockAttributes > ) {
+}: ProductEditorBlockEditProps< InventoryEmailBlockAttributes > ) {
 	const blockProps = useWooBlockProps( attributes );
 	const notifyLowStockAmount = getSetting( 'notifyLowStockAmount', 2 );
 

packages/js/product-editor/src/blocks/inventory-email/index.ts

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { BlockConfiguration } from '@wordpress/blocks';
 import { registerWooBlockType } from '@woocommerce/block-templates';
 
 /**
@@ -9,20 +8,20 @@ import { registerWooBlockType } from '@woocommerce/block-templates';
  */
 import blockConfiguration from './block.json';
 import { Edit } from './edit';
-import { InventoryEmailBlockAttributes } from './types';
 
-const { name, ...metadata } =
-	blockConfiguration as BlockConfiguration< InventoryEmailBlockAttributes >;
+const { name, ...metadata } = blockConfiguration;
 
 export { metadata, name };
 
-export const settings: Partial<
-	BlockConfiguration< InventoryEmailBlockAttributes >
-> = {
+export const settings = {
 	example: {},
 	edit: Edit,
 };
 
 export function init() {
-	return registerWooBlockType( { name, metadata, settings } );
+	return registerWooBlockType( {
+		name,
+		metadata: metadata as never,
+		settings: settings as never,
+	} );
 }

packages/js/product-editor/src/blocks/inventory-quantity/edit.tsx

@@ -3,7 +3,6 @@
  */
 import { useWooBlockProps } from '@woocommerce/block-templates';
 import { Product } from '@woocommerce/data';
-import { BlockEditProps } from '@wordpress/blocks';
 import { useInstanceId } from '@wordpress/compose';
 import { useEntityProp } from '@wordpress/core-data';
 import { createElement, useEffect } from '@wordpress/element';
@@ -19,11 +18,12 @@ import {
  */
 import { TrackInventoryBlockAttributes } from './types';
 import { useValidation } from '../../contexts/validation-context';
+import { ProductEditorBlockEditProps } from '../../types';
 
 export function Edit( {
 	attributes,
 	clientId,
-}: BlockEditProps< TrackInventoryBlockAttributes > ) {
+}: ProductEditorBlockEditProps< TrackInventoryBlockAttributes > ) {
 	const blockProps = useWooBlockProps( attributes );
 
 	const [ manageStock ] = useEntityProp< boolean >(

packages/js/product-editor/src/blocks/inventory-quantity/index.ts

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { BlockConfiguration } from '@wordpress/blocks';
 import { registerWooBlockType } from '@woocommerce/block-templates';
 
 /**
@@ -9,20 +8,20 @@ import { registerWooBlockType } from '@woocommerce/block-templates';
  */
 import blockConfiguration from './block.json';
 import { Edit } from './edit';
-import { TrackInventoryBlockAttributes } from './types';
 
-const { name, ...metadata } =
-	blockConfiguration as BlockConfiguration< TrackInventoryBlockAttributes >;
+const { name, ...metadata } = blockConfiguration;
 
 export { metadata, name };
 
-export const settings: Partial<
-	BlockConfiguration< TrackInventoryBlockAttributes >
-> = {
+export const settings = {
 	example: {},
 	edit: Edit,
 };
 
 export function init() {
-	return registerWooBlockType( { name, metadata, settings } );
+	return registerWooBlockType( {
+		name,
+		metadata: metadata as never,
+		settings: settings as never,
+	} );
 }

packages/js/product-editor/src/blocks/inventory-sku/edit.tsx

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { BlockEditProps, BlockAttributes } from '@wordpress/blocks';
+import { BlockAttributes } from '@wordpress/blocks';
 import { createElement, createInterpolateElement } from '@wordpress/element';
 import { useWooBlockProps } from '@woocommerce/block-templates';
 
@@ -19,8 +19,15 @@ import { useEntityProp } from '@wordpress/core-data';
 /**
  * Internal dependencies
  */
+import { ProductEditorBlockEditProps } from '../../types';
 
-export function Edit( { attributes }: BlockEditProps< BlockAttributes > ) {
+/**
+ * Internal dependencies
+ */
+
+export function Edit( {
+	attributes,
+}: ProductEditorBlockEditProps< BlockAttributes > ) {
 	const blockProps = useWooBlockProps( attributes );
 
 	const [ sku, setSku ] = useEntityProp( 'postType', 'product', 'sku' );

packages/js/product-editor/src/blocks/inventory-sku/index.ts

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { BlockConfiguration } from '@wordpress/blocks';
 import { registerWooBlockType } from '@woocommerce/block-templates';
 
 /**
@@ -10,7 +9,7 @@ import { registerWooBlockType } from '@woocommerce/block-templates';
 import blockConfiguration from './block.json';
 import { Edit } from './edit';
 
-const { name, ...metadata } = blockConfiguration as BlockConfiguration;
+const { name, ...metadata } = blockConfiguration;
 
 export { metadata, name };
 
@@ -19,4 +18,9 @@ export const settings = {
 	edit: Edit,
 };
 
-export const init = () => registerWooBlockType( { name, metadata, settings } );
+export const init = () =>
+	registerWooBlockType( {
+		name,
+		metadata: metadata as never,
+		settings: settings as never,
+	} );

packages/js/product-editor/src/blocks/name/edit.tsx

@@ -9,7 +9,6 @@ import {
 	useState,
 } from '@wordpress/element';
 
-import { BlockEditProps } from '@wordpress/blocks';
 import { useInstanceId } from '@wordpress/compose';
 import { cleanForSlug } from '@wordpress/url';
 import { useSelect, useDispatch } from '@wordpress/data';
@@ -39,8 +38,11 @@ import { EditProductLinkModal } from '../../components/edit-product-link-modal';
 import { useValidation } from '../../contexts/validation-context';
 import { NameBlockAttributes } from './types';
 import { useProductEdits } from '../../hooks/use-product-edits';
+import { ProductEditorBlockEditProps } from '../../types';
 
-export function Edit( { attributes }: BlockEditProps< NameBlockAttributes > ) {
+export function Edit( {
+	attributes,
+}: ProductEditorBlockEditProps< NameBlockAttributes > ) {
 	const blockProps = useWooBlockProps( attributes );
 
 	const { editEntityRecord, saveEntityRecord } = useDispatch( 'core' );

packages/js/product-editor/src/blocks/name/index.ts

@@ -22,5 +22,5 @@ export const init = () =>
 	registerWooBlockType( {
 		name,
 		metadata: metadata as never,
-		settings,
+		settings: settings as never,
 	} );

packages/js/product-editor/src/blocks/notice/edit.tsx

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { createElement } from '@wordpress/element';
-import type { BlockAttributes, BlockEditProps } from '@wordpress/blocks';
+import type { BlockAttributes } from '@wordpress/blocks';
 import { Button } from '@wordpress/components';
 import { useWooBlockProps } from '@woocommerce/block-templates';
 import { getNewPath, navigateTo } from '@woocommerce/navigation';
@@ -14,6 +14,7 @@ import { useEntityProp } from '@wordpress/core-data';
  */
 import { Notice } from '../../components/notice';
 import { hasAttributesUsedForVariations } from '../../utils';
+import { ProductEditorBlockEditProps } from '../../types';
 
 export interface NoticeBlockAttributes extends BlockAttributes {
 	buttonText: string;
@@ -24,7 +25,7 @@ export interface NoticeBlockAttributes extends BlockAttributes {
 
 export function Edit( {
 	attributes,
-}: BlockEditProps< NoticeBlockAttributes > ) {
+}: ProductEditorBlockEditProps< NoticeBlockAttributes > ) {
 	const blockProps = useWooBlockProps( attributes );
 	const { buttonText, content, title, type = 'info' } = attributes;
 

packages/js/product-editor/src/blocks/notice/index.ts

@@ -1,26 +1,24 @@
 /**
  * External dependencies
  */
-import { BlockConfiguration } from '@wordpress/blocks';
 import { registerWooBlockType } from '@woocommerce/block-templates';
 
 /**
  * Internal dependencies
  */
 import blockConfiguration from './block.json';
-import { Edit, NoticeBlockAttributes } from './edit';
+import { Edit } from './edit';
 
-const { name, ...metadata } =
-	blockConfiguration as BlockConfiguration< NoticeBlockAttributes >;
+const { name, ...metadata } = blockConfiguration;
 
 export { metadata, name };
 
-export const settings: Partial< BlockConfiguration< NoticeBlockAttributes > > =
-	{
-		example: {},
-		edit: Edit,
-	};
+export const settings = { example: {}, edit: Edit };
 
 export function init() {
-	registerWooBlockType( { name, metadata, settings } );
+	registerWooBlockType( {
+		name,
+		metadata: metadata as never,
+		settings: settings as never,
+	} );
 }

packages/js/product-editor/src/blocks/password/edit.tsx

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { BlockEditProps } from '@wordpress/blocks';
 import { useInstanceId } from '@wordpress/compose';
 import { useEntityProp } from '@wordpress/core-data';
 import { createElement, useState } from '@wordpress/element';
@@ -19,10 +18,11 @@ import {
  */
 
 import { RequirePasswordBlockAttributes } from './types';
+import { ProductEditorBlockEditProps } from '../../types';
 
 export function Edit( {
 	attributes,
-}: BlockEditProps< RequirePasswordBlockAttributes > ) {
+}: ProductEditorBlockEditProps< RequirePasswordBlockAttributes > ) {
 	const blockProps = useWooBlockProps( attributes );
 	const { label } = attributes;
 

packages/js/product-editor/src/blocks/password/index.ts

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { BlockConfiguration } from '@wordpress/blocks';
 import { registerWooBlockType } from '@woocommerce/block-templates';
 
 /**
@@ -9,19 +8,19 @@ import { registerWooBlockType } from '@woocommerce/block-templates';
  */
 import blockConfiguration from './block.json';
 import { Edit } from './edit';
-import { RequirePasswordBlockAttributes } from './types';
 
-const { name, ...metadata } =
-	blockConfiguration as BlockConfiguration< RequirePasswordBlockAttributes >;
+const { name, ...metadata } = blockConfiguration;
 
 export { metadata, name };
 
-export const settings: Partial<
-	BlockConfiguration< RequirePasswordBlockAttributes >
-> = {
+export const settings = {
 	edit: Edit,
 };
 
 export function init() {
-	return registerWooBlockType( { name, metadata, settings } );
+	return registerWooBlockType( {
+		name,
+		metadata: metadata as never,
+		settings: settings as never,
+	} );
 }

packages/js/product-editor/src/blocks/pricing/edit.tsx

@@ -5,7 +5,6 @@ import { useWooBlockProps } from '@woocommerce/block-templates';
 import { Link } from '@woocommerce/components';
 import { getNewPath } from '@woocommerce/navigation';
 import { recordEvent } from '@woocommerce/tracks';
-import { BlockEditProps } from '@wordpress/blocks';
 import { useInstanceId } from '@wordpress/compose';
 import { useEntityProp } from '@wordpress/core-data';
 import { createElement, createInterpolateElement } from '@wordpress/element';
@@ -21,10 +20,11 @@ import {
  */
 import { useCurrencyInputProps } from '../../hooks/use-currency-input-props';
 import { PricingBlockAttributes } from './types';
+import { ProductEditorBlockEditProps } from '../../types';
 
 export function Edit( {
 	attributes,
-}: BlockEditProps< PricingBlockAttributes > ) {
+}: ProductEditorBlockEditProps< PricingBlockAttributes > ) {
 	const blockProps = useWooBlockProps( attributes );
 	const { name, label, help } = attributes;
 	const [ price, setPrice ] = useEntityProp< string >(

packages/js/product-editor/src/blocks/pricing/index.ts

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { BlockConfiguration } from '@wordpress/blocks';
 import { registerWooBlockType } from '@woocommerce/block-templates';
 
 /**
@@ -9,19 +8,20 @@ import { registerWooBlockType } from '@woocommerce/block-templates';
  */
 import blockConfiguration from './block.json';
 import { Edit } from './edit';
-import { PricingBlockAttributes } from './types';
 
-const { name, ...metadata } =
-	blockConfiguration as BlockConfiguration< PricingBlockAttributes >;
+const { name, ...metadata } = blockConfiguration;
 
 export { metadata, name };
 
-export const settings: Partial< BlockConfiguration< PricingBlockAttributes > > =
-	{
-		example: {},
-		edit: Edit,
-	};
+export const settings = {
+	example: {},
+	edit: Edit,
+};
 
 export function init() {
-	return registerWooBlockType( { name, metadata, settings } );
+	return registerWooBlockType( {
+		name,
+		metadata: metadata as never,
+		settings: settings as never,
+	} );
 }

packages/js/product-editor/src/blocks/radio/edit.tsx

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { createElement } from '@wordpress/element';
-import { BlockEditProps } from '@wordpress/blocks';
 import { useEntityProp } from '@wordpress/core-data';
 import { useWooBlockProps } from '@woocommerce/block-templates';
 
@@ -11,8 +10,11 @@ import { useWooBlockProps } from '@woocommerce/block-templates';
  */
 import { RadioField } from '../../components/radio-field';
 import { RadioBlockAttributes } from './types';
+import { ProductEditorBlockEditProps } from '../../types';
 
-export function Edit( { attributes }: BlockEditProps< RadioBlockAttributes > ) {
+export function Edit( {
+	attributes,
+}: ProductEditorBlockEditProps< RadioBlockAttributes > ) {
 	const blockProps = useWooBlockProps( attributes );
 	const { description, options, property, title } = attributes;
 	const [ value, setValue ] = useEntityProp< string >(

packages/js/product-editor/src/blocks/radio/index.ts

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { BlockConfiguration } from '@wordpress/blocks';
 import { registerWooBlockType } from '@woocommerce/block-templates';
 
 /**
@@ -9,18 +8,20 @@ import { registerWooBlockType } from '@woocommerce/block-templates';
  */
 import blockConfiguration from './block.json';
 import { Edit } from './edit';
-import { RadioBlockAttributes } from './types';
 
-const { name, ...metadata } =
-	blockConfiguration as BlockConfiguration< RadioBlockAttributes >;
+const { name, ...metadata } = blockConfiguration;
 
 export { metadata, name };
 
-export const settings: Partial< BlockConfiguration< RadioBlockAttributes > > = {
+export const settings = {
 	example: {},
 	edit: Edit,
 };
 
 export function init() {
-	return registerWooBlockType( { name, metadata, settings } );
+	return registerWooBlockType( {
+		name,
+		metadata: metadata as never,
+		settings: settings as never,
+	} );
 }

packages/js/product-editor/src/blocks/regular-price/edit.tsx

@@ -7,7 +7,6 @@ import { Link } from '@woocommerce/components';
 import { Product } from '@woocommerce/data';
 import { getNewPath } from '@woocommerce/navigation';
 import { recordEvent } from '@woocommerce/tracks';
-import { BlockEditProps } from '@wordpress/blocks';
 import { useInstanceId } from '@wordpress/compose';
 import { useEntityProp } from '@wordpress/core-data';
 import { createElement, createInterpolateElement } from '@wordpress/element';
@@ -24,11 +23,12 @@ import {
 import { useValidation } from '../../contexts/validation-context';
 import { useCurrencyInputProps } from '../../hooks/use-currency-input-props';
 import { SalePriceBlockAttributes } from './types';
+import { ProductEditorBlockEditProps } from '../../types';
 
 export function Edit( {
 	attributes,
 	clientId,
-}: BlockEditProps< SalePriceBlockAttributes > ) {
+}: ProductEditorBlockEditProps< SalePriceBlockAttributes > ) {
 	const blockProps = useWooBlockProps( attributes );
 	const { label, help } = attributes;
 	const [ regularPrice, setRegularPrice ] = useEntityProp< string >(

packages/js/product-editor/src/blocks/regular-price/index.ts

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { BlockConfiguration } from '@wordpress/blocks';
 import { registerWooBlockType } from '@woocommerce/block-templates';
 
 /**
@@ -9,20 +8,20 @@ import { registerWooBlockType } from '@woocommerce/block-templates';
  */
 import blockConfiguration from './block.json';
 import { Edit } from './edit';
-import { SalePriceBlockAttributes } from './types';
 
-const { name, ...metadata } =
-	blockConfiguration as BlockConfiguration< SalePriceBlockAttributes >;
+const { name, ...metadata } = blockConfiguration;
 
 export { metadata, name };
 
-export const settings: Partial<
-	BlockConfiguration< SalePriceBlockAttributes >
-> = {
+export const settings = {
 	example: {},
 	edit: Edit,
 };
 
 export function init() {
-	return registerWooBlockType( { name, metadata, settings } );
+	return registerWooBlockType( {
+		name,
+		metadata: metadata as never,
+		settings: settings as never,
+	} );
 }

packages/js/product-editor/src/blocks/sale-price/edit.tsx

@@ -4,7 +4,6 @@
 import classNames from 'classnames';
 import { useWooBlockProps } from '@woocommerce/block-templates';
 import { Product } from '@woocommerce/data';
-import { BlockEditProps } from '@wordpress/blocks';
 import { useInstanceId } from '@wordpress/compose';
 import { useEntityProp } from '@wordpress/core-data';
 import { createElement } from '@wordpress/element';
@@ -21,11 +20,12 @@ import {
 import { useValidation } from '../../contexts/validation-context';
 import { useCurrencyInputProps } from '../../hooks/use-currency-input-props';
 import { SalePriceBlockAttributes } from './types';
+import { ProductEditorBlockEditProps } from '../../types';
 
 export function Edit( {
 	attributes,
 	clientId,
-}: BlockEditProps< SalePriceBlockAttributes > ) {
+}: ProductEditorBlockEditProps< SalePriceBlockAttributes > ) {
 	const blockProps = useWooBlockProps( attributes );
 	const { label, help } = attributes;
 	const [ regularPrice ] = useEntityProp< string >(

packages/js/product-editor/src/blocks/sale-price/index.ts

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { BlockConfiguration } from '@wordpress/blocks';
 import { registerWooBlockType } from '@woocommerce/block-templates';
 
 /**
@@ -9,20 +8,20 @@ import { registerWooBlockType } from '@woocommerce/block-templates';
  */
 import blockConfiguration from './block.json';
 import { Edit } from './edit';
-import { SalePriceBlockAttributes } from './types';
 
-const { name, ...metadata } =
-	blockConfiguration as BlockConfiguration< SalePriceBlockAttributes >;
+const { name, ...metadata } = blockConfiguration;
 
 export { metadata, name };
 
-export const settings: Partial<
-	BlockConfiguration< SalePriceBlockAttributes >
-> = {
+export const settings = {
 	example: {},
 	edit: Edit,
 };
 
 export function init() {
-	return registerWooBlockType( { name, metadata, settings } );
+	return registerWooBlockType( {
+		name,
+		metadata: metadata as never,
+		settings: settings as never,
+	} );
 }

packages/js/product-editor/src/blocks/schedule-sale/edit.tsx

@@ -5,7 +5,6 @@ import { useWooBlockProps } from '@woocommerce/block-templates';
 import { DateTimePickerControl } from '@woocommerce/components';
 import { Product } from '@woocommerce/data';
 import { recordEvent } from '@woocommerce/tracks';
-import { BlockEditProps } from '@wordpress/blocks';
 import { ToggleControl } from '@wordpress/components';
 import { useEntityProp } from '@wordpress/core-data';
 import { createElement, useEffect, useState } from '@wordpress/element';
@@ -22,11 +21,12 @@ import { getSettings } from '@wordpress/date';
 import { ScheduleSalePricingBlockAttributes } from './types';
 import { useProductEdits } from '../../hooks/use-product-edits';
 import { useValidation } from '../../contexts/validation-context';
+import { ProductEditorBlockEditProps } from '../../types';
 
 export function Edit( {
 	attributes,
 	clientId,
-}: BlockEditProps< ScheduleSalePricingBlockAttributes > ) {
+}: ProductEditorBlockEditProps< ScheduleSalePricingBlockAttributes > ) {
 	const blockProps = useWooBlockProps( attributes );
 	const { hasEdit } = useProductEdits();
 

packages/js/product-editor/src/blocks/schedule-sale/index.ts

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { BlockConfiguration } from '@wordpress/blocks';
 import { registerWooBlockType } from '@woocommerce/block-templates';
 
 /**
@@ -9,20 +8,20 @@ import { registerWooBlockType } from '@woocommerce/block-templates';
  */
 import blockConfiguration from './block.json';
 import { Edit } from './edit';
-import { ScheduleSalePricingBlockAttributes } from './types';
 
-const { name, ...metadata } =
-	blockConfiguration as BlockConfiguration< ScheduleSalePricingBlockAttributes >;
+const { name, ...metadata } = blockConfiguration;
 
 export { metadata, name };
 
-export const settings: Partial<
-	BlockConfiguration< ScheduleSalePricingBlockAttributes >
-> = {
+export const settings = {
 	example: {},
 	edit: Edit,
 };
 
 export function init() {
-	return registerWooBlockType( { name, metadata, settings } );
+	return registerWooBlockType( {
+		name,
+		metadata: metadata as never,
+		settings: settings as never,
+	} );
 }

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

@@ -3,7 +3,6 @@
  */
 import classNames from 'classnames';
 import { createElement } from '@wordpress/element';
-import type { BlockEditProps } from '@wordpress/blocks';
 import { useWooBlockProps } from '@woocommerce/block-templates';
 import {
 	// @ts-expect-error no exported member.
@@ -15,10 +14,11 @@ import {
  */
 import { sanitizeHTML } from '../../utils/sanitize-html';
 import { SectionBlockAttributes } from './types';
+import { ProductEditorBlockEditProps } from '../../types';
 
 export function Edit( {
 	attributes,
-}: BlockEditProps< SectionBlockAttributes > ) {
+}: ProductEditorBlockEditProps< SectionBlockAttributes > ) {
 	const { description, title, blockGap } = attributes;
 	const blockProps = useWooBlockProps( attributes );
 	const innerBlockProps = useInnerBlocksProps(

packages/js/product-editor/src/blocks/section/index.ts

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { BlockConfiguration } from '@wordpress/blocks';
 import { registerWooBlockType } from '@woocommerce/block-templates';
 
 /**
@@ -9,19 +8,20 @@ import { registerWooBlockType } from '@woocommerce/block-templates';
  */
 import blockConfiguration from './block.json';
 import { Edit } from './edit';
-import { SectionBlockAttributes } from './types';
 
-const { name, ...metadata } =
-	blockConfiguration as BlockConfiguration< SectionBlockAttributes >;
+const { name, ...metadata } = blockConfiguration;
 
 export { metadata, name };
 
-export const settings: Partial< BlockConfiguration< SectionBlockAttributes > > =
-	{
-		example: {},
-		edit: Edit,
-	};
+export const settings = {
+	example: {},
+	edit: Edit,
+};
 
 export function init() {
-	return registerWooBlockType( { name, metadata, settings } );
+	return registerWooBlockType( {
+		name,
+		metadata: metadata as never,
+		settings: settings as never,
+	} );
 }

packages/js/product-editor/src/blocks/shipping-class/edit.tsx

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { BlockEditProps } from '@wordpress/blocks';
 import { useWooBlockProps } from '@woocommerce/block-templates';
 import { Link } from '@woocommerce/components';
 import {
@@ -29,6 +28,7 @@ import { useEntityProp } from '@wordpress/core-data';
 import { ShippingClassBlockAttributes } from './types';
 import { AddNewShippingClassModal } from '../../components';
 import { ADD_NEW_SHIPPING_CLASS_OPTION_VALUE } from '../../constants';
+import { ProductEditorBlockEditProps } from '../../types';
 
 type ServerErrorResponse = {
 	code: string;
@@ -71,7 +71,7 @@ function extractDefaultShippingClassFromProduct(
 
 export function Edit( {
 	attributes,
-}: BlockEditProps< ShippingClassBlockAttributes > ) {
+}: ProductEditorBlockEditProps< ShippingClassBlockAttributes > ) {
 	const [ showShippingClassModal, setShowShippingClassModal ] =
 		useState( false );
 

packages/js/product-editor/src/blocks/shipping-class/index.ts

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { BlockConfiguration } from '@wordpress/blocks';
 import { registerWooBlockType } from '@woocommerce/block-templates';
 
 /**
@@ -9,20 +8,20 @@ import { registerWooBlockType } from '@woocommerce/block-templates';
  */
 import blockConfiguration from './block.json';
 import { Edit } from './edit';
-import { ShippingClassBlockAttributes } from './types';
 
-const { name, ...metadata } =
-	blockConfiguration as BlockConfiguration< ShippingClassBlockAttributes >;
+const { name, ...metadata } = blockConfiguration;
 
 export { metadata, name };
 
-export const settings: Partial<
-	BlockConfiguration< ShippingClassBlockAttributes >
-> = {
+export const settings = {
 	example: {},
 	edit: Edit,
 };
 
 export function init() {
-	return registerWooBlockType( { name, metadata, settings } );
+	return registerWooBlockType( {
+		name,
+		metadata: metadata as never,
+		settings: settings as never,
+	} );
 }

packages/js/product-editor/src/blocks/shipping-dimensions/edit.tsx

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { useWooBlockProps } from '@woocommerce/block-templates';
-import { BlockEditProps } from '@wordpress/blocks';
 import {
 	OPTIONS_STORE_NAME,
 	Product,
@@ -34,11 +33,12 @@ import {
 	ShippingDimensionsImage,
 } from '../../components/shipping-dimensions-image';
 import { useValidation } from '../../contexts/validation-context';
+import { ProductEditorBlockEditProps } from '../../types';
 
 export function Edit( {
 	attributes,
 	clientId,
-}: BlockEditProps< ShippingDimensionsBlockAttributes > ) {
+}: ProductEditorBlockEditProps< ShippingDimensionsBlockAttributes > ) {
 	const blockProps = useWooBlockProps( attributes );
 
 	const [ dimensions, setDimensions ] =

packages/js/product-editor/src/blocks/shipping-dimensions/index.ts

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { BlockConfiguration } from '@wordpress/blocks';
 import { registerWooBlockType } from '@woocommerce/block-templates';
 
 /**
@@ -9,20 +8,20 @@ import { registerWooBlockType } from '@woocommerce/block-templates';
  */
 import blockConfiguration from './block.json';
 import { Edit } from './edit';
-import { ShippingDimensionsBlockAttributes } from './types';
 
-const { name, ...metadata } =
-	blockConfiguration as BlockConfiguration< ShippingDimensionsBlockAttributes >;
+const { name, ...metadata } = blockConfiguration;
 
 export { metadata, name };
 
-export const settings: Partial<
-	BlockConfiguration< ShippingDimensionsBlockAttributes >
-> = {
+export const settings = {
 	example: {},
 	edit: Edit,
 };
 
 export function init() {
-	return registerWooBlockType( { name, metadata, settings } );
+	return registerWooBlockType( {
+		name,
+		metadata: metadata as never,
+		settings: settings as never,
+	} );
 }

packages/js/product-editor/src/blocks/summary/edit.tsx

@@ -4,7 +4,6 @@
 import { __ } from '@wordpress/i18n';
 import { useWooBlockProps } from '@woocommerce/block-templates';
 import { createElement } from '@wordpress/element';
-import { BlockEditProps } from '@wordpress/blocks';
 import { BaseControl } from '@wordpress/components';
 import { useDispatch } from '@wordpress/data';
 import { useEntityProp } from '@wordpress/core-data';
@@ -25,11 +24,12 @@ import {
 import { ParagraphRTLControl } from './paragraph-rtl-control';
 import { SummaryAttributes } from './types';
 import { ALIGNMENT_CONTROLS } from './constants';
+import { ProductEditorBlockEditProps } from '../../types';
 
 export function Edit( {
 	attributes,
 	setAttributes,
-}: BlockEditProps< SummaryAttributes > ) {
+}: ProductEditorBlockEditProps< SummaryAttributes > ) {
 	const { align, allowedFormats, direction, label } = attributes;
 	const blockProps = useWooBlockProps( attributes, {
 		style: { direction },

packages/js/product-editor/src/blocks/summary/index.ts

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { BlockConfiguration } from '@wordpress/blocks';
 import { registerWooBlockType } from '@woocommerce/block-templates';
 
 /**
@@ -9,10 +8,8 @@ import { registerWooBlockType } from '@woocommerce/block-templates';
  */
 import blockConfiguration from './block.json';
 import { Edit } from './edit';
-import { SummaryAttributes } from './types';
 
-const { name, ...metadata } =
-	blockConfiguration as BlockConfiguration< SummaryAttributes >;
+const { name, ...metadata } = blockConfiguration;
 
 export { name, metadata };
 
@@ -22,9 +19,9 @@ export const settings = {
 };
 
 export function init() {
-	return registerWooBlockType< SummaryAttributes >( {
+	return registerWooBlockType( {
 		name,
-		metadata,
-		settings,
+		metadata: metadata as never,
+		settings: settings as never,
 	} );
 }

packages/js/product-editor/src/blocks/tab/edit.tsx

@@ -4,13 +4,14 @@
 import { InnerBlocks } from '@wordpress/block-editor';
 import classnames from 'classnames';
 import { createElement } from '@wordpress/element';
-import type { BlockAttributes, BlockEditProps } from '@wordpress/blocks';
+import type { BlockAttributes } from '@wordpress/blocks';
 import { useWooBlockProps } from '@woocommerce/block-templates';
 
 /**
  * Internal dependencies
  */
 import { TabButton } from './tab-button';
+import { ProductEditorBlockEditProps } from '../../types';
 
 export interface TabBlockAttributes extends BlockAttributes {
 	id: string;
@@ -23,14 +24,10 @@ export function Edit( {
 	setAttributes,
 	attributes,
 	context,
-}: BlockEditProps< TabBlockAttributes > & {
-	context?: {
-		selectedTab?: string | null;
-	};
-} ) {
+}: ProductEditorBlockEditProps< TabBlockAttributes > ) {
 	const blockProps = useWooBlockProps( attributes );
 	const { id, title, order, isSelected: contextIsSelected } = attributes;
-	const isSelected = context?.selectedTab === id;
+	const isSelected = context.selectedTab === id;
 	if ( isSelected !== contextIsSelected ) {
 		setAttributes( { isSelected } );
 	}

packages/js/product-editor/src/blocks/tab/index.ts

@@ -1,25 +1,27 @@
 /**
  * External dependencies
  */
-import { BlockConfiguration } from '@wordpress/blocks';
 import { registerWooBlockType } from '@woocommerce/block-templates';
 
 /**
  * Internal dependencies
  */
 import blockConfiguration from './block.json';
-import { Edit, TabBlockAttributes } from './edit';
+import { Edit } from './edit';
 
-const { name, ...metadata } =
-	blockConfiguration as BlockConfiguration< TabBlockAttributes >;
+const { name, ...metadata } = blockConfiguration;
 
 export { metadata, name };
 
-export const settings: Partial< BlockConfiguration< TabBlockAttributes > > = {
+export const settings = {
 	example: {},
 	edit: Edit,
 };
 
 export function init() {
-	registerWooBlockType( { name, metadata, settings } );
+	registerWooBlockType( {
+		name,
+		metadata: metadata as never,
+		settings: settings as never,
+	} );
 }

packages/js/product-editor/src/blocks/tag/edit.tsx

@@ -17,19 +17,17 @@ import { useEntityProp } from '@wordpress/core-data';
  * Internal dependencies
  */
 import { TagField } from '../../components/tags-field';
+import { ProductEditorBlockEditProps } from '../../types';
 
 export function Edit( {
 	attributes,
 	context,
-}: {
-	attributes: BlockAttributes;
-	context?: { postType?: string };
-} ) {
+}: ProductEditorBlockEditProps< BlockAttributes > ) {
 	const blockProps = useWooBlockProps( attributes );
 	const { name, label, placeholder } = attributes;
 	const [ tags, setTags ] = useEntityProp<
 		Pick< ProductTag, 'id' | 'name' >[]
-	>( 'postType', context?.postType || 'product', name || 'tags' );
+	>( 'postType', context.postType || 'product', name || 'tags' );
 
 	const tagFieldId = useInstanceId( BaseControl, 'tag-field' ) as string;
 

packages/js/product-editor/src/blocks/tag/index.ts

@@ -19,4 +19,8 @@ export const settings = {
 };
 
 export const init = () =>
-	registerWooBlockType( { name, metadata: metadata as never, settings } );
+	registerWooBlockType( {
+		name,
+		metadata: metadata as never,
+		settings: settings as never,
+	} );

packages/js/product-editor/src/blocks/taxonomy/edit.tsx

@@ -22,6 +22,7 @@ import { useSelect } from '@wordpress/data';
 import { CreateTaxonomyModal } from './create-taxonomy-modal';
 import { Taxonomy, TaxonomyMetadata } from './types';
 import useTaxonomySearch from './use-taxonomy-search';
+import { ProductEditorBlockEditProps } from '../../types';
 
 interface TaxonomyBlockAttributes extends BlockAttributes {
 	label: string;
@@ -34,9 +35,7 @@ interface TaxonomyBlockAttributes extends BlockAttributes {
 
 export function Edit( {
 	attributes,
-}: {
-	attributes: TaxonomyBlockAttributes;
-} ) {
+}: ProductEditorBlockEditProps< TaxonomyBlockAttributes > ) {
 	const blockProps = useWooBlockProps( attributes );
 	const { hierarchical }: TaxonomyMetadata = useSelect(
 		( select ) =>

packages/js/product-editor/src/blocks/taxonomy/index.ts

@@ -22,5 +22,5 @@ export const init = () =>
 	registerWooBlockType( {
 		name,
 		metadata: metadata as never,
-		settings,
+		settings: settings as never,
 	} );

packages/js/product-editor/src/blocks/toggle/edit.tsx

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { createElement } from '@wordpress/element';
-import { BlockEditProps } from '@wordpress/blocks';
 import { useEntityProp } from '@wordpress/core-data';
 import { ToggleControl } from '@wordpress/components';
 import { useWooBlockProps } from '@woocommerce/block-templates';
@@ -12,10 +11,11 @@ import { useWooBlockProps } from '@woocommerce/block-templates';
  */
 import { ToggleBlockAttributes } from './types';
 import { sanitizeHTML } from '../../utils/sanitize-html';
+import { ProductEditorBlockEditProps } from '../../types';
 
 export function Edit( {
 	attributes,
-}: BlockEditProps< ToggleBlockAttributes > ) {
+}: ProductEditorBlockEditProps< ToggleBlockAttributes > ) {
 	const blockProps = useWooBlockProps( attributes );
 	const { label, property, disabled, disabledCopy } = attributes;
 	const [ value, setValue ] = useEntityProp< boolean >(

packages/js/product-editor/src/blocks/toggle/index.ts

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { BlockConfiguration } from '@wordpress/blocks';
 import { registerWooBlockType } from '@woocommerce/block-templates';
 
 /**
@@ -9,19 +8,20 @@ import { registerWooBlockType } from '@woocommerce/block-templates';
  */
 import blockConfiguration from './block.json';
 import { Edit } from './edit';
-import { ToggleBlockAttributes } from './types';
 
-const { name, ...metadata } =
-	blockConfiguration as BlockConfiguration< ToggleBlockAttributes >;
+const { name, ...metadata } = blockConfiguration;
 
 export { metadata, name };
 
-export const settings: Partial< BlockConfiguration< ToggleBlockAttributes > > =
-	{
-		example: {},
-		edit: Edit,
-	};
+export const settings = {
+	example: {},
+	edit: Edit,
+};
 
 export function init() {
-	return registerWooBlockType( { name, metadata, settings } );
+	return registerWooBlockType( {
+		name,
+		metadata: metadata as never,
+		settings: settings as never,
+	} );
 }

packages/js/product-editor/src/blocks/variation-items/edit.tsx

@@ -10,7 +10,6 @@ import {
 } from '@woocommerce/data';
 import { useWooBlockProps } from '@woocommerce/block-templates';
 import { recordEvent } from '@woocommerce/tracks';
-import { BlockEditProps } from '@wordpress/blocks';
 import { createElement, useMemo, useRef } from '@wordpress/element';
 import { resolveSelect, useDispatch, useSelect } from '@wordpress/data';
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -27,12 +26,13 @@ import { VariationOptionsBlockAttributes } from './types';
 import { VariableProductTour } from './variable-product-tour';
 import { TRACKS_SOURCE } from '../../constants';
 import { handlePrompt } from '../../utils/handle-prompt';
+import { ProductEditorBlockEditProps } from '../../types';
 
 export function Edit( {
 	attributes,
 	context,
-}: BlockEditProps< VariationOptionsBlockAttributes > & {
-	context?: {
+}: ProductEditorBlockEditProps< VariationOptionsBlockAttributes > & {
+	context: {
 		isInSelectedTab?: boolean;
 	};
 } ) {
@@ -198,7 +198,7 @@ export function Edit( {
 					}
 				} }
 			/>
-			{ context?.isInSelectedTab && <VariableProductTour /> }
+			{ context.isInSelectedTab && <VariableProductTour /> }
 		</div>
 	);
 }

packages/js/product-editor/src/blocks/variation-items/index.ts

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { BlockConfiguration } from '@wordpress/blocks';
 import { registerWooBlockType } from '@woocommerce/block-templates';
 
 /**
@@ -9,20 +8,20 @@ import { registerWooBlockType } from '@woocommerce/block-templates';
  */
 import blockConfiguration from './block.json';
 import { Edit } from './edit';
-import { VariationOptionsBlockAttributes } from './types';
 
-const { name, ...metadata } =
-	blockConfiguration as BlockConfiguration< VariationOptionsBlockAttributes >;
+const { name, ...metadata } = blockConfiguration;
 
 export { metadata, name };
 
-export const settings: Partial<
-	BlockConfiguration< VariationOptionsBlockAttributes >
-> = {
+export const settings = {
 	example: {},
 	edit: Edit,
 };
 
 export function init() {
-	return registerWooBlockType( { name, metadata, settings } );
+	return registerWooBlockType( {
+		name,
+		metadata: metadata as never,
+		settings: settings as never,
+	} );
 }

packages/js/product-editor/src/blocks/variation-options/edit.tsx

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { BlockEditProps, BlockAttributes } from '@wordpress/blocks';
+import { BlockAttributes } from '@wordpress/blocks';
 import {
 	createElement,
 	createInterpolateElement,
@@ -26,10 +26,11 @@ import { useEntityProp, useEntityId } from '@wordpress/core-data';
 import { useProductAttributes } from '../../hooks/use-product-attributes';
 import { AttributeControl } from '../../components/attribute-control';
 import { useProductVariationsHelper } from '../../hooks/use-product-variations-helper';
+import { ProductEditorBlockEditProps } from '../../types';
 
 export function Edit( {
 	attributes: blockAttributes,
-}: BlockEditProps< BlockAttributes > ) {
+}: ProductEditorBlockEditProps< BlockAttributes > ) {
 	const blockProps = useWooBlockProps( blockAttributes );
 	const { generateProductVariations } = useProductVariationsHelper();
 	const {

packages/js/product-editor/src/blocks/variation-options/index.ts

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { BlockConfiguration } from '@wordpress/blocks';
 import { registerWooBlockType } from '@woocommerce/block-templates';
 
 /**
@@ -9,20 +8,20 @@ import { registerWooBlockType } from '@woocommerce/block-templates';
  */
 import blockConfiguration from './block.json';
 import { Edit } from './edit';
-import { VariationOptionsBlockAttributes } from './types';
 
-const { name, ...metadata } =
-	blockConfiguration as BlockConfiguration< VariationOptionsBlockAttributes >;
+const { name, ...metadata } = blockConfiguration;
 
 export { metadata, name };
 
-export const settings: Partial<
-	BlockConfiguration< VariationOptionsBlockAttributes >
-> = {
+export const settings = {
 	example: {},
 	edit: Edit,
 };
 
 export function init() {
-	return registerWooBlockType( { name, metadata, settings } );
+	return registerWooBlockType( {
+		name,
+		metadata: metadata as never,
+		settings: settings as never,
+	} );
 }

packages/js/product-editor/src/blocks/variations/edit.tsx

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classNames from 'classnames';
-import type { BlockEditProps } from '@wordpress/blocks';
 import { Button } from '@wordpress/components';
 import { useWooBlockProps } from '@woocommerce/block-templates';
 import { Product, ProductAttribute } from '@woocommerce/data';
@@ -33,10 +32,11 @@ import { getAttributeId } from '../../components/attribute-control/utils';
 import { useProductVariationsHelper } from '../../hooks/use-product-variations-helper';
 import { hasAttributesUsedForVariations } from '../../utils';
 import { TRACKS_SOURCE } from '../../constants';
+import { ProductEditorBlockEditProps } from '../../types';
 
 export function Edit( {
 	attributes,
-}: BlockEditProps< VariationsBlockAttributes > ) {
+}: ProductEditorBlockEditProps< VariationsBlockAttributes > ) {
 	const { description } = attributes;
 
 	const { generateProductVariations } = useProductVariationsHelper();

packages/js/product-editor/src/blocks/variations/index.ts

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { BlockConfiguration } from '@wordpress/blocks';
 import { registerWooBlockType } from '@woocommerce/block-templates';
 
 /**
@@ -9,20 +8,20 @@ import { registerWooBlockType } from '@woocommerce/block-templates';
  */
 import blockConfiguration from './block.json';
 import { Edit } from './edit';
-import { VariationsBlockAttributes } from './types';
 
-const { name, ...metadata } =
-	blockConfiguration as BlockConfiguration< VariationsBlockAttributes >;
+const { name, ...metadata } = blockConfiguration;
 
 export { metadata, name };
 
-export const settings: Partial<
-	BlockConfiguration< VariationsBlockAttributes >
-> = {
+export const settings = {
 	example: {},
 	edit: Edit,
 };
 
 export function init() {
-	return registerWooBlockType( { name, metadata, settings } );
+	return registerWooBlockType( {
+		name,
+		metadata: metadata as never,
+		settings: settings as never,
+	} );
 }

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

@@ -32,11 +32,10 @@ import {
  * Internal dependencies
  */
 import { useConfirmUnsavedProductChanges } from '../../hooks/use-confirm-unsaved-product-changes';
+import { ProductEditorContext } from '../../types';
 
 type BlockEditorProps = {
-	context: {
-		[ key: string ]: unknown;
-	};
+	context: Partial< ProductEditorContext >;
 	product: Partial< Product >;
 	settings:
 		| ( Partial< EditorSettings & EditorBlockListSettings > & {
@@ -94,13 +93,21 @@ export function BlockEditor( {
 		);
 	}, [ product.id ] );
 
+	const editedProduct: Product = useSelect( ( select ) =>
+		select( 'core' ).getEditedEntityRecord(
+			'postType',
+			'product',
+			product.id
+		)
+	);
+
 	if ( ! blocks ) {
 		return null;
 	}
 
 	return (
 		<div className="woocommerce-product-block-editor">
-			<BlockContextProvider value={ context }>
+			<BlockContextProvider value={ { ...context, editedProduct } }>
 				<BlockEditorProvider
 					value={ blocks }
 					onInput={ onInput }

packages/js/product-editor/src/components/tabs/test/tabs.spec.tsx

@@ -34,6 +34,9 @@ const blockProps = {
 function MockTabs( { onChange = jest.fn() } ) {
 	const [ selected, setSelected ] = useState< string | null >( null );
 	const mockContext = {
+		editedProduct: null,
+		postId: 1,
+		postType: 'product',
 		selectedTab: selected,
 	};
 
@@ -48,16 +51,22 @@ function MockTabs( { onChange = jest.fn() } ) {
 			<Tab
 				{ ...blockProps }
 				attributes={ { id: 'test1', title: 'Test button 1', order: 1 } }
+				// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+				// @ts-ignore editedProduct is not used, so we can just ignore the fact that our context doesn't have it
 				context={ mockContext }
 			/>
 			<Tab
 				{ ...blockProps }
 				attributes={ { id: 'test2', title: 'Test button 2', order: 2 } }
+				// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+				// @ts-ignore editedProduct is not used, so we can just ignore the fact that our context doesn't have it
 				context={ mockContext }
 			/>
 			<Tab
 				{ ...blockProps }
 				attributes={ { id: 'test3', title: 'Test button 3', order: 3 } }
+				// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+				// @ts-ignore editedProduct is not used, so we can just ignore the fact that our context doesn't have it
 				context={ mockContext }
 			/>
 		</SlotFillProvider>

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

@@ -6,6 +6,11 @@ export {
 	TRACKS_SOURCE,
 } from './constants';
 
+/**
+ * Types
+ */
+export * from './types';
+
 /**
  * Utils
  */

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

@@ -0,0 +1,18 @@
+/**
+ * External dependencies
+ */
+import { BlockEditProps } from '@wordpress/blocks';
+import { Product } from '@woocommerce/data';
+
+export interface ProductEditorContext {
+	editedProduct: Product;
+	postId: number;
+	postType: string;
+	selectedTab: string | null;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export interface ProductEditorBlockEditProps< T extends Record< string, any > >
+	extends BlockEditProps< T > {
+	readonly context: ProductEditorContext;
+}