From 18119dcfeae6c8b6f09e298a0d0610644b0eb8fb Mon Sep 17 00:00:00 2001 From: paul sealock Date: Mon, 10 Jun 2024 14:02:35 +1200 Subject: [PATCH] Settings view component --- .../client/settings/components/index.js | 1 + .../client/settings/components/side-bar.js | 14 ++++++++ .../client/settings/index.js | 22 +++++++----- .../client/settings/settings-slots.js | 25 ++++++++------ .../client/settings/settings-view-example.js | 34 +++++++++++++++++++ .../class-wc-settings-site-visibility.php | 29 ++++++++++++++++ 6 files changed, 106 insertions(+), 19 deletions(-) create mode 100644 plugins/woocommerce-admin/client/settings/components/side-bar.js create mode 100644 plugins/woocommerce-admin/client/settings/settings-view-example.js diff --git a/plugins/woocommerce-admin/client/settings/components/index.js b/plugins/woocommerce-admin/client/settings/components/index.js index 9ea8b9eb20b..d575f4243b0 100644 --- a/plugins/woocommerce-admin/client/settings/components/index.js +++ b/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'; diff --git a/plugins/woocommerce-admin/client/settings/components/side-bar.js b/plugins/woocommerce-admin/client/settings/components/side-bar.js new file mode 100644 index 00000000000..197dc9473fc --- /dev/null +++ b/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 ( +
+

Side Bar Content

+
+ ); +}; diff --git a/plugins/woocommerce-admin/client/settings/index.js b/plugins/woocommerce-admin/client/settings/index.js index 94972122c2c..8c90dbe1416 100644 --- a/plugins/woocommerce-admin/client/settings/index.js +++ b/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
Error getting data
; } - - 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 } >
- + + +
diff --git a/plugins/woocommerce-admin/client/settings/settings-slots.js b/plugins/woocommerce-admin/client/settings/settings-slots.js index ddb05feebd5..5580713ad5a 100644 --- a/plugins/woocommerce-admin/client/settings/settings-slots.js +++ b/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 = ( <> - + @@ -44,15 +55,7 @@ export const possiblyRenderSettingsSlots = () => { const root = createRoot( slotDomElement ); root.render( slotFill ); } else { - render( - <> - - - - - , - slotDomElement - ); + render( slotFill, slotDomElement ); } } ); }; diff --git a/plugins/woocommerce-admin/client/settings/settings-view-example.js b/plugins/woocommerce-admin/client/settings/settings-view-example.js new file mode 100644 index 00000000000..c815c5f1ac8 --- /dev/null +++ b/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 ( + + { ( { SideBar } ) => ( +
+

Example Settings View

+

This is the main content using a SlotFill

+ { } +
+ ) } + + ); +}; + +export const registerExampleSettingsView = () => { + registerPlugin( 'woocommerce-exampple-settings-view-slotfill', { + scope: 'woocommerce-settings', + render: ExampleSettingsViewSlotFill, + } ); +}; diff --git a/plugins/woocommerce/includes/admin/settings/class-wc-settings-site-visibility.php b/plugins/woocommerce/includes/admin/settings/class-wc-settings-site-visibility.php index 34baf1270c1..88fd4f8c803 100644 --- a/plugins/woocommerce/includes/admin/settings/class-wc-settings-site-visibility.php +++ b/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; + } }