feature/94-adjust-settings

src/editor/components/ComponentSettings/BlockSettingItem.js

@@ -0,0 +1,43 @@
+import { __experimentalHeading as Heading, Icon } from '@wordpress/components';
+import { useContext } from '@wordpress/element';
+
+import Settings from './Settings';
+
+import EditorContext from '../../context/EditorContext';
+
+import { getCoreBlocksFromSchema } from '../../../utils/block-helpers';
+
+/**
+ * Renders the block styles visible in the styles panel
+ *
+ * @param {Object} props          Component props
+ * @param {string} props.name     Block name
+ * @param {string} props.selector Selector to locate this block in the schema
+ */
+const BlockItem = ( { name, selector } ) => {
+	const { schema } = useContext( EditorContext );
+
+	if ( ! name ) {
+		return;
+	}
+
+	const schemaBlocks = getCoreBlocksFromSchema( schema );
+	const block = schemaBlocks?.find(
+		( schemaBlock ) => schemaBlock.name === name
+	);
+
+	const stylesSelector = `settings.${ selector }`;
+
+	return (
+		<>
+			<span className="themer-styles-heading">
+				<Icon icon={ block.icon.src } size={ 24 } />
+				<Heading level={ 4 }>{ block.title }</Heading>
+			</span>
+			<p>{ block.description }</p>
+			<Settings selector={ stylesSelector } />
+		</>
+	);
+};
+
+export default BlockItem;

src/editor/components/ComponentSettings/Settings.js

@@ -0,0 +1,112 @@
+import { Panel, PanelBody, PanelRow } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+import SettingsComponent from './SettingsComponent';
+import SettingsBorder from './SettingsBorder';
+import SettingsColor from './SettingsColor';
+// import CustomSettings from './CustomSettings';
+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';
+
+/**
+ * Styles component
+ *
+ * This component will render the styles components for the given selector.
+ *
+ * This can be reused with any selector that references the stylesProperties schema object:
+ * https://raw.githubusercontent.com/WordPress/gutenberg/trunk/schemas/json/theme.json
+ *
+ * @param {Object} props          Component props
+ * @param {string} props.selector Selector for styles object within theme config
+ */
+const Styles = ( { selector } ) => {
+	if ( ! selector ) {
+		return;
+	}
+
+	return (
+		<div className="themer--styles">
+			<Panel header={ __( 'Site Settings', 'themer' ) }>
+				<PanelBody
+					title={ __( 'Site Settings', 'themer' ) }
+					initialOpen={ false }
+				>
+					<SettingsComponent selector={ `${ selector }` } />
+				</PanelBody>
+				<PanelBody
+					title={ __( 'Border Settings', 'themer' ) }
+					initialOpen={ false }
+				>
+					<SettingsBorder selector={ `${ selector }.border` } />
+				</PanelBody>
+				<PanelBody
+					title={ __( 'Color Settings', 'themer' ) }
+					initialOpen={ false }
+				>
+					<SettingsColor selector={ `${ selector }.color` } />
+				</PanelBody>
+				<PanelBody
+					title={ __( 'Custom Settings', 'themer' ) }
+					initialOpen={ false }
+				>
+					{ /* <CustomSettings selector={ `${ selector }.custom` } /> */ }
+				</PanelBody>
+				<PanelBody
+					title={ __( 'Layout Settings', 'themer' ) }
+					initialOpen={ false }
+				>
+					<SettingsLayout selector={ `${ selector }.layout` } />
+				</PanelBody>
+				<PanelBody
+					title={ __( 'Spacing Settings', 'themer' ) }
+					initialOpen={ false }
+				>
+					<SettingsSpacing selector={ `${ selector }.spacing` } />
+				</PanelBody>
+				<PanelBody
+					title={ __( 'Typography Settings', 'themer' ) }
+					initialOpen={ true }
+				>
+					<TypographySettings
+						selector={ `${ selector }.typography` }
+					/>
+				</PanelBody>
+				<PanelBody
+					title={ __( 'Dimensions Settings', 'themer' ) }
+					initialOpen={ false }
+				>
+					<SettingsDimensions
+						selector={ `${ selector }.dimensions` }
+					/>
+				</PanelBody>
+				<PanelBody
+					title={ __( 'Shadow Settings', 'themer' ) }
+					initialOpen={ false }
+				>
+					<SettingsShadow selector={ `${ selector }.shadow` } />
+				</PanelBody>
+				<PanelBody
+					title={ __( 'Position Settings', 'themer' ) }
+					initialOpen={ false }
+				>
+					<SettingsPosition selector={ `${ selector }.position` } />
+				</PanelBody>
+				<PanelBody
+					title={ __( 'Background Settings', 'themer' ) }
+					initialOpen={ false }
+				>
+					<SettingsBackground
+						selector={ `${ selector }.background` }
+					/>
+				</PanelBody>
+			</Panel>
+		</div>
+	);
+};
+
+export default Styles;

