Image Lightbox: Add a reset button. (#51239)

* Add a reset button, e2e tests still pending * Add e2e tests to reset button
WordPress · Jun 6, 2023 · cde86e6 · cde86e6
1 parent 2c367ca
commit cde86e6
Show file tree

Hide file tree

Showing 2 changed files with 94 additions and 21 deletions.
diff --git a/packages/block-editor/src/hooks/behaviors.js b/packages/block-editor/src/hooks/behaviors.js
@@ -2,16 +2,20 @@
  * WordPress dependencies
  */
 import { addFilter } from '@wordpress/hooks';
-import { SelectControl } from '@wordpress/components';
+import {
+	SelectControl,
+	Button,
+	__experimentalHStack as HStack,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { createHigherOrderComponent } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
-import { InspectorControls } from '../components';
 import { store as blockEditorStore } from '../store';
+import { InspectorControls } from '../components';
 
 /**
  * External dependencies
@@ -72,18 +76,29 @@ function BehaviorsControl( {
 
 	return (
 		<InspectorControls group="advanced">
-			<SelectControl
-				__nextHasNoMarginBottom
-				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 }
-			/>
+			{ /* 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>
 		</InspectorControls>
 	);
 }
@@ -115,13 +130,19 @@ export const withBehaviors = createHigherOrderComponent( ( BlockEdit ) => {
 					blockName={ props.name }
 					blockBehaviors={ props.attributes.behaviors }
 					onChange={ ( nextValue ) => {
-						// If the user selects something, it means that they want to
-						// change the default value (true) so we save it in the attributes.
-						props.setAttributes( {
-							behaviors: {
-								lightbox: nextValue === 'lightbox',
-							},
-						} );
+						if ( nextValue === undefined ) {
+							props.setAttributes( {
+								behaviors: undefined,
+							} );
+						} else {
+							// If the user selects something, it means that they want to
+							// change the default value (true) so we save it in the attributes.
+							props.setAttributes( {
+								behaviors: {
+									lightbox: nextValue === 'lightbox',
+								},
+							} );
+						}
 					} }
 					disabled={ blockHasLink }
 				/>

diff --git a/test/e2e/specs/editor/various/behaviors.spec.js b/test/e2e/specs/editor/various/behaviors.spec.js
@@ -253,6 +253,58 @@ test.describe( 'Testing behaviors functionality', () => {
 		// The behaviors dropdown should be present but disabled.
 		await expect( select ).toBeDisabled();
 	} );
+
+	test( 'Lightbox behavior control has a Reset button that removes the markup', async ( {
+		admin,
+		editor,
+		requestUtils,
+		page,
+		behaviorUtils,
+	} ) => {
+		const date = new Date();
+		const year = date.getFullYear();
+		const month = ( date.getMonth() + 1 ).toString().padStart( 2, '0' );
+		await requestUtils.activateTheme( 'behaviors-enabled' );
+		await admin.createNewPost();
+		const media = await behaviorUtils.createMedia();
+
+		await editor.insertBlock( {
+			name: 'core/image',
+			attributes: {
+				alt: filename,
+				id: media.id,
+				url: media.source_url,
+				behaviors: { lightbox: true },
+			},
+		} );
+		expect( await editor.getEditedPostContent() )
+			.toBe( `<!-- wp:image {"id":${ media.id },"behaviors":{"lightbox":true}} -->
+<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>
+<!-- /wp:image -->` );
+
+		await editor.openDocumentSettingsSidebar();
+
+		const editorSettings = page.getByRole( 'region', {
+			name: 'Editor settings',
+		} );
+
+		await editorSettings
+			.getByRole( 'button', { name: 'Advanced' } )
+			.last()
+			.click();
+
+		const resetButton = editorSettings.getByRole( 'button', {
+			name: 'Reset',
+		} );
+
+		expect( resetButton ).toBeDefined();
+
+		await resetButton.last().click();
+		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>
+<!-- /wp:image -->` );
+	} );
 } );
 
 class BehaviorUtils {