@wordpress/block-library 6.0.25 → 6.1.0

package/src/comments-query-loop/edit.js

@@ -2,51 +2,46 @@
  * WordPress dependencies
  */
 import {
-	BlockControls,
-	InspectorControls,
 	useBlockProps,
 	useInnerBlocksProps,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { SelectControl } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import QueryToolbar from './toolbar';
+import CommentsInspectorControls from './edit/comments-inspector-controls';
+import { useSelect } from '@wordpress/data';
 
-const TEMPLATE = [ [ 'core/comment-template' ] ];
+const TEMPLATE = [
+	[ 'core/comment-template' ],
+	[ 'core/comments-pagination' ],
+];
 
 export default function CommentsQueryLoopEdit( { attributes, setAttributes } ) {
-	const { queryPerPage, tagName: TagName } = attributes;
+	const { tagName: TagName } = attributes;
 
 	const blockProps = useBlockProps();
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		template: TEMPLATE,
 	} );
 
+	const { commentOrder, commentsPerPage } = useSelect( ( select ) => {
+		const { getSettings } = select( blockEditorStore );
+		const { __experimentalDiscussionSettings } = getSettings();
+		return __experimentalDiscussionSettings;
+	} );
+
 	return (
 		<>
-			<BlockControls>
-				<QueryToolbar
-					queryPerPage={ queryPerPage }
-					setQuery={ setAttributes }
-				/>
-			</BlockControls>
-			<InspectorControls __experimentalGroup="advanced">
-				<SelectControl
-					label={ __( 'HTML element' ) }
-					options={ [
-						{ label: __( 'Default (<div>)' ), value: 'div' },
-						{ label: '<section>', value: 'section' },
-						{ label: '<aside>', value: 'aside' },
-					] }
-					value={ TagName }
-					onChange={ ( value ) =>
-						setAttributes( { tagName: value } )
-					}
-				/>
-			</InspectorControls>
+			<CommentsInspectorControls
+				attributes={ attributes }
+				setAttributes={ setAttributes }
+				defaultSettings={ {
+					defaultOrder: commentOrder,
+					defaultPerPage: commentsPerPage,
+				} }
+			/>
 			<TagName { ...innerBlocksProps } />
 		</>
 	);

package/src/comments-query-loop/editor.scss

@@ -0,0 +1,3 @@
+.block-library-comments-toolbar__popover .components-popover__content {
+	min-width: 230px;
+}

package/src/common.scss

@@ -101,3 +101,22 @@
 	width: auto;
 	z-index: 100000;
 }
+
+/**
+ * The following provide a simple means of applying a default border style when
+ * a user first makes a selection in the border block support panel.
+ * This prevents issues such as where the user could set a border width
+ * and see no border due there being no border style set.
+ *
+ * This is intended to be removed once intelligent defaults can be set while
+ * making border selections via the block support.
+ *
+ * See: https://github.com/WordPress/gutenberg/pull/33743
+ */
+html :where(.has-border-color) {
+	border-style: solid;
+}
+
+html :where([style*="border-width"]) {
+	border-style: solid;
+}

package/src/cover/block.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/cover",
 	"title": "Cover",

package/src/cover/edit.js

