Merge pull request #28 from bigbite/feature/bbt-101-filter-component

[BBT-101] Filter UI component

src/editor/components/BlocksItem.js

@@ -1,5 +1,6 @@
 import Border from './StylesBorder';
 import Color from './StylesColor';
+import Filter from './StylesFilter';
 import Spacing from './StylesSpacing';
 import Dimensions from './StylesDimensions';
 import Outline from './StylesOutline';
@@ -27,6 +28,10 @@ const BlocksItem = ( { block, themeConfig } ) => {
 		[ ...blockSelector, 'color' ].join( '.' ),
 		themeConfig
 	);
+	const hasFilterStyles = getThemeOption(
+		[ ...blockSelector, 'filter' ].join( '.' ),
+		themeConfig
+	);
 	const hasSpacingStyles = getThemeOption(
 		[ ...blockSelector, 'spacing' ].join( '.' ),
 		themeConfig
@@ -58,6 +63,11 @@ const BlocksItem = ( { block, themeConfig } ) => {
 						selector={ [ ...blockSelector, 'color' ].join( '.' ) }
 					/>
 				) }
+				{ hasFilterStyles && (
+					<Filter
+						selector={ [ ...blockSelector, 'filter' ].join( '.' ) }
+					/>
+				) }
 				{ hasSpacingStyles && (
 					<Spacing
 						selector={ [ ...blockSelector, 'spacing' ].join( '.' ) }

src/editor/components/StylesFilter.js

@@ -1,8 +1,70 @@
+import { __ } from '@wordpress/i18n';
+import { set, union } from 'lodash';
+import { useContext } from '@wordpress/element';
+import { DuotonePicker } from '@wordpress/components';
+
+import getThemeOption from '../../utils/get-theme-option';
+import EditorContext from '../context/EditorContext';
+import StylesContext from '../context/StylesContext';
+import { varToDuotone, duotoneToVar } from '../../utils/block-helpers';
+
 /**
  * Reusable filter control style component
+ *
+ * @param {Object} props          Component props
+ * @param {string} props.selector Property target selector
  */
-const Filter = () => {
-	return <h3>Filter Component</h3>;
+const Filter = ( { selector } ) => {
+	const { themeConfig } = useContext( EditorContext );
+	const { setUserConfig } = useContext( StylesContext );
+	const duotoneThemeObj = getThemeOption(
+		'settings.color.duotone',
+		themeConfig
+	);
+	const duotonePalettes = Object.keys( duotoneThemeObj );
+	let duotoneOptions = [];
+	duotonePalettes.forEach(
+		( palette ) =>
+			( duotoneOptions = union(
+				duotoneOptions,
+				duotoneThemeObj[ palette ]
+			) )
+	);
+
+	if ( duotoneOptions.length === 0 ) {
+		return null;
+	}
+
+	const filterStyles = getThemeOption( selector, themeConfig );
+
+	/**
+	 * Updates the theme config with the new value.
+	 *
+	 * @param {string} newVal - The new value.
+	 */
+	const handleNewValue = ( newVal ) => {
+		filterStyles.duotone = duotoneToVar( newVal, duotoneOptions );
+		let config = structuredClone( themeConfig );
+		config = set( config, selector, filterStyles );
+		setUserConfig( config );
+	};
+
+	return (
+		<>
+			<span className="themer--blocks-item-component--styles--title is-filter">
+				{ __( 'Filter', 'themer' ) }
+			</span>
+			<DuotonePicker
+				duotonePalette={ duotoneOptions }
+				onChange={ handleNewValue }
+				value={ varToDuotone( filterStyles?.duotone, duotoneOptions ) }
+				disableCustomColors={ true }
+				disableCustomDuotones={ true }
+				clearable={ false }
+				unsetable={ false }
+			/>
+		</>
+	);
 };
 
 export default Filter;

src/editor/styles/components/blocks.scss

@@ -59,6 +59,13 @@
 		grid-template-columns: 47.5% 47.5%;
 	}
 
+	// Hide the custom color picker from the duotone picker.
+	.themer--blocks-item-component--styles--title.is-filter
+		~ .components-circular-option-picker
+		.components-color-list-picker {
+		display: none;
+	}
+
 	@container (max-width: 540px) {
 		.themer--blocks-item-component--columns-2 {
 			display: flex;

src/utils/block-helpers.js

@@ -113,6 +113,51 @@ export const hexToVar = ( cssHex, themePalette ) => {
 		: cssHex;
 };
 
+/**
+ * Converts a css variable to a duotone colour array.
+ *
+ * @param {string} cssVar              The css variable to convert.
+ * @param {Array}  themeDuotoneOptions The theme duotone options.
+ * @return {Array} The duotone colors array.
+ */
+export const varToDuotone = ( cssVar, themeDuotoneOptions ) => {
+	if ( ! cssVar ) {
+		return cssVar;
+	}
+
+	const slug = cssVar.replace( /var\(--wp--preset--duotone--(.+?)\)/g, '$1' );
+
+	const duotone = themeDuotoneOptions?.find( ( option ) => {
+		return option.slug === slug;
+	} );
+
+	return duotone?.colors || themeDuotoneOptions?.[ 0 ]?.colors;
+};
+
+/**
+ * Converts a duotone colors array to a css variable.
+ *
+ * @param {Array} duotoneColors       The duotone colors array.
+ * @param {Array} themeDuotoneOptions The theme duotone options.
+ * @return {string} The css variable.
+ */
+export const duotoneToVar = ( duotoneColors, themeDuotoneOptions ) => {
+	if ( ! duotoneColors || duotoneColors?.length !== 2 ) {
+		return duotoneColors;
+	}
+
+	const duotoneObj = themeDuotoneOptions?.find( ( option ) => {
+		return (
+			option.colors.includes( duotoneColors[ 0 ] ) &&
+			option.colors.includes( duotoneColors[ 1 ] )
+		);
+	} );
+
+	return duotoneObj?.slug
+		? `var(--wp--preset--duotone--${ duotoneObj.slug })`
+		: '';
+};
+
 /**
  * Returns if a value is in the format of css unit.
  * This will pass on any combination of an optional '-' and number followed by x number of letters, so its recommended to use this with another check on the specific units you want to support.