Skip to content

Fix: apply by slug on all origins #36841

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

Merged
jorgefilipecosta merged 5 commits into from
Nov 26, 2021
Merged

Fix: apply by slug on all origins #36841

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
49fb688
Fix: apply by slug on all origins
jorgefilipecosta Nov 24, 2021
7d75943
Update mechanism to inline styles to cover for themes not enqueuing them
oandregal Nov 25, 2021
b6626c6
Update useColorProps util
oandregal Nov 25, 2021
64e6367
Be safe
oandregal Nov 25, 2021
f6588c6
Fix crash on the site editor.
jorgefilipecosta Nov 26, 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
16 changes: 11 additions & 5 deletions packages/block-editor/src/components/colors/with-colors.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { isString, kebabCase, reduce, upperFirst } from 'lodash';
/**
* WordPress dependencies
*/
import { Component } from '@wordpress/element';
import { useMemo, Component } from '@wordpress/element';
import { compose, createHigherOrderComponent } from '@wordpress/compose';

/**
Expand All @@ -20,8 +20,6 @@ import {
} from './utils';
import useSetting from '../use-setting';

const DEFAULT_COLORS = [];

/**
* Higher order component factory for injecting the `colorsArray` argument as
* the colors prop in the `withCustomColors` HOC.
Expand All @@ -47,8 +45,16 @@ const withCustomColorPalette = ( colorsArray ) =>
const withEditorColorPalette = () =>
createHigherOrderComponent(
( WrappedComponent ) => ( props ) => {
const colors = useSetting( 'color.palette' ) || DEFAULT_COLORS;
return <WrappedComponent { ...props } colors={ colors } />;
const { palette: colorPerOrigin } = useSetting( 'color' ) || {};
const allColors = useMemo(
() => [
...( colorPerOrigin?.custom || [] ),
...( colorPerOrigin?.theme || [] ),
...( colorPerOrigin?.default || [] ),
],
[ colorPerOrigin ]
);
return <WrappedComponent { ...props } colors={ allColors } />;
},
'withEditorColorPalette'
);
Expand Down
23 changes: 16 additions & 7 deletions packages/block-editor/src/components/gradients/use-gradient.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { find } from 'lodash';
/**
* WordPress dependencies
*/
import { useCallback } from '@wordpress/element';
import { useCallback, useMemo } from '@wordpress/element';
import { useSelect, useDispatch } from '@wordpress/data';

