From d1ed3c3cf25b01d2687fa97ec2a8f37bdffccf5a Mon Sep 17 00:00:00 2001 From: Chris Hall Date: Thu, 29 Aug 2024 11:13:14 +0100 Subject: [PATCH 1/6] feat: adds gradient picker component as part of color component --- src/editor/components/StylesColor.js | 6 ++- src/editor/components/StylesGradient.js | 70 +++++++++++++++++++++++++ 2 files changed, 74 insertions(+), 2 deletions(-) create mode 100644 src/editor/components/StylesGradient.js diff --git a/src/editor/components/StylesColor.js b/src/editor/components/StylesColor.js index ea5113d..f47cefd 100644 --- a/src/editor/components/StylesColor.js +++ b/src/editor/components/StylesColor.js @@ -7,6 +7,7 @@ import { varToHex, hexToVar } from '../../utils/block-helpers'; import getThemeOption from '../../utils/get-theme-option'; import EditorContext from '../context/EditorContext'; import StylesContext from '../context/StylesContext'; +import Gradient from './StylesGradient'; /** * Reusable color control style component @@ -33,7 +34,7 @@ const Color = ( { selector } ) => { setUserConfig( config ); }; - const allPalettes = [ 'background', 'text' ].map( ( key ) => ( + const colorPalettes = [ 'background', 'text' ].map( ( key ) => (
{ key } { { __( 'Color', 'themer' ) }
- { allPalettes } + { colorPalettes } +
); diff --git a/src/editor/components/StylesGradient.js b/src/editor/components/StylesGradient.js new file mode 100644 index 0000000..b024e55 --- /dev/null +++ b/src/editor/components/StylesGradient.js @@ -0,0 +1,70 @@ +import { set } from 'lodash'; +import { useContext } from '@wordpress/element'; +import { GradientPicker } from '@wordpress/components'; + +import getThemeOption from '../../utils/get-theme-option'; +import EditorContext from '../context/EditorContext'; +import StylesContext from '../context/StylesContext'; +/** + * Reusable GradientPicker component + * + * @param {Object} props Component props + * @param {string} props.selector Property target selector + */ +const Gradient = ( { selector } ) => { + const { userConfig, themeConfig } = useContext( EditorContext ); + const { setUserConfig } = useContext( StylesContext ); + const value = getThemeOption( selector, themeConfig ); + const defaultPalette = getThemeOption( + 'settings.color.gradients.default', + themeConfig + ); + const themePalette = getThemeOption( + 'settings.color.gradients.theme', + themeConfig + ); + const defaultGradientOption = getThemeOption( + 'settings.color.defaultGradients', + themeConfig + ); + + const onChange = ( newValue ) => { + let config = structuredClone( userConfig ); + config = set( config, selector, newValue ); + setUserConfig( config ); + }; + + // We only want to populate gradients object with defaultPalette if defaultGradientOption is true (which it is by default) + // and we only want to populate themePalette if themePalette is not empty to avoid unnecessary headings being created. + const getGradients = () => { + const gradients = []; + if ( themePalette ) { + gradients.push( { + name: 'Theme', + gradients: themePalette, + } ); + } + if ( defaultGradientOption && defaultPalette ) { + gradients.push( { + name: 'Default', + gradients: defaultPalette, + } ); + } + return gradients; + }; + + if ( getGradients().length > 0 ) { + return ( +
+ Gradient + +
+ ); + } +}; + +export default Gradient; From 16d888dec971afe5d021fa2cf3418cfaf0aa5241 Mon Sep 17 00:00:00 2001 From: Chris Hall Date: Thu, 29 Aug 2024 11:22:28 +0100 Subject: [PATCH 2/6] feat: adds support for disabling custom gradients --- src/editor/components/StylesGradient.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/editor/components/StylesGradient.js b/src/editor/components/StylesGradient.js index b024e55..4d4772b 100644 --- a/src/editor/components/StylesGradient.js +++ b/src/editor/components/StylesGradient.js @@ -15,7 +15,8 @@ const Gradient = ( { selector } ) => { const { userConfig, themeConfig } = useContext( EditorContext ); const { setUserConfig } = useContext( StylesContext ); const value = getThemeOption( selector, themeConfig ); - const defaultPalette = getThemeOption( + + const defaultPalette = getThemeOption( 'settings.color.gradients.default', themeConfig ); @@ -27,6 +28,10 @@ const Gradient = ( { selector } ) => { 'settings.color.defaultGradients', themeConfig ); + const customGradientOption = getThemeOption( + 'settings.color.customGradient', + themeConfig + ); const onChange = ( newValue ) => { let config = structuredClone( userConfig ); @@ -61,6 +66,7 @@ const Gradient = ( { selector } ) => { value={ value } onChange={ onChange } gradients={ getGradients() } + disableCustomGradients={ ! customGradientOption } />
); From 80a478b6b35525aeb48dbe65ea43bcafebdeb17d Mon Sep 17 00:00:00 2001 From: Chris Hall Date: Thu, 29 Aug 2024 11:30:09 +0100 Subject: [PATCH 3/6] docs: updated code comment order --- src/editor/components/StylesGradient.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/editor/components/StylesGradient.js b/src/editor/components/StylesGradient.js index 4d4772b..be6aa41 100644 --- a/src/editor/components/StylesGradient.js +++ b/src/editor/components/StylesGradient.js @@ -39,8 +39,8 @@ const Gradient = ( { selector } ) => { setUserConfig( config ); }; - // We only want to populate gradients object with defaultPalette if defaultGradientOption is true (which it is by default) - // and we only want to populate themePalette if themePalette is not empty to avoid unnecessary headings being created. + // We only want to populate themePalette if themePalette is not empty to avoid unnecessary headings being created. + // and we only want to populate gradients object with defaultPalette if defaultGradientOption is true (which it is by default) const getGradients = () => { const gradients = []; if ( themePalette ) { From 1cdbd4f2b19e5c5f8051dbcffe04034e1d391f29 Mon Sep 17 00:00:00 2001 From: Chris Hall Date: Fri, 30 Aug 2024 09:20:55 +0100 Subject: [PATCH 4/6] feat: heading translation --- src/editor/components/StylesGradient.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/editor/components/StylesGradient.js b/src/editor/components/StylesGradient.js index be6aa41..41d3076 100644 --- a/src/editor/components/StylesGradient.js +++ b/src/editor/components/StylesGradient.js @@ -1,4 +1,5 @@ import { set } from 'lodash'; +import { __ } from '@wordpress/i18n'; import { useContext } from '@wordpress/element'; import { GradientPicker } from '@wordpress/components'; @@ -61,7 +62,9 @@ const Gradient = ( { selector } ) => { if ( getGradients().length > 0 ) { return (
- Gradient + + { __( 'Gradient', 'themer' ) } + Date: Fri, 30 Aug 2024 11:04:07 +0100 Subject: [PATCH 5/6] docs: multiline comment --- src/editor/components/StylesGradient.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/editor/components/StylesGradient.js b/src/editor/components/StylesGradient.js index 41d3076..8ad0c73 100644 --- a/src/editor/components/StylesGradient.js +++ b/src/editor/components/StylesGradient.js @@ -40,8 +40,10 @@ const Gradient = ( { selector } ) => { setUserConfig( config ); }; - // We only want to populate themePalette if themePalette is not empty to avoid unnecessary headings being created. - // and we only want to populate gradients object with defaultPalette if defaultGradientOption is true (which it is by default) + /* + * We only want to populate themePalette if themePalette is not empty to avoid unnecessary headings being created. + * and we only want to populate gradients object with defaultPalette if defaultGradientOption is true (which it is by default) + */ const getGradients = () => { const gradients = []; if ( themePalette ) { From e153b1a3bb867a7c2467dbb75f5c853815833e3c Mon Sep 17 00:00:00 2001 From: Chris Hall Date: Fri, 30 Aug 2024 11:18:08 +0100 Subject: [PATCH 6/6] feat: useMemo for gradients, changes to check before render --- src/editor/components/StylesGradient.js | 21 ++++++++++++--------- 1 file changed, 12 insertions(+), 9 deletions(-) diff --git a/src/editor/components/StylesGradient.js b/src/editor/components/StylesGradient.js index 8ad0c73..db67ef2 100644 --- a/src/editor/components/StylesGradient.js +++ b/src/editor/components/StylesGradient.js @@ -1,6 +1,6 @@ import { set } from 'lodash'; import { __ } from '@wordpress/i18n'; -import { useContext } from '@wordpress/element'; +import { useContext, useMemo } from '@wordpress/element'; import { GradientPicker } from '@wordpress/components'; import getThemeOption from '../../utils/get-theme-option'; @@ -44,24 +44,27 @@ const Gradient = ( { selector } ) => { * We only want to populate themePalette if themePalette is not empty to avoid unnecessary headings being created. * and we only want to populate gradients object with defaultPalette if defaultGradientOption is true (which it is by default) */ - const getGradients = () => { - const gradients = []; + const gradients = useMemo( () => { + const arr = []; + if ( themePalette ) { - gradients.push( { + arr.push( { name: 'Theme', gradients: themePalette, } ); } + if ( defaultGradientOption && defaultPalette ) { - gradients.push( { + arr.push( { name: 'Default', gradients: defaultPalette, } ); } - return gradients; - }; - if ( getGradients().length > 0 ) { + return arr; + }, [ themePalette, defaultGradientOption, defaultPalette ] ); + + if ( customGradientOption !== false || gradients ) { return (
@@ -70,7 +73,7 @@ const Gradient = ( { selector } ) => {