Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update cover block min height control to use HeightControl #62509

Open
wants to merge 15 commits into
base: trunk
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 12 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 12 additions & 32 deletions packages/block-library/src/cover/edit/inspector-controls.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
HeightControl,
privateApis as blockEditorPrivateApis,
} 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 );
Expand All @@ -42,46 +39,29 @@ 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
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd like to avoid disabling ESLint errors if possible. Can I use logic like the following to deal with this?

const parsedQuantityAndUnit =
	parseQuantityAndUnitFromRawValue( unprocessedValue );
const currentValue = parsedQuantityAndUnit[ 0 ];

if ( isNaN( currentValue ) && currentValue !== undefined ) {
	return;
}

const currentUnit = parsedQuantityAndUnit[ 1 ];

onUnitChange( currentUnit );
onChange( currentValue );

This is similar to this part.

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( () => {
const [ parsedQuantity ] = parseQuantityAndUnitFromRawValue( value );
return [ parsedQuantity, unit ].join( '' );
}, [ unit, value ] );

const min = isPx ? COVER_MIN_HEIGHT : 0;

return (
<UnitControl
label={ __( 'Minimum height of cover' ) }
id={ inputId }
isResetValueOnUnitChange
min={ min }
onChange={ handleOnChange }
onUnitChange={ onUnitChange }
__unstableInputWidth="80px"
units={ units }
<HeightControl
label={ __( 'Minimum height' ) }
value={ computedValue }
onChange={ handleOnChange }
/>
);
}
Expand Down
13 changes: 6 additions & 7 deletions packages/block-library/src/cover/test/edit.js
Original file line number Diff line number Diff line change
Expand Up @@ -371,13 +371,12 @@ 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/ );
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
const [ heightControl ] =
screen.getAllByLabelText( /Minimum height/ );
const heightControl = screen.getByRole( 'spinbutton', {
name: 'Minimum height',
} );

It is better to use accessible selectors.


await userEvent.clear( heightControl );
await userEvent.type( heightControl, '300' );

expect( screen.getByLabelText( 'Block: Cover' ) ).toHaveStyle(
'min-height: 300px;'
Expand Down
6 changes: 3 additions & 3 deletions test/e2e/specs/editor/blocks/cover.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -156,11 +156,11 @@ 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
.getByLabel( 'Minimum height of cover' )
.getByRole( 'slider', { name: 'Minimum height' } )
.inputValue();
expect( defaultHeightValue ).toBeFalsy();
expect( defaultHeightValue ).toEqual( '0' );
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This test is trying to verify that the minimum height is "undefined", but it changes the expected result.

I think the actual value being checked is a field for entering a number, not a slider.

Can't the following code achieve the same thing without changing the expected result?

const defaultHeightValue = await coverBlockEditorSettings
	.getByRole( 'spinbutton', { name: 'Minimum height' } )
	.inputValue();
expect( defaultHeightValue ).toBeFalsy();


// There is no accessible locator for the draggable block resize edge,
// which is he bottom edge of the Cover block.
Expand Down
Loading