/**
Expand All @@ -16,8 +16,6 @@ import { useBlockEditContext } from '../block-edit';
import useSetting from '../use-setting';
import { store as blockEditorStore } from '../../store';

const EMPTY_ARRAY = [];

export function __experimentalGetGradientClass( gradientSlug ) {
if ( ! gradientSlug ) {
return undefined;
Expand Down Expand Up @@ -67,7 +65,15 @@ export function __experimentalUseGradient( {
} = {} ) {
const { clientId } = useBlockEditContext();

const gradients = useSetting( 'color.gradients' ) || EMPTY_ARRAY;
const { gradients: gradientsPerOrigin } = useSetting( 'color' ) || {};
Copy link
Member

@oandregal oandregal Dec 3, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Some of the properties, such as useSetting( 'color.custom' ) have a special handling only takes effect when accessing them directly, and doing useSetting( 'color' ) introduces some bugs. See #37094

Until that's addressed we're reverting some of these changes at #36900

const allGradients = useMemo(
() => [
...( gradientsPerOrigin?.custom || [] ),
...( gradientsPerOrigin?.theme || [] ),
...( gradientsPerOrigin?.default || [] ),
],
[ gradientsPerOrigin ]
);
const { gradient, customGradient } = useSelect(
( select ) => {
const { getBlockAttributes } = select( blockEditorStore );
Expand All @@ -83,7 +89,10 @@ export function __experimentalUseGradient( {
const { updateBlockAttributes } = useDispatch( blockEditorStore );
const setGradient = useCallback(
( newGradientValue ) => {
const slug = getGradientSlugByValue( gradients, newGradientValue );
const slug = getGradientSlugByValue(
allGradients,
newGradientValue
);
if ( slug ) {
updateBlockAttributes( clientId, {
[ gradientAttribute ]: slug,
Expand All @@ -96,13 +105,13 @@ export function __experimentalUseGradient( {
[ customGradientAttribute ]: newGradientValue,
} );
},
[ gradients, clientId, updateBlockAttributes ]
[ allGradients, clientId, updateBlockAttributes ]
);

const gradientClass = __experimentalGetGradientClass( gradient );
let gradientValue;
if ( gradient ) {
gradientValue = getGradientValueBySlug( gradients, gradient );
gradientValue = getGradientValueBySlug( allGradients, gradient );
} else {
gradientValue = customGradient;
}
Expand Down
84 changes: 58 additions & 26 deletions packages/block-editor/src/hooks/color.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { isObject, setWith, clone } from 'lodash';
import { addFilter } from '@wordpress/hooks';
import { getBlockSupport } from '@wordpress/blocks';
import { __ } from '@wordpress/i18n';
import { useRef, useEffect, Platform } from '@wordpress/element';
import { useRef, useEffect, useMemo, Platform } from '@wordpress/element';
import { createHigherOrderComponent } from '@wordpress/compose';

/**
Expand All @@ -31,7 +31,6 @@ import ColorPanel from './color-panel';
import useSetting from '../components/use-setting';

export const COLOR_SUPPORT_KEY = 'color';
const EMPTY_ARRAY = [];

const hasColorSupport = ( blockType ) => {
const colorSupport = getBlockSupport( blockType, COLOR_SUPPORT_KEY );
Expand Down Expand Up @@ -217,13 +216,43 @@ function immutableSet( object, path, value ) {
*/
export function ColorEdit( props ) {
const { name: blockName, attributes } = props;
const solids = useSetting( 'color.palette' ) || EMPTY_ARRAY;
const gradients = useSetting( 'color.gradients' ) || EMPTY_ARRAY;
const areCustomSolidsEnabled = useSetting( 'color.custom' );
const areCustomGradientsEnabled = useSetting( 'color.customGradient' );
const isLinkEnabled = useSetting( 'color.link' );
const isTextEnabled = useSetting( 'color.text' );
const isBackgroundEnabled = useSetting( 'color.background' );
const {
palette: solidsPerOrigin,
gradients: gradientsPerOrigin,
customGradient: areCustomGradientsEnabled,
custom: areCustomSolidsEnabled,
text: isTextEnabled,
background: isBackgroundEnabled,
link: isLinkEnabled,
} = useSetting( 'color' ) || {};

const solidsEnabled =
areCustomSolidsEnabled ||
! solidsPerOrigin?.theme ||
solidsPerOrigin?.theme?.length > 0;

const gradientsEnabled =
areCustomGradientsEnabled ||
! gradientsPerOrigin?.theme ||
gradientsPerOrigin?.theme?.length > 0;

const allSolids = useMemo(
() => [
...( solidsPerOrigin?.custom || [] ),
...( solidsPerOrigin?.theme || [] ),
...( solidsPerOrigin?.default || [] ),
],
[ solidsPerOrigin ]
);

const allGradients = useMemo(
() => [
...( gradientsPerOrigin?.custom || [] ),
...( gradientsPerOrigin?.theme || [] ),
...( gradientsPerOrigin?.default || [] ),
],
[ gradientsPerOrigin ]
);

// Shouldn't be needed but right now the ColorGradientsPanel
// can trigger both onChangeColor and onChangeBackground
Expand All @@ -239,20 +268,15 @@ export function ColorEdit( props ) {
}

const hasLinkColor =
hasLinkColorSupport( blockName ) &&
isLinkEnabled &&
( solids.length > 0 || areCustomSolidsEnabled );
hasLinkColorSupport( blockName ) && isLinkEnabled && solidsEnabled;
const hasTextColor =
hasTextColorSupport( blockName ) &&
isTextEnabled &&
( solids.length > 0 || areCustomSolidsEnabled );
hasTextColorSupport( blockName ) && isTextEnabled && solidsEnabled;
const hasBackgroundColor =
hasBackgroundColorSupport( blockName ) &&
isBackgroundEnabled &&
( solids.length > 0 || areCustomSolidsEnabled );
solidsEnabled;
const hasGradientColor =
hasGradientSupport( blockName ) &&
( gradients.length > 0 || areCustomGradientsEnabled );
hasGradientSupport( blockName ) && gradientsEnabled;

if (
! hasLinkColor &&
Expand All @@ -266,13 +290,13 @@ export function ColorEdit( props ) {
const { style, textColor, backgroundColor, gradient } = attributes;
let gradientValue;
if ( hasGradientColor && gradient ) {
gradientValue = getGradientValueBySlug( gradients, gradient );
gradientValue = getGradientValueBySlug( allGradients, gradient );
} else if ( hasGradientColor ) {
gradientValue = style?.color?.gradient;
}

const onChangeColor = ( name ) => ( value ) => {
const colorObject = getColorObjectByColorValue( solids, value );
const colorObject = getColorObjectByColorValue( allSolids, value );
const attributeName = name + 'Color';
const newStyle = {
...localAttributes.current.style,
Expand All @@ -296,7 +320,7 @@ export function ColorEdit( props ) {
};

const onChangeGradient = ( value ) => {
const slug = getGradientSlugByValue( gradients, value );
const slug = getGradientSlugByValue( allGradients, value );
let newAttributes;
if ( slug ) {
const newStyle = {
Expand Down Expand Up @@ -331,7 +355,7 @@ export function ColorEdit( props ) {
};

const onChangeLinkColor = ( value ) => {
const colorObject = getColorObjectByColorValue( solids, value );
const colorObject = getColorObjectByColorValue( allSolids, value );
const newLinkColorValue = colorObject?.slug
? `var:preset|color|${ colorObject.slug }`
: value;
Expand Down Expand Up @@ -360,7 +384,7 @@ export function ColorEdit( props ) {
label: __( 'Text color' ),
onColorChange: onChangeColor( 'text' ),
colorValue: getColorObjectByAttributeValues(
solids,
allSolids,
textColor,
style?.color?.text
).color,
Expand All @@ -375,7 +399,7 @@ export function ColorEdit( props ) {
? onChangeColor( 'background' )
: undefined,
colorValue: getColorObjectByAttributeValues(
solids,
allSolids,
backgroundColor,
style?.color?.background
).color,
Expand All @@ -392,7 +416,7 @@ export function ColorEdit( props ) {
label: __( 'Link Color' ),
onColorChange: onChangeLinkColor,
colorValue: getLinkColorFromAttributeValue(
solids,
allSolids,
style?.elements?.link?.color?.text
),
clearable: !! style?.elements?.link?.color
Expand All @@ -417,7 +441,15 @@ export const withColorPaletteStyles = createHigherOrderComponent(
( BlockListBlock ) => ( props ) => {
const { name, attributes } = props;
const { backgroundColor, textColor } = attributes;
const colors = useSetting( 'color.palette' ) || EMPTY_ARRAY;
const { palette: solidsPerOrigin } = useSetting( 'color' ) || {};
const colors = useMemo(
() => [
...( solidsPerOrigin?.custom || [] ),
...( solidsPerOrigin?.theme || [] ),
...( solidsPerOrigin?.default || [] ),
],
[ solidsPerOrigin ]
);
if ( ! hasColorSupport( name ) || shouldSkipSerialization( name ) ) {
return <BlockListBlock { ...props } />;
}
Expand Down
27 changes: 23 additions & 4 deletions packages/block-editor/src/hooks/use-color-props.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,11 @@
*/
import classnames from 'classnames';

/**
* WordPress dependencies
*/
import { useMemo } from '@wordpress/element';

/**
* Internal dependencies
*/
Expand All @@ -24,8 +29,6 @@ import useSetting from '../components/use-setting';
// block support is being skipped for a block but the color related CSS classes
// & styles still need to be generated so they can be applied to inner elements.

const EMPTY_ARRAY = [];

/**
* Provides the CSS class names and inline styles for a block's color support
* attributes.
Expand Down Expand Up @@ -84,8 +87,24 @@ export function getColorClassesAndStyles( attributes ) {
export function useColorProps( attributes ) {
const { backgroundColor, textColor, gradient } = attributes;

const colors = useSetting( 'color.palette' ) || EMPTY_ARRAY;
const gradients = useSetting( 'color.gradients' ) || EMPTY_ARRAY;
const { palette: solidsPerOrigin, gradients: gradientsPerOrigin } =
useSetting( 'color' ) || {};
const colors = useMemo(
() => [
...( solidsPerOrigin?.custom || [] ),
...( solidsPerOrigin?.theme || [] ),
...( solidsPerOrigin?.default || [] ),
],
[ solidsPerOrigin ]
);
const gradients = useMemo(
() => [
...( gradientsPerOrigin?.custom || [] ),
...( gradientsPerOrigin?.theme || [] ),
...( gradientsPerOrigin?.default || [] ),
],
[ gradientsPerOrigin ]
);

const colorProps = getColorClassesAndStyles( attributes );

Expand Down