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
);
};