[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;