Settings view component

plugins/woocommerce-admin/client/settings/components/index.js

@@ -1,2 +1,3 @@
 export { SettingsCheckbox } from './checkbox';
 export { SettingsInput } from './input';
+export { SideBar, SidebarContext } from './side-bar';

plugins/woocommerce-admin/client/settings/components/side-bar.js

@@ -0,0 +1,14 @@
+/**
+ * External dependencies
+ */
+import { createContext } from '@wordpress/element';
+
+export const SidebarContext = createContext( null );
+
+export const SideBar = () => {
+	return (
+		<div className="woocommerce-settings-side-bar">
+			<h2>Side Bar Content</h2>
+		</div>
+	);
+};

plugins/woocommerce-admin/client/settings/index.js

@@ -4,7 +4,7 @@
 import { getQuery, getNewPath } from '@woocommerce/navigation';
 import { Button } from '@wordpress/components';
 import { Icon, chevronLeft } from '@wordpress/icons';
-import { useEffect } from '@wordpress/element';
+import { useEffect, createContext, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -16,13 +16,22 @@ import { possiblyRenderSettingsSlots } from './settings-slots';
 import { registerTaxSettingsConflictErrorFill } from './conflict-error-slotfill';
 import { registerPaymentsSettingsBannerFill } from '../payments/payments-settings-banner-slotfill';
 import { registerSiteVisibilitySlotFill } from '../launch-your-store';
+import { registerExampleSettingsView } from './settings-view-example';
 import { useFullScreen } from '~/utils';
+import { SidebarContext } from './components/side-bar';
 import './style.scss';
 
 const Settings = ( { params } ) => {
 	useFullScreen( [ 'woocommerce-settings' ] );
 	const settingsData = window.wcSettings?.admin?.settingsPages;
+	const sections = settingsData[ params.page ]?.sections;
 	const { section } = getQuery();
+	const contentData =
+		Array.isArray( sections ) && sections.length === 0
+			? {}
+			: sections[ section || '' ];
+
+	const [ hasSideBar, setHasSideBar ] = useState( false );
 
 	// Be sure to render Settings slots when the params change.
 	useEffect( () => {
@@ -34,18 +43,13 @@ const Settings = ( { params } ) => {
 		registerTaxSettingsConflictErrorFill();
 		registerPaymentsSettingsBannerFill();
 		registerSiteVisibilitySlotFill();
+		registerExampleSettingsView();
 	}, [] );
 
 	if ( ! settingsData ) {
 		return <div>Error getting data</div>;
 	}
-
-	const sections = settingsData[ params.page ]?.sections;
 	const title = settingsData[ params.page ]?.label;
-	const contentData =
-		Array.isArray( sections ) && sections.length === 0
-			? {}
-			: sections[ section || '' ];
 
 	return (
 		<>
@@ -66,7 +70,9 @@ const Settings = ( { params } ) => {
 						section={ section }
 					>
 						<div className="woocommerce-settings-layout-main">
+							<SidebarContext.Provider value={ setHasSideBar }>
 								<Content data={ contentData } />
+							</SidebarContext.Provider>
 						</div>
 					</SectionNav>
 				</div>

plugins/woocommerce-admin/client/settings/settings-slots.js

@@ -1,16 +1,23 @@
 /**
  * External dependencies
  */
-import { render, createRoot } from '@wordpress/element';
+import { render, createRoot, useContext } from '@wordpress/element';
 import { createSlotFill, SlotFillProvider } from '@wordpress/components';
 import { PluginArea } from '@wordpress/plugins';
 
+/**
+ * Internal dependencies
+ */
+import { SideBar, SidebarContext } from './components/side-bar';
+
 export const SETTINGS_SLOT_FILL_CONSTANT =
 	'__EXPERIMENTAL__WcAdminSettingsSlots';
 
 const { Slot } = createSlotFill( SETTINGS_SLOT_FILL_CONSTANT );
 
 export const possiblyRenderSettingsSlots = () => {
+	//@TODO  We need to automatically register these based on the settings data so
+	// this way extensions don't need to add to this configuration.
 	const slots = [
 		{
 			id: 'wc_payments_settings_slotfill',
@@ -18,6 +25,10 @@ export const possiblyRenderSettingsSlots = () => {
 		},
 		{ id: 'wc_tax_settings_slotfill', scope: 'woocommerce-tax-settings' },
 		{ id: 'wc_settings_slotfill', scope: 'woocommerce-settings' },
+		{
+			id: 'wc_site_visibility_settings_view',
+			scope: 'woocommerce-settings',
+		},
 		{
 			id: 'wc_settings_site_visibility_slotfill',
 			scope: 'woocommerce-site-visibility-settings',
@@ -34,7 +45,7 @@ export const possiblyRenderSettingsSlots = () => {
 		const slotFill = (
 			<>
 				<SlotFillProvider>
-					<Slot />
+					<Slot fillProps={ { SideBar } } />
 					<PluginArea scope={ slot.scope } />
 				</SlotFillProvider>
 			</>
@@ -44,15 +55,7 @@ export const possiblyRenderSettingsSlots = () => {
 			const root = createRoot( slotDomElement );
 			root.render( slotFill );
 		} else {
-			render(
+			render( slotFill, slotDomElement );
-				<>
-					<SlotFillProvider>
-						<Slot />
-						<PluginArea scope={ slot.scope } />
-					</SlotFillProvider>
-				</>,
-				slotDomElement
-			);
 		}
 	} );
 };

plugins/woocommerce-admin/client/settings/settings-view-example.js

@@ -0,0 +1,34 @@
+/**
+ * External dependencies
+ */
+import { createSlotFill } from '@wordpress/components';
+import { registerPlugin } from '@wordpress/plugins';
+
+/**
+ * Internal dependencies
+ */
+import { SETTINGS_SLOT_FILL_CONSTANT } from './settings-slots';
+
+const { Fill } = createSlotFill( SETTINGS_SLOT_FILL_CONSTANT );
+
+const ExampleSettingsViewSlotFill = () => {
+	const style = { margin: '36px 0px' };
+	return (
+		<Fill>
+			{ ( { SideBar } ) => (
+				<div style={ style }>
+					<h1>Example Settings View</h1>
+					<p>This is the main content using a SlotFill</p>
+					{ <SideBar /> }
+				</div>
+			) }
+		</Fill>
+	);
+};
+
+export const registerExampleSettingsView = () => {
+	registerPlugin( 'woocommerce-exampple-settings-view-slotfill', {
+		scope: 'woocommerce-settings',
+		render: ExampleSettingsViewSlotFill,
+	} );
+};

plugins/woocommerce/includes/admin/settings/class-wc-settings-site-visibility.php

@@ -29,6 +29,18 @@ class WC_Settings_Site_Visibility extends WC_Settings_Page {
 		parent::__construct();
 	}
 
+	/**
+	 * Get own sections.
+	 *
+	 * @return array
+	 */
+	protected function get_own_sections() {
+		return array(
+			''            => __( 'General', 'woocommerce' ),
+			'custom_view' => __( 'Custom View', 'woocommerce' ),
+		);
+	}
+
 
 	/**
 	 * Get settings for the default section.
@@ -46,6 +58,23 @@ class WC_Settings_Site_Visibility extends WC_Settings_Page {
 
 		return $settings;
 	}
+
+	/**
+	 * Get settings for the default section.
+	 *
+	 * @return array
+	 */
+	protected function get_settings_for_custom_view_section() {
+		$settings =
+			array(
+				array(
+					'id'   => 'wc_site_visibility_settings_view',
+					'type' => 'slotfill_placeholder',
+				),
+			);
+
+		return $settings;
+	}
 }