diff --git a/packages/block-editor/src/hooks/index.native.js b/packages/block-editor/src/hooks/index.native.js index 6aa2b76fc1d1f..617bd51a05726 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 fcc82b415e609..0000000000000 --- 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 630cd88834515..367e5050df6ed 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 328bf9af5da36..3f36a56427239 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/edit.native.js b/packages/block-library/src/button/edit.native.js index 7c46ac27366af..7818d3e37d197 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, }; diff --git a/packages/block-library/src/button/save.js b/packages/block-library/src/button/save.js index 89ab82064ea47..695e27e07b5b4 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,