NavigationLink: improve colors handling (#20022)

* block-editor: add getColorObjectByColorSlug()

* navigation-link: get color from slug or value

* navigation-link: rename prop to improve reading

* navigation: remove stuff about rgb block attrs

* navigation-link: replace getting rgb color values

* navigation: fixing linting errors

* minor doc improvements

* navigation-link: fix default colors value

* block-editor: add getColors() selector

* block-editor: add getColorObjectByColorSlug()

* block-editor: remove colors helper function

* navigation-edit: refact using selectors

* navigation-link: set nav colors as single props

* docs: add getColorObjectByColorSlug() selector doc

* navigation: handling deprecated attrs

* navigation: adding support to deprecated

* navigation: handling deprecated in server side

* navigation: fixing linting errors

* navigation-link: remove wrong comment

* navigation: fix typo in file name

* navigation: getting rbg color with local fn

* block-editor: remove color selectors

* navigation: simplify deprecated in server-side

* navigation: swtich commenting block using *

* navigation-link: avoid abbreviations in var name

packages/block-library/src/navigation-link/edit.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { escape, head } from 'lodash';
+import { escape, get, head, find } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -45,20 +45,12 @@ function NavigationLinkEdit( {
  setAttributes,
  showSubmenuIcon,
  insertLinkBlock,
- navigationBlockAttributes,
+ textColor,
+ backgroundColor,
+ rgbTextColor,
+ rgbBackgroundColor,
 } ) {
  const { label, opensInNewTab, url, , description } = attributes;
-
- /*
- * Navigation Block attributes.
- */
- const {
- textColor,
- rgbTextColor,
- backgroundColor,
- rgbBackgroundColor,
- } = navigationBlockAttributes;
-
  const link = {
  url,
  opensInNewTab,
@@ -284,19 +276,42 @@ function NavigationLinkEdit( {
  );
 }
 
+/**
+ * Returns the color object matching the slug, or undefined.
+ *
+ * @param {Array} colors The editor settings colors array.
+ * @param {string} colorSlug A string containing the color slug.
+ * @param {string} customColor A string containing the custom color value.
+ *
+ * @return {Object} Color object included in the editor settings colors, or Undefined.
+ */
+const getColorObjectByColorSlug = ( colors, colorSlug, customColor ) => {
+ if ( customColor ) {
+ return customColor;
+ }
+
+ if ( ! colors || ! colors.length ) {
+ return;
+ }
+
+ return get( find( colors, { slug: colorSlug } ), 'color' );
+};
+
 export default compose( [
  withSelect( ( select, ownProps ) => {
  const {
  getBlockAttributes,
  getClientIdsOfDescendants,
  hasSelectedInnerBlock,
  getBlockParentsByBlockName,
+ getSettings,
  } = select( 'core/block-editor' );
  const { clientId } = ownProps;
  const rootBlock = head(
  getBlockParentsByBlockName( clientId, 'core/navigation' )
  );
  const navigationBlockAttributes = getBlockAttributes( rootBlock );
+ const colors = get( getSettings(), 'colors', [] );
  const hasDescendants = !! getClientIdsOfDescendants( [ clientId ] )
  .length;
  const showSubmenuIcon =
@@ -307,7 +322,18 @@ export default compose( [
  isParentOfSelectedBlock,
  hasDescendants,
  showSubmenuIcon,
- navigationBlockAttributes,
+ textColor: navigationBlockAttributes.textColor,
+ backgroundColor: navigationBlockAttributes.backgroundColor,
+ rgbTextColor: getColorObjectByColorSlug(
+ colors,
+ navigationBlockAttributes.textColor,
+ navigationBlockAttributes.customTextColor
+ ),
+ rgbBackgroundColor: getColorObjectByColorSlug(
+ colors,
+ navigationBlockAttributes.backgroundColor,
+ navigationBlockAttributes.customBackgroundColor
+ ),
  };
  } ),
  withDispatch( ( dispatch, ownProps, registry ) => {

packages/block-library/src/navigation/deprecated.js

@@ -0,0 +1,66 @@
+/**
+ * External dependencies
+ */
+import { omit } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { InnerBlocks } from '@wordpress/block-editor';
+
+export default [
+ {
+ attributes: {
+ className: {
+ type: 'string',
+ },
+ textColor: {
+ type: 'string',
+ },
+ rgbTextColor: {
+ type: 'string',
+ },
+ backgroundColor: {
+ type: 'string',
+ },
+ rgbBackgroundColor: {
+ type: 'string',
+ },
+ fontSize: {
+ type: 'string',
+ },
+ customFontSize: {
+ type: 'number',
+ },
+ itemsJustification: {
+ type: 'string',
+ },
+ showSubmenuIcon: {
+ type: 'boolean',
+ },
+ },
+ isEligible( attribute ) {
+ return attribute.rgbTextColor || attribute.rgbBackgroundColor;
+ },
+ supports: {
+ align: [ 'wide', 'full' ],
+ anchor: true,
+ html: false,
+ inserter: true,
+ },
+ migrate( attributes ) {
+ return {
+ ...omit( attributes, [ 'rgbTextColor', 'rgbBackgroundColor' ] ),
+ customTextColor: attributes.textColor
+ ? undefined
+ : attributes.rgbTextColor,
+ customBackgroundColor: attributes.backgroundColor
+ ? undefined
+ : attributes.rgbBackgroundColor,
+ };
+ },
+ save() {
+ return <InnerBlocks.Content />;
+ },
+ },
+];

packages/block-library/src/navigation/edit.js

@@ -7,7 +7,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useMemo, Fragment, useRef, useEffect } from '@wordpress/element';
+import { useMemo, Fragment, useRef } from '@wordpress/element';
 import {
  InnerBlocks,
  InspectorControls,
@@ -86,14 +86,6 @@ function Navigation( {
  [ fontSize.size ]
  );
 
- // Pickup and store text and background colors in grb format into attrs object.
- useEffect( () => {
- setAttributes( {
- rgbTextColor: TextColor.color,
- rgbBackgroundColor: BackgroundColor.color,
- } );
- }, [ TextColor.color, BackgroundColor.color ] );
-
  /* eslint-enable @wordpress/no-unused-vars-before-return */
  const { navigatorToolbarButton, navigatorModal } = useBlockNavigator(
  clientId

packages/block-library/src/navigation/index.js

@@ -9,6 +9,7 @@ import { menu as icon } from '@wordpress/icons';
  */
 import edit from './edit';
 import save from './save';
+import deprecated from './deprecated';
 
 export const name = 'core/navigation';
 
@@ -38,4 +39,6 @@ export const settings = {
  edit,
 
  save,
+
+ deprecated,
 };

packages/block-library/src/navigation/index.php

@@ -20,7 +20,7 @@ function core_block_navigation_build_css_colors( $attributes ) {
 
  // Text color.
  $has_named_text_color = array_key_exists( 'textColor', $attributes );
- $has_custom_text_color = array_key_exists( 'rgbTextColor', $attributes );
+ $has_custom_text_color = array_key_exists( 'customTextColor', $attributes );
 
  // If has text color.
  if ( $has_custom_text_color || $has_named_text_color ) {
@@ -33,12 +33,12 @@ function core_block_navigation_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['rgbTextColor'] );
+ $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( 'rgbBackgroundColor', $attributes );
+ $has_custom_background_color = array_key_exists( 'customBackgroundColor', $attributes );
 
  // If has background color.
  if ( $has_custom_background_color || $has_named_background_color ) {
@@ -51,7 +51,7 @@ function core_block_navigation_build_css_colors( $attributes ) {
  $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['rgbBackgroundColor'] );
+ $colors['inline_styles'] .= sprintf( 'background-color: %s;', $attributes['customBackgroundColor'] );
  }
 
  return $colors;
@@ -133,8 +133,25 @@ function render_block_navigation( $content, $block ) {
  return $content;
  }
 
- $attributes = $block['attrs'];
  $block['innerBlocks'] = core_block_navigation_empty_navigation_links_recursive( $block['innerBlocks'] );
+ $attributes = $block['attrs'];
+
+ /**
+ * Deprecated:
+ * The rgbTextColor and rgbBackgroundColor attributes
+ * have been deprecated in favor of
+ * customTextColor and customBackgroundColor ones.
+ * Move the values from old attrs to the new ones.
+ */
+ if ( isset( $attributes['rgbTextColor'] ) && empty( $attributes['textColor'] ) ) {
+ $attributes['customTextColor'] = $attributes['rgbTextColor'];
+ }
+
+ if ( isset( $attributes['rgbBackgroundColor'] ) && empty( $attributes['backgroundColor'] ) ) {
+ $attributes['customBackgroundColor'] = $attributes['rgbBackgroundColor'];
+ }
+
+ unset( $attributes['rgbTextColor'], $attributes['rgbBackgroundColor'] );
 
  if ( empty( $block['innerBlocks'] ) ) {
  return '';
@@ -267,31 +284,39 @@ 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(
+ // deprecated.
+ 'rgbTextColor' => array(
  'type' => 'string',
  ),
- 'rgbTextColor' => array(
+ 'backgroundColor' => array(
  'type' => 'string',
  ),
- 'backgroundColor'  => array(
+ 'customBackgroundColor' => array(
  'type' => 'string',
  ),
- 'rgbBackgroundColor' => array(
+ // deprecated.
+ 'rgbBackgroundColor' => array(
  'type' => 'string',
  ),
- 'fontSize' => array(
+ 'fontSize'  => array(
  'type' => 'string',
  ),
- 'customFontSize' => array(
+ 'customFontSize'  => array(
  'type' => 'number',
  ),
- 'itemsJustification' => array(
+ 'itemsJustification'  => array(
  'type' => 'string',
  ),
- 'showSubmenuIcon' => array(
+ 'showSubmenuIcon'  => array(
  'type' => 'boolean',
  'default' => true,
  ),