From 9602375cdfe3d1426892a1467cf430982f461785 Mon Sep 17 00:00:00 2001 From: Joe Rouse <45216035+Joe-Rouse@users.noreply.github.com> Date: Tue, 10 Oct 2023 14:55:14 +0100 Subject: [PATCH 1/6] feat(bbt-101): add filter UI component --- src/editor/components/BlocksItem.js | 10 ++++ src/editor/components/StylesFilter.js | 64 ++++++++++++++++++++++-- src/editor/styles/components/blocks.scss | 14 ++++-- src/utils/block-helpers.js | 46 +++++++++++++++++ 4 files changed, 127 insertions(+), 7 deletions(-) diff --git a/src/editor/components/BlocksItem.js b/src/editor/components/BlocksItem.js index 8ba5a04..0f42273 100644 --- a/src/editor/components/BlocksItem.js +++ b/src/editor/components/BlocksItem.js @@ -1,5 +1,6 @@ import Border from './StylesBorder'; import Color from './StylesColor'; +import Filter from './StylesFilter'; import getThemeOption from '../../utils/get-theme-option'; /** @@ -23,6 +24,10 @@ const BlocksItem = ( { block, themeConfig } ) => { [ ...blockSelector, 'color' ].join( '.' ), themeConfig ); + const hasFilterStyles = getThemeOption( + [ ...blockSelector, 'filter' ].join( '.' ), + themeConfig + ); return (
@@ -38,6 +43,11 @@ const BlocksItem = ( { block, themeConfig } ) => { selector={ [ ...blockSelector, 'color' ].join( '.' ) } /> ) } + { hasFilterStyles && ( + + ) }
); diff --git a/src/editor/components/StylesFilter.js b/src/editor/components/StylesFilter.js index db61844..75c835b 100644 --- a/src/editor/components/StylesFilter.js +++ b/src/editor/components/StylesFilter.js @@ -1,8 +1,66 @@ +/* eslint-disable jsdoc/check-line-alignment */ +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 + * Reusable spacing control style component + * + * @param {Object} props Component props + * @param {string} props.selector Property target selector */ -const Filter = () => { - return

Filter Component

; +const Filter = ( { selector } ) => { + const { themeConfig } = useContext( EditorContext ); + const { setUserConfig } = useContext( StylesContext ); + const filterStyles = getThemeOption( selector, themeConfig ); + const duotoneThemeObj = getThemeOption( + 'settings.color.duotone', + themeConfig + ); + const duotonePalettes = Object.keys( duotoneThemeObj ); + let duotoneOptions = []; + duotonePalettes.forEach( + ( palette ) => + ( duotoneOptions = union( + duotoneOptions, + duotoneThemeObj[ palette ] + ) ) + ); + + /** + * 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 ( + <> + + { __( 'Filter', 'themer' ) } + + handleNewValue( newVal ) } + value={ varToDuotone( filterStyles?.duotone, duotoneOptions ) } + disableCustomColors={ true } + disableCustomDuotones={ true } + clearable={ false } + unsetable={ false } + /> + + ); }; export default Filter; diff --git a/src/editor/styles/components/blocks.scss b/src/editor/styles/components/blocks.scss index 022be65..c6d708b 100644 --- a/src/editor/styles/components/blocks.scss +++ b/src/editor/styles/components/blocks.scss @@ -48,16 +48,22 @@ line-height: 25.4px; text-transform: uppercase; } - + .themer--blocks-item-component--columns { display: grid; grid-gap: 5%; - } - + } + .themer--blocks-item-component--columns-2 { grid-template-columns: 47.5% 47.5%; } - + + .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 { grid-template-columns: 100%; diff --git a/src/utils/block-helpers.js b/src/utils/block-helpers.js index 96738cb..d8ae03c 100644 --- a/src/utils/block-helpers.js +++ b/src/utils/block-helpers.js @@ -1,3 +1,4 @@ +/* eslint-disable jsdoc/check-line-alignment */ import { select } from '@wordpress/data'; import { getColorObjectByAttributeValues, @@ -111,3 +112,48 @@ export const hexToVar = ( cssHex, themePalette ) => { ? `var(--wp--preset--color--${ colorObj.slug })` : 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 })` + : ''; +}; From 4e9c6802324372fd80d885193dbf52aa24b15c1f Mon Sep 17 00:00:00 2001 From: Joe Rouse <45216035+Joe-Rouse@users.noreply.github.com> Date: Tue, 10 Oct 2023 14:58:36 +0100 Subject: [PATCH 2/6] docs(bbt-101): add comment to CSS --- src/editor/styles/components/blocks.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/editor/styles/components/blocks.scss b/src/editor/styles/components/blocks.scss index c6d708b..7c425c6 100644 --- a/src/editor/styles/components/blocks.scss +++ b/src/editor/styles/components/blocks.scss @@ -58,6 +58,7 @@ 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 { From d183f604390b3e6cad5a0ee5736526393498d4e3 Mon Sep 17 00:00:00 2001 From: Joe Rouse <45216035+Joe-Rouse@users.noreply.github.com> Date: Tue, 10 Oct 2023 15:41:55 +0100 Subject: [PATCH 3/6] feat(bbt-101): don't render anything if there isn't any duotone options --- src/editor/components/StylesFilter.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/editor/components/StylesFilter.js b/src/editor/components/StylesFilter.js index 75c835b..122d860 100644 --- a/src/editor/components/StylesFilter.js +++ b/src/editor/components/StylesFilter.js @@ -33,6 +33,10 @@ const Filter = ( { selector } ) => { ) ) ); + if ( duotoneOptions.length === 0 ) { + return false; + } + /** * Updates the theme config with the new value. * From 2a6ba80af6ceb805d47e3fafdb7dd3b9a3656917 Mon Sep 17 00:00:00 2001 From: Joe Rouse <45216035+Joe-Rouse@users.noreply.github.com> Date: Tue, 10 Oct 2023 15:46:42 +0100 Subject: [PATCH 4/6] refactor(bbt-101): move return false further down --- src/editor/components/StylesFilter.js | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/src/editor/components/StylesFilter.js b/src/editor/components/StylesFilter.js index 122d860..4103bd2 100644 --- a/src/editor/components/StylesFilter.js +++ b/src/editor/components/StylesFilter.js @@ -33,10 +33,6 @@ const Filter = ( { selector } ) => { ) ) ); - if ( duotoneOptions.length === 0 ) { - return false; - } - /** * Updates the theme config with the new value. * @@ -49,7 +45,7 @@ const Filter = ( { selector } ) => { setUserConfig( config ); }; - return ( + return duotoneOptions.length > 0 ? ( <> { __( 'Filter', 'themer' ) } @@ -64,6 +60,8 @@ const Filter = ( { selector } ) => { unsetable={ false } /> + ) : ( + false ); }; From 60ccdb56cc81510b0bd24739564e30336d794979 Mon Sep 17 00:00:00 2001 From: Joe Rouse <45216035+Joe-Rouse@users.noreply.github.com> Date: Mon, 16 Oct 2023 16:00:17 +0100 Subject: [PATCH 5/6] style(bbt-101): format jsdoc comments --- src/editor/components/StylesFilter.js | 1 - src/utils/block-helpers.js | 7 +++---- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/src/editor/components/StylesFilter.js b/src/editor/components/StylesFilter.js index 4103bd2..3528e91 100644 --- a/src/editor/components/StylesFilter.js +++ b/src/editor/components/StylesFilter.js @@ -1,4 +1,3 @@ -/* eslint-disable jsdoc/check-line-alignment */ import { __ } from '@wordpress/i18n'; import { set, union } from 'lodash'; import { useContext } from '@wordpress/element'; diff --git a/src/utils/block-helpers.js b/src/utils/block-helpers.js index d8ae03c..8bb5bc2 100644 --- a/src/utils/block-helpers.js +++ b/src/utils/block-helpers.js @@ -1,4 +1,3 @@ -/* eslint-disable jsdoc/check-line-alignment */ import { select } from '@wordpress/data'; import { getColorObjectByAttributeValues, @@ -116,8 +115,8 @@ export const hexToVar = ( cssHex, themePalette ) => { /** * Converts a css variable to a duotone colour array. * - * @param {string} cssVar The css variable to convert. - * @param {Array} themeDuotoneOptions The theme duotone options. + * @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 ) => { @@ -137,7 +136,7 @@ export const varToDuotone = ( cssVar, themeDuotoneOptions ) => { /** * Converts a duotone colors array to a css variable. * - * @param {Array} duotoneColors The duotone colors array. + * @param {Array} duotoneColors The duotone colors array. * @param {Array} themeDuotoneOptions The theme duotone options. * @return {string} The css variable. */ From 53a77bba85a84cc4d8531b0a9391f60e50f77fa0 Mon Sep 17 00:00:00 2001 From: Joe Rouse <45216035+Joe-Rouse@users.noreply.github.com> Date: Mon, 16 Oct 2023 16:06:32 +0100 Subject: [PATCH 6/6] refactor(bbt-101): bail early from func if no duotone options are found --- src/editor/components/StylesFilter.js | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/src/editor/components/StylesFilter.js b/src/editor/components/StylesFilter.js index 3528e91..18c2bce 100644 --- a/src/editor/components/StylesFilter.js +++ b/src/editor/components/StylesFilter.js @@ -9,7 +9,7 @@ import StylesContext from '../context/StylesContext'; import { varToDuotone, duotoneToVar } from '../../utils/block-helpers'; /** - * Reusable spacing control style component + * Reusable filter control style component * * @param {Object} props Component props * @param {string} props.selector Property target selector @@ -17,7 +17,6 @@ import { varToDuotone, duotoneToVar } from '../../utils/block-helpers'; const Filter = ( { selector } ) => { const { themeConfig } = useContext( EditorContext ); const { setUserConfig } = useContext( StylesContext ); - const filterStyles = getThemeOption( selector, themeConfig ); const duotoneThemeObj = getThemeOption( 'settings.color.duotone', themeConfig @@ -32,6 +31,12 @@ const Filter = ( { selector } ) => { ) ) ); + if ( duotoneOptions.length === 0 ) { + return null; + } + + const filterStyles = getThemeOption( selector, themeConfig ); + /** * Updates the theme config with the new value. * @@ -44,14 +49,14 @@ const Filter = ( { selector } ) => { setUserConfig( config ); }; - return duotoneOptions.length > 0 ? ( + return ( <> { __( 'Filter', 'themer' ) } handleNewValue( newVal ) } + onChange={ handleNewValue } value={ varToDuotone( filterStyles?.duotone, duotoneOptions ) } disableCustomColors={ true } disableCustomDuotones={ true } @@ -59,8 +64,6 @@ const Filter = ( { selector } ) => { unsetable={ false } /> - ) : ( - false ); };