get slotfill_placeholder type working

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

@@ -26,6 +26,14 @@ export const Content = ( { data } ) => {
 						return (
 							<SettingsCheckbox setting={ setting } key={ key } />
 						);
+					case 'slotfill_placeholder':
+						return (
+							<div
+								key={ key }
+								id={ setting.id }
+								className={ setting.class }
+							></div>
+						);
 					default:
 						return null;
 				}

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

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { getQuery } from '@woocommerce/navigation';
+import { useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -9,12 +10,26 @@ import { getQuery } from '@woocommerce/navigation';
 import { Tabs } from './tabs';
 import { SectionNav } from './section-nav';
 import { Content } from './content';
+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 './style.scss';
 
 const Settings = ( { params } ) => {
 	const settingsData = window.wcSettings?.admin?.settingsPages;
 	const { section } = getQuery();
 
+	useEffect( () => {
+		possiblyRenderSettingsSlots();
+	}, [ params ] );
+
+	useEffect( () => {
+		registerTaxSettingsConflictErrorFill();
+		registerPaymentsSettingsBannerFill();
+		registerSiteVisibilitySlotFill();
+	}, [] );
+
 	if ( ! settingsData ) {
 		return <div>Error getting data</div>;
 	}

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render } from '@wordpress/element';
+import { render, createRoot } from '@wordpress/element';
 import { createSlotFill, SlotFillProvider } from '@wordpress/components';
 import { PluginArea } from '@wordpress/plugins';
 
@@ -10,6 +10,8 @@ export const SETTINGS_SLOT_FILL_CONSTANT =
 
 const { Slot } = createSlotFill( SETTINGS_SLOT_FILL_CONSTANT );
 
+const roots = {};
+
 export const possiblyRenderSettingsSlots = () => {
 	const slots = [
 		{
@@ -28,6 +30,29 @@ export const possiblyRenderSettingsSlots = () => {
 		const slotDomElement = document.getElementById( slot.id );
 
 		if ( slotDomElement ) {
+			if ( createRoot ) {
+				if ( roots[ slot.id ] ) {
+					roots[ slot.id ].render(
+						<>
+							<SlotFillProvider>
+								<Slot />
+								<PluginArea scope={ slot.scope } />
+							</SlotFillProvider>
+						</>
+					);
+				} else {
+					const root = createRoot( slotDomElement );
+					root.render(
+						<>
+							<SlotFillProvider>
+								<Slot />
+								<PluginArea scope={ slot.scope } />
+							</SlotFillProvider>
+						</>
+					);
+					roots[ slot.id ] = root;
+				}
+			} else {
 				render(
 					<>
 						<SlotFillProvider>
@@ -38,5 +63,6 @@ export const possiblyRenderSettingsSlots = () => {
 					slotDomElement
 				);
 			}
+		}
 	} );
 };