src/editor/components/ComponentSettings/SettingsBackground.js

@@ -0,0 +1,44 @@
+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';
+
+const BackgroundSettings = ( { selector } ) => {
+	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--styles__item__title">
+				{ __( 'Background', 'themer' ) }
+			</span>
+			<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,58 @@
+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
+ */
+const SettingsBorder = ( { selector } ) => {
+	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--styles__item__title">
+				{ __( 'Border Settings', 'themer' ) }
+			</span>
+			<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;

src/editor/components/ComponentSettings/SettingsColor.js

@@ -0,0 +1,111 @@
+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';
+
+import SettingsDuotoneComponent from './SettingsDuotoneComponent';
+import SettingsGradientsComponent from './SettingsGradientsComponent';
+import SettingsPaletteComponent from './SettingsPaletteComponent';
+
+/**
+ * Component for color settings
+ *
+ * @param {Object} props          Component props
+ * @param {string} props.selector Property target selector
+ */
+const SettingsBorder = ( { selector } ) => {
+	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--styles__item__title">
+				{ __( 'Color Settings', 'themer' ) }
+			</span>
+			<ToggleControl
+				label={ __( 'Background', 'themer' ) }
+				checked={ value?.background }
+				onChange={ ( newValue ) =>
+					handleNewValue( newValue, 'background' )
+				}
+			/>
+			<ToggleControl
+				label={ __( 'Custom', 'themer' ) }
+				checked={ value?.custom }
+				onChange={ ( newValue ) =>
+					handleNewValue( newValue, 'custom' )
+				}
+			/>
+			<ToggleControl
+				label={ __( 'Custom Duotone', 'themer' ) }
+				checked={ value?.customDuotone }
+				onChange={ ( newValue ) =>
+					handleNewValue( newValue, 'customDuotone' )
+				}
+			/>
+			<ToggleControl
+				label={ __( 'Custom Gradient', 'themer' ) }
+				checked={ value?.customGradient }
+				onChange={ ( newValue ) =>
+					handleNewValue( newValue, 'customGradient' )
+				}
+			/>
+			<ToggleControl
+				label={ __( 'Default Duotone', 'themer' ) }
+				checked={ value?.defaultDuotone }
+				onChange={ ( newValue ) =>
+					handleNewValue( newValue, 'defaultDuotone' )
+				}
+			/>
+			<ToggleControl
+				label={ __( 'Default Gradients', 'themer' ) }
+				checked={ value?.defaultGradients }
+				onChange={ ( newValue ) =>
+					handleNewValue( newValue, 'defaultGradients' )
+				}
+			/>
+			<ToggleControl
+				label={ __( 'Default Palette', 'themer' ) }
+				checked={ value?.defaultPalette }
+				onChange={ ( newValue ) =>
+					handleNewValue( newValue, 'defaultPalette' )
+				}
+			/>
+			<SettingsDuotoneComponent
+				label={ __( 'Duotone Settings', 'themer' ) }
+				selector={ `${ selector }.duotone` }
+			/>
+			<SettingsGradientsComponent
+				label={ __( 'Gradient Settings', 'themer' ) }
+				selector={ `${ selector }.gradients` }
+			/>
+			<ToggleControl
+				label={ __( 'Link', 'themer' ) }
+				checked={ value?.link }
+				onChange={ ( newValue ) => handleNewValue( newValue, 'link' ) }
+			/>
+			<SettingsPaletteComponent
+				label={ __( 'Palette Settings', 'themer' ) }
+				selector={ `${ selector }.palette` }
+			/>
+			<ToggleControl
+				label={ __( 'Text', 'themer' ) }
+				checked={ value?.text }
+				onChange={ ( newValue ) => handleNewValue( newValue, 'text' ) }
+			/>
+		</>
+	);
+};
+
+export default SettingsBorder;