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] 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, };