Combine color palettes into a single settings panel for Button and Paragraph blocks #7924

talldan · 2018-07-12T09:12:16Z

Description

Closes #6255

Combines ColorPalettes into a single panel for Button and Paragraph blocks.

Changes:

Carried out some refactoring of Button block to make FallbackStyles a HOC of the editor component instead of the ContrastChecker
Extracted ColorIndicator into its own component from PanelColor component
Created new PanelColorSettings component that displays both Background and Text color palettes and a ContrastChecker
Added styling so that ColorAreas are only displayed on panel title when the panel is collapsed

How has this been tested?

Manual testing
Added snapshot tests

Screenshots

Types of changes

New feature (non-breaking change which adds functionality)

Checklist:

My code is tested.
My code follows the WordPress code style.
My code follows the accessibility standards.
My code has proper inline documentation.

jorgefilipecosta · 2018-07-16T11:25:30Z

components/color-area/index.js

+ */
+import './style.scss';
+
+const ColorArea = ( { ariaLabel, colorValue, className } ) => (


Maybe we can call this component something like ColorIndicatorSquare to make its name more specific. We already have many color components; it may not be easy to guess what color area is.

jorgefilipecosta · 2018-07-16T11:27:28Z

components/color-area/index.js

+const ColorArea = ( { ariaLabel, colorValue, className } ) => (
+	<span
+		className={ classnames( 'component-color-area', className ) }
+		aria-label={ ariaLabel }


Maybe the component can pass all the additional props to span and aria-label is just an additional prop.

e.g:

const ColorArea = ( { colorValue, className, ...props } ) => ( ... <span { ...props }

Suprisingly, React doesn't convert ariaLabel to aria-label for those built-in elements, so this won't work.

I think it works if the users of the component pass:

<ColorArea aria-label="" ... />

Users will need to set aria-label and not ariaLabel.

jorgefilipecosta · 2018-07-16T11:37:46Z

core-blocks/button/edit.js

-							onChange={ setTextColor }
+						<PanelColorSettings
+							title={ __( 'Color Settings' ) }
+							textColorProps={ {


The fact that we have special props for background and text makes this component specific to this colors and impossible to use for a border color for example.

What if we change the API a little bit to something like:

<PanelColorSettings title={ __( 'Color Settings' ) } colorZones={ [ { label: title={ __( 'Background Color' ) } value: backgroundColor.value, onChange: setBackgroundColor, }, { label: title={ __( 'Text Color' ) } value: textColor.value, onChange: setTextColor, }, { label: title={ __( 'The Other Color My block Needs' ) } value: otherColor.value, onChange: setOtherColor, } ] } > <ContrastCheckerWithFallbackStyles node={ this.nodeRef } textColor={ textColor.value } backgroundColor={ backgroundColor.value isLargeText={ true } /> </PanelColorSettings>

The component would render, all the childs passed so the contrast checking would be something outside of the scope of the component.

jorgefilipecosta · 2018-07-16T11:39:21Z

editor/components/panel-color-settings/index.js

+			className={ baseClassName }
+			title={ getTitle( panelTitleClassName, title, [ backgroundColorAreaProps, textColorAreaProps ] ) }
+		>
+			<BaseControl


Given that we have a component just for the square indicator we should probably have a component for the color zone with its title.

jorgefilipecosta

Nice work here @talldan, thank you for this changes.

I did some tests, and from the functional point of view, this is working great.

The only detail remaining is that before on the paragraph block the color was collapsed by default, and now, it is opened by default. I think we can fix this by adding an initialOpen prop to the color settings component.

I left some ideas about other approaches for the API we offer to block creators.

talldan · 2018-07-17T10:27:09Z

@jorgefilipecosta thanks for the review! I did quite a bit of refactoring based on your comments. I've extracted almost everything from the main PanelColorSettings component and that now just maps over the colorSettings and renders other components.

I'm fairly happy with how it looks now, apart from maybe naming and also the widespread use of withColorContext HOC (which I think should be moved to the editor/components/colors folder).

Would we need to deprecate the existing version to move it? Maybe a separate PR?

I think I could also add some more test coverage for my changes, I can do that if you're happy with the changes.

jorgefilipecosta · 2018-07-18T16:36:41Z

core-blocks/button/edit.js

-						/> }
+						<PanelColorSettings
+							title={ __( 'Color Settings' ) }
+							colorSettings={ [


To note, The only reason we are passing the color settings as an array of objects instead of using directly a React component is because if we pass as settings object we can use the same values for the color indicators and avoid passing repeated information. Another approach would be access child components of PanelColorSettings from PanelColorSettings which seems an anti-pattern or using slot-fill which seems complex for this case. Maybe we can add some comments to PanelColorSettings explaining this.
I like this version.

jorgefilipecosta · 2018-07-18T16:37:58Z

core-blocks/button/edit.js

+									onChange: setBackgroundColor,
+									label: __( 'Background Color' ),
+									// translators: %s: The name of the color e.g: "vivid red" or color hex code if name is not available e.g: "#f00".
+									colorIndicatorAriaLabel: __( '(current background color: %s)' ),


I would like to avoid the need for colorIndicatorAriaLabel, or at least make it optional. Can we derive the aria-label from the label, and maybe even remove current. e.g: use (background color: %s).

How does that work with i18n? I thought the strings could only be statically analysed when using __.

Maybe we can use something like: '(current %s: %s)' or '(%s: %s). Where we specify in the translator comments that the first string refers to the color label in lower case e.g: 'background color' and the second label to the color name or value.

jorgefilipecosta · 2018-07-18T16:43:24Z

editor/components/text-with-color-indicators/index.js

+	/>
+);
+
+const TextWithColorIndicators = ( { className, colorSettings, children } ) => (


Can we add this component inside the PanelColorSettings and not export it? It is very simple and each component we expose will require maintenance in the future in case we do more changes and we need to deprecate it.

jorgefilipecosta · 2018-07-18T16:48:59Z

editor/components/color-indicator/index.js

+import withColorContext from '../color-palette/with-color-context';
+import { getColorName } from '../colors';
+
+export default withColorContext( ( { colors, colorValue, ariaLabel } ) => {


Maybe, in this case, we don't need the editor/components/color-indicator/index.js, the only logic operation it is doing before using components/color-indicator is the computation of the ariaLabel, components using this component can easily compute the aria-label and we avoid another component to maintain.

talldan · 2018-07-20T11:17:24Z

@jorgefilipecosta I think I've addressed all those comments. Thanks for the re-review.

talldan · 2018-07-23T03:18:01Z

Have resolved the merge conflict (which was from your change to the contrast checker @jorgefilipecosta), and fixed a few issues with tests that I managed to somehow be oblivious to on Friday.

talldan · 2018-07-23T03:20:00Z

editor/components/color-palette/control.js

+// translators: first %s: The type of color (e.g. background color), second %s: the color name or value (e.g. red or #ff0000)
+const colorIndicatorAriaLabel = __( '(current %s: %s)' );
+
+const ColorPaletteControl = withColorContext( ( { label, value, onChange, colors } ) => {


I guess this component could still be moved into PanelColorSettings, though it does feel like it might be useful as a separate component.

jorgefilipecosta · 2018-07-25T15:49:26Z

editor/components/color-palette/control.js

+// translators: first %s: The type of color (e.g. background color), second %s: the color name or value (e.g. red or #ff0000)
+const colorIndicatorAriaLabel = __( '(current %s: %s)' );
+
+const ColorPaletteControl = withColorContext( ( { label, value, onChange, colors } ) => {


Minor: Normally we apply the HOC's when doing the export
e.g: export default withColorContext ( ColorPaletteControl );

jorgefilipecosta · 2018-07-25T15:51:05Z

editor/components/color-palette/control.js

+import { getColorName } from '../colors';
+
+// translators: first %s: The type of color (e.g. background color), second %s: the color name or value (e.g. red or #ff0000)
+const colorIndicatorAriaLabel = __( '(current %s: %s)' );


Minor: Given that this is a constant outside any component/function, maybe we should call it: COLOR_INDICATOR_ARIA_LABEL.

jorgefilipecosta

The code seems to be working well 👍
Thank you @talldan for iterating on this. I think we should merge this soon, so we have more eyes on this changes before the next release.
We are not using now some components like PanelColor; I think these components should be deprecated after this merge. Plugin developers ideally should use the same components we use in core so we have a uniform UI, now the component to use should be PanelColorSettings.

…or text Also bring title color rendering that was previously in another PanelColor component into this one. Next ColorPallettes in BaseControl components Extract repeated code for building color labels into separate function Handle change events for both text and bg colors Uncouple the FallbackStyles HOC from the ContrastChecker in the Button block Reorganise props to PanelColor, group text and background props into objects Move ContrastChecker into PanelColor component Remove incorrect class name Move title rendering into a separate func and use Fragement over array Reintroduce the old PanelColor component and rename this new one PanelTextColor Extract PanelBody for text color panel into its own component Hide/show text color preview dependent on the open/close state of the panel Extract ColorArea into its own component so that it can be used in more than just panels Revert "Extract PanelBody for text color panel into its own component" This reverts commit fe7a803. Refactor PanelTextColor component to reuse title for both PanelBody and BaseControl Relocate styles for hiding/showing ColorAreas to PanelTextColor Modify ColorPalette component to accept an additional class name Styling tweaks for text color pallete Fix incorrect class name on ColorArea Refactoring to remove need to add class to ColorArea Minor tidy up to avoid use of not needed consts Rename from PanelTextColor to PanelColorSettings Update PanelColor tests to reflect use of ColorArea component Add snapshot tests for new components Minor formatting change Fixes for FallbackStyles HOC usage on button. Migrate to new compose package for PanelColorSettings and button block Rename ColorArea to ColorIndicator Make ContrastChecker render as a child of the PanelColorSettings component Refactor PanelColorSettings to accept an array of settings Make TextWithColorIndicators a component Fix classname typo - I can't spell 'palette'. Remove unecessary span in favour of Fragment Refactor, avoid passing colors through several levels Extract ColorPaletteControl, TextWithColorIndicators and a ColorIndicator that has color context from PanelColorSettings Set initialOpen for color palettes to false for Paragraph block

aduth · 2019-04-22T19:33:53Z

Is ColorPaletteControl meant to be made publicly available? Could you advise on #13018?

talldan added [Type] Enhancement A suggestion for improvement. [Feature] Blocks Overall functionality of blocks labels Jul 12, 2018

talldan self-assigned this Jul 12, 2018

gziolo requested a review from jorgefilipecosta July 12, 2018 12:00

talldan changed the title ~~Update/merge color settings panes~~ Combine color palettes into a single settings panel for Button and Paragraph blocks Jul 13, 2018

jorgefilipecosta reviewed Jul 16, 2018

View reviewed changes

talldan force-pushed the update/merge-color-settings-panes branch 2 times, most recently from 4709eb9 to 76e55a1 Compare July 17, 2018 04:31

jorgefilipecosta reviewed Jul 18, 2018

View reviewed changes

aduth added this to the 3.4 milestone Jul 18, 2018

talldan force-pushed the update/merge-color-settings-panes branch from ad1a113 to 32aa85d Compare July 20, 2018 09:00

talldan force-pushed the update/merge-color-settings-panes branch from 4c92b62 to df6f890 Compare July 23, 2018 03:14

talldan commented Jul 23, 2018

View reviewed changes

talldan force-pushed the update/merge-color-settings-panes branch 2 times, most recently from 36e5b44 to 2874f0f Compare July 24, 2018 02:31

jorgefilipecosta reviewed Jul 25, 2018

View reviewed changes

jorgefilipecosta approved these changes Jul 25, 2018

View reviewed changes

talldan added 2 commits July 27, 2018 15:00

Remove TextWithColorIndicators component. Inline functionality

22c83db

talldan added 5 commits July 27, 2018 15:00

Remove need for editor version of ColorIndicator

1c49386

Make the aria label on color indicator optional

279e8ab

Add clarifying comment about colorSettings prop

b19c97c

Interpolate aria label text based on label name

0efb6a1

Add tests for ColorPaletteControl and export HOC'ed version as default

69971d6

talldan force-pushed the update/merge-color-settings-panes branch from 2874f0f to 69971d6 Compare July 27, 2018 07:39

talldan merged commit 288fe78 into master Jul 27, 2018

talldan deleted the update/merge-color-settings-panes branch July 27, 2018 08:58

mmtr mentioned this pull request Jul 28, 2018

Fix components styles import #8264

Merged

jasmussen mentioned this pull request Dec 2, 2021

Polish color indicator and itemgroup. #37028

Merged

7 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Combine color palettes into a single settings panel for Button and Paragraph blocks #7924

Combine color palettes into a single settings panel for Button and Paragraph blocks #7924

talldan commented Jul 12, 2018 •

edited

Loading

jorgefilipecosta Jul 16, 2018 •

edited

Loading

jorgefilipecosta Jul 16, 2018

talldan Jul 17, 2018

jorgefilipecosta Jul 17, 2018

jorgefilipecosta Jul 16, 2018

jorgefilipecosta Jul 16, 2018 •

edited

Loading

jorgefilipecosta left a comment

talldan commented Jul 17, 2018 •

edited

Loading

jorgefilipecosta Jul 18, 2018

jorgefilipecosta Jul 18, 2018

talldan Jul 20, 2018

jorgefilipecosta Jul 20, 2018

jorgefilipecosta Jul 18, 2018

jorgefilipecosta Jul 18, 2018

talldan commented Jul 20, 2018

talldan commented Jul 23, 2018

talldan Jul 23, 2018 •

edited

Loading

jorgefilipecosta Jul 25, 2018

jorgefilipecosta Jul 25, 2018

jorgefilipecosta left a comment

aduth commented Apr 22, 2019

Combine color palettes into a single settings panel for Button and Paragraph blocks #7924

Combine color palettes into a single settings panel for Button and Paragraph blocks #7924

Conversation

talldan commented Jul 12, 2018 • edited Loading

Description

How has this been tested?

Screenshots

Types of changes

Checklist:

jorgefilipecosta Jul 16, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jorgefilipecosta Jul 16, 2018 • edited Loading

Choose a reason for hiding this comment

jorgefilipecosta left a comment

Choose a reason for hiding this comment

talldan commented Jul 17, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

talldan commented Jul 20, 2018

talldan commented Jul 23, 2018

talldan Jul 23, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jorgefilipecosta left a comment

Choose a reason for hiding this comment

aduth commented Apr 22, 2019

talldan commented Jul 12, 2018 •

edited

Loading

jorgefilipecosta Jul 16, 2018 •

edited

Loading

jorgefilipecosta Jul 16, 2018 •

edited

Loading

talldan commented Jul 17, 2018 •

edited

Loading

talldan Jul 23, 2018 •

edited

Loading