@@ -706,6 +706,7 @@ function CoverEdit( {
 				<BoxControlVisualizer
 					values={ styleAttribute?.spacing?.padding }
 					showValues={ styleAttribute?.visualizers?.padding }
+					className="block-library-cover__padding-visualizer"
 				/>
 				<ResizableCover
 					className="block-library-cover__resize-container"

package/src/cover/edit.native.js

@@ -40,8 +40,9 @@ import {
 	MediaPlaceholder,
 	MediaUpload,
 	MediaUploadProgress,
-	withColors,
-	__experimentalUseGradient,
+	getColorObjectByColorValue,
+	getColorObjectByAttributeValues,
+	getGradientValueBySlug,
 	useSetting,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
@@ -83,13 +84,13 @@ const Cover = ( {
 	getStylesFromColorScheme,
 	isParentSelected,
 	onFocus,
-	overlayColor,
 	setAttributes,
 	openGeneralSidebar,
 	closeSettingsBottomSheet,
 	isSelected,
 	selectBlock,
 	blockWidth,
+	hasInnerBlocks,
 } ) => {
 	const {
 		backgroundType,
@@ -103,6 +104,9 @@ const Cover = ( {
 		minHeightUnit = 'px',
 		allowedBlocks,
 		templateLock,
+		customGradient,
+		gradient,
+		overlayColor,
 	} = attributes;
 	const [ isScreenReaderEnabled, setIsScreenReaderEnabled ] = useState(
 		false
@@ -113,7 +117,7 @@ const Cover = ( {
 
 		// sync with local media store
 		mediaUploadSync();
-		AccessibilityInfo.addEventListener(
+		const a11yInfoChangeSubscription = AccessibilityInfo.addEventListener(
 			'screenReaderChanged',
 			setIsScreenReaderEnabled
 		);
@@ -126,10 +130,7 @@ const Cover = ( {
 
 		return () => {
 			isCurrent = false;
-			AccessibilityInfo.removeEventListener(
-				'screenReaderChanged',
-				setIsScreenReaderEnabled
-			);
+			a11yInfoChangeSubscription.remove();
 		};
 	}, [] );
 
@@ -145,18 +146,24 @@ const Cover = ( {
 	const coverDefaultPalette = {
 		colors: colorsDefault.slice( 0, THEME_COLORS_COUNT ),
 	};
-
-	const { gradientValue } = __experimentalUseGradient();
+	const gradients = useSetting( 'color.gradients' ) || [];
+	const gradientValue =
+		customGradient || getGradientValueBySlug( gradients, gradient );
+	const overlayColorValue = getColorObjectByAttributeValues(
+		colorsDefault,
+		overlayColor
+	);
 
 	const hasBackground = !! (
 		url ||
 		( style && style.color && style.color.background ) ||
 		attributes.overlayColor ||
-		overlayColor.color ||
+		overlayColorValue.color ||
+		customOverlayColor ||
 		gradientValue
 	);
 
-	const hasOnlyColorBackground = ! url && hasBackground;
+	const hasOnlyColorBackground = ! url && ( hasBackground || hasInnerBlocks );
 
 	const [
 		isCustomColorPickerShowing,
@@ -225,10 +232,12 @@ const Cover = ( {
 	}, [ closeSettingsBottomSheet ] );
 
 	function setColor( color ) {
+		const colorValue = getColorObjectByColorValue( colorsDefault, color );
+
 		setAttributes( {
 			// clear all related attributes (only one should be set)
-			overlayColor: undefined,
-			customOverlayColor: color,
+			overlayColor: colorValue?.slug ?? undefined,
+			customOverlayColor: ( ! colorValue?.slug && color ) ?? undefined,
 			gradient: undefined,
 			customGradient: undefined,
 		} );
@@ -251,12 +260,12 @@ const Cover = ( {
 		! gradientValue && {
 			backgroundColor:
 				customOverlayColor ||
-				overlayColor?.color ||
+				overlayColorValue?.color ||
 				style?.color?.background ||
 				styles.overlay?.color,
 		},
 		// While we don't support theme colors we add a default bg color
-		! overlayColor.color && ! url ? backgroundColor : {},
+		! overlayColorValue.color && ! url ? backgroundColor : {},
 		isImage &&
 			isParentSelected &&
 			! isUploadInProgress &&
@@ -432,7 +441,10 @@ const Cover = ( {
 		</TouchableWithoutFeedback>
 	);
 
-	if ( ! hasBackground || isCustomColorPickerShowing ) {
+	if (
+		( ! hasBackground && ! hasInnerBlocks ) ||
+		isCustomColorPickerShowing
+	) {
 		return (
 			<View>
 				{ isCustomColorPickerShowing && colorPickerControls }
@@ -575,17 +587,21 @@ const Cover = ( {
 };
 
 export default compose( [
-	withColors( { overlayColor: 'background-color' } ),
 	withSelect( ( select, { clientId } ) => {
-		const { getSelectedBlockClientId } = select( blockEditorStore );
+		const { getSelectedBlockClientId, getBlock } = select(
+			blockEditorStore
+		);
 
 		const selectedBlockClientId = getSelectedBlockClientId();
 
 		const { getSettings } = select( blockEditorStore );
 
+		const hasInnerBlocks = getBlock( clientId )?.innerBlocks.length > 0;
+
 		return {
 			settings: getSettings(),
 			isParentSelected: selectedBlockClientId === clientId,
+			hasInnerBlocks,
 		};
 	} ),
 	withDispatch( ( dispatch, { clientId } ) => {

package/src/cover/overlay-color-settings.native.js

@@ -74,6 +74,15 @@ function OverlayColorSettings( {
 			}
 		};
 
+		const onColorCleared = () => {
+			setAttributes( {
+				overlayColor: undefined,
+				customOverlayColor: undefined,
+				gradient: undefined,
+				customGradient: undefined,
+			} );
+		};
+
 		return [
 			{
 				label: __( 'Color' ),
@@ -81,6 +90,7 @@ function OverlayColorSettings( {
 				colorValue,
 				gradientValue,
 				onGradientChange,
+				onColorCleared,
 			},
 		];
 	}, [ colorValue, gradientValue, colors, gradients ] );

package/src/cover/style.scss

@@ -76,6 +76,10 @@
 		}
 	}
 
+	.block-library-cover__padding-visualizer {
+		z-index: z-index(".block-library-cover__padding-visualizer");
+	}
+
 	// Apply max-width to floated items that have no intrinsic width
 	&.alignleft,
 	&.alignright {

package/src/cover/test/__snapshots__/edit.native.js.snap

@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`color settings clears the selected overlay color and mantains the inner blocks 1`] = `
+"<!-- wp:cover -->
+<div class=\\"wp-block-cover\\"><span aria-hidden=\\"true\\" class=\\"has-background-dim-100 wp-block-cover__gradient-background has-background-dim\\"></span><div class=\\"wp-block-cover__inner-container\\"><!-- wp:paragraph {\\"align\\":\\"center\\",\\"placeholder\\":\\"Write title…\\"} -->
+<p class=\\"has-text-align-center\\"></p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:cover -->"
+`;
+
+exports[`color settings sets a color for the overlay background when the placeholder is visible 1`] = `
+"<!-- wp:cover {\\"overlayColor\\":\\"vivid-red\\"} -->
+<div class=\\"wp-block-cover\\"><span aria-hidden=\\"true\\" class=\\"has-vivid-red-background-color has-background-dim-100 wp-block-cover__gradient-background has-background-dim\\"></span><div class=\\"wp-block-cover__inner-container\\"><!-- wp:paragraph {\\"align\\":\\"center\\",\\"placeholder\\":\\"Write title…\\"} -->
+<p class=\\"has-text-align-center\\"></p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:cover -->"
+`;
+
+exports[`color settings sets a gradient overlay background when a solid background was already selected 1`] = `
+"<!-- wp:cover {\\"gradient\\":\\"light-green-cyan-to-vivid-green-cyan\\"} -->
+<div class=\\"wp-block-cover\\"><span aria-hidden=\\"true\\" class=\\"has-background-dim-100 wp-block-cover__gradient-background has-light-green-cyan-to-vivid-green-cyan-gradient-background has-background-dim has-background-gradient has-light-green-cyan-to-vivid-green-cyan-gradient-background\\"></span><div class=\\"wp-block-cover__inner-container\\"><!-- wp:paragraph {\\"align\\":\\"center\\",\\"placeholder\\":\\"Write title…\\"} -->
+<p class=\\"has-text-align-center\\"></p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:cover -->"
+`;
+
+exports[`color settings toggles between solid colors and gradients 1`] = `
+"<!-- wp:cover {\\"gradient\\":\\"light-green-cyan-to-vivid-green-cyan\\"} -->
+<div class=\\"wp-block-cover\\"><span aria-hidden=\\"true\\" class=\\"has-background-dim-100 wp-block-cover__gradient-background has-light-green-cyan-to-vivid-green-cyan-gradient-background has-background-dim has-background-gradient has-light-green-cyan-to-vivid-green-cyan-gradient-background\\"></span><div class=\\"wp-block-cover__inner-container\\"><!-- wp:paragraph {\\"align\\":\\"center\\",\\"placeholder\\":\\"Write title…\\"} -->
+<p class=\\"has-text-align-center\\"></p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:cover -->"
+`;

package/src/cover/test/edit.native.js

@@ -1,15 +1,22 @@
 /**
  * External dependencies
  */
-import { Image } from 'react-native';
-import { render, fireEvent, waitFor } from 'test/helpers';
+import { AccessibilityInfo, Image } from 'react-native';
+import {
+	getEditorHtml,
+	initializeEditor,
+	render,
+	fireEvent,
+	waitFor,
+	within,
+} from 'test/helpers';
 
 /**
  * WordPress dependencies
  */
 import { BottomSheetSettings, BlockEdit } from '@wordpress/block-editor';
 import { SlotFillProvider } from '@wordpress/components';
-import { registerBlockType, unregisterBlockType } from '@wordpress/blocks';
+import { setDefaultBlockName, unregisterBlockType } from '@wordpress/blocks';
 import {
 	requestMediaPicker,
 	requestMediaEditor,
@@ -19,7 +26,9 @@ import {
  * Internal dependencies
  */
 import { IMAGE_BACKGROUND_TYPE } from '../shared';
-import { metadata, settings, name } from '../index';
+import * as paragraph from '../../paragraph';
+import * as cover from '..';
+import { registerBlock } from '../..';
 
 // Avoid errors due to mocked stylesheet files missing required selectors
 jest.mock( '@wordpress/compose', () => ( {
@@ -33,10 +42,25 @@ jest.mock( '@wordpress/compose', () => ( {
 	) ),
 } ) );
 
+const COVER_BLOCK_PLACEHOLDER_HTML = `<!-- wp:cover -->
+<div class="wp-block-cover"><span aria-hidden="true" class="has-background-dim-100 wp-block-cover__gradient-background has-background-dim"></span><div class="wp-block-cover__inner-container"></div></div>
+<!-- /wp:cover -->`;
+const COVER_BLOCK_SOLID_COLOR_HTML = `<!-- wp:cover {"overlayColor":"cyan-bluish-gray"} -->
+<div class="wp-block-cover"><span aria-hidden="true" class="has-cyan-bluish-gray-background-color has-background-dim-100 wp-block-cover__gradient-background has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…"} -->
+<p class="has-text-align-center"></p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:cover -->`;
+
+const COLOR_PINK = '#f78da7';
+const COLOR_RED = '#cf2e2e';
+const COLOR_GRAY = '#abb8c3';
+const GRADIENT_GREEN =
+	'linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)';
+
 // Simplified tree to render Cover edit within slot
 const CoverEdit = ( props ) => (
 	<SlotFillProvider>
-		<BlockEdit isSelected name={ name } clientId={ 0 } { ...props } />
+		<BlockEdit isSelected name={ cover.name } clientId={ 0 } { ...props } />
 		<BottomSheetSettings isVisible />
 	</SlotFillProvider>
 );
@@ -55,26 +79,24 @@ beforeAll( () => {
 	const getSizeSpy = jest.spyOn( Image, 'getSize' );
 	getSizeSpy.mockImplementation( ( _url, callback ) => callback( 300, 200 ) );
 
+	AccessibilityInfo.isScreenReaderEnabled.mockResolvedValue(
+		Promise.resolve( true )
+	);
+
 	// Register required blocks
-	registerBlockType( name, {
-		...metadata,
-		...settings,
-	} );
-	registerBlockType( 'core/paragraph', {
-		category: 'text',
-		title: 'Paragraph',
-		edit: () => {},
-		save: () => {},
-	} );
+	registerBlock( paragraph );
+	registerBlock( cover );
+	setDefaultBlockName( paragraph.name );
 } );
 
 afterAll( () => {
 	// Restore mocks
 	Image.getSize.mockRestore();
+	AccessibilityInfo.isScreenReaderEnabled.mockReset();
 
 	// Clean up registered blocks
-	unregisterBlockType( name );
-	unregisterBlockType( 'core/paragraph' );
+	unregisterBlockType( paragraph.name );
+	unregisterBlockType( cover.name );
 } );
 
 describe( 'when no media is attached', () => {
@@ -270,3 +292,244 @@ describe( 'when an image is attached', () => {
 		);
 	} );
 } );
+
+describe( 'color settings', () => {
+	it( 'sets a color for the overlay background when the placeholder is visible', async () => {
+		const { getByTestId, getByA11yLabel } = initializeEditor( {
+			initialHtml: COVER_BLOCK_PLACEHOLDER_HTML,
+		} );
+
+		const block = await waitFor( () =>
+			getByA11yLabel( 'Cover block. Empty' )
+		);
+		expect( block ).toBeDefined();
+
+		// Select a color from the placeholder palette
+		const colorPalette = await waitFor( () =>
+			getByTestId( 'color-palette' )
+		);
+		const colorButton = within( colorPalette ).getByTestId( COLOR_PINK );
+
+		expect( colorButton ).toBeDefined();
+		fireEvent.press( colorButton );
+
+		// Wait for the block to be created
+		const coverBlockWithOverlay = await waitFor( () =>
+			getByA11yLabel( /Cover Block\. Row 1/ )
+		);
+		fireEvent.press( coverBlockWithOverlay );
+
+		// Open Block Settings
+		const settingsButton = await waitFor( () =>
+			getByA11yLabel( 'Open Settings' )
+		);
+		fireEvent.press( settingsButton );
+
+		// Wait for Block Settings to be visible
+		const blockSettingsModal = getByTestId( 'block-settings-modal' );
+		await waitFor( () => blockSettingsModal.props.isVisible );
+
+		// Open the overlay color settings
+		const colorOverlay = await waitFor( () =>
+			getByA11yLabel( 'Color. Empty' )
+		);
+		expect( colorOverlay ).toBeDefined();
+		fireEvent.press( colorOverlay );
+
+		// Find the selected color
+		const colorPaletteButton = await waitFor( () =>
+			getByTestId( COLOR_PINK )
+		);
+		expect( colorPaletteButton ).toBeDefined();
+
+		// Select another color
+		const newColorButton = await waitFor( () => getByTestId( COLOR_RED ) );
+		fireEvent.press( newColorButton );
+
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'sets a gradient overlay background when a solid background was already selected', async () => {
+		const { getByTestId, getByA11yLabel } = initializeEditor( {
+			initialHtml: COVER_BLOCK_SOLID_COLOR_HTML,
+		} );
+
+		// Wait for the block to be created
+		const coverBlock = await waitFor( () =>
+			getByA11yLabel( /Cover Block\. Row 1/ )
+		);
+		expect( coverBlock ).toBeDefined();
+		fireEvent.press( coverBlock );
+
+		// Open Block Settings
+		const settingsButton = await waitFor( () =>
+			getByA11yLabel( 'Open Settings' )
+		);
+		fireEvent.press( settingsButton );
+
+		// Wait for Block Settings to be visible
+		const blockSettingsModal = getByTestId( 'block-settings-modal' );
+		await waitFor( () => blockSettingsModal.props.isVisible );
+
+		// Open the overlay color settings
+		const colorOverlay = await waitFor( () =>
+			getByA11yLabel( 'Color. Empty' )
+		);
+		expect( colorOverlay ).toBeDefined();
+		fireEvent.press( colorOverlay );
+
+		// Find the selected color
+		const colorButton = await waitFor( () => getByTestId( COLOR_GRAY ) );
+		expect( colorButton ).toBeDefined();
+
+		// Open the gradients
+		const gradientsButton = await waitFor( () =>
+			getByA11yLabel( 'Gradient' )
+		);
+		expect( gradientsButton ).toBeDefined();
+
+		fireEvent( gradientsButton, 'layout', {
+			nativeEvent: { layout: { width: 80, height: 26 } },
+		} );
+		fireEvent.press( gradientsButton );
+
+		// Find the gradient color
+		const newGradientButton = await waitFor( () =>
+			getByTestId( GRADIENT_GREEN )
+		);
+		expect( newGradientButton ).toBeDefined();
+		fireEvent.press( newGradientButton );
+
+		// Dismiss the Block Settings modal
+		fireEvent( blockSettingsModal, 'backdropPress' );
+
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'toggles between solid colors and gradients', async () => {
+		const { getByTestId, getByA11yLabel } = initializeEditor( {
+			initialHtml: COVER_BLOCK_PLACEHOLDER_HTML,
+		} );
+
+		const block = await waitFor( () =>
+			getByA11yLabel( 'Cover block. Empty' )
+		);
+		expect( block ).toBeDefined();
+
+		// Select a color from the placeholder palette
+		const colorPalette = await waitFor( () =>
+			getByTestId( 'color-palette' )
+		);
+		const colorButton = within( colorPalette ).getByTestId( COLOR_PINK );
+
+		expect( colorButton ).toBeDefined();
+		fireEvent.press( colorButton );
+
+		// Wait for the block to be created
+		const coverBlockWithOverlay = await waitFor( () =>
+			getByA11yLabel( /Cover Block\. Row 1/ )
+		);
+		fireEvent.press( coverBlockWithOverlay );
+
+		// Open Block Settings
+		const settingsButton = await waitFor( () =>
+			getByA11yLabel( 'Open Settings' )
+		);
+		fireEvent.press( settingsButton );
+
+		// Wait for Block Settings to be visible
+		const blockSettingsModal = getByTestId( 'block-settings-modal' );
+		await waitFor( () => blockSettingsModal.props.isVisible );
+
+		// Open the overlay color settings
+		const colorOverlay = await waitFor( () =>
+			getByA11yLabel( 'Color. Empty' )
+		);
+		expect( colorOverlay ).toBeDefined();
+		fireEvent.press( colorOverlay );
+
+		// Find the selected color
+		const colorPaletteButton = await waitFor( () =>
+			getByTestId( COLOR_PINK )
+		);
+		expect( colorPaletteButton ).toBeDefined();
+
+		// Select another color
+		const newColorButton = await waitFor( () => getByTestId( COLOR_RED ) );
+		fireEvent.press( newColorButton );
+
+		// Open the gradients
+		const gradientsButton = await waitFor( () =>
+			getByA11yLabel( 'Gradient' )
+		);
+		expect( gradientsButton ).toBeDefined();
+
+		fireEvent( gradientsButton, 'layout', {
+			nativeEvent: { layout: { width: 80, height: 26 } },
+		} );
+		fireEvent.press( gradientsButton );
+
+		// Find the gradient color
+		const newGradientButton = await waitFor( () =>
+			getByTestId( GRADIENT_GREEN )
+		);
+		expect( newGradientButton ).toBeDefined();
+		fireEvent.press( newGradientButton );
+
+		// Go back to the settings list
+		fireEvent.press( await waitFor( () => getByA11yLabel( 'Go back' ) ) );
+
+		// Find the color setting
+		const colorSetting = await waitFor( () =>
+			getByA11yLabel( 'Color. Empty' )
+		);
+		expect( colorSetting ).toBeDefined();
+		fireEvent.press( colorSetting );
+
+		// Dismiss the Block Settings modal
+		fireEvent( blockSettingsModal, 'backdropPress' );
+
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'clears the selected overlay color and mantains the inner blocks', async () => {
+		const { getByTestId, getByA11yLabel, getByText } = initializeEditor( {
+			initialHtml: COVER_BLOCK_SOLID_COLOR_HTML,
+		} );
+
+		// Wait for the block to be created
+		const coverBlock = await waitFor( () =>
+			getByA11yLabel( /Cover Block\. Row 1/ )
+		);
+		expect( coverBlock ).toBeDefined();
+		fireEvent.press( coverBlock );
+
+		// Open Block Settings
+		const settingsButton = await waitFor( () =>
+			getByA11yLabel( 'Open Settings' )
+		);
+		fireEvent.press( settingsButton );
+
+		// Wait for Block Settings to be visible
+		const blockSettingsModal = getByTestId( 'block-settings-modal' );
+		await waitFor( () => blockSettingsModal.props.isVisible );
+
+		// Open the overlay color settings
+		const colorOverlay = await waitFor( () =>
+			getByA11yLabel( 'Color. Empty' )
+		);
+		expect( colorOverlay ).toBeDefined();
+		fireEvent.press( colorOverlay );
+
+		// Find the selected color
+		const colorButton = await waitFor( () => getByTestId( COLOR_GRAY ) );
+		expect( colorButton ).toBeDefined();
+
+		// Reset the selected color
+		const resetButton = await waitFor( () => getByText( 'Reset' ) );
+		expect( resetButton ).toBeDefined();
+		fireEvent.press( resetButton );
+
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+} );