Add SlotFill for marketing overview screen (#36828)

* Add slot for marketing overview section slotfill

* Add changelog

* Remove unneed changes

* Add changelog

plugins/woocommerce-admin/client/marketing/overview/index.js

@@ -12,6 +12,7 @@ import RecommendedExtensions from '../components/recommended-extensions';
 import KnowledgeBase from '../components/knowledge-base';
 import WelcomeCard from './welcome-card';
 import { getAdminSetting } from '~/utils/admin-settings';
+import { MarketingOverviewSectionSlot } from './section-slot';
 import '../data';
 
 const MarketingOverview = () => {
@@ -25,6 +26,7 @@ const MarketingOverview = () => {
 		<div className="woocommerce-marketing-overview">
 			<WelcomeCard />
 			<InstalledExtensions />
+			<MarketingOverviewSectionSlot />
 			{ shouldShowExtensions && (
 				<RecommendedExtensions category="marketing" />
 			) }

plugins/woocommerce-admin/client/marketing/overview/section-slot/index.ts

@@ -0,0 +1,2 @@
+export * from './section-slot';
+export * from './utils';

plugins/woocommerce-admin/client/marketing/overview/section-slot/section-slot.tsx

@@ -0,0 +1,38 @@
+/**
+ * External dependencies
+ */
+import { useSlot } from '@woocommerce/experimental';
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import {
+	EXPERIMENTAL_WC_MARKETING_OVERVIEW_SECTION_SLOT_NAME,
+	WooMarketingOverviewSection,
+} from './utils';
+
+export const MarketingOverviewSectionSlot = ( {
+	className,
+}: {
+	className: string;
+} ) => {
+	const slot = useSlot(
+		EXPERIMENTAL_WC_MARKETING_OVERVIEW_SECTION_SLOT_NAME
+	);
+	const hasFills = Boolean( slot?.fills?.length );
+
+	if ( ! hasFills ) {
+		return null;
+	}
+	return (
+		<div
+			className={ classnames(
+				'woocommerce-marketing-overview__section',
+				className
+			) }
+		>
+			<WooMarketingOverviewSection.Slot />
+		</div>
+	);
+};

plugins/woocommerce-admin/client/marketing/overview/section-slot/utils.tsx

@@ -0,0 +1,64 @@
+/**
+ * External dependencies
+ */
+import { Slot, Fill } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { createOrderedChildren, sortFillsByOrder } from '../../../utils';
+
+export const EXPERIMENTAL_WC_MARKETING_OVERVIEW_SECTION_SLOT_NAME =
+	'experimental_woocommerce_marketing_overview_section';
+/**
+ * Create a Fill for extensions to add a section to the Marketing Overview page.
+ *
+ * @slotFill WooMarketingOverviewSection
+ * @scope woocommerce-admin
+ * @example
+ * const MySection = () => (
+ * 	<Fill name="experimental_woocommerce_marketing_overview_section">
+ * 		<div className="woocommerce-experiments-placeholder-slotfill">
+ * 			<div className="placeholder-slotfill-content">
+ * 				Slotfill goes in here!
+ * 			</div>
+ * 		</div>
+ * 	</Fill>
+ * );
+ *
+ * registerPlugin( 'my-extension', {
+ * render: MySection,
+ * scope: 'woocommerce-admin',
+ * } );
+ * @param {Object} param0
+ * @param {Array}  param0.children - Node children.
+ * @param {Array}  param0.order    - Node order.
+ */
+export const WooMarketingOverviewSection = ( {
+	children,
+	order = 1,
+}: {
+	children: React.ReactNode;
+	order?: number;
+} ) => {
+	return (
+		<Fill name={ EXPERIMENTAL_WC_MARKETING_OVERVIEW_SECTION_SLOT_NAME }>
+			{ ( fillProps: Fill.Props ) => {
+				return createOrderedChildren( children, order, fillProps );
+			} }
+		</Fill>
+	);
+};
+
+WooMarketingOverviewSection.Slot = ( {
+	fillProps,
+}: {
+	fillProps?: Slot.Props;
+} ) => (
+	<Slot
+		name={ EXPERIMENTAL_WC_MARKETING_OVERVIEW_SECTION_SLOT_NAME }
+		fillProps={ fillProps }
+	>
+		{ sortFillsByOrder }
+	</Slot>
+);

plugins/woocommerce/changelog/add-36615-marketing-overview-section-slot

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Add an experimental slot for marketing overview extensibility