Product Editor: Add PostTypeContext and blocks access to plugins (#41106)

packages/js/product-editor/changelog/update-add-post-type-context-product-editor

@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Allow plugins to access PostTypeContext and blocks (through core/block-editor data store).

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

@@ -5,6 +5,7 @@ import { synchronizeBlocksWithTemplate, Template } from '@wordpress/blocks';
 import { createElement, useMemo, useLayoutEffect } from '@wordpress/element';
 import { useDispatch, useSelect, select as WPSelect } from '@wordpress/data';
 import { uploadMedia } from '@wordpress/media-utils';
+import { PluginArea } from '@wordpress/plugins';
 import {
 	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 	// @ts-ignore No types for this exist yet.
@@ -32,6 +33,7 @@ import {
  */
 import { useConfirmUnsavedProductChanges } from '../../hooks/use-confirm-unsaved-product-changes';
 import { ProductEditorContext } from '../../types';
+import { PostTypeContext } from '../../contexts/post-type-context';
 
 type BlockEditorProps = {
 	context: Partial< ProductEditorContext >;
@@ -120,6 +122,11 @@ export function BlockEditor( {
 							<BlockList className="woocommerce-product-block-editor__block-list" />
 						</ObserveTyping>
 					</BlockTools>
+					{ /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */ }
+					<PostTypeContext.Provider value={ context.postType! }>
+						{ /* @ts-expect-error 'scope' does exist. @types/wordpress__plugins is outdated. */ }
+						<PluginArea scope="woocommerce-product-block-editor" />
+					</PostTypeContext.Provider>
 				</BlockEditorProvider>
 			</BlockContextProvider>
 		</div>

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

@@ -7,7 +7,6 @@ import {
 	Fragment,
 	useState,
 } from '@wordpress/element';
-import { PluginArea } from '@wordpress/plugins';
 import {
 	LayoutContextProvider,
 	useExtendLayout,
@@ -90,8 +89,6 @@ export function Editor( {
 												postId: product.id,
 											} }
 										/>
-										{ /* @ts-expect-error 'scope' does exist. @types/wordpress__plugins is outdated. */ }
-										<PluginArea scope="woocommerce-product-block-editor" />
 									</>
 								}
 							/>

packages/js/product-editor/src/contexts/post-type-context/index.ts

@@ -0,0 +1,6 @@
+/**
+ * External dependencies
+ */
+import { createContext } from '@wordpress/element';
+
+export const PostTypeContext = createContext( 'product' );

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

@@ -20,5 +20,6 @@ export * from './utils';
  * Hooks
  */
 export * from './hooks';
+export { PostTypeContext } from './contexts/post-type-context';
 export { useValidation, useValidations } from './contexts/validation-context';
 export * from './contexts/validation-context/types';