From 39549435b87274a55a5032094fd66bc1811aaa66 Mon Sep 17 00:00:00 2001 From: akasunil Date: Wed, 12 Jun 2024 19:11:31 +0530 Subject: [PATCH 01/11] Replace min height unitcontrol with heightcontrol --- .../src/cover/edit/inspector-controls.js | 50 ++++++------------- 1 file changed, 16 insertions(+), 34 deletions(-) diff --git a/packages/block-library/src/cover/edit/inspector-controls.js b/packages/block-library/src/cover/edit/inspector-controls.js index 0b05a004cd06e0..001c76e30a6547 100644 --- a/packages/block-library/src/cover/edit/inspector-controls.js +++ b/packages/block-library/src/cover/edit/inspector-controls.js @@ -12,26 +12,23 @@ import { TextareaControl, ToggleControl, SelectControl, - __experimentalUseCustomUnits as useCustomUnits, __experimentalToolsPanelItem as ToolsPanelItem, - __experimentalUnitControl as UnitControl, __experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue, } from '@wordpress/components'; -import { useInstanceId } from '@wordpress/compose'; import { InspectorControls, - useSettings, __experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown, __experimentalUseGradient, __experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients, privateApis as blockEditorPrivateApis, + HeightControl, } from '@wordpress/block-editor'; import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ -import { COVER_MIN_HEIGHT, mediaPosition } from '../shared'; +import { mediaPosition } from '../shared'; import { unlock } from '../../lock-unlock'; const { cleanEmptyObject } = unlock( blockEditorPrivateApis ); @@ -42,26 +39,17 @@ function CoverHeightInput( { unit = 'px', value = '', } ) { - const instanceId = useInstanceId( UnitControl ); - const inputId = `block-cover-height-input-${ instanceId }`; - const isPx = unit === 'px'; - - const [ availableUnits ] = useSettings( 'spacing.units' ); - const units = useCustomUnits( { - availableUnits: availableUnits || [ 'px', 'em', 'rem', 'vw', 'vh' ], - defaultValues: { px: 430, '%': 20, em: 20, rem: 20, vw: 20, vh: 50 }, - } ); - const handleOnChange = ( unprocessedValue ) => { - const inputValue = - unprocessedValue !== '' - ? parseFloat( unprocessedValue ) - : undefined; + // eslint-disable-next-line @wordpress/no-unused-vars-before-return + const [ currentValue, currentUnit ] = + parseQuantityAndUnitFromRawValue( unprocessedValue ); - if ( isNaN( inputValue ) && inputValue !== undefined ) { + if ( isNaN( currentValue ) && currentValue !== undefined ) { return; } - onChange( inputValue ); + + onUnitChange( currentUnit ); + onChange( currentValue ); }; const computedValue = useMemo( () => { @@ -69,20 +57,14 @@ function CoverHeightInput( { return [ parsedQuantity, unit ].join( '' ); }, [ unit, value ] ); - const min = isPx ? COVER_MIN_HEIGHT : 0; - return ( - + <> + + ); } export default function CoverInspectorControls( { From d00d1d80fce1a4b1990b984b07bd31abf338969c Mon Sep 17 00:00:00 2001 From: akasunil Date: Wed, 12 Jun 2024 19:20:11 +0530 Subject: [PATCH 02/11] Remove extra fragment tag --- .../src/cover/edit/inspector-controls.js | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/packages/block-library/src/cover/edit/inspector-controls.js b/packages/block-library/src/cover/edit/inspector-controls.js index 001c76e30a6547..da2f822202ce85 100644 --- a/packages/block-library/src/cover/edit/inspector-controls.js +++ b/packages/block-library/src/cover/edit/inspector-controls.js @@ -58,13 +58,11 @@ function CoverHeightInput( { }, [ unit, value ] ); return ( - <> - - + ); } export default function CoverInspectorControls( { From 52ab3acd975e0a9ec85b958d069062c8aa9a25ed Mon Sep 17 00:00:00 2001 From: akasunil Date: Wed, 12 Jun 2024 19:28:16 +0530 Subject: [PATCH 03/11] Update lable and set order of imports --- packages/block-library/src/cover/edit/inspector-controls.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/cover/edit/inspector-controls.js b/packages/block-library/src/cover/edit/inspector-controls.js index da2f822202ce85..5bc4f9ff94c4f9 100644 --- a/packages/block-library/src/cover/edit/inspector-controls.js +++ b/packages/block-library/src/cover/edit/inspector-controls.js @@ -20,8 +20,8 @@ import { __experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown, __experimentalUseGradient, __experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients, - privateApis as blockEditorPrivateApis, HeightControl, + privateApis as blockEditorPrivateApis, } from '@wordpress/block-editor'; import { __ } from '@wordpress/i18n'; @@ -59,7 +59,7 @@ function CoverHeightInput( { return ( From 1bf31f6f6c04f82f18e0a1f0f51b1f2af3e81832 Mon Sep 17 00:00:00 2001 From: akasunil Date: Thu, 13 Jun 2024 10:38:17 +0530 Subject: [PATCH 04/11] Fix unit test --- packages/block-library/src/cover/test/edit.js | 4 ++-- test/e2e/specs/editor/blocks/cover.spec.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/cover/test/edit.js b/packages/block-library/src/cover/test/edit.js index ab99d3c555e3bc..ca34c15d0b7ec6 100644 --- a/packages/block-library/src/cover/test/edit.js +++ b/packages/block-library/src/cover/test/edit.js @@ -372,10 +372,10 @@ describe( 'Cover block', () => { } ) ); await userEvent.clear( - screen.getByLabelText( 'Minimum height of cover' ) + screen.getByLabelText( 'Minimum height' ) ); await userEvent.type( - screen.getByLabelText( 'Minimum height of cover' ), + screen.getByLabelText( 'Minimum height' ), '300' ); diff --git a/test/e2e/specs/editor/blocks/cover.spec.js b/test/e2e/specs/editor/blocks/cover.spec.js index fa5103ebaa4eeb..cf3005c9eaa18f 100644 --- a/test/e2e/specs/editor/blocks/cover.spec.js +++ b/test/e2e/specs/editor/blocks/cover.spec.js @@ -158,7 +158,7 @@ test.describe( 'Cover', () => { // Ensure there the default value for the minimum height of cover is undefined. const defaultHeightValue = await coverBlockEditorSettings - .getByLabel( 'Minimum height of cover' ) + .getByLabel( 'Minimum height' ) .inputValue(); expect( defaultHeightValue ).toBeFalsy(); From d72ad6046f67c3d56d7e49d1dc2b056a1b328a48 Mon Sep 17 00:00:00 2001 From: akasunil Date: Thu, 13 Jun 2024 12:17:27 +0530 Subject: [PATCH 05/11] Revert lable changes --- packages/block-library/src/cover/edit/inspector-controls.js | 2 +- packages/block-library/src/cover/test/edit.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/cover/edit/inspector-controls.js b/packages/block-library/src/cover/edit/inspector-controls.js index 5bc4f9ff94c4f9..dd660179ba4b6c 100644 --- a/packages/block-library/src/cover/edit/inspector-controls.js +++ b/packages/block-library/src/cover/edit/inspector-controls.js @@ -59,7 +59,7 @@ function CoverHeightInput( { return ( diff --git a/packages/block-library/src/cover/test/edit.js b/packages/block-library/src/cover/test/edit.js index ca34c15d0b7ec6..ab99d3c555e3bc 100644 --- a/packages/block-library/src/cover/test/edit.js +++ b/packages/block-library/src/cover/test/edit.js @@ -372,10 +372,10 @@ describe( 'Cover block', () => { } ) ); await userEvent.clear( - screen.getByLabelText( 'Minimum height' ) + screen.getByLabelText( 'Minimum height of cover' ) ); await userEvent.type( - screen.getByLabelText( 'Minimum height' ), + screen.getByLabelText( 'Minimum height of cover' ), '300' ); From 98a6b585c848c646946ea75396a35a508c7ba7c1 Mon Sep 17 00:00:00 2001 From: akasunil Date: Thu, 13 Jun 2024 17:45:41 +0530 Subject: [PATCH 06/11] Fix failing unit test --- packages/block-library/src/cover/test/edit.js | 12 ++++++------ test/e2e/specs/editor/blocks/cover.spec.js | 2 +- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/block-library/src/cover/test/edit.js b/packages/block-library/src/cover/test/edit.js index ab99d3c555e3bc..540b0cf9d65a3a 100644 --- a/packages/block-library/src/cover/test/edit.js +++ b/packages/block-library/src/cover/test/edit.js @@ -371,14 +371,14 @@ describe( 'Cover block', () => { name: 'Styles', } ) ); - await userEvent.clear( - screen.getByLabelText( 'Minimum height of cover' ) - ); - await userEvent.type( - screen.getByLabelText( 'Minimum height of cover' ), - '300' + + const [ heightControl ] = screen.getAllByLabelText( + /Minimum height of cover/ ); + await userEvent.clear( heightControl ); + await userEvent.type( heightControl, '300' ); + expect( screen.getByLabelText( 'Block: Cover' ) ).toHaveStyle( 'min-height: 300px;' ); diff --git a/test/e2e/specs/editor/blocks/cover.spec.js b/test/e2e/specs/editor/blocks/cover.spec.js index cf3005c9eaa18f..fa5103ebaa4eeb 100644 --- a/test/e2e/specs/editor/blocks/cover.spec.js +++ b/test/e2e/specs/editor/blocks/cover.spec.js @@ -158,7 +158,7 @@ test.describe( 'Cover', () => { // Ensure there the default value for the minimum height of cover is undefined. const defaultHeightValue = await coverBlockEditorSettings - .getByLabel( 'Minimum height' ) + .getByLabel( 'Minimum height of cover' ) .inputValue(); expect( defaultHeightValue ).toBeFalsy(); From 454f736ff387e37b57407d53df3f2d610d2e20b6 Mon Sep 17 00:00:00 2001 From: akasunil Date: Sun, 16 Jun 2024 13:33:13 +0530 Subject: [PATCH 07/11] Update e2e test for cover block --- test/e2e/specs/editor/blocks/cover.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/e2e/specs/editor/blocks/cover.spec.js b/test/e2e/specs/editor/blocks/cover.spec.js index fa5103ebaa4eeb..276964c2cd7fca 100644 --- a/test/e2e/specs/editor/blocks/cover.spec.js +++ b/test/e2e/specs/editor/blocks/cover.spec.js @@ -158,7 +158,7 @@ test.describe( 'Cover', () => { // Ensure there the default value for the minimum height of cover is undefined. const defaultHeightValue = await coverBlockEditorSettings - .getByLabel( 'Minimum height of cover' ) + .getByRole( 'slider', { name: 'Minimum height of cover' } ) .inputValue(); expect( defaultHeightValue ).toBeFalsy(); From f641ce9e19dc5f94a55f6cfb6bf52c81122dd6f8 Mon Sep 17 00:00:00 2001 From: akasunil Date: Mon, 17 Jun 2024 10:06:10 +0530 Subject: [PATCH 08/11] Update lable of height control for cover --- packages/block-library/src/cover/edit/inspector-controls.js | 2 +- packages/block-library/src/cover/test/edit.js | 5 ++--- test/e2e/specs/editor/blocks/cover.spec.js | 4 ++-- 3 files changed, 5 insertions(+), 6 deletions(-) diff --git a/packages/block-library/src/cover/edit/inspector-controls.js b/packages/block-library/src/cover/edit/inspector-controls.js index dd660179ba4b6c..5bc4f9ff94c4f9 100644 --- a/packages/block-library/src/cover/edit/inspector-controls.js +++ b/packages/block-library/src/cover/edit/inspector-controls.js @@ -59,7 +59,7 @@ function CoverHeightInput( { return ( diff --git a/packages/block-library/src/cover/test/edit.js b/packages/block-library/src/cover/test/edit.js index 540b0cf9d65a3a..bdbfba4e97addf 100644 --- a/packages/block-library/src/cover/test/edit.js +++ b/packages/block-library/src/cover/test/edit.js @@ -372,9 +372,8 @@ describe( 'Cover block', () => { } ) ); - const [ heightControl ] = screen.getAllByLabelText( - /Minimum height of cover/ - ); + const [ heightControl ] = + screen.getAllByLabelText( /Minimum height/ ); await userEvent.clear( heightControl ); await userEvent.type( heightControl, '300' ); diff --git a/test/e2e/specs/editor/blocks/cover.spec.js b/test/e2e/specs/editor/blocks/cover.spec.js index 276964c2cd7fca..7755af1c05867e 100644 --- a/test/e2e/specs/editor/blocks/cover.spec.js +++ b/test/e2e/specs/editor/blocks/cover.spec.js @@ -156,9 +156,9 @@ test.describe( 'Cover', () => { .getByRole( 'tab', { name: 'Styles' } ) .click(); - // Ensure there the default value for the minimum height of cover is undefined. + // Ensure there the default value for the Minimum height is undefined. const defaultHeightValue = await coverBlockEditorSettings - .getByRole( 'slider', { name: 'Minimum height of cover' } ) + .getByRole( 'slider', { name: 'Minimum height' } ) .inputValue(); expect( defaultHeightValue ).toBeFalsy(); From 7586f2f0904f64ab64d63d4d1853981a530c9f34 Mon Sep 17 00:00:00 2001 From: akasunil Date: Mon, 17 Jun 2024 12:12:14 +0530 Subject: [PATCH 09/11] Fix e2e test for cover block height control --- test/e2e/specs/editor/blocks/cover.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/e2e/specs/editor/blocks/cover.spec.js b/test/e2e/specs/editor/blocks/cover.spec.js index 7755af1c05867e..c0c146288e21ae 100644 --- a/test/e2e/specs/editor/blocks/cover.spec.js +++ b/test/e2e/specs/editor/blocks/cover.spec.js @@ -160,7 +160,7 @@ test.describe( 'Cover', () => { const defaultHeightValue = await coverBlockEditorSettings .getByRole( 'slider', { name: 'Minimum height' } ) .inputValue(); - expect( defaultHeightValue ).toBeFalsy(); + expect( defaultHeightValue ).toEqual( '0' ); // There is no accessible locator for the draggable block resize edge, // which is he bottom edge of the Cover block. From 20112ff3e677c6e35feeabe8c0f8db94259d09f2 Mon Sep 17 00:00:00 2001 From: akasunil Date: Sat, 29 Jun 2024 12:05:33 +0530 Subject: [PATCH 10/11] Remove EsLint disable comment --- packages/block-library/src/cover/edit/inspector-controls.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/cover/edit/inspector-controls.js b/packages/block-library/src/cover/edit/inspector-controls.js index 5bc4f9ff94c4f9..cf6d9a6486a0e5 100644 --- a/packages/block-library/src/cover/edit/inspector-controls.js +++ b/packages/block-library/src/cover/edit/inspector-controls.js @@ -40,14 +40,16 @@ function CoverHeightInput( { value = '', } ) { const handleOnChange = ( unprocessedValue ) => { - // eslint-disable-next-line @wordpress/no-unused-vars-before-return - const [ currentValue, currentUnit ] = + const parsedQuantityAndUnit = parseQuantityAndUnitFromRawValue( unprocessedValue ); + const currentValue = parsedQuantityAndUnit[ 0 ]; if ( isNaN( currentValue ) && currentValue !== undefined ) { return; } + const currentUnit = parsedQuantityAndUnit[ 1 ]; + onUnitChange( currentUnit ); onChange( currentValue ); }; From 4044d674a630d0618cd1460c9a348e6e17fac0af Mon Sep 17 00:00:00 2001 From: akasunil Date: Sat, 29 Jun 2024 12:07:02 +0530 Subject: [PATCH 11/11] Add test to verify undefined default value for Minimum height in cover block settings --- packages/block-library/src/cover/test/edit.js | 5 +++-- test/e2e/specs/editor/blocks/cover.spec.js | 4 ++-- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/cover/test/edit.js b/packages/block-library/src/cover/test/edit.js index bdbfba4e97addf..5cb5aeed69d690 100644 --- a/packages/block-library/src/cover/test/edit.js +++ b/packages/block-library/src/cover/test/edit.js @@ -372,8 +372,9 @@ describe( 'Cover block', () => { } ) ); - const [ heightControl ] = - screen.getAllByLabelText( /Minimum height/ ); + const heightControl = screen.getByRole( 'spinbutton', { + name: 'Minimum height', + } ); await userEvent.clear( heightControl ); await userEvent.type( heightControl, '300' ); diff --git a/test/e2e/specs/editor/blocks/cover.spec.js b/test/e2e/specs/editor/blocks/cover.spec.js index c0c146288e21ae..56c47fef9c0cca 100644 --- a/test/e2e/specs/editor/blocks/cover.spec.js +++ b/test/e2e/specs/editor/blocks/cover.spec.js @@ -158,9 +158,9 @@ test.describe( 'Cover', () => { // Ensure there the default value for the Minimum height is undefined. const defaultHeightValue = await coverBlockEditorSettings - .getByRole( 'slider', { name: 'Minimum height' } ) + .getByRole( 'spinbutton', { name: 'Minimum height' } ) .inputValue(); - expect( defaultHeightValue ).toEqual( '0' ); + expect( defaultHeightValue ).toBeFalsy(); // There is no accessible locator for the draggable block resize edge, // which is he bottom edge of the Cover block.