Remove reset button in behaviors, use dropdown option instead

WordPress · Jun 13, 2023 · b5bdc9e · b5bdc9e
1 parent 3ae552e
commit b5bdc9e
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 39 deletions.
diff --git a/packages/block-editor/src/hooks/behaviors.js b/packages/block-editor/src/hooks/behaviors.js
@@ -2,11 +2,7 @@
  * WordPress dependencies
  */
 import { addFilter } from '@wordpress/hooks';
-import {
-	SelectControl,
-	Button,
-	__experimentalHStack as HStack,
-} from '@wordpress/components';
+import { SelectControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { hasBlockSupport } from '@wordpress/blocks';
 import { createHigherOrderComponent } from '@wordpress/compose';
@@ -48,6 +44,11 @@ function BehaviorsControl( {
 		label: __( 'No behaviors' ),
 	};
 
+	const defaultBehaviorsOption = {
+		value: 'default',
+		label: __( 'Default' ),
+	};
+
 	const behaviorsOptions = Object.entries( settings )
 		.filter(
 			( [ behaviorName, behaviorValue ] ) =>
@@ -65,7 +66,11 @@ function BehaviorsControl( {
 	// If every behavior is disabled, do not show the behaviors inspector control.
 	if ( behaviorsOptions.length === 0 ) return null;
 
-	const options = [ noBehaviorsOption, ...behaviorsOptions ];
+	const options = [
+		defaultBehaviorsOption,
+		noBehaviorsOption,
+		...behaviorsOptions,
+	];
 
 	// Block behaviors take precedence over theme behaviors.
 	const behaviors = merge( themeBehaviors, blockBehaviors || {} );
@@ -77,28 +82,17 @@ function BehaviorsControl( {
 	return (
 		<InspectorControls group="advanced">
 			{ /* This div is needed to prevent a margin bottom between the dropdown and the button. */ }
-			<div>
-				<SelectControl
-					label={ __( 'Behaviors' ) }
-					// At the moment we are only supporting one behavior (Lightbox)
-					value={ behaviors?.lightbox ? 'lightbox' : '' }
-					options={ options }
-					onChange={ onChange }
-					hideCancelButton={ true }
-					help={ helpText }
-					size="__unstable-large"
-					disabled={ disabled }
-				/>
-			</div>
-			<HStack justify="flex-end">
-				<Button
-					isSmall
-					disabled={ disabled }
-					onClick={ () => onChange( undefined ) }
-				>
-					{ __( 'Reset' ) }
-				</Button>
-			</HStack>
+			<SelectControl
+				label={ __( 'Behaviors' ) }
+				// At the moment we are only supporting one behavior (Lightbox)
+				value={ behaviors?.lightbox ? 'lightbox' : '' }
+				options={ options }
+				onChange={ onChange }
+				hideCancelButton={ true }
+				help={ helpText }
+				size="__unstable-large"
+				disabled={ disabled }
+			/>
 		</InspectorControls>
 	);
 }
@@ -130,7 +124,7 @@ export const withBehaviors = createHigherOrderComponent( ( BlockEdit ) => {
 					blockName={ props.name }
 					blockBehaviors={ props.attributes.behaviors }
 					onChange={ ( nextValue ) => {
-						if ( nextValue === undefined ) {
+						if ( nextValue === 'default' ) {
 							props.setAttributes( {
 								behaviors: undefined,
 							} );

diff --git a/test/e2e/specs/editor/various/behaviors.spec.js b/test/e2e/specs/editor/various/behaviors.spec.js
@@ -83,7 +83,7 @@ test.describe( 'Testing behaviors functionality', () => {
 		await expect( select ).toHaveValue( '' );
 
 		// By default, you should be able to select the Lightbox behavior.
-		await expect( select.getByRole( 'option' ) ).toHaveCount( 2 );
+		await expect( select.getByRole( 'option' ) ).toHaveCount( 3 );
 	} );
 
 	test( 'Behaviors UI can be disabled in the `theme.json`', async ( {
@@ -162,8 +162,8 @@ test.describe( 'Testing behaviors functionality', () => {
 		// attributes takes precedence over the theme's value.
 		await expect( select ).toHaveValue( 'lightbox' );
 
-		// There should be 2 options available: `No behaviors` and `Lightbox`.
-		await expect( select.getByRole( 'option' ) ).toHaveCount( 2 );
+		// There should be 3 options available: `No behaviors` and `Lightbox`.
+		await expect( select.getByRole( 'option' ) ).toHaveCount( 3 );
 
 		// We can change the value of the behaviors dropdown to `No behaviors`.
 		await select.selectOption( { label: 'No behaviors' } );
@@ -210,7 +210,7 @@ test.describe( 'Testing behaviors functionality', () => {
 		await expect( select ).toHaveValue( 'lightbox' );
 
 		// There should be 2 options available: `No behaviors` and `Lightbox`.
-		await expect( select.getByRole( 'option' ) ).toHaveCount( 2 );
+		await expect( select.getByRole( 'option' ) ).toHaveCount( 3 );
 
 		// We can change the value of the behaviors dropdown to `No behaviors`.
 		await select.selectOption( { label: 'No behaviors' } );
@@ -254,7 +254,7 @@ test.describe( 'Testing behaviors functionality', () => {
 		await expect( select ).toBeDisabled();
 	} );
 
-	test( 'Lightbox behavior control has a Reset button that removes the markup', async ( {
+	test( 'Lightbox behavior control has a default option that removes the markup', async ( {
 		admin,
 		editor,
 		requestUtils,
@@ -293,13 +293,11 @@ test.describe( 'Testing behaviors functionality', () => {
 			.last()
 			.click();
 
-		const resetButton = editorSettings.getByRole( 'button', {
-			name: 'Reset',
+		const select = editorSettings.getByRole( 'combobox', {
+			name: 'Behavior',
 		} );
 
-		expect( resetButton ).toBeDefined();
-
-		await resetButton.last().click();
+		await select.selectOption( { label: 'Default' } );
 		expect( await editor.getEditedPostContent() )
 			.toBe( `<!-- wp:image {"id":${ media.id }} -->
 <figure class="wp-block-image"><img src="http://localhost:8889/wp-content/uploads/${ year }/${ month }/1024x768_e2e_test_image_size.jpeg" alt="1024x768_e2e_test_image_size.jpeg" class="wp-image-${ media.id }"/></figure>