From 7aab2795bff9a1262938b3c3ceaa52be6699535d Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 25 Mar 2020 14:18:31 +0100 Subject: [PATCH] Update the columns block to use the new colors hook (#21038) --- .../components/block-list/block-wrapper.js | 4 +- packages/block-library/src/columns/block.json | 12 --- .../block-library/src/columns/deprecated.js | 79 ++++++++++++++++++- packages/block-library/src/columns/edit.js | 52 ++---------- packages/block-library/src/columns/index.js | 1 + packages/block-library/src/columns/save.js | 28 +------ packages/block-library/src/columns/style.scss | 2 + .../blocks/core__columns.serialized.html | 2 +- .../block-hierarchy-navigation.test.js | 2 +- 9 files changed, 97 insertions(+), 85 deletions(-) diff --git a/packages/block-editor/src/components/block-list/block-wrapper.js b/packages/block-editor/src/components/block-list/block-wrapper.js index 05c2c093ac3936..26b14e981c5367 100644 --- a/packages/block-editor/src/components/block-list/block-wrapper.js +++ b/packages/block-editor/src/components/block-list/block-wrapper.js @@ -101,7 +101,9 @@ const BlockComponent = forwardRef( // should only consider tabbables within editable display, since it // may be the wrapper itself or a side control which triggered the // focus event, don't unnecessary transition to an inner tabbable. - if ( wrapper.current.contains( document.activeElement ) ) { + if ( + isInsideRootBlock( wrapper.current, document.activeElement ) + ) { return; } diff --git a/packages/block-library/src/columns/block.json b/packages/block-library/src/columns/block.json index 8dc01cfafab4dd..3c22ca71fba621 100644 --- a/packages/block-library/src/columns/block.json +++ b/packages/block-library/src/columns/block.json @@ -4,18 +4,6 @@ "attributes": { "verticalAlignment": { "type": "string" - }, - "backgroundColor": { - "type": "string" - }, - "customBackgroundColor": { - "type": "string" - }, - "customTextColor" : { - "type": "string" - }, - "textColor": { - "type": "string" } } } diff --git a/packages/block-library/src/columns/deprecated.js b/packages/block-library/src/columns/deprecated.js index 3d08e3d74c2183..6f40583897dece 100644 --- a/packages/block-library/src/columns/deprecated.js +++ b/packages/block-library/src/columns/deprecated.js @@ -8,7 +8,7 @@ import classnames from 'classnames'; * WordPress dependencies */ import { createBlock } from '@wordpress/blocks'; -import { InnerBlocks } from '@wordpress/block-editor'; +import { InnerBlocks, getColorClassName } from '@wordpress/block-editor'; /** * Given an HTML string for a deprecated columns inner block, returns the @@ -38,7 +38,84 @@ function getDeprecatedLayoutColumn( originalContent ) { } } +const migrateCustomColors = ( attributes ) => { + if ( ! attributes.customTextColor && ! attributes.customBackgroundColor ) { + return attributes; + } + const style = { color: {} }; + if ( attributes.customTextColor ) { + style.color.text = attributes.customTextColor; + } + if ( attributes.customBackgroundColor ) { + style.color.background = attributes.customBackgroundColor; + } + return { + ...attributes, + style, + }; +}; + export default [ + { + attributes: { + verticalAlignment: { + type: 'string', + }, + backgroundColor: { + type: 'string', + }, + customBackgroundColor: { + type: 'string', + }, + customTextColor: { + type: 'string', + }, + textColor: { + type: 'string', + }, + }, + migrate: migrateCustomColors, + save( { attributes } ) { + const { + verticalAlignment, + backgroundColor, + customBackgroundColor, + textColor, + customTextColor, + } = attributes; + + const backgroundClass = getColorClassName( + 'background-color', + backgroundColor + ); + + const textClass = getColorClassName( 'color', textColor ); + + const className = classnames( { + 'has-background': backgroundColor || customBackgroundColor, + 'has-text-color': textColor || customTextColor, + [ backgroundClass ]: backgroundClass, + [ textClass ]: textClass, + [ `are-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment, + } ); + + const style = { + backgroundColor: backgroundClass + ? undefined + : customBackgroundColor, + color: textClass ? undefined : customTextColor, + }; + + return ( +
+ +
+ ); + }, + }, { attributes: { columns: { diff --git a/packages/block-library/src/columns/edit.js b/packages/block-library/src/columns/edit.js index 05aaed154a4e4d..372e535a931a8f 100644 --- a/packages/block-library/src/columns/edit.js +++ b/packages/block-library/src/columns/edit.js @@ -9,7 +9,6 @@ import { dropRight, get, map, times } from 'lodash'; */ import { __ } from '@wordpress/i18n'; import { PanelBody, RangeControl } from '@wordpress/components'; -import { useRef } from '@wordpress/element'; import { InspectorControls, @@ -17,7 +16,6 @@ import { BlockControls, BlockVerticalAlignmentToolbar, __experimentalBlockVariationPicker, - __experimentalUseColors, __experimentalBlock as Block, } from '@wordpress/block-editor'; import { withDispatch, useDispatch, useSelect } from '@wordpress/data'; @@ -61,22 +59,6 @@ function ColumnsEditContainer( { [ clientId ] ); - const ref = useRef(); - const { - BackgroundColor, - InspectorControlsColorPanel, - TextColor, - } = __experimentalUseColors( - [ - { name: 'textColor', property: 'color' }, - { name: 'backgroundColor', className: 'has-background' }, - ], - { - contrastCheckers: [ { backgroundColor: true, textColor: true } ], - colorDetector: { targetRef: ref }, - } - ); - const classes = classnames( { [ `are-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment, } ); @@ -100,32 +82,14 @@ function ColumnsEditContainer( { /> - { InspectorControlsColorPanel } - - { ( backgroundProps ) => ( - - { ( textColorProps ) => ( - - ) } - - ) } - + ); } diff --git a/packages/block-library/src/columns/index.js b/packages/block-library/src/columns/index.js index 8d94dcd82ea4ec..1639f379c5c18d 100644 --- a/packages/block-library/src/columns/index.js +++ b/packages/block-library/src/columns/index.js @@ -27,6 +27,7 @@ export const settings = { align: [ 'wide', 'full' ], html: false, lightBlockWrapper: true, + __experimentalColor: true, }, variations, example: { diff --git a/packages/block-library/src/columns/save.js b/packages/block-library/src/columns/save.js index 3d2249389910d2..0d9a5305cbeaeb 100644 --- a/packages/block-library/src/columns/save.js +++ b/packages/block-library/src/columns/save.js @@ -6,39 +6,17 @@ import classnames from 'classnames'; /** * WordPress dependencies */ -import { InnerBlocks, getColorClassName } from '@wordpress/block-editor'; +import { InnerBlocks } from '@wordpress/block-editor'; export default function save( { attributes } ) { - const { - verticalAlignment, - backgroundColor, - customBackgroundColor, - textColor, - customTextColor, - } = attributes; - - const backgroundClass = getColorClassName( - 'background-color', - backgroundColor - ); - - const textClass = getColorClassName( 'color', textColor ); + const { verticalAlignment } = attributes; const className = classnames( { - 'has-background': backgroundColor || customBackgroundColor, - 'has-text-color': textColor || customTextColor, - [ backgroundClass ]: backgroundClass, - [ textClass ]: textClass, [ `are-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment, } ); - const style = { - backgroundColor: backgroundClass ? undefined : customBackgroundColor, - color: textClass ? undefined : customTextColor, - }; - return ( -
+
); diff --git a/packages/block-library/src/columns/style.scss b/packages/block-library/src/columns/style.scss index 5b2f44dcf17027..f1ad5b4f2217ce 100644 --- a/packages/block-library/src/columns/style.scss +++ b/packages/block-library/src/columns/style.scss @@ -1,6 +1,8 @@ .wp-block-columns { display: flex; margin-bottom: $default-block-margin; + background-color: var(--wp--color--background); + color: var(--wp--color--text); // Responsiveness: Allow wrapping on mobile. flex-wrap: wrap; diff --git a/packages/e2e-tests/fixtures/blocks/core__columns.serialized.html b/packages/e2e-tests/fixtures/blocks/core__columns.serialized.html index 664beb08154a7f..2b95373d1a7b83 100644 --- a/packages/e2e-tests/fixtures/blocks/core__columns.serialized.html +++ b/packages/e2e-tests/fixtures/blocks/core__columns.serialized.html @@ -1,5 +1,5 @@ -
+

Column One, Paragraph One

diff --git a/packages/e2e-tests/specs/editor/various/block-hierarchy-navigation.test.js b/packages/e2e-tests/specs/editor/various/block-hierarchy-navigation.test.js index 643998905e00e3..954033391e23bc 100644 --- a/packages/e2e-tests/specs/editor/various/block-hierarchy-navigation.test.js +++ b/packages/e2e-tests/specs/editor/various/block-hierarchy-navigation.test.js @@ -91,7 +91,7 @@ describe( 'Navigating the block hierarchy', () => { await pressKeyWithModifier( 'ctrl', '`' ); await pressKeyWithModifier( 'ctrl', '`' ); await pressKeyWithModifier( 'ctrl', '`' ); - await pressKeyTimes( 'Tab', 4 ); + await pressKeyTimes( 'Tab', 5 ); // Tweak the columns count by increasing it by one. await page.keyboard.press( 'ArrowRight' );