Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Button Block: Update to use color support utils to retrieve classes and styles #30870

Merged
merged 3 commits into from
Apr 19, 2021
Merged

Button Block: Update to use color support utils to retrieve classes and styles #30870

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
32c18f8
Switch the button block to use generic color support utils
aaronrobertshaw Apr 15, 2021
6e011aa
Revert removing the file, mobile still use it
oandregal Apr 15, 2021
b521bb0
Update native button edit component to use color utilities
aaronrobertshaw Apr 16, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions packages/block-editor/src/hooks/index.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,3 +8,5 @@ import './generated-class-name';
import './style';
import './color';
import './font-size';

export { getColorClassesAndStyles, useColorProps } from './use-color-props';
82 changes: 0 additions & 82 deletions packages/block-library/src/button/color-props.js
View file
Open in desktop

This file was deleted.

10 changes: 3 additions & 7 deletions packages/block-library/src/button/deprecated.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down
12 changes: 2 additions & 10 deletions packages/block-library/src/button/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -174,7 +167,6 @@ function ButtonEdit( props ) {
},
[ setAttributes ]
);
const colors = useEditorFeature( 'color.palette' ) || EMPTY_ARRAY;

const onToggleOpenInNewTab = useCallback(
( value ) => {
Expand All @@ -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 } );

Expand Down
56 changes: 38 additions & 18 deletions packages/block-library/src/button/edit.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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;
Expand Down Expand Up @@ -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
);
}
Expand Down Expand Up @@ -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,
};
Expand Down
13 changes: 6 additions & 7 deletions packages/block-library/src/button/save.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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,
Expand Down