[BBT-76] Schema UI - Border Component

src/editor/components/Blocks.js

@@ -0,0 +1,48 @@
+import { __ } from '@wordpress/i18n';
+import { useState, useContext } from '@wordpress/element';
+
+import Search from './Search';
+import BlocksItem from './BlocksItem';
+import EditorContext from '../context/EditorContext';
+import { getCoreBlocks } from '../../utils/block-helpers';
+
+/**
+ * Blocks tab menu component
+ */
+const Blocks = () => {
+	const { themeConfig, schema } = useContext( EditorContext );
+	const [ searchValue, setSearchValue ] = useState();
+
+	return (
+		<section className="themer--blocks-component">
+			<h2>{ __( 'Blocks', 'themer' ) }</h2>
+			<p>
+				{ __(
+					'Customise the appearance of specific blocks for the whole site.',
+					'themer'
+				) }
+			</p>
+			<Search setValue={ setSearchValue } />
+			{ getCoreBlocks( undefined, themeConfig, schema )?.map(
+				( block ) => {
+					if (
+						searchValue?.length > 0 &&
+						! block.toLowerCase().includes( searchValue )
+					) {
+						return false;
+					}
+
+					return (
+						<BlocksItem
+							key={ block }
+							block={ block }
+							themeConfig={ themeConfig }
+						/>
+					);
+				}
+			) }
+		</section>
+	);
+};
+
+export default Blocks;

src/editor/components/BlocksItem.js

@@ -0,0 +1,36 @@
+import Border from './StylesBorder';
+import getThemeOption from '../../utils/get-theme-option';
+
+/**
+ * Individual block item
+ *
+ * @param {Object} props             Component props
+ * @param {string} props.block       Block name
+ * @param {Object} props.themeConfig Theme JSON
+ */
+const BlocksItem = ( { block, themeConfig } ) => {
+	if ( ! block ) {
+		return;
+	}
+
+	const blockSelector = [ 'styles', 'blocks', block ];
+	const hasBorderStyles = getThemeOption(
+		[ ...blockSelector, 'border' ].join( '.' ),
+		themeConfig
+	);
+
+	return (
+		<details className="themer--blocks-item-component">
+			<summary>{ block }</summary>
+			<div className="themer--blocks-item-component--styles">
+				{ hasBorderStyles && (
+					<Border
+						selector={ [ ...blockSelector, 'border' ].join( '.' ) }
+					/>
+				) }
+			</div>
+		</details>
+	);
+};
+
+export default BlocksItem;

src/editor/components/Colours.js

@@ -0,0 +1,6 @@
+/**
+ * Colours tab menu component
+ */
+const Colours = () => <p>Colours Tab</p>;
+
+export default Colours;

src/editor/components/ComponentWrapper.js

@@ -1,4 +1,4 @@
-import ThemerComponent from './fields/ThemerComponent';
+import ThemerComponent from './ThemerComponent';
 
 /**
  * Wrapper for app

src/editor/components/CustomBlocks.js

@@ -0,0 +1,6 @@
+/**
+ * Custom Blocks tab menu component
+ */
+const CustomBlock = () => <p>Custom Block Tab</p>;
+
+export default CustomBlock;

src/editor/components/Layout.js

@@ -0,0 +1,6 @@
+/**
+ * Layout tab menu component
+ */
+const Layout = () => <p>Layout Tab</p>;
+
+export default Layout;

src/editor/components/Search.js

@@ -0,0 +1,24 @@
+/**
+ * Search component
+ *
+ * @param {Object}   props             Component props
+ * @param {Function} props.setValue    Input on change function
+ * @param {string}   props.placeholder Placeholder attribute value
+ */
+const Search = ( { setValue, placeholder = 'Search' } ) => {
+	const handleSearch = ( event ) => {
+		setValue( event?.target?.value?.toLowerCase().trim() );
+	};
+
+	return (
+		<p className="themer--search-component">
+			<input
+				type="text"
+				onChange={ ( event ) => handleSearch( event ) }
+				placeholder={ placeholder }
+			/>
+		</p>
+	);
+};
+
+export default Search;

src/editor/components/StylesBorder.js

@@ -0,0 +1,43 @@
+/* eslint-disable @wordpress/no-unsafe-wp-apis */
+
+import { set } from 'lodash';
+import { __ } from '@wordpress/i18n';
+import { useContext } 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 onChange = ( newValue ) => {
+		let config = structuredClone( themeConfig );
+		config = set( config, selector, newValue );
+		setUserConfig( config );
+	};
+
+	return (
+		<BorderBoxControl
+			colors={ colors }
+			label={ __( 'Borders', 'themer' ) }
+			onChange={ onChange }
+			value={ value }
+		/>
+	);
+};
+
+export default Border;

src/editor/components/StylesColour.js

@@ -0,0 +1,8 @@
+/**
+ * Reusable colour control style component
+ */
+const Colour = () => {
+	return <h3>Colour Component</h3>;
+};
+
+export default Colour;

src/editor/components/StylesDimensions.js

@@ -0,0 +1,8 @@
+/**
+ * Reusable dimensions control style component
+ */
+const Dimensions = () => {
+	return <h3>Dimensions Component</h3>;
+};
+
+export default Dimensions;

src/editor/components/StylesFilter.js

@@ -0,0 +1,8 @@
+/**
+ * Reusable filter control style component
+ */
+const Filter = () => {
+	return <h3>Filter Component</h3>;
+};
+
+export default Filter;

src/editor/components/StylesOutline.js

@@ -0,0 +1,8 @@
+/**
+ * Reusable outline control style component
+ */
+const Outline = () => {
+	return <h3>Outline Component</h3>;
+};
+
+export default Outline;

src/editor/components/StylesShadow.js

@@ -0,0 +1,8 @@
+/**
+ * Reusable shadow control style component
+ */
+const Shadow = () => {
+	return <h3>Shadow Component</h3>;
+};
+
+export default Shadow;

src/editor/components/StylesSpacing.js

@@ -0,0 +1,8 @@
+/**
+ * Reusable spacing control style component
+ */
+const Spacing = () => {
+	return <h3>Spacing Component</h3>;
+};
+
+export default Spacing;

src/editor/components/StylesTypography.js

@@ -0,0 +1,8 @@
+/**
+ * Reusable typography control style component
+ */
+const Typography = () => {
+	return <h3>Typography Component</h3>;
+};
+
+export default Typography;