Skip to content

Commit

Permalink
navigation: be able to set background color
Browse files Browse the repository at this point in the history 
navigation: add background color palette
navigation: add background color feature
navigation: add contrast checker
navigation: set background color in front-end
navigation: adjust vertical alignment
navigation: apply colors to the selector icon
navigation: add vars and improve inline doc.
navigation: organize styles - create color section
navigation: remove duplicated CSS rules
navigation: use SCSS vars for colors
navigation: tidy sub menu arrow styles
navigation: fix arrow border issue
navigation: re-write replaceing margin by padding
navigation: apply only text color to anchor elements
This commit needs pulish the code, but let's keep as it in order to test the approach
navigation: set explicitly text color for submenu
navigation: rename vars.
navigation: clean unused code
navigation: rollback passing attrs param to fn
navigation: fix scss linting errors
navigation: fix ph linting errors
navigation: fix linting errors
navigation: add styles instead of replace
Update submenu styles to fix indentation of child submenus to match visual design currently in master.
navigation: apply colors only in the main menu
navigation: don't inherit bgc for sub-menus
use-color: add initialOpen prop to Panel
navigation: refactoring colrios selector
It re implements the colors selector taking advantge of a better usage of the use-colors hook. Also, it adds the `Colors Setting` in the sidebar.
navigation: refact -> hook data to colors icon
navigation: restore disabling eslint rule
navigation: fix re-rendering dropdown issue
navigation: propagate colors rightly
navigation: fix linting errors
use-colors: remove line break
navigation: fix the arrow alignment in the front end
navigation: fix issue when no children
  • Loading branch information
@retrofox
retrofox committed Jan 15, 2020
1 parent 17e5c2d commit 96bce70
Show file tree
Hide file tree
Showing 6 changed files with 208 additions and 93 deletions.
4 changes: 3 additions & 1 deletion packages/block-editor/src/components/colors/use-colors.js
View file
Expand Up @@ -51,10 +51,11 @@ const ColorPanel = ( {
detectedBackgroundColor,
detectedColor,
panelChildren,
initialOpen,
} ) => (
<PanelColorSettings
title={ title }
initialOpen={ false }
initialOpen={ initialOpen }
colorSettings={ Object.values( colorSettings ) }
{ ...colorPanelProps }
>
Expand Down Expand Up @@ -316,6 +317,7 @@ export default function __experimentalUseColors(

const wrappedColorPanelProps = {
title: panelTitle,
initialOpen: false,
colorSettings,
colorPanelProps,
contrastCheckers,
Expand Down
43 changes: 16 additions & 27 deletions packages/block-library/src/navigation/block-colors-selector.js
View file
@@ -1,15 +1,10 @@
/**
* External dependencies
*/
import { noop } from 'lodash';

/**
* WordPress dependencies
*/
import { Button, Dropdown, ToolbarGroup, SVG, Path } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { DOWN } from '@wordpress/keycodes';
import { ColorPaletteControl } from '@wordpress/block-editor';

const ColorSelectorSVGIcon = () => (
<SVG xmlns="https://www.w3.org/2000/svg" viewBox="0 0 20 20">
Expand All @@ -23,12 +18,12 @@ const ColorSelectorSVGIcon = () => (
* @param {Object} colorControlProps colorControl properties.
* @return {*} React Icon component.
*/
const ColorSelectorIcon = ( { color } ) => {
const ColorSelectorIcon = ( { style, className } ) => {
return (
<div className="block-library-colors-selector__icon-container">
<div
className="block-library-colors-selector__state-selection"
style={ { ...( color && { color } ) } }
className={ `${ className } block-library-colors-selector__state-selection` }
style={ style }
>
<ColorSelectorSVGIcon />
</div>
Expand All @@ -42,7 +37,7 @@ const ColorSelectorIcon = ( { color } ) => {
* @param {Object} colorControlProps colorControl properties.
* @return {*} React toggle button component.
*/
const renderToggleComponent = ( { value } ) => ( { onToggle, isOpen } ) => {
const renderToggleComponent = ( { TextColor, BackgroundColor } ) => ( { onToggle, isOpen } ) => {
const openOnArrowDown = ( event ) => {
if ( ! isOpen && event.keyCode === DOWN ) {
event.preventDefault();
Expand All @@ -58,32 +53,26 @@ const renderToggleComponent = ( { value } ) => ( { onToggle, isOpen } ) => {
label={ __( 'Open Colors Selector' ) }
onClick={ onToggle }
onKeyDown={ openOnArrowDown }
icon={ <ColorSelectorIcon color={ value } /> }
icon={
<BackgroundColor>
<TextColor>
<ColorSelectorIcon />
</TextColor>
</BackgroundColor>
}
/>
</ToolbarGroup>
);
};

const renderContent = ( { value, onChange = noop } ) => ( () => {
return (
<>
<div className="color-palette-controller-container">
<ColorPaletteControl
value={ value }
onChange={ onChange }
label={ __( 'Text Color' ) }
/>
</div>
</>
);
} );

export default ( colorControlProps ) => (
const BlockColorsStyleSelector = ( { children, ...other } ) => (
<Dropdown
position="bottom right"
className="block-library-colors-selector"
contentClassName="block-library-colors-selector__popover"
renderToggle={ renderToggleComponent( colorControlProps ) }
renderContent={ renderContent( colorControlProps ) }
renderToggle={ renderToggleComponent( other ) }
renderContent={ () => children }
/>
);

export default BlockColorsStyleSelector;
62 changes: 47 additions & 15 deletions packages/block-library/src/navigation/edit.js
View file
Expand Up @@ -10,6 +10,7 @@ import classnames from 'classnames';
import {
useMemo,
Fragment,
useRef,
} from '@wordpress/element';
import {
InnerBlocks,
Expand Down Expand Up @@ -58,9 +59,28 @@ function Navigation( {
// HOOKS
//
/* eslint-disable @wordpress/no-unused-vars-before-return */
const { TextColor } = __experimentalUseColors(
[ { name: 'textColor', property: 'color' } ],
const ref = useRef();

const {
TextColor,
BackgroundColor,
InspectorControlsColorPanel,
ColorPanel,
} = __experimentalUseColors(
[
{ name: 'textColor', property: 'color' },
{ name: 'backgroundColor', className: 'background-color' },
],
{
contrastCheckers: [ { backgroundColor: true, textColor: true, fontSize: fontSize.size } ],
colorDetector: { targetRef: ref },
colorPanelProps: {
initialOpen: true,
},
},
[ fontSize.size ]
);

/* eslint-enable @wordpress/no-unused-vars-before-return */
const { navigatorToolbarButton, navigatorModal } = useBlockNavigator( clientId );

Expand Down Expand Up @@ -130,7 +150,10 @@ function Navigation( {
label={ __( 'Navigation' ) }
instructions={ __( 'Create a Navigation from all existing pages, or create an empty one.' ) }
>
<div className="wp-block-navigation-placeholder__buttons">
<div
ref={ ref }
className="wp-block-navigation-placeholder__buttons"
>
<Button
isSecondary
className="wp-block-navigation-placeholder__button"
Expand Down Expand Up @@ -170,11 +193,13 @@ function Navigation( {
<ToolbarGroup>
{ navigatorToolbarButton }
</ToolbarGroup>
<BlockColorsStyleSelector
value={ TextColor.color }
onChange={ TextColor.setColor }
/>

<BlockColorsStyleSelector
TextColor={ TextColor }
BackgroundColor={ BackgroundColor }
>
{ ColorPanel }
</BlockColorsStyleSelector>
</BlockControls>
{ navigatorModal }
<InspectorControls>
Expand All @@ -190,17 +215,24 @@ function Navigation( {
/>
</PanelBody>
</InspectorControls>
{ InspectorControlsColorPanel }
<TextColor>
<div className={ blockClassNames } style={ blockInlineStyles }>
{ ! hasExistingNavItems && isRequestingPages && <><Spinner /> { __( 'Loading Navigation…' ) } </> }
<BackgroundColor>
<div
ref={ ref }
className={ blockClassNames }
style={ blockInlineStyles }
>
{ ! hasExistingNavItems && isRequestingPages && <><Spinner /> { __( 'Loading Navigation…' ) } </> }

<InnerBlocks
allowedBlocks={ [ 'core/navigation-link' ] }
templateInsertUpdatesSelection={ false }
__experimentalMoverDirection={ 'horizontal' }
/>
<InnerBlocks
allowedBlocks={ [ 'core/navigation-link' ] }
templateInsertUpdatesSelection={ false }
__experimentalMoverDirection={ 'horizontal' }
/>

</div>
</div>
</BackgroundColor>
</TextColor>
</Fragment>
);
Expand Down
26 changes: 22 additions & 4 deletions packages/block-library/src/navigation/editor.scss
View file
@@ -1,3 +1,6 @@
$navigation-height: 60px;
$navigation-item-height: 46px;

// Reduce the paddings, margins, and UI of inner-blocks.
// @todo: eventually we may add a feature that lets a parent container absorb the block UI of a child block.
// When that happens, leverage that instead of the following overrides.
Expand Down Expand Up @@ -30,10 +33,13 @@
width: auto;
padding-left: 0;
padding-right: 0;
margin-left: 0;
margin-right: 0;
margin-top: 0;
margin-bottom: 1em; // Useful for when items wrap.
margin: 0;
}

// 3. Set a min height for nav items.
// It's needed in order to hide the sub-items when the navigation is not selected.
.wp-block-navigation .block-editor-inner-blocks > .block-editor-block-list__layout .wp-block > [data-block] {
min-height: $navigation-item-height;
}

.wp-block-navigation .block-editor-block-list__block::before {
Expand Down Expand Up @@ -71,6 +77,14 @@
flex-wrap: wrap;
}

// Vertical aligment.
.wp-block-navigation {
min-height: $navigation-height;
padding-top: 7px;
padding-bottom: 7px;
align-items: center;
}

.wp-block-navigation__inserter-content {
padding: $grid-size-large;
}
Expand Down Expand Up @@ -145,6 +159,10 @@ $color-control-label-height: 20px;
float: right;
margin-top: 2px;
}

.components-panel__body-title {
display: none;
}
}

.block-editor-block-mover {
Expand Down
51 changes: 40 additions & 11 deletions packages/block-library/src/navigation/index.php
View file
Expand Up @@ -13,12 +13,12 @@
* @return array Colors CSS classes and inline styles.
*/
function build_css_colors( $attributes ) {
// CSS classes.
$colors = array(
'css_classes' => array(),
'inline_styles' => '',
);

// Text color.
$has_named_text_color = array_key_exists( 'textColor', $attributes );
$has_custom_text_color = array_key_exists( 'customTextColor', $attributes );

Expand All @@ -33,7 +33,25 @@ function build_css_colors( $attributes ) {
$colors['css_classes'][] = sprintf( 'has-%s-color', $attributes['textColor'] );
} elseif ( $has_custom_text_color ) {
// Add the custom color inline style.
$colors['inline_styles'] = sprintf( 'color: %s;', $attributes['customTextColor'] );
$colors['inline_styles'] .= sprintf( 'color: %s;', $attributes['customTextColor'] );
}

// Background color.
$has_named_background_color = array_key_exists( 'backgroundColor', $attributes );
$has_custom_background_color = array_key_exists( 'customBackgroundColor', $attributes );

// If has background color.
if ( $has_custom_background_color || $has_named_background_color ) {
// Add has-background-color class.
$colors['css_classes'][] = 'has-background-color';
}

if ( $has_named_background_color ) {
// Add the background-color class.
$colors['css_classes'][] = sprintf( 'has-%s-background-color', $attributes['backgroundColor'] );
} elseif ( $has_custom_background_color ) {
// Add the custom background-color inline style.
$colors['inline_styles'] .= sprintf( 'background-color: %s;', $attributes['customBackgroundColor'] );
}

return $colors;
Expand Down Expand Up @@ -106,10 +124,11 @@ function render_block_navigation( $attributes, $content, $block ) {
* @param array $block The block.
* @param array $colors Contains inline styles and CSS classes to apply to navigation item.
* @param array $font_sizes Contains inline styles and CSS classes to apply to navigation item.
* @param bool $level_zero True whether is main menu (level zero). Otherwise, False.
*
* @return string Returns an HTML list from innerBlocks.
*/
function build_navigation_html( $block, $colors, $font_sizes ) {
function build_navigation_html( $block, $colors, $font_sizes, $level_zero = true ) {
$html = '';
$classes = array_merge(
$colors['css_classes'],
Expand All @@ -124,7 +143,11 @@ function build_navigation_html( $block, $colors, $font_sizes ) {
foreach ( (array) $block['innerBlocks'] as $key => $block ) {

$html .= '<li class="wp-block-navigation-link">' .
'<a' . $class_attribute . $style_attribute;
'<a';

if ( $level_zero ) {
$html .= $class_attribute . $style_attribute;
}

// Start appending HTML attributes to anchor tag.
if ( isset( $block['attrs']['url'] ) ) {
Expand Down Expand Up @@ -166,7 +189,7 @@ function build_navigation_html( $block, $colors, $font_sizes ) {
// End anchor tag content.

if ( count( (array) $block['innerBlocks'] ) > 0 ) {
$html .= build_navigation_html( $block, $colors, $font_sizes );
$html .= build_navigation_html( $block, $colors, $font_sizes, false );
}

$html .= '</li>';
Expand All @@ -186,22 +209,28 @@ function register_block_core_navigation() {
'core/navigation',
array(
'attributes' => array(
'className' => array(
'className' => array(
'type' => 'string',
),
'textColor' => array(
'type' => 'string',
),
'customTextColor' => array(
'type' => 'string',
),
'textColor' => array(
'backgroundColor' => array(
'type' => 'string',
),
'customTextColor' => array(
'customBackgroundColor' => array(
'type' => 'string',
),
'fontSize' => array(
'fontSize' => array(
'type' => 'string',
),
'customFontSize' => array(
'customFontSize' => array(
'type' => 'number',
),
'itemsJustification' => array(
'itemsJustification' => array(
'type' => 'string',
),
),
Expand Down

0 comments on commit 96bce70

Please sign in to comment.