[Settings] Add support for woocommerce_settings_start hook (#54948)

packages/js/settings-editor/changelog/54948-add-settings-custom-hooks

@@ -0,0 +1,4 @@
+Significance: patch
+Type: tweak
+Comment: Support woocommerce_settings_start hook in new, unreleased Settings
+

packages/js/settings-editor/src/components/sidebar/index.tsx

@@ -19,15 +19,15 @@ const { Icon, ...icons } = IconPackage;
 
 const SidebarNavigationScreenContent = ( {
 	activePage,
-	settingsData,
+	pages,
 }: {
 	activePage: string;
-	settingsData: SettingsData;
+	pages: SettingsPages;
 } ) => {
 	return (
 		<ItemGroup>
-			{ Object.keys( settingsData ).map( ( slug ) => {
-				const { label, icon } = settingsData[ slug ];
+			{ Object.keys( pages ).map( ( slug ) => {
+				const { label, icon } = pages[ slug ];
 				return (
 					<SettingItem
 						key={ slug }
@@ -51,11 +51,11 @@ const SidebarNavigationScreenContent = ( {
 
 export const Sidebar = ( {
 	activePage,
-	settingsData,
+	pages,
 	pageTitle,
 }: {
 	activePage: string;
-	settingsData: SettingsData;
+	pages: SettingsPages;
 	pageTitle: string;
 } ) => {
 	return (
@@ -65,7 +65,7 @@ export const Sidebar = ( {
 			content={
 				<SidebarNavigationScreenContent
 					activePage={ activePage }
-					settingsData={ settingsData }
+					pages={ pages }
 				/>
 			}
 		/>

packages/js/settings-editor/src/legacy/content.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { createElement } from '@wordpress/element';
+import { createElement, Fragment } from '@wordpress/element';
 import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { DataForm } from '@wordpress/dataviews';
@@ -10,6 +10,7 @@ import { DataForm } from '@wordpress/dataviews';
  * Internal dependencies
  */
 import { useSettingsForm } from '../hooks/use-settings-form';
+import { CustomView } from '../components/custom-view';
 
 const Form = ( { settings }: { settings: SettingsField[] } ) => {
 	const { data, fields, form, updateField } = useSettingsForm( settings );
@@ -36,9 +37,11 @@ const Form = ( { settings }: { settings: SettingsField[] } ) => {
 export const LegacyContent = ( {
 	settingsPage,
 	activeSection,
+	settingsData,
 }: {
 	settingsPage: SettingsPage;
 	activeSection: string;
+	settingsData: SettingsData;
 } ) => {
 	const section = settingsPage.sections[ activeSection ];
 
@@ -46,5 +49,12 @@ export const LegacyContent = ( {
 		return null;
 	}
 
-	return <Form settings={ section.settings } />;
+	return (
+		<>
+			{ settingsData.start && (
+				<CustomView html={ settingsData.start.content } />
+			) }
+			<Form settings={ section.settings } />
+		</>
+	);
 };

packages/js/settings-editor/src/route.tsx

@@ -38,20 +38,19 @@ const NotFound = () => {
 /**
  * Default route when active page is not found.
  *
- * @param {string}       activePage   - The active page.
- * @param {settingsData} settingsData - The settings data.
- *
+ * @param {string}        activePage - The active page.
+ * @param {settingsPages} settingsPages      - The settings pages.
  */
 const getNotFoundRoute = (
 	activePage: string,
-	settingsData: SettingsData
+	settingsPages: SettingsPages
 ): Route => ( {
 	key: activePage,
 	areas: {
 		sidebar: (
 			<Sidebar
 				activePage={ activePage }
-				settingsData={ settingsData }
+				pages={ settingsPages }
 				pageTitle={ __( 'Settings', 'woocommerce' ) }
 			/>
 		),
@@ -104,12 +103,13 @@ const getLegacyRoute = (
 			sidebar: (
 				<Sidebar
 					activePage={ activePage }
-					settingsData={ settingsData }
+					pages={ settingsData.pages }
 					pageTitle={ __( 'Store settings', 'woocommerce' ) }
 				/>
 			),
 			content: (
 				<LegacyContent
+					settingsData={ settingsData }
 					settingsPage={ settingsPage }
 					activeSection={ activeSection }
 				/>
@@ -202,10 +202,12 @@ export const useActiveRoute = (): {
 	return useMemo( () => {
 		const { tab: activePage = 'general', section: activeSection } =
 			location.params;
-		const settingsPage = settingsData?.[ activePage ];
+		const settingsPage = settingsData?.pages?.[ activePage ];
 
 		if ( ! settingsPage ) {
-			return { route: getNotFoundRoute( activePage, settingsData ) };
+			return {
+				route: getNotFoundRoute( activePage, settingsData.pages ),
+			};
 		}
 
 		const tabs = getSettingsPageTabs( settingsPage );
@@ -230,14 +232,16 @@ export const useActiveRoute = (): {
 
 		// Handle modern pages.
 		if ( ! modernRoute ) {
-			return { route: getNotFoundRoute( activePage, settingsData ) };
+			return {
+				route: getNotFoundRoute( activePage, settingsData.pages ),
+			};
 		}
 
 		// Sidebar is responsibility of WooCommerce, not extensions so add it here.
 		modernRoute.areas.sidebar = (
 			<Sidebar
 				activePage={ activePage }
-				settingsData={ settingsData }
+				pages={ settingsData.pages }
 				pageTitle={ __( 'Store settings', 'woocommerce' ) }
 			/>
 		);

packages/js/settings-editor/src/tests/route.test.tsx

@@ -40,25 +40,27 @@ jest.mock( '../components/sidebar', () => ( {
 } ) );
 
 const mockSettingsPages = {
-	general: {
-		label: 'General',
-		icon: 'settings',
-		slug: 'general',
-		sections: {
-			default: {
-				label: 'General',
-				settings: [
-					{
-						title: 'Store Address',
-						type: 'title' as const,
-						desc: 'This is where your business is located.',
-						id: 'store_address',
-						value: false,
-					},
-				],
+	pages: {
+		general: {
+			label: 'General',
+			icon: 'settings',
+			slug: 'general',
+			sections: {
+				default: {
+					label: 'General',
+					settings: [
+						{
+							title: 'Store Address',
+							type: 'title' as const,
+							desc: 'This is where your business is located.',
+							id: 'store_address',
+							value: false,
+						},
+					],
+				},
 			},
+			is_modern: false,
 		},
-		is_modern: false,
 	},
 };
 
@@ -131,12 +133,14 @@ describe( 'route.tsx', () => {
 			window.wcSettings = {
 				admin: {
 					settingsData: {
-						modern: {
-							label: 'Modern',
-							icon: 'published',
-							slug: 'modern',
-							sections: {},
-							is_modern: true,
+						pages: {
+							modern: {
+								label: 'Modern',
+								icon: 'published',
+								slug: 'modern',
+								sections: {},
+								is_modern: true,
+							},
 						},
 					},
 				},

packages/js/settings-editor/typings/global.d.ts

@@ -96,9 +96,14 @@ declare global {
 		is_modern: boolean;
 	}
 
-	interface SettingsData {
+	interface SettingsPages {
 		[ key: string ]: SettingsPage;
 	}
+
+	interface SettingsData {
+		start?: CustomSettingsField;
+		pages: SettingsPages;
+	}
 }
 
 declare global {

plugins/woocommerce/changelog/54948-add-settings-custom-hooks

@@ -0,0 +1,4 @@
+Significance: patch
+Type: tweak
+Comment: Support woocommerce_settings_start hook in new, unreleased Settings
+

plugins/woocommerce/includes/admin/settings/class-wc-settings-page.php

@@ -224,7 +224,7 @@ if ( ! class_exists( 'WC_Settings_Page', false ) ) :
 		protected function get_section_settings_data( $section_id, $sections ) {
 			$section_settings_data = array();
 
-			$custom_view = $this->get_custom_view( $section_id );
+			$custom_view = $this->get_custom_view( 'woocommerce_settings_' . $this->id, $section_id );
 			// We only want to loop through the settings object if the parent class's output method is being rendered during the get_custom_view call.
 			if ( $this->output_called ) {
 				$section_settings = count( $sections ) > 1
@@ -239,11 +239,7 @@ if ( ! class_exists( 'WC_Settings_Page', false ) ) :
 
 			// If the custom view has output, add it to the settings data.
 			if ( ! empty( $custom_view ) ) {
-				$section_settings_data[] = array(
-					'id'      => wp_unique_prefixed_id( 'settings_custom_view' ),
-					'type'    => 'custom',
-					'content' => $custom_view,
-				);
+				$section_settings_data[] = $this->get_custom_view_object( $custom_view );
 			}
 
 			// Reset the output_called property.
@@ -252,6 +248,20 @@ if ( ! class_exists( 'WC_Settings_Page', false ) ) :
 			return $section_settings_data;
 		}
 
+		/**
+		 * Get the custom view object.
+		 *
+		 * @param string $content The content of the custom view.
+		 * @return array The custom view object.
+		 */
+		public function get_custom_view_object( $content ) {
+			return array(
+				'id'      => wp_unique_prefixed_id( 'settings_custom_view' ),
+				'type'    => 'custom',
+				'content' => $content,
+			);
+		}
+
 		/**
 		 * Populate the value for a given section setting.
 		 *
@@ -278,15 +288,19 @@ if ( ! class_exists( 'WC_Settings_Page', false ) ) :
 		/**
 		 * Get the custom view given the current tab and section.
 		 *
+		 * @param string $action The action to call.
 		 * @param string $section_id The section id.
 		 * @return string The custom view. HTML output.
 		 */
-		public function get_custom_view( $section_id ) {
+		public function get_custom_view( $action, $section_id = false ) {
 			global $current_section;
-			// Make sure the current section is set to the sectionid here. Reset it at the end of the function.
-			$saved_current_section = $current_section;
-			// set global current_section to the section_id.
-			$current_section = $section_id;
+
+			if ( $section_id ) {
+				// Make sure the current section is set to the sectionid here. Reset it at the end of the function.
+				$saved_current_section = $current_section;
+				// set global current_section to the section_id.
+				$current_section = $section_id;
+			}
 
 			ob_start();
 			/**
@@ -294,12 +308,14 @@ if ( ! class_exists( 'WC_Settings_Page', false ) ) :
 			 *
 			 * @since 2.1.0
 			 */
-			do_action( 'woocommerce_settings_' . $this->id );
+			do_action( $action );
 			$html = ob_get_contents();
 			ob_end_clean();
 
 			// Reset the global variable.
-			$current_section = $saved_current_section;
+			if ( $section_id ) {
+				$current_section = $saved_current_section;
+			}
 			return trim( $html );
 		}
 

plugins/woocommerce/src/Admin/Features/Settings/Init.php

@@ -172,8 +172,13 @@ class Init {
 			$settings['settingsScripts'][ $setting_page->get_id() ] = self::get_script_urls( $settings_scripts_handles );
 		}
 
-		$transformer              = new Transformer();
-		$settings['settingsData'] = $transformer->transform( $pages );
+		$transformer                       = new Transformer();
+		$settings['settingsData']['pages'] = $transformer->transform( $pages );
+		$start_hook_content                = $setting_pages[0]->get_custom_view( 'woocommerce_settings_start' );
+
+		if ( ! empty( $start_hook_content ) ) {
+			$settings['settingsData']['start'] = $setting_pages[0]->get_custom_view_object( $start_hook_content );
+		}
 
 		return $settings;
 	}