Add Tasklist extensibility and WooOnboardingTaskListHeader SlotFill (#36519)

* Add experimental onboarding_tasklist PHP filter

* Add WooOnboardingTaskListHeader and woocommerce_onboarding_task_list_header Slot to task list

* Changelog

* Fix header task logic

* Remove React FC types

* Update changelog

* Fix comment

packages/js/onboarding/changelog/add-36465-tasklist-extensibility

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Add WooOnboardingTaskListHeader component

packages/js/onboarding/src/components/WooOnboardingTaskListHeader/WooOnboardingTaskListHeader.tsx

@@ -0,0 +1,37 @@
+/**
+ * External dependencies
+ */
+import { createElement } from '@wordpress/element';
+import { Slot, Fill } from '@wordpress/components';
+
+type WooOnboardingTaskListHeaderProps = {
+	id: string;
+};
+
+/**
+ * A Fill for adding Onboarding Task List headers.
+ *
+ * @slotFill WooOnboardingTaskListHeader
+ * @scope woocommerce-tasks
+ * @param {Object} props    React props.
+ * @param {string} props.id Task id.
+ */
+export const WooOnboardingTaskListHeader = ( {
+	id,
+	...props
+}: WooOnboardingTaskListHeaderProps & Slot.Props ) => (
+	<Fill
+		name={ 'woocommerce_onboarding_task_list_header_' + id }
+		{ ...props }
+	/>
+);
+
+WooOnboardingTaskListHeader.Slot = ( {
+	id,
+	fillProps,
+}: WooOnboardingTaskListHeaderProps & Slot.Props ) => (
+	<Slot
+		name={ 'woocommerce_onboarding_task_list_header_' + id }
+		fillProps={ fillProps }
+	/>
+);

packages/js/onboarding/src/components/WooOnboardingTaskListHeader/index.ts

@@ -0,0 +1 @@
+export * from './WooOnboardingTaskListHeader';

packages/js/onboarding/src/index.ts

@@ -13,4 +13,5 @@ export { default as WCPayLogo } from './images/wcpay-logo';
 export { WooPaymentGatewaySetup } from './components/WooPaymentGatewaySetup';
 export { WooPaymentGatewayConfigure } from './components/WooPaymentGatewayConfigure';
 export { WooOnboardingTaskListItem } from './components/WooOnboardingTaskListItem';
+export { WooOnboardingTaskListHeader } from './components/WooOnboardingTaskListHeader';
 export { WooOnboardingTask } from './components/WooOnboardingTask';

plugins/woocommerce-admin/client/two-column-tasks/task-list.tsx

@@ -13,6 +13,7 @@ import { Button, Card } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { EllipsisMenu } from '@woocommerce/components';
 import { navigateTo, getNewPath } from '@woocommerce/navigation';
+import { WooOnboardingTaskListHeader } from '@woocommerce/onboarding';
 import {
 	ONBOARDING_STORE_NAME,
 	TaskType,
@@ -169,6 +170,15 @@ export const TaskList: React.FC< TaskListProps > = ( {
 		selectedHeaderCard = visibleTasks[ visibleTasks.length - 1 ];
 	}
 
+	const taskListHeaderSlot = useSlot(
+		`woocommerce_onboarding_task_list_header_${
+			headerData?.task?.id ?? selectedHeaderCard?.id
+		}`
+	);
+	const hasTaskListHeaderSlotFills = Boolean(
+		taskListHeaderSlot?.fills?.length
+	);
+
 	const getTaskStartedCount = ( taskId: string ) => {
 		const trackedStartedTasks =
 			userPreferences.task_list_tracked_started_tasks;
@@ -217,7 +227,7 @@ export const TaskList: React.FC< TaskListProps > = ( {
 	};
 
 	const showTaskHeader = ( task: TaskType ) => {
-		if ( taskHeaders[ task.id ] ) {
+		if ( taskHeaders[ task.id ] || hasTaskListHeaderSlotFills ) {
 			setHeaderData( {
 				task,
 				goToTask: () => goToTask( task ),
@@ -296,10 +306,17 @@ export const TaskList: React.FC< TaskListProps > = ( {
 				>
 					<div className="wooocommerce-task-card__header-container">
 						<div className="wooocommerce-task-card__header">
-							{ headerData?.task &&
+							{ hasTaskListHeaderSlotFills ? (
+								<WooOnboardingTaskListHeader.Slot
+									id={ selectedHeaderCard?.id }
+									fillProps={ headerData }
+								/>
+							) : (
+								headerData?.task &&
 								createElement(
 									taskHeaders[ headerData.task.id ],
 									headerData
+								)
 							) }
 						</div>
 						{ ! displayProgressHeader && renderMenu() }

plugins/woocommerce/changelog/add-36465-tasklist-extensibility

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Add WooOnboardingTaskListHeader, woocommerce_admin_experimental_onboarding_tasklists filter, and woocommerce_onboarding_task_list_header Slot to task list

plugins/woocommerce/src/Admin/Features/OnboardingTasks/TaskLists.php

@@ -227,6 +227,16 @@ class TaskLists {
 			self::add_task( 'extended', $tour_task );
 			self::add_task( 'extended_two_column', $tour_task );
 		}
+
+		if ( has_filter( 'woocommerce_admin_experimental_onboarding_tasklists' ) ) {
+			/**
+			 * Filter to override default task lists.
+			 *
+			 * @since 7.4
+			 * @param array     $lists Array of tasklists.
+			 */
+			self::$lists = apply_filters( 'woocommerce_admin_experimental_onboarding_tasklists', self::$lists );
+		}
 	}
 
 	/**