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

62 lines
1.5 KiB
JavaScript

/**
* External dependencies
*/
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',
scope: 'woocommerce-payments-settings',
},
{ 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',
},
];
slots.forEach( ( slot ) => {
const slotDomElement = document.getElementById( slot.id );
if ( ! slotDomElement ) {
return;
}
const slotFill = (
<>
<SlotFillProvider>
<Slot fillProps={ { SideBar } } />
<PluginArea scope={ slot.scope } />
</SlotFillProvider>
</>
);
if ( createRoot ) {
const root = createRoot( slotDomElement );
root.render( slotFill );
} else {
render( slotFill, slotDomElement );
}
} );
};