-
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.
navigation-menu: Implement colors selector button. (#17832)
Summary block-editor: expose ColorPaletteControl component navigation-menu: improve colors-selector component navigation-menu: compose withColors navigation-menu: render colors selector in bar navigation-menu: propagate withColor props navigation-menu: apply theme styles to selection navigation-item: populate styles to nav item navigation-menu: apply inline styles and CSS classes
- Loading branch information
Showing
8 changed files
with
407 additions
and
39 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
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
95 changes: 95 additions & 0 deletions
95
packages/block-library/src/navigation-menu/block-colors-selector.js
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,95 @@ | ||
| /** | ||
| * External dependencies | ||
| */ | ||
| import classnames from 'classnames'; | ||
| import { noop } from 'lodash'; | ||
|
|
||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { IconButton, Dropdown, Toolbar } from '@wordpress/components'; | ||
| import { __ } from '@wordpress/i18n'; | ||
| import { DOWN } from '@wordpress/keycodes'; | ||
| import { ColorPaletteControl, ContrastChecker } from '@wordpress/block-editor'; | ||
|
|
||
| /** | ||
| * Color Selector Icon component. | ||
| * | ||
| * @return {*} React Icon component. | ||
| */ | ||
| const ColorSelectorIcon = ( { style } ) => | ||
| <div className="block-library-colors-selector__icon-container"> | ||
| <div | ||
| className="block-library-colors-selector__state-selection wp-block-navigation-menu-item" | ||
| style={ style } | ||
| > | ||
| Aa | ||
| </div> | ||
| </div>; | ||
|
|
||
| /** | ||
| * Renders the Colors Selector Toolbar with the icon button. | ||
| * | ||
| * @param {Object} style - Colors style object. | ||
| * @return {*} React toggle button component. | ||
| */ | ||
| const renderToggleComponent = ( style ) => ( { onToggle, isOpen } ) => { | ||
| const openOnArrowDown = ( event ) => { | ||
| if ( ! isOpen && event.keyCode === DOWN ) { | ||
| event.preventDefault(); | ||
| event.stopPropagation(); | ||
| onToggle(); | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <Toolbar> | ||
| <IconButton | ||
| className="components-icon-button components-toolbar__control block-library-colors-selector__toggle" | ||
| label={ __( 'Open Colors Selector' ) } | ||
| onClick={ onToggle } | ||
| onKeyDown={ openOnArrowDown } | ||
| icon={ <ColorSelectorIcon style={ style } /> } | ||
| /> | ||
| </Toolbar> | ||
| ); | ||
| }; | ||
|
|
||
| const renderContent = ( { backgroundColor, textColor, onColorChange = noop } ) => ( () => { | ||
| const setColor = ( attr ) => ( value ) => onColorChange( { attr, value } ); | ||
|
|
||
| return ( | ||
| <> | ||
| <div className="color-palette-controller-container"> | ||
| <ColorPaletteControl | ||
| value={ backgroundColor.color } | ||
| onChange={ setColor( 'backgroundColor' ) } | ||
| label={ __( 'Background Color' ) } | ||
| /> | ||
| </div> | ||
|
|
||
| <div className="color-palette-controller-container"> | ||
| <ColorPaletteControl | ||
| value={ textColor.color } | ||
| onChange={ setColor( 'textColor' ) } | ||
| label={ __( 'Text Color' ) } | ||
| /> | ||
| </div> | ||
|
|
||
| <ContrastChecker | ||
| textColor={ textColor.color } | ||
| backgroundColor={ backgroundColor.color } | ||
| isLargeText={ false } | ||
| /> | ||
| </> | ||
| ); | ||
| } ); | ||
|
|
||
| export default ( { style, className, ...colorControlProps } ) => | ||
| <Dropdown | ||
| position="bottom right" | ||
| className={ classnames( 'block-library-colors-selector', className ) } | ||
| contentClassName="block-library-colors-selector__popover" | ||
| renderToggle={ renderToggleComponent( style ) } | ||
| renderContent={ renderContent( colorControlProps ) } | ||
| />; |
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.