diff --git a/packages/js/product-editor/src/blocks/product-fields/product-list/edit.tsx b/packages/js/product-editor/src/blocks/product-fields/product-list/edit.tsx
index 843fea3f720..7c0c52f7a40 100644
--- a/packages/js/product-editor/src/blocks/product-fields/product-list/edit.tsx
+++ b/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 (
-
+
{ ! isLoading && groupedProducts.length > 0 && (
-
+
{ ! isLoading && groupedProducts.length === 0 && (
diff --git a/packages/js/product-editor/src/blocks/product-fields/product-list/index.ts b/packages/js/product-editor/src/blocks/product-fields/product-list/index.ts
index f5e901e8288..d3ffb62fb06 100644
--- a/packages/js/product-editor/src/blocks/product-fields/product-list/index.ts
+++ b/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() {
diff --git a/packages/js/product-editor/src/components/block-slot-fill/block-fill.tsx b/packages/js/product-editor/src/components/block-slot-fill/block-fill.tsx
index c2c93f9ec44..bef297d3046 100644
--- a/packages/js/product-editor/src/components/block-slot-fill/block-fill.tsx
+++ b/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 (
diff --git a/packages/js/product-editor/src/components/block-slot-fill/block-slot.tsx b/packages/js/product-editor/src/components/block-slot-fill/block-slot.tsx
index 12254ea8d6d..c9fecd47bb5 100644
--- a/packages/js/product-editor/src/components/block-slot-fill/block-slot.tsx
+++ b/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 ;
}
diff --git a/packages/js/product-editor/src/components/block-slot-fill/index.ts b/packages/js/product-editor/src/components/block-slot-fill/index.ts
index e249cf87d28..e663f333f48 100644
--- a/packages/js/product-editor/src/components/block-slot-fill/index.ts
+++ b/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';
diff --git a/packages/js/product-editor/src/components/block-slot-fill/section-actions/index.tsx b/packages/js/product-editor/src/components/block-slot-fill/section-actions/index.tsx
new file mode 100644
index 00000000000..2f18f6b6641
--- /dev/null
+++ b/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 (
+
+ );
+}
diff --git a/packages/js/product-editor/src/components/block-slot-fill/types.ts b/packages/js/product-editor/src/components/block-slot-fill/types.ts
index 9b2ff94adf3..4511643287c 100644
--- a/packages/js/product-editor/src/components/block-slot-fill/types.ts
+++ b/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: string;
+ name: 'section-actions' | 'section-description';
};
export type BlockSlotProps = BlockSlotFillProps & Slot.Props;