Enable adjustment of 'settings' values

src/editor/components/CodeView.js

@@ -28,6 +28,14 @@ const CodeView = ( { themeConfig } ) => {
 			return rest;
 		}
 
+		/**
+		 * If the current location is the site settings path, return the entire
+		 * settings object.
+		 */
+		if ( location.path === '/settings' ) {
+			const { blocks, elements, ...rest } = themeConfig.settings;
+			return rest;
+		}
 		/**
 		 * Remove the leading slash from the path so we don't end up with
 		 * an empty string as the first part of the pathParts array.

src/editor/components/ComponentSettings/Settings.js

@@ -0,0 +1,177 @@
+import { Panel, PanelBody } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useContext } from '@wordpress/element';
+
+import EditorContext from '../../context/EditorContext';
+
+import SettingsAppearanceTools from './SettingsAppearanceTools';
+import SettingsBorder from './SettingsBorder';
+import SettingsColor from './SettingsColor';
+import SettingsCustomCSS from './SettingsCustomCSS';
+import SettingsLayout from './SettingsLayout';
+import SettingsSpacing from './SettingsSpacing';
+import TypographySettings from './TypographySettings';
+import SettingsDimensions from './SettingsDimensions';
+import SettingsShadow from './SettingsShadow';
+import SettingsPosition from './SettingsPosition';
+import SettingsBackground from './SettingsBackground';
+
+/**
+ * Settings component
+ *
+ * This component will render the settings components for the given selector.
+ *
+ *
+ * @param {Object} props          Component props
+ * @param {string} props.selector Selector for settings object within theme config
+ */
+const Settings = ( { selector } ) => {
+	const { schema } = useContext( EditorContext );
+
+	if ( ! selector ) {
+		return;
+	}
+
+	const definitions = schema?.definitions;
+
+	return (
+		<div className="themer--settings">
+			<Panel header={ __( 'Site Settings', 'themer' ) }>
+				<PanelBody
+					title={ __( 'Appearance Tools', 'themer' ) }
+					initialOpen={ false }
+				>
+					<SettingsAppearanceTools
+						selector={ `${ selector }` }
+						description={
+							definitions?.settingsAppearanceToolsProperties
+								?.properties?.appearanceTools?.description
+						}
+					/>
+				</PanelBody>
+				<PanelBody
+					title={ __( 'Border Settings', 'themer' ) }
+					initialOpen={ false }
+				>
+					<SettingsBorder
+						selector={ `${ selector }.border` }
+						description={
+							definitions?.settingsBorderProperties?.properties
+								?.border?.description
+						}
+					/>
+				</PanelBody>
+				<PanelBody
+					title={ __( 'Color Settings', 'themer' ) }
+					initialOpen={ false }
+				>
+					<SettingsColor
+						selector={ `${ selector }.color` }
+						description={
+							definitions?.settingsColorProperties?.properties
+								?.color?.description
+						}
+					/>
+				</PanelBody>
+				<PanelBody
+					title={ __( 'Custom CSS', 'themer' ) }
+					initialOpen={ false }
+				>
+					<SettingsCustomCSS
+						selector={ `${ selector }.custom` }
+						description={
+							definitions?.settingsCustomAdditionalProperties
+								?.description
+						}
+					/>
+				</PanelBody>
+				<PanelBody
+					title={ __( 'Layout Settings', 'themer' ) }
+					initialOpen={ false }
+				>
+					<SettingsLayout
+						selector={ `${ selector }.layout` }
+						description={
+							definitions?.settingsLayoutProperties?.properties
+								?.layout?.description
+						}
+					/>
+				</PanelBody>
+				<PanelBody
+					title={ __( 'Spacing Settings', 'themer' ) }
+					initialOpen={ false }
+				>
+					<SettingsSpacing
+						selector={ `${ selector }.spacing` }
+						description={
+							definitions?.settingsSpacingProperties?.properties
+								?.spacing?.description
+						}
+					/>
+				</PanelBody>
+				<PanelBody
+					title={ __( 'Typography Settings', 'themer' ) }
+					initialOpen={ false }
+				>
+					<TypographySettings
+						selector={ `${ selector }.typography` }
+						description={
+							definitions?.settingsTypographyProperties
+								?.properties?.typography?.description
+						}
+					/>
+				</PanelBody>
+				<PanelBody
+					title={ __( 'Dimensions Settings', 'themer' ) }
+					initialOpen={ false }
+				>
+					<SettingsDimensions
+						selector={ `${ selector }.dimensions` }
+						description={
+							definitions?.settingsDimensionsProperties
+								?.properties?.dimensions?.description
+						}
+					/>
+				</PanelBody>
+				<PanelBody
+					title={ __( 'Shadow Settings', 'themer' ) }
+					initialOpen={ false }
+				>
+					<SettingsShadow
+						selector={ `${ selector }.shadow` }
+						description={
+							definitions?.settingsShadowProperties?.properties
+								?.shadow?.description
+						}
+					/>
+				</PanelBody>
+				<PanelBody
+					title={ __( 'Position Settings', 'themer' ) }
+					initialOpen={ false }
+				>
+					<SettingsPosition
+						selector={ `${ selector }.position` }
+						description={
+							definitions?.settingsPositionProperties?.properties
+								?.position?.description
+						}
+					/>
+				</PanelBody>
+				<PanelBody
+					title={ __( 'Background Settings', 'themer' ) }
+					initialOpen={ false }
+				>
+					<SettingsBackground
+						selector={ `${ selector }.background` }
+						description={
+							definitions?.settingsBackgroundProperties
+								?.properties?.background?.description
+						}
+					/>
+				</PanelBody>
+			</Panel>
+		</div>
+	);
+};
+
+export default Settings;

