[BBT-76] Schema UI - Border Component

src/editor/components/fields/ThemerComponent.js

@@ -1,11 +1,14 @@
 import { mergeWith, isEmpty } from 'lodash';
-import { Button, Spinner, TabPanel } from '@wordpress/components';
+import { Button, Spinner } from '@wordpress/components';
 import { useSelect, dispatch } from '@wordpress/data';
 import { useEffect, useState, useMemo } from '@wordpress/element';
 import apiFetch from '@wordpress/api-fetch';
 
+import schemaComponents from '../../ui/utils/schema-to-components';
+import EditorContext from '../../context/EditorContext';
+import StylesContext from '../../context/StylesContext';
+
 import Preview from './Preview';
-import Fields from './Fields';
 import ResponsiveButton from './ResponsiveButton';
 import ButtonExport from '../ButtonExport';
 
@@ -16,6 +19,15 @@ const ThemerComponent = () => {
 	const [ previewCss, setPreviewCss ] = useState( '' );
 	const [ previewSize, setPreviewSize ] = useState();
 
+	const setUserConfig = ( config ) => {
+		dispatch( 'core' ).editEntityRecord(
+			'root',
+			'globalStyles',
+			globalStylesId,
+			config
+		);
+	};
+
 	const { globalStylesId, baseConfig, userConfig } = useSelect(
 		( select ) => {
 			const {
@@ -73,7 +85,7 @@ const ThemerComponent = () => {
 	 * saves edited entity data
 	 */
 	const save = async () => {
-		dispatch( 'core' ).undo();
+		// dispatch( 'core' ).undo();
 		try {
 			await dispatch( 'core' ).saveEditedEntityRecord(
 				'root',
@@ -98,6 +110,18 @@ const ThemerComponent = () => {
 		);
 	};
 
+	/* TODO: refactor */
+	const [ components, setComponents ] = useState( {} );
+	useEffect( () => {
+		const generate = async () => {
+			const mappedComponents = await schemaComponents();
+			setComponents( mappedComponents );
+		};
+
+		generate();
+	}, [] );
+	const { border: Border } = components?.styles ?? {};
+
 	if ( ! themeConfig || ! previewCss ) {
 		return (
 			<>
@@ -108,13 +132,30 @@ const ThemerComponent = () => {
 
 	return (
 		<>
+			<style>{ previewCss }</style>
 			<div className="themer-topbar">
 				<Button isSecondary onClick={ () => reset() } text="Reset" />
 				<Button isPrimary onClick={ () => save() } text="Save" />
 			</div>
 			<div className="themer-body">
 				<div className="themer-nav-container">
-					<TabPanel
+					{ /* demo */ }
+					<EditorContext.Provider
+						value={ {
+							globalStylesId,
+							themeConfig,
+						} }
+					>
+						<StylesContext.Provider
+							value={ {
+								setUserConfig,
+							} }
+						>
+							<Border selector="styles.blocks.core/pullquote.border" />
+						</StylesContext.Provider>
+					</EditorContext.Provider>
+					{ /* demo */ }
+					{ /* <TabPanel
 						className="themer-tab-panel"
 						activeClass="active-themer-tab"
 						tabs={ [
@@ -141,7 +182,7 @@ const ThemerComponent = () => {
 								<Fields sourceObject={ themeConfig } />
 							</>
 						) }
-					</TabPanel>
+					</TabPanel> */ }
 				</div>
 				<div className="themer-preview-container">
 					<ResponsiveButton

src/editor/context/EditorContext.js

@@ -0,0 +1,6 @@
+import { createContext } from '@wordpress/element';
+
+/**
+ * Sets a default context for use as state management across the plugin
+ */
+export default createContext();

src/editor/context/StylesContext.js

@@ -0,0 +1,6 @@
+import { createContext } from '@wordpress/element';
+
+/**
+ * Sets a default context for use as state management across the plugin
+ */
+export default createContext();

src/editor/ui/components/styles/Border.js

@@ -0,0 +1,50 @@
+/* eslint-disable @wordpress/no-unsafe-wp-apis */
+
+import { set } from 'lodash';
+import { __ } from '@wordpress/i18n';
+import { useContext, useState, useEffect } from '@wordpress/element';
+import { __experimentalBorderBoxControl as BorderBoxControl } from '@wordpress/components';
+
+import getThemeOption from '../../utils/get-theme-option';
+import EditorContext from '../../../context/EditorContext';
+import StylesContext from '../../../context/StylesContext';
+
+/**
+ * Reusable border control style component
+ *
+ * @param {Object} props          Component props
+ * @param {string} props.selector Property target selector
+ */
+const Border = ( { selector } ) => {
+	const { themeConfig } = useContext( EditorContext );
+	const { setUserConfig } = useContext( StylesContext );
+	const value = getThemeOption( selector, themeConfig );
+	const colors = getThemeOption(
+		'settings.color.palette.theme',
+		themeConfig
+	);
+	const [ borders, setBorders ] = useState( value );
+
+	const onChange = ( newValue ) => {
+		setBorders( newValue );
+	};
+
+	useEffect( () => {
+		let config = structuredClone( themeConfig );
+		config = set( config, selector, {} );
+		config = set( config, selector, borders );
+
+		setUserConfig( config );
+	}, [ borders ] );
+
+	return (
+		<BorderBoxControl
+			colors={ colors }
+			label={ __( 'Borders', 'themer' ) }
+			onChange={ onChange }
+			value={ borders }
+		/>
+	);
+};
+
+export default Border;

src/editor/ui/utils/component-map.js

@@ -0,0 +1,13 @@
+import Border from '../components/styles/Border';
+
+/**
+ * Style properties and their corresponding React components
+ */
+export const styleComponentMap = {
+	border: Border,
+};
+
+/**
+ * Settings properties and their corresponding React components
+ */
+export const settingComponentMap = {};

src/editor/ui/utils/get-theme-option.js

@@ -0,0 +1,14 @@
+/**
+ * Returns the value of the specified selector from the base object
+ *
+ * @param {string} selector Property target selector
+ * @param {Object} base     Theme settings
+ *
+ * @return {*} Value of selector
+ */
+const getThemeOption = ( selector, base ) => {
+	const selectorArray = selector.split( '.' );
+	return selectorArray.reduce( ( acc, curr ) => acc[ curr ], base );
+};
+
+export default getThemeOption;

src/editor/ui/utils/schema-to-components.js

@@ -0,0 +1,57 @@
+import { styleComponentMap } from './component-map';
+
+/**
+ * Maps style properties to React components
+ *
+ * @param {Object} components Theme to React component map
+ * @param {Object} properties Theme style allowed properties
+ */
+const generateStyleComponents = ( components, properties ) => {
+	if ( ! properties ) {
+		return;
+	}
+
+	for ( const property in properties ) {
+		const style = styleComponentMap?.[ property ];
+
+		if ( ! style ) {
+			continue;
+		}
+
+		components.styles[ property ] = style;
+	}
+};
+
+/**
+ * Generates React components for parts of the theme.json schema
+ *
+ * @return {Object} Mapped components
+ */
+const schemaComponents = async () => {
+	const url =
+		'https://github.com/raw/WordPress/gutenberg/trunk/schemas/json/theme.json';
+
+	try {
+		const response = await fetch( url );
+		const components = { settings: {}, styles: {} };
+
+		if ( ! response?.ok ) {
+			throw new Error(
+				`${ response?.status } ${ response?.statusText }`
+			);
+		}
+
+		const schema = await response.json();
+
+		generateStyleComponents(
+			components,
+			schema?.definitions?.stylesProperties?.properties
+		);
+
+		return components;
+	} catch ( error ) {
+		console.error( error ); // eslint-disable-line no-console -- Output of caught error
+	}
+};
+
+export default schemaComponents;