Feature: auto multisite detection/configurations

.eslintrc

@@ -13,7 +13,8 @@
 		"_": true,
 		"patternSyncData": true,
 		"TemplateLibraryData": true,
-		"OneDesignSettings": true
+		"OneDesignSettings": true,
+		"OneDesignMultiSiteSettings": true
 	},
 	"rules": {
 		"jsdoc/check-indentation": "error",

assets/src/admin/multisite-plugin/index.js

@@ -0,0 +1,169 @@
+/**
+ * WordPress dependencies
+ */
+import { useState, useEffect, createRoot, useCallback, useRef } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { Card, CardHeader, CardBody, Notice, Button, SelectControl } from '@wordpress/components';
+
+/**
+ * Global variable from PHP
+ */
+import { MULTISITES, API_NAMESPACE, NONCE } from '../../js/constants';
+
+/**
+ * SiteTypeSelector component for selecting site type.
+ *
+ * @param {Object}   props                  - Component properties.
+ * @param {string}   props.value            - Current selected value.
+ * @param {Function} props.setGoverningSite - Function to set governing site.
+ *
+ * @return {JSX.Element} Rendered component.
+ */
+const SiteTypeSelector = ( { value, setGoverningSite } ) => (
+	<SelectControl
+		label={ __( 'Select Governing Site', 'onedesign' ) }
+		value={ value }
+		help={ __( 'Choose governing site from current multisite network. Other sites will be set as brand sites. This setting cannot be changed later and affects available features and configurations.', 'onedesign' ) }
+		onChange={ ( v ) => {
+			setGoverningSite( v );
+		} }
+		options={ [
+			{ label: __( 'Select…', 'onedesign' ), value: '' },
+			...MULTISITES.map( ( site ) => ( { label: site.name, value: site.id } ) ),
+		] }
+	/>
+);
+
+/**
+ * Site type selection component for OneDesign Multisite setup.
+ *
+ * @return {JSX.Element} Rendered component.
+ */
+const OneDesignMultisiteGoverningSiteSelection = () => {
+	const [ governingSite, setGoverningSite ] = useState( '' );
+	const currentGoverningSiteID = useRef( '' );
+	const [ notice, setNotice ] = useState( null );
+	const [ isSaving, setIsSaving ] = useState( false );
+
+	const fetchCurrentGoverningSite = useCallback( async () => {
+		try {
+			const response = await fetch(
+				`${ API_NAMESPACE }/multisite/governing-site`,
+				{
+					headers: {
+						'Content-Type': 'application/json',
+						'X-WP-NONCE': NONCE,
+					},
+				},
+			);
+
+			if ( ! response.ok ) {
+				setNotice( {
+					type: 'error',
+					message: __( 'Error fetching current governing site.', 'onedesign' ),
+				} );
+				return;
+			}
+
+			const data = await response.json();
+			if ( data?.governing_site ) {
+				setGoverningSite( data.governing_site );
+				currentGoverningSiteID.current = data.governing_site;
+			}
+			return;
+		} catch {
+			setNotice( {
+				type: 'error',
+				message: __( 'Error fetching current governing site.', 'onedesign' ),
+			} );
+		}
+	}, [] );
+
+	useEffect( () => {
+		fetchCurrentGoverningSite();
+	}, [] ); // eslint-disable-line react-hooks/exhaustive-deps
+
+	const handleGoverningSiteChange = useCallback( async ( value ) => {
+		setGoverningSite( value );
+		currentGoverningSiteID.current = value;
+		setIsSaving( true );
+
+		try {
+			const response = await fetch( `${ API_NAMESPACE }/multisite/governing-site`, {
+				method: 'POST',
+				headers: {
+					'Content-Type': 'application/json',
+					'X-WP-NONCE': NONCE,
+				},
+				body: JSON.stringify( { governing_site_id: value } ),
+			} );
+
+			if ( ! response.ok ) {
+				setNotice( {
+					type: 'error',
+					message: __( 'Error setting governing site.', 'onedesign' ),
+				} );
+				setIsSaving( false );
+				return;
+			}
+
+			setNotice( {
+				type: 'success',
+				message: __( 'Governing site updated successfully.', 'onedesign' ),
+			} );
+
+			setTimeout( () => {
+				setIsSaving( false );
+				window.location.reload();
+			}, 1000 );
+			return;
+		} catch {
+			setNotice( {
+				type: 'error',
+				message: __( 'Error setting governing site.', 'onedesign' ),
+			} );
+		} finally {
+			setIsSaving( false );
+		}
+	}, [] );
+
+	return (
+		<>
+			<Card>
+				<>
+					{ notice?.message?.length > 0 &&
+					<Notice
+						status={ notice?.type ?? 'success' }
+						isDismissible={ true }
+						onRemove={ () => setNotice( null ) }
+					>
+						{ notice?.message }
+					</Notice>
+					}
+				</>
+				<CardHeader>
+					<h2>{ __( 'OneDesign', 'onedesign' ) }</h2>
+				</CardHeader>
+				<CardBody>
+					<SiteTypeSelector value={ governingSite } setGoverningSite={ setGoverningSite } />
+					<Button
+						variant="primary"
+						onClick={ () => handleGoverningSiteChange( governingSite ) }
+						disabled={ isSaving || governingSite.trim().length === 0 || governingSite === currentGoverningSiteID.current }
+						style={ { marginTop: '1.5rem' } }
+						isBusy={ isSaving }
+					>
+						{ __( 'Select Governing Site', 'onedesign' ) }
+					</Button>
+				</CardBody>
+			</Card>
+		</>
+	);
+};
+
+// Render to Gutenberg admin page with ID: onedesign-multisite-selection-modal
+const target = document.getElementById( 'onedesign-multisite-selection-modal' );
+if ( target ) {
+	const root = createRoot( target );
+	root.render( <OneDesignMultisiteGoverningSiteSelection /> );
+}

assets/src/admin/patterns/components/AppliedPatternsTab.js

@@ -206,10 +206,9 @@ const AppliedPatternsTab = memo( ( {
 						variant="secondary"
 						isDestructive
 						disabled={ selectedPatternsToRemove.length === 0 || isRemoving }
+						isBusy={ isRemoving }
 					>
-						{ isRemoving
-							? __( 'Removing…', 'onedesign' )
-							: __( 'Remove Selected Patterns', 'onedesign' ) }
+						{ __( 'Remove Selected Patterns', 'onedesign' ) }
 					</Button>
 				</div>
 			</div>
@@ -222,10 +221,9 @@ const AppliedPatternsTab = memo( ( {
 				>
 					<div className="od-pattern-removal-modal-content">
 						<p>
-							{ __(
-								'Are you sure you want to remove the selected patterns? This action cannot be undone.',
-								'onedesign',
-							) }
+							{ __( 'Are you sure you want to remove selected patterns?', 'onedesign' ) }
+							<br />
+							{ __( 'Once you remove a pattern you won\'t be able to use it on brand sites, so please check and confirm you don\'t require it.', 'onedesign' ) }
 						</p>
 						<div className="od-pattern-removal-modal-actions">
 							<Button

assets/src/admin/patterns/components/BasePatternsTab.js

@@ -238,11 +238,9 @@ const BasePatternsTab = memo(
 								onClick={ handleApplyPatterns }
 								disabled={ isApplying || ! isSiteSelected }
 								className="od-apply-button"
+								isBusy={ isApplying }
 							>
-								{ isApplying && <Spinner /> }
-								{ isApplying
-									? __( 'Applying…', 'onedesign' )
-									: __( 'Apply Patterns', 'onedesign' ) }
+								{ __( 'Apply Patterns', 'onedesign' ) }
 							</Button>
 						) }
 					</div>

assets/src/admin/settings/index.js

@@ -164,7 +164,15 @@ const OneDesignSettingsPage = () => {
 			}
 
 			{ siteType === 'governing-site' && (
-				<SiteTable sites={ sites } onEdit={ setEditingIndex } onDelete={ handleDelete } setFormData={ setFormData } setShowModal={ setShowModal } />
+				<SiteTable
+					sites={ sites }
+					onEdit={ setEditingIndex }
+					onDelete={ handleDelete }
+					setFormData={ setFormData }
+					setShowModal={ setShowModal }
+					setSites={ setSites }
+					setNotice={ setNotice }
+				/>
 			) }
 
 			{ showModal && (