src/editor/components/ComponentSettings/SettingsAppearanceTools.js

@@ -0,0 +1,56 @@
+import { set } from 'lodash';
+import { __ } from '@wordpress/i18n';
+import { useContext } from '@wordpress/element';
+import { ToggleControl } from '@wordpress/components';
+
+import getThemeOption from '../../../utils/get-theme-option';
+import EditorContext from '../../context/EditorContext';
+import StylesContext from '../../context/StylesContext';
+
+/**
+ * Component for site appearance settings
+ *
+ * @param {Object} props             Component props
+ * @param {string} props.selector    Property target selector
+ * @param {string} props.description Property description
+ */
+const SettingsAppearanceTools = ( { selector, description } ) => {
+	const { userConfig, themeConfig } = useContext( EditorContext );
+	const { setUserConfig } = useContext( StylesContext );
+	const value = getThemeOption( selector, themeConfig ) || {};
+
+	const handleNewValue = ( newValue, key ) => {
+		let config = structuredClone( userConfig );
+		config = set( config, [ selector, key ].join( '.' ), newValue );
+		setUserConfig( config );
+	};
+
+	return (
+		<>
+			<span className="themer--settings__item__title">
+				{ __( 'Appearance Tools', 'themer' ) }
+			</span>
+			{ description && (
+				<p className="themer--settings__item__description">
+					{ description }
+				</p>
+			) }
+			<ToggleControl
+				label={ __( 'Appearance Tools', 'themer' ) }
+				checked={ value?.appearanceTools }
+				onChange={ ( newValue ) =>
+					handleNewValue( newValue, 'appearanceTools' )
+				}
+			/>
+			<ToggleControl
+				label={ __( 'Use Root Padding Aware Alignments', 'themer' ) }
+				checked={ value?.useRootPaddingAwareAlignments }
+				onChange={ ( newValue ) =>
+					handleNewValue( newValue, 'useRootPaddingAwareAlignments' )
+				}
+			/>
+		</>
+	);
+};
+
+export default SettingsAppearanceTools;

src/editor/components/ComponentSettings/SettingsBackground.js

