-
Notifications
You must be signed in to change notification settings - Fork 4.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Combine color palettes into a single settings panel for Button and Pa…
…ragraph blocks (#7924) Combines ColorPalettes into a single panel for Button and Paragraph blocks. Changes: * Extracts ColorIndicator into a new component from the PanelColor component * Introduces a new editor component ColorPaletteControl that wraps ColorPalette in a BaseControl and displays a ColorIndicator next to the control's label * Introduces a new editor component PanelColorSettings that accepts an array of colorSettings and renders a ColorPaletteControl per colorSetting. Also displays ColorIndicators on the title for each colorSetting * Uses ColorPaletteControl for both Button and Paragraph blocks.
- Loading branch information
Showing
21 changed files
with
430 additions
and
100 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,35 +1,39 @@ | ||
| // Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
|
||
| exports[`core/button block edit matches snapshot 1`] = ` | ||
| <span | ||
| class="wp-block-button" | ||
| > | ||
| <div | ||
| class="editor-rich-text" | ||
| <div> | ||
| <span | ||
| class="wp-block-button" | ||
| > | ||
| <div> | ||
| <div | ||
| class="editor-rich-text" | ||
| > | ||
| <div> | ||
| <div | ||
| class="components-autocomplete" | ||
| > | ||
| <span | ||
| aria-autocomplete="list" | ||
| aria-expanded="false" | ||
| aria-label="Add text…" | ||
| aria-multiline="true" | ||
| class="wp-block-button__link editor-rich-text__tinymce" | ||
| contenteditable="true" | ||
| data-is-placeholder-visible="true" | ||
| role="textbox" | ||
| /> | ||
| <span | ||
| class="editor-rich-text__tinymce wp-block-button__link" | ||
| <div> | ||
| <div | ||
| class="components-autocomplete" | ||
| > | ||
| Add text… | ||
| </span> | ||
| <span | ||
| aria-autocomplete="list" | ||
| aria-expanded="false" | ||
| aria-label="Add text…" | ||
| aria-multiline="true" | ||
| class="wp-block-button__link editor-rich-text__tinymce" | ||
| contenteditable="true" | ||
| data-is-placeholder-visible="true" | ||
| role="textbox" | ||
| /> | ||
| <span | ||
| class="editor-rich-text__tinymce wp-block-button__link" | ||
| > | ||
| Add text… | ||
| </span> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </span> | ||
| </span> | ||
| </div> | ||
| `; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { BaseControl, ColorIndicator } from '@wordpress/components'; | ||
| import { Fragment } from '@wordpress/element'; | ||
| import { sprintf, __ } from '@wordpress/i18n'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import './control.scss'; | ||
| import ColorPalette from './'; | ||
| import withColorContext from './with-color-context'; | ||
| 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)' ); | ||
|
|
||
| export function ColorPaletteControl( { label, value, onChange, colors } ) { | ||
| const colorName = getColorName( colors, value ); | ||
| const ariaLabel = sprintf( colorIndicatorAriaLabel, label.toLowerCase(), colorName || value ); | ||
|
|
||
| const labelElement = ( | ||
| <Fragment> | ||
| { label } | ||
| { value && ( | ||
| <ColorIndicator | ||
| colorValue={ value } | ||
| aria-label={ ariaLabel } | ||
| /> | ||
| ) } | ||
| </Fragment> | ||
| ); | ||
|
|
||
| return ( | ||
| <BaseControl | ||
| className="editor-color-palette-control" | ||
| label={ labelElement }> | ||
| <ColorPalette | ||
| className="editor-color-palette-control__color-palette" | ||
| value={ value } | ||
| onChange={ onChange } | ||
| /> | ||
| </BaseControl> | ||
| ); | ||
| } | ||
|
|
||
| export default withColorContext( ColorPaletteControl ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| .editor-color-palette-control__color-palette { | ||
| margin-top: .6rem; | ||
| margin-bottom: 1.4rem; | ||
| } |
22 changes: 22 additions & 0 deletions
22
editor/components/color-palette/test/__snapshots__/control.js.snap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| // Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
|
||
| exports[`ColorPaletteControl matches the snapshot 1`] = ` | ||
| <BaseControl | ||
| className="editor-color-palette-control" | ||
| label={ | ||
| <React.Fragment> | ||
| Test Color | ||
| <ColorIndicator | ||
| aria-label="(current test color: red)" | ||
| colorValue="#f00" | ||
| /> | ||
| </React.Fragment> | ||
| } | ||
| > | ||
| <WithColorContext(ColorPalette) | ||
| className="editor-color-palette-control__color-palette" | ||
| onChange={[Function]} | ||
| value="#f00" | ||
| /> | ||
| </BaseControl> | ||
| `; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| /** | ||
| * External dependencies | ||
| */ | ||
| import { shallow } from 'enzyme'; | ||
| import { noop } from 'lodash'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import { ColorPaletteControl } from '../control'; | ||
|
|
||
| describe( 'ColorPaletteControl', () => { | ||
| it( 'matches the snapshot', () => { | ||
| const wrapper = shallow( | ||
| <ColorPaletteControl | ||
| label="Test Color" | ||
| value="#f00" | ||
| colors={ [ { color: '#f00', name: 'red' } ] } | ||
| onChange={ noop } | ||
| /> | ||
| ); | ||
|
|
||
| expect( wrapper ).toMatchSnapshot(); | ||
| } ); | ||
| } ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.