From 32c18f81d02351d04875cd1cdb7b2962b84bf14f Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Thu, 15 Apr 2021 17:05:23 +1000 Subject: [PATCH 1/3] Switch the button block to use generic color support utils The existing color-props.js code has been reworked into a utility exported from the block support hooks to facilitate its reuse across blocks. --- .../block-library/src/button/color-props.js | 82 ------------------- .../block-library/src/button/deprecated.js | 10 +-- packages/block-library/src/button/edit.js | 12 +-- packages/block-library/src/button/save.js | 13 ++- 4 files changed, 11 insertions(+), 106 deletions(-) delete mode 100644 packages/block-library/src/button/color-props.js diff --git a/packages/block-library/src/button/color-props.js b/packages/block-library/src/button/color-props.js deleted file mode 100644 index fcc82b415e609d..00000000000000 --- a/packages/block-library/src/button/color-props.js +++ /dev/null @@ -1,82 +0,0 @@ -/** - * External dependencies - */ -import classnames from 'classnames'; - -/** - * WordPress dependencies - */ -import { - getColorClassName, - getColorObjectByAttributeValues, - __experimentalGetGradientClass, -} from '@wordpress/block-editor'; - -// The code in this file is copied entirely from the "color" and "style" support flags -// The flag can't be used at the moment because of the extra wrapper around -// the button block markup. - -export default function getColorAndStyleProps( - attributes, - colors, - isEdit = false -) { - // I'd have prefered to avoid the "style" attribute usage here - const { backgroundColor, textColor, gradient, style } = attributes; - - const backgroundClass = getColorClassName( - 'background-color', - backgroundColor - ); - const gradientClass = __experimentalGetGradientClass( gradient ); - const textClass = getColorClassName( 'color', textColor ); - const className = classnames( textClass, gradientClass, { - // Don't apply the background class if there's a custom gradient - [ backgroundClass ]: ! style?.color?.gradient && !! backgroundClass, - 'has-text-color': textColor || style?.color?.text, - 'has-background': - backgroundColor || - style?.color?.background || - gradient || - style?.color?.gradient, - } ); - const styleProp = - style?.color?.background || style?.color?.text || style?.color?.gradient - ? { - background: style?.color?.gradient - ? style.color.gradient - : undefined, - backgroundColor: style?.color?.background - ? style.color.background - : undefined, - color: style?.color?.text ? style.color.text : undefined, - } - : {}; - - // This is needed only for themes that don't load their color stylesheets in the editor - // We force an inline style to apply the color. - if ( isEdit ) { - if ( backgroundColor ) { - const backgroundColorObject = getColorObjectByAttributeValues( - colors, - backgroundColor - ); - - styleProp.backgroundColor = backgroundColorObject.color; - } - - if ( textColor ) { - const textColorObject = getColorObjectByAttributeValues( - colors, - textColor - ); - - styleProp.color = textColorObject.color; - } - } - - return { - className: !! className ? className : undefined, - style: styleProp, - }; -} diff --git a/packages/block-library/src/button/deprecated.js b/packages/block-library/src/button/deprecated.js index 630cd888345154..367e5050df6edb 100644 --- a/packages/block-library/src/button/deprecated.js +++ b/packages/block-library/src/button/deprecated.js @@ -12,14 +12,10 @@ import { getColorClassName, useBlockProps, __experimentalGetGradientClass, + __experimentalGetColorClassesAndStyles as getColorClassesAndStyles, } from '@wordpress/block-editor'; import { compose } from '@wordpress/compose'; -/** - * Internal dependencies - */ -import getColorAndStyleProps from './color-props'; - const migrateBorderRadius = ( attributes ) => { const { borderRadius, ...newAttributes } = attributes; @@ -161,7 +157,7 @@ const deprecated = [ url, width, } = attributes; - const colorProps = getColorAndStyleProps( attributes ); + const colorProps = getColorClassesAndStyles( attributes ); const buttonClasses = classnames( 'wp-block-button__link', colorProps.className, @@ -256,7 +252,7 @@ const deprecated = [ url, width, } = attributes; - const colorProps = getColorAndStyleProps( attributes ); + const colorProps = getColorClassesAndStyles( attributes ); const buttonClasses = classnames( 'wp-block-button__link', colorProps.className, diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js index 328bf9af5da36e..3f36a564272392 100644 --- a/packages/block-library/src/button/edit.js +++ b/packages/block-library/src/button/edit.js @@ -23,22 +23,15 @@ import { InspectorAdvancedControls, RichText, useBlockProps, + __experimentalUseColorProps as useColorProps, __experimentalLinkControl as LinkControl, - __experimentalUseEditorFeature as useEditorFeature, } from '@wordpress/block-editor'; import { rawShortcut, displayShortcut } from '@wordpress/keycodes'; import { link, linkOff } from '@wordpress/icons'; import { createBlock } from '@wordpress/blocks'; -/** - * Internal dependencies - */ -import getColorAndStyleProps from './color-props'; - const NEW_TAB_REL = 'noreferrer noopener'; -const EMPTY_ARRAY = []; - function WidthPanel( { selectedWidth, setAttributes } ) { function handleChange( newWidth ) { // Check if we are toggling the width off @@ -174,7 +167,6 @@ function ButtonEdit( props ) { }, [ setAttributes ] ); - const colors = useEditorFeature( 'color.palette' ) || EMPTY_ARRAY; const onToggleOpenInNewTab = useCallback( ( value ) => { @@ -201,7 +193,7 @@ function ButtonEdit( props ) { }; const borderRadius = style?.border?.radius; - const colorProps = getColorAndStyleProps( attributes, colors, true ); + const colorProps = useColorProps( attributes ); const ref = useRef(); const blockProps = useBlockProps( { ref } ); diff --git a/packages/block-library/src/button/save.js b/packages/block-library/src/button/save.js index 89ab82064ea47d..695e27e07b5b40 100644 --- a/packages/block-library/src/button/save.js +++ b/packages/block-library/src/button/save.js @@ -6,12 +6,11 @@ import classnames from 'classnames'; /** * WordPress dependencies */ -import { RichText, useBlockProps } from '@wordpress/block-editor'; - -/** - * Internal dependencies - */ -import getColorAndStyleProps from './color-props'; +import { + RichText, + useBlockProps, + __experimentalGetColorClassesAndStyles as getColorClassesAndStyles, +} from '@wordpress/block-editor'; export default function save( { attributes, className } ) { const { @@ -30,7 +29,7 @@ export default function save( { attributes, className } ) { } const borderRadius = style?.border?.radius; - const colorProps = getColorAndStyleProps( attributes ); + const colorProps = getColorClassesAndStyles( attributes ); const buttonClasses = classnames( 'wp-block-button__link', colorProps.className, From 6e011aa2e9767393d4b66d5bf3034c596e807d54 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= Date: Thu, 15 Apr 2021 15:15:40 +0200 Subject: [PATCH 2/3] Revert removing the file, mobile still use it --- .../block-library/src/button/color-props.js | 82 +++++++++++++++++++ 1 file changed, 82 insertions(+) create mode 100644 packages/block-library/src/button/color-props.js diff --git a/packages/block-library/src/button/color-props.js b/packages/block-library/src/button/color-props.js new file mode 100644 index 00000000000000..fcc82b415e609d --- /dev/null +++ b/packages/block-library/src/button/color-props.js @@ -0,0 +1,82 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + +/** + * WordPress dependencies + */ +import { + getColorClassName, + getColorObjectByAttributeValues, + __experimentalGetGradientClass, +} from '@wordpress/block-editor'; + +// The code in this file is copied entirely from the "color" and "style" support flags +// The flag can't be used at the moment because of the extra wrapper around +// the button block markup. + +export default function getColorAndStyleProps( + attributes, + colors, + isEdit = false +) { + // I'd have prefered to avoid the "style" attribute usage here + const { backgroundColor, textColor, gradient, style } = attributes; + + const backgroundClass = getColorClassName( + 'background-color', + backgroundColor + ); + const gradientClass = __experimentalGetGradientClass( gradient ); + const textClass = getColorClassName( 'color', textColor ); + const className = classnames( textClass, gradientClass, { + // Don't apply the background class if there's a custom gradient + [ backgroundClass ]: ! style?.color?.gradient && !! backgroundClass, + 'has-text-color': textColor || style?.color?.text, + 'has-background': + backgroundColor || + style?.color?.background || + gradient || + style?.color?.gradient, + } ); + const styleProp = + style?.color?.background || style?.color?.text || style?.color?.gradient + ? { + background: style?.color?.gradient + ? style.color.gradient + : undefined, + backgroundColor: style?.color?.background + ? style.color.background + : undefined, + color: style?.color?.text ? style.color.text : undefined, + } + : {}; + + // This is needed only for themes that don't load their color stylesheets in the editor + // We force an inline style to apply the color. + if ( isEdit ) { + if ( backgroundColor ) { + const backgroundColorObject = getColorObjectByAttributeValues( + colors, + backgroundColor + ); + + styleProp.backgroundColor = backgroundColorObject.color; + } + + if ( textColor ) { + const textColorObject = getColorObjectByAttributeValues( + colors, + textColor + ); + + styleProp.color = textColorObject.color; + } + } + + return { + className: !! className ? className : undefined, + style: styleProp, + }; +} From b521bb0bc01baf47c1d4c8902a5145048677cad8 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Fri, 16 Apr 2021 12:24:56 +1000 Subject: [PATCH 3/3] Update native button edit component to use color utilities This brings the native button component up-to-date after the switch to use the colors block support feature. It now also uses the color utilities for determining color styles and allows for the color-props.js file to be deleted. --- .../block-editor/src/hooks/index.native.js | 2 + .../block-library/src/button/color-props.js | 82 ------------------- .../block-library/src/button/edit.native.js | 56 +++++++++---- 3 files changed, 40 insertions(+), 100 deletions(-) delete mode 100644 packages/block-library/src/button/color-props.js diff --git a/packages/block-editor/src/hooks/index.native.js b/packages/block-editor/src/hooks/index.native.js index 6aa2b76fc1d1f5..617bd51a05726e 100644 --- a/packages/block-editor/src/hooks/index.native.js +++ b/packages/block-editor/src/hooks/index.native.js @@ -8,3 +8,5 @@ import './generated-class-name'; import './style'; import './color'; import './font-size'; + +export { getColorClassesAndStyles, useColorProps } from './use-color-props'; diff --git a/packages/block-library/src/button/color-props.js b/packages/block-library/src/button/color-props.js deleted file mode 100644 index fcc82b415e609d..00000000000000 --- a/packages/block-library/src/button/color-props.js +++ /dev/null @@ -1,82 +0,0 @@ -/** - * External dependencies - */ -import classnames from 'classnames'; - -/** - * WordPress dependencies - */ -import { - getColorClassName, - getColorObjectByAttributeValues, - __experimentalGetGradientClass, -} from '@wordpress/block-editor'; - -// The code in this file is copied entirely from the "color" and "style" support flags -// The flag can't be used at the moment because of the extra wrapper around -// the button block markup. - -export default function getColorAndStyleProps( - attributes, - colors, - isEdit = false -) { - // I'd have prefered to avoid the "style" attribute usage here - const { backgroundColor, textColor, gradient, style } = attributes; - - const backgroundClass = getColorClassName( - 'background-color', - backgroundColor - ); - const gradientClass = __experimentalGetGradientClass( gradient ); - const textClass = getColorClassName( 'color', textColor ); - const className = classnames( textClass, gradientClass, { - // Don't apply the background class if there's a custom gradient - [ backgroundClass ]: ! style?.color?.gradient && !! backgroundClass, - 'has-text-color': textColor || style?.color?.text, - 'has-background': - backgroundColor || - style?.color?.background || - gradient || - style?.color?.gradient, - } ); - const styleProp = - style?.color?.background || style?.color?.text || style?.color?.gradient - ? { - background: style?.color?.gradient - ? style.color.gradient - : undefined, - backgroundColor: style?.color?.background - ? style.color.background - : undefined, - color: style?.color?.text ? style.color.text : undefined, - } - : {}; - - // This is needed only for themes that don't load their color stylesheets in the editor - // We force an inline style to apply the color. - if ( isEdit ) { - if ( backgroundColor ) { - const backgroundColorObject = getColorObjectByAttributeValues( - colors, - backgroundColor - ); - - styleProp.backgroundColor = backgroundColorObject.color; - } - - if ( textColor ) { - const textColorObject = getColorObjectByAttributeValues( - colors, - textColor - ); - - styleProp.color = textColorObject.color; - } - } - - return { - className: !! className ? className : undefined, - style: styleProp, - }; -} diff --git a/packages/block-library/src/button/edit.native.js b/packages/block-library/src/button/edit.native.js index 7c46ac27366afa..7818d3e37d197a 100644 --- a/packages/block-library/src/button/edit.native.js +++ b/packages/block-library/src/button/edit.native.js @@ -9,11 +9,13 @@ import { withInstanceId, compose } from '@wordpress/compose'; import { __ } from '@wordpress/i18n'; import { RichText, - withColors, InspectorControls, BlockControls, withGradient, store as blockEditorStore, + getColorObjectByAttributeValues, + getGradientValueBySlug, + __experimentalGetColorClassesAndStyles as getColorClassesAndStyles, } from '@wordpress/block-editor'; import { PanelBody, @@ -34,7 +36,6 @@ import richTextStyle from './rich-text.scss'; import styles from './editor.scss'; import ColorBackground from './color-background'; import ColorEdit from './color-edit'; -import getColorAndStyleProps from './color-props'; const MIN_BORDER_RADIUS_VALUE = 0; const MAX_BORDER_RADIUS_VALUE = 50; @@ -184,30 +185,47 @@ class ButtonEdit extends Component { } getBackgroundColor() { - const { backgroundColor, attributes, gradientValue } = this.props; - const { customGradient } = attributes; + const { attributes, colors, gradients } = this.props; + const { backgroundColor, gradient } = attributes; - if ( customGradient || gradientValue ) { - return customGradient || gradientValue; + // Return named gradient value if available. + const gradientValue = getGradientValueBySlug( gradients, gradient ); + + if ( gradientValue ) { + return gradientValue; } - const colorAndStyleProps = getColorAndStyleProps( attributes ); + + const colorProps = getColorClassesAndStyles( attributes ); + + // Retrieve named color object to force inline styles for themes that + // do not load their color stylesheets in the editor. + const colorObject = getColorObjectByAttributeValues( + colors, + backgroundColor + ); + return ( - colorAndStyleProps.style?.backgroundColor || - colorAndStyleProps.style?.background || - // We still need the `backgroundColor.color` to support colors from the color pallete (not custom ones) - backgroundColor.color || + colorObject?.color || + colorProps.style?.backgroundColor || + colorProps.style?.background || styles.defaultButton.backgroundColor ); } getTextColor() { - const { textColor, attributes } = this.props; - const colorAndStyleProps = getColorAndStyleProps( attributes ); + const { attributes, colors } = this.props; + const colorProps = getColorClassesAndStyles( attributes ); + + // Retrieve named color object to force inline styles for themes that + // do not load their color stylesheets in the editor. + const colorObject = getColorObjectByAttributeValues( + colors, + attributes.textColor + ); return ( - colorAndStyleProps.style?.color || - // We still need the `textColor.color` to support colors from the color pallete (not custom ones) - textColor.color || + colorObject?.color || + colorProps.style?.color || styles.defaultButton.color ); } @@ -502,16 +520,18 @@ class ButtonEdit extends Component { export default compose( [ withInstanceId, withGradient, - withColors( 'backgroundColor', { textColor: 'color' } ), withSelect( ( select, { clientId, isSelected } ) => { const { isEditorSidebarOpened } = select( 'core/edit-post' ); - const { getBlockCount, getBlockRootClientId } = select( + const { getBlockCount, getBlockRootClientId, getSettings } = select( blockEditorStore ); const parentId = getBlockRootClientId( clientId ); const numOfButtons = getBlockCount( parentId ); + const settings = getSettings(); return { + colors: settings?.colors || [], + gradients: settings?.gradients || [], editorSidebarOpened: isSelected && isEditorSidebarOpened(), numOfButtons, };