@@ -0,0 +1,56 @@
+import { set } from 'lodash';
+import { __ } from '@wordpress/i18n';
+import { useContext } from '@wordpress/element';
+import { ToggleControl } from '@wordpress/components';
+
+import getThemeOption from '../../../utils/get-theme-option';
+import EditorContext from '../../context/EditorContext';
+import StylesContext from '../../context/StylesContext';
+
+/**
+ * Component for background settings
+ *
+ * @param {Object} props             Component props
+ * @param {string} props.selector    Property target selector
+ * @param {string} props.description Property description
+ */
+const BackgroundSettings = ( { selector, description } ) => {
+	const { userConfig, themeConfig } = useContext( EditorContext );
+	const { setUserConfig } = useContext( StylesContext );
+	const value = getThemeOption( selector, themeConfig ) || {};
+
+	const handleNewValue = ( newValue, key ) => {
+		let config = structuredClone( userConfig );
+		config = set( config, [ selector, key ].join( '.' ), newValue );
+		setUserConfig( config );
+	};
+
+	return (
+		<>
+			<span className="themer--settings__item__title">
+				{ __( 'Background', 'themer' ) }
+			</span>
+			{ description && (
+				<p className="themer--settings__item__description">
+					{ description }
+				</p>
+			) }
+			<ToggleControl
+				label={ __( 'Background Image', 'themer' ) }
+				checked={ value?.backgroundImage }
+				onChange={ ( newValue ) =>
+					handleNewValue( newValue, 'backgroundImage' )
+				}
+			/>
+			<ToggleControl
+				label={ __( 'Background Size', 'themer' ) }
+				checked={ value?.backgroundSize }
+				onChange={ ( newValue ) =>
+					handleNewValue( newValue, 'backgroundSize' )
+				}
+			/>
+		</>
+	);
+};
+
+export default BackgroundSettings;

src/editor/components/ComponentSettings/SettingsBorder.js

@@ -0,0 +1,64 @@
+import { set } from 'lodash';
+import { __ } from '@wordpress/i18n';
+import { useContext } from '@wordpress/element';
+import { ToggleControl } from '@wordpress/components';
+
+import getThemeOption from '../../../utils/get-theme-option';
+import EditorContext from '../../context/EditorContext';
+import StylesContext from '../../context/StylesContext';
+
+/**
+ * Component for border settings
+ *
+ * @param {Object} props             Component props
+ * @param {string} props.selector    Property target selector
+ * @param {string} props.description Property description
+ */
+const SettingsBorder = ( { selector, description } ) => {
+	const { userConfig, themeConfig } = useContext( EditorContext );
+	const { setUserConfig } = useContext( StylesContext );
+	const value = getThemeOption( selector, themeConfig ) || {};
+
+	const handleNewValue = ( newValue, key ) => {
+		let config = structuredClone( userConfig );
+		config = set( config, [ selector, key ].join( '.' ), newValue );
+		setUserConfig( config );
+	};
+
+	return (
+		<>
+			<span className="themer--settings__item__title">
+				{ __( 'Border Settings', 'themer' ) }
+			</span>
+			{ description && (
+				<p className="themer--settings__item__description">
+					{ description }
+				</p>
+			) }
+			<ToggleControl
+				label={ __( 'Color', 'themer' ) }
+				checked={ value?.color }
+				onChange={ ( newValue ) => handleNewValue( newValue, 'color' ) }
+			/>
+			<ToggleControl
+				label={ __( 'Radius', 'themer' ) }
+				checked={ value?.radius }
+				onChange={ ( newValue ) =>
+					handleNewValue( newValue, 'radius' )
+				}
+			/>
+			<ToggleControl
+				label={ __( 'Style', 'themer' ) }
+				checked={ value?.style }
+				onChange={ ( newValue ) => handleNewValue( newValue, 'style' ) }
+			/>
+			<ToggleControl
+				label={ __( 'Width', 'themer' ) }
+				checked={ value?.width }
+				onChange={ ( newValue ) => handleNewValue( newValue, 'width' ) }
+			/>
+		</>
+	);
+};
+
+export default SettingsBorder;