[Product Block Editor]: introduce `<SectionActions />` slot (#43540)

* pick clientId by using hook

* do not pass clientId to BlockFill component

* pick clientId from core hook

* introduce SectionActions slot component

* expose SectionActions slot component

* fix ts issue

* changelog

* fix closing component bug

* do not pass clientId to the BlockSlot instance

* revert changes in the description block

* fix name for the section actions component

* export section actions properly

* add a warning when the slot DOM doesn't exist

* define the name explicitely

* export SectionActions component name

* import SectionActions from product list cmp

* rename ProductListBlockEdit component fn

packages/js/product-editor/changelog/update-product-editor-add-section-actions-component

@@ -0,0 +1,4 @@
+Significance: patch
+Type: add
+
+[Product Block Editor]: introduce `<SectionActions />` slot

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

@@ -13,7 +13,6 @@ import { SectionDescriptionBlockAttributes } from './types';
 
 export function SectionDescriptionBlockEdit( {
 	attributes,
-	clientId,
 }: ProductEditorBlockEditProps< SectionDescriptionBlockAttributes > ) {
 	const { content } = attributes;
 	const blockProps = useWooBlockProps( attributes );
@@ -22,7 +21,6 @@ export function SectionDescriptionBlockEdit( {
 		<BlockFill
 			{ ...blockProps }
 			name="section-description"
-			clientId={ clientId }
 			slotContainerBlockName="woocommerce/product-section"
 		>
 			<div>{ content }</div>

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

@@ -66,16 +66,10 @@ export function SectionBlockEdit( {
 							) }
 						</h2>
 
-						<BlockSlot
+						<BlockSlot name="section-actions" />
-							name="section-actions"
-							clientId={ clientId }
-						/>
 					</div>
 
-					<BlockSlot
+					<BlockSlot name="section-description" />
-						name="section-description"
-						clientId={ clientId }
-					/>
 				</HeadingTagName>
 			) }
 

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

@@ -255,7 +255,6 @@ export function ProductDetailsSectionDescriptionBlockEdit( {
 	return (
 		<BlockFill
 			name="section-description"
-			clientId={ clientId }
 			slotContainerBlockName="woocommerce/product-section"
 		>
 			<div { ...blockProps }>

packages/js/product-editor/src/blocks/product-fields/product-list/edit.tsx

@@ -26,7 +26,6 @@ import {
 	getProductImageStyle,
 	ReorderProductsModal,
 } from '../../../components/add-products-modal';
-import { BlockFill } from '../../../components/block-slot-fill';
 import { ProductEditorBlockEditProps } from '../../../types';
 import { UploadsBlockAttributes } from './types';
 import {
@@ -37,11 +36,11 @@ import { Shirt } from '../../../images/shirt';
 import { Pants } from '../../../images/pants';
 import { Glasses } from '../../../images/glasses';
 import { AdviceCard } from '../../../components/advice-card';
+import { SectionActions } from '../../../components/block-slot-fill';
 
-export function Edit( {
+export function ProductListBlockEdit( {
 	attributes,
 	context: { postType },
-	clientId,
 }: ProductEditorBlockEditProps< UploadsBlockAttributes > ) {
 	const { property } = attributes;
 	const blockProps = useWooBlockProps( attributes );
@@ -125,11 +124,7 @@ export function Edit( {
 
 	return (
 		<div { ...blockProps }>
-			<BlockFill
+			<SectionActions>
-				name="section-actions"
-				clientId={ clientId }
-				slotContainerBlockName="woocommerce/product-section"
-			>
 				<div className="wp-block-woocommerce-product-list-field__header">
 					{ ! isLoading && groupedProducts.length > 0 && (
 						<Button
@@ -146,7 +141,7 @@ export function Edit( {
 						{ __( 'Add products', 'woocommerce' ) }
 					</Button>
 				</div>
-			</BlockFill>
+			</SectionActions>
 
 			<div className="wp-block-woocommerce-product-list-field__body">
 				{ ! isLoading && groupedProducts.length === 0 && (

packages/js/product-editor/src/blocks/product-fields/product-list/index.ts

@@ -2,7 +2,7 @@
  * Internal dependencies
  */
 import blockConfiguration from './block.json';
-import { Edit } from './edit';
+import { ProductListBlockEdit } from './edit';
 import { registerProductEditorBlockType } from '../../../utils';
 
 const { name, ...metadata } = blockConfiguration;
@@ -11,7 +11,7 @@ export { metadata, name };
 
 export const settings = {
 	example: {},
-	edit: Edit,
+	edit: ProductListBlockEdit,
 };
 
 export function init() {

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

@@ -4,6 +4,10 @@
 import { Fill } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { createElement } from '@wordpress/element';
+import {
+	// @ts-expect-error no exported member.
+	useBlockEditContext,
+} from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -13,10 +17,11 @@ import { BlockFillProps } from './types';
 
 export function BlockFill( {
 	name,
-	clientId,
 	slotContainerBlockName,
 	...props
 }: BlockFillProps ) {
+	const { clientId } = useBlockEditContext();
+
 	const closestAncestorClientId = useSelect(
 		( select ) => {
 			// @ts-expect-error Outdated type definition.
@@ -34,7 +39,11 @@ export function BlockFill( {
 		[ clientId, slotContainerBlockName ]
 	);
 
-	if ( ! closestAncestorClientId ) return null;
+	if ( ! closestAncestorClientId ) {
+		// eslint-disable-next-line no-console
+		console.warn( 'No closest ancestor client ID found for block fill.' );
+		return null;
+	}
 
 	return (
 		<Fill { ...props } name={ getName( name, closestAncestorClientId ) } />

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

@@ -3,6 +3,10 @@
  */
 import { Slot } from '@wordpress/components';
 import { createElement } from '@wordpress/element';
+import {
+	// @ts-expect-error no exported member.
+	useBlockEditContext,
+} from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -10,6 +14,7 @@ import { createElement } from '@wordpress/element';
 import { getName } from './utils/get-name';
 import { BlockSlotProps } from './types';
 
-export function BlockSlot( { name, clientId, ...props }: BlockSlotProps ) {
+export function BlockSlot( { name, ...props }: BlockSlotProps ) {
+	const { clientId } = useBlockEditContext();
 	return <Slot { ...props } name={ getName( name, clientId ) } />;
 }

packages/js/product-editor/src/components/block-slot-fill/index.ts

@@ -1,3 +1,4 @@
 export * from './block-fill';
 export * from './block-slot';
+export * from './section-actions/index';
 export * from './types';

packages/js/product-editor/src/components/block-slot-fill/section-actions/index.tsx

@@ -0,0 +1,30 @@
+/**
+ * External dependencies
+ */
+import { createElement } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { BlockFill } from '../block-fill';
+import { BlockFillProps } from '../types';
+
+export type SectionActionsProps = Omit<
+	BlockFillProps,
+	'name' | 'slotContainerBlockName'
+> & {
+	containerBlockName?: string;
+};
+
+export function SectionActions( {
+	containerBlockName = 'woocommerce/product-section',
+	...restProps
+}: SectionActionsProps ) {
+	return (
+		<BlockFill
+			{ ...restProps }
+			name="section-actions"
+			slotContainerBlockName={ containerBlockName }
+		/>
+	);
+}

packages/js/product-editor/src/components/block-slot-fill/types.ts

@@ -4,8 +4,7 @@
 import { Fill, Slot } from '@wordpress/components';
 
 export type BlockSlotFillProps = {
-	clientId: string;
+	name: 'section-actions' | 'section-description';
-	name: string;
 };
 
 export type BlockSlotProps = BlockSlotFillProps & Slot.Props;