From 6d4b42b8420b1c3539790af4dc3750408c017acf Mon Sep 17 00:00:00 2001 From: Jorge Date: Fri, 15 Nov 2019 11:10:58 +0000 Subject: [PATCH] Remove unnecessary color attributes from navigation block. Rely on classes when possible. --- .../navigation-menu/block-colors-selector.js | 30 ++----- .../block-library/src/navigation-menu/edit.js | 70 +++++---------- .../src/navigation-menu/index.php | 88 +++++++++---------- 3 files changed, 69 insertions(+), 119 deletions(-) diff --git a/packages/block-library/src/navigation-menu/block-colors-selector.js b/packages/block-library/src/navigation-menu/block-colors-selector.js index fabfa9943c7d6..327fc0c938556 100644 --- a/packages/block-library/src/navigation-menu/block-colors-selector.js +++ b/packages/block-library/src/navigation-menu/block-colors-selector.js @@ -1,7 +1,6 @@ /** * External dependencies */ -import classnames from 'classnames'; import { noop } from 'lodash'; /** @@ -24,20 +23,12 @@ const ColorSelectorSVGIcon = () => ( * @param {Object} colorControlProps colorControl properties. * @return {*} React Icon component. */ -const ColorSelectorIcon = ( { textColor, textColorValue } ) => { - const iconClasses = classnames( - 'block-library-colors-selector__state-selection', - 'editor-styles-wrapper', { - 'has-text-color': textColor && textColor.color, - [ textColor.class ]: textColor && textColor.class, - } - ); - +const ColorSelectorIcon = ( { color } ) => { return (
@@ -51,7 +42,7 @@ const ColorSelectorIcon = ( { textColor, textColorValue } ) => { * @param {Object} colorControlProps colorControl properties. * @return {*} React toggle button component. */ -const renderToggleComponent = ( { textColor, textColorValue } ) => ( { onToggle, isOpen } ) => { +const renderToggleComponent = ( { value } ) => ( { onToggle, isOpen } ) => { const openOnArrowDown = ( event ) => { if ( ! isOpen && event.keyCode === DOWN ) { event.preventDefault(); @@ -67,24 +58,19 @@ const renderToggleComponent = ( { textColor, textColorValue } ) => ( { onToggle, label={ __( 'Open Colors Selector' ) } onClick={ onToggle } onKeyDown={ openOnArrowDown } - icon={ } + icon={ } /> ); }; -const renderContent = ( { textColor, onColorChange = noop } ) => ( () => { - const setColor = ( attr ) => ( value ) => onColorChange( { attr, value } ); - +const renderContent = ( { value, onChange = noop } ) => ( () => { return ( <>
diff --git a/packages/block-library/src/navigation-menu/edit.js b/packages/block-library/src/navigation-menu/edit.js index b6ee443516214..0f1ba43f36ad8 100644 --- a/packages/block-library/src/navigation-menu/edit.js +++ b/packages/block-library/src/navigation-menu/edit.js @@ -1,21 +1,15 @@ -/** - * External dependencies - */ -import classnames from 'classnames'; - /** * WordPress dependencies */ import { useMemo, - useEffect, Fragment, } from '@wordpress/element'; import { InnerBlocks, InspectorControls, BlockControls, - withColors, + __experimentalUseColors, } from '@wordpress/block-editor'; import { createBlock } from '@wordpress/blocks'; @@ -45,8 +39,6 @@ function NavigationMenu( { pages, isRequestingPages, hasResolvedPages, - textColor, - setTextColor, setAttributes, hasExistingNavItems, updateNavItemBlocks, @@ -54,15 +46,13 @@ function NavigationMenu( { // // HOOKS // + /* eslint-disable @wordpress/no-unused-vars-before-return */ + const { TextColor } = __experimentalUseColors( + [ { name: 'textColor', property: 'color' } ], + ); + /* eslint-enable @wordpress/no-unused-vars-before-return */ const { navigatorToolbarButton, navigatorModal } = useBlockNavigator( clientId ); - useEffect( () => { - // Set/Unset colors CSS classes. - setAttributes( { - textColorCSSClass: textColor.class ? textColor.class : null, - } ); - }, [ textColor.class ] ); - // Builds menu items from default Pages const defaultPagesMenuItems = useMemo( () => { @@ -153,22 +143,6 @@ function NavigationMenu( { ); } - // Build Inline Styles - const navigationMenuInlineStyles = { - ...( textColor && { - color: textColor.color, - borderColor: textColor.color, - } ), - }; - - // Build ClassNames - const navigationMenuClasses = classnames( - 'wp-block-navigation-menu', { - 'has-text-color': textColor.color, - [ attributes.textColorCSSClass ]: attributes && attributes.textColorCSSClass, - } - ); - // UI State: rendered Block UI return ( @@ -177,12 +151,8 @@ function NavigationMenu( { { navigatorToolbarButton } { - setTextColor( value ); - setAttributes( { textColorValue: value } ); - } } + value={ TextColor.color } + onChange={ TextColor.setColor } /> { navigatorModal } @@ -205,23 +175,23 @@ function NavigationMenu( { - -
- { ! hasExistingNavItems && isRequestingPages && <> { __( 'Loading Navigation…' ) } } - - - -
+ +
+ { ! hasExistingNavItems && isRequestingPages && <> { __( 'Loading Navigation…' ) } } + + + +
+ ); } export default compose( [ - withColors( { textColor: 'color' } ), withSelect( ( select, { clientId } ) => { const innerBlocks = select( 'core/block-editor' ).getBlocks( clientId ); const hasExistingNavItems = !! innerBlocks.length; diff --git a/packages/block-library/src/navigation-menu/index.php b/packages/block-library/src/navigation-menu/index.php index 729835c118a5a..2426d4bb6b363 100644 --- a/packages/block-library/src/navigation-menu/index.php +++ b/packages/block-library/src/navigation-menu/index.php @@ -15,28 +15,30 @@ function build_css_colors( $attributes ) { // CSS classes. $colors = array( - 'text_css_classes' => '', - 'text_inline_styles' => '', + 'css_classes' => '', + 'inline_styles' => '', ); - // Text color. - // Text color - has text color. - if ( array_key_exists( 'textColor', $attributes ) ) { - $colors['text_css_classes'] .= ' has-text-color'; - } - // Text color - add custom CSS class. - if ( array_key_exists( 'textColorCSSClass', $attributes ) ) { - $colors['text_css_classes'] .= " {$attributes['textColorCSSClass']}"; + $has_named_text_color = array_key_exists( 'textColor', $attributes ); + $has_custom_text_color = array_key_exists( 'customTextColor', $attributes ); - } elseif ( array_key_exists( 'customTextColor', $attributes ) ) { - // Text color - or add inline `color` style. - $colors['text_inline_styles'] = ' style="color: ' . esc_attr( $attributes['customTextColor'] ) . ';"'; + // If has text color. + if ( $has_custom_text_color || $has_named_text_color ) { + // Add has-text-color class. + $colors['css_classes'] .= 'has-text-color'; } - $colors['text_css_classes'] = esc_attr( trim( $colors['text_css_classes'] ) ); + if ( $has_named_text_color ) { + // Add the color class. + $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'] ); + } return $colors; } + /** * Renders the `core/navigation-menu` block on server. * @@ -47,21 +49,22 @@ function build_css_colors( $attributes ) { * @return string Returns the post content with the legacy widget added. */ function render_block_navigation_menu( $attributes, $content, $block ) { - // Inline computed colors. - $comp_inline_styles = ''; - - if ( array_key_exists( 'textColorValue', $attributes ) ) { - $comp_inline_styles .= ' color: ' . esc_attr( $attributes['textColorValue'] ) . ';'; - } - $comp_inline_styles = ! empty( $comp_inline_styles ) - ? ' style="' . esc_attr( trim( $comp_inline_styles ) ) . '"' - : ''; - - $colors = build_css_colors( $attributes ); - - return "'; + $colors = build_css_colors( $attributes ); + $class_attribute = sprintf( ' class="%s"', esc_attr( $colors['css_classes'] ? 'wp-block-navigation-menu ' . $colors['css_classes'] : 'wp-block-navigation-menu' ) ); + $style_attribute = $colors['inline_styles'] ? sprintf( ' style="%s"', esc_attr( $colors['inline_styles'] ) ) : ''; + return sprintf( + implode( + "\n", + array( + '', + ' %s', + '', + ) + ), + $class_attribute, + $style_attribute, + build_navigation_menu_html( $block, $colors ) + ); } /** @@ -74,12 +77,14 @@ function render_block_navigation_menu( $attributes, $content, $block ) { */ function build_navigation_menu_html( $block, $colors ) { $html = ''; + + $class_attribute = sprintf( ' class="%s"', esc_attr( $colors['css_classes'] ? 'wp-block-navigation-menu-item__link ' . $colors['css_classes'] : 'wp-block-navigation-menu-item__link' ) ); + $style_attribute = $colors['inline_styles'] ? sprintf( ' style="%s"', esc_attr( $colors['inline_styles'] ) ) : ''; + foreach ( (array) $block['innerBlocks'] as $key => $block ) { $html .= '
  • ' . - ' 'layout', 'attributes' => array( - 'className' => array( + 'className' => array( 'type' => 'string', ), - - 'automaticallyAdd' => array( + 'automaticallyAdd' => array( 'type' => 'boolean', 'default' => false, ), - - 'textColor' => array( - 'type' => 'string', - ), - - 'textColorValue' => array( + 'textColor' => array( 'type' => 'string', ), - - 'customTextColor' => array( - 'type' => 'string', - ), - - 'textColorCSSClass' => array( + 'customTextColor' => array( 'type' => 'string', ), ),