-
Notifications
You must be signed in to change notification settings - Fork 4.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Display two ColorPallette components in PanelColor, one for bg, one f…
…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
- Loading branch information
Showing
21 changed files
with
435 additions
and
94 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,28 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { | ||
| ColorIndicator, | ||
| } from '@wordpress/components'; | ||
| import { sprintf } from '@wordpress/i18n'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import withColorContext from '../color-palette/with-color-context'; | ||
| import { getColorName } from '../colors'; | ||
|
|
||
| export default withColorContext( ( { colors, colorValue, ariaLabel } ) => { | ||
| if ( ! colorValue ) { | ||
| return null; | ||
| } | ||
|
|
||
| const colorName = getColorName( colors, colorValue ); | ||
|
|
||
| return ( | ||
| <ColorIndicator | ||
| colorValue={ colorValue } | ||
| ariaLabel={ sprintf( ariaLabel, colorName || colorValue ) } | ||
| /> | ||
| ); | ||
| } ); |
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,39 @@ | ||
| /** | ||
| * External dependencies | ||
| */ | ||
| import { pick } from 'lodash'; | ||
|
|
||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { BaseControl } from '@wordpress/components'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import './control.scss'; | ||
| import ColorPalette from './'; | ||
| import TextWithColorIndicators from '../text-with-color-indicators'; | ||
|
|
||
| const ColorPaletteControl = ( { label, ...props } ) => { | ||
| const labelElement = ( | ||
| <TextWithColorIndicators | ||
| colorSettings={ pick( props, [ 'value', 'colorIndicatorAriaLabel' ] ) } | ||
| > | ||
| { label } | ||
| </TextWithColorIndicators> | ||
| ); | ||
|
|
||
| return ( | ||
| <BaseControl | ||
| className="editor-color-palette-control" | ||
| label={ labelElement }> | ||
| <ColorPalette | ||
| className="editor-color-palette-control__color-palette" | ||
| { ...pick( props, [ 'value', 'onChange' ] ) } | ||
| /> | ||
| </BaseControl> | ||
| ); | ||
| }; | ||
|
|
||
| export default 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; | ||
| } |
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,52 @@ | ||
| /** | ||
| * External dependencies | ||
| */ | ||
| import { omit } from 'lodash'; | ||
|
|
||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { | ||
| PanelBody, | ||
| } from '@wordpress/components'; | ||
| import { ifCondition, compose } from '@wordpress/compose'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import './style.scss'; | ||
| import ColorPaletteControl from '../color-palette/control'; | ||
| import TextWithColorIndicators from '../text-with-color-indicators'; | ||
| import withColorContext from '../color-palette/with-color-context'; | ||
|
|
||
| export function PanelColorSettings( { title, colorSettings, children, ...props } ) { | ||
| const className = 'editor-panel-color-settings'; | ||
|
|
||
| const titleElement = ( | ||
| <TextWithColorIndicators | ||
| className={ `${ className }__panel-title` } | ||
| colorSettings={ colorSettings } | ||
| > | ||
| { title } | ||
| </TextWithColorIndicators> | ||
| ); | ||
|
|
||
| return ( | ||
| <PanelBody | ||
| className={ className } | ||
| title={ titleElement } | ||
| { ...omit( props, 'colors' ) } | ||
| > | ||
| { colorSettings.map( ( settings, index ) => ( | ||
| <ColorPaletteControl key={ index } { ...settings } /> | ||
| ) ) } | ||
|
|
||
| { children } | ||
| </PanelBody> | ||
| ); | ||
| } | ||
|
|
||
| export default compose( [ | ||
| withColorContext, | ||
| ifCondition( ( { hasColorsToChoose } ) => hasColorsToChoose ), | ||
| ] )( PanelColorSettings ); |
Oops, something went wrong.