@wordpress/block-library 7.19.0 → 8.1.0

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { AccessibilityInfo, Image } from 'react-native';
+import { Image } from 'react-native';
 import {
 	getEditorHtml,
 	initializeEditor,
@@ -90,10 +90,6 @@ beforeAll( () => {
 	const getSizeSpy = jest.spyOn( Image, 'getSize' );
 	getSizeSpy.mockImplementation( ( _url, callback ) => callback( 300, 200 ) );
 
-	AccessibilityInfo.isScreenReaderEnabled.mockResolvedValue(
-		Promise.resolve( true )
-	);
-
 	// Register required blocks.
 	paragraph.init();
 	cover.init();
@@ -103,7 +99,6 @@ beforeAll( () => {
 afterAll( () => {
 	// Restore mocks.
 	Image.getSize.mockRestore();
-	AccessibilityInfo.isScreenReaderEnabled.mockReset();
 
 	// Clean up registered blocks.
 	unregisterBlockType( paragraph.name );
@@ -134,32 +129,32 @@ describe( 'when no media is attached', () => {
 
 describe( 'when an image is attached', () => {
 	it( 'edits the image', async () => {
-		const { getByLabelText, getByText } = render(
+		const screen = render(
 			<CoverEdit
 				attributes={ attributes }
 				setAttributes={ setAttributes }
 			/>
 		);
 
-		fireEvent.press( getByLabelText( 'Edit image' ) );
-		const editButton = await waitFor( () => getByText( 'Edit' ) );
+		fireEvent.press( screen.getByLabelText( 'Edit image' ) );
+		const editButton = await screen.findByText( 'Edit' );
 		fireEvent.press( editButton );
 
 		expect( requestMediaEditor ).toHaveBeenCalled();
 	} );
 
 	it( 'replaces the image', async () => {
-		const { getByLabelText, getByText } = render(
+		const screen = render(
 			<CoverEdit
 				attributes={ attributes }
 				setAttributes={ setAttributes }
 			/>
 		);
-		fireEvent.press( getByLabelText( 'Edit image' ) );
-		const replaceButton = await waitFor( () => getByText( 'Replace' ) );
+		fireEvent.press( screen.getByLabelText( 'Edit image' ) );
+		const replaceButton = await screen.findByText( 'Replace' );
 		fireEvent.press( replaceButton );
-		const mediaLibraryButton = await waitFor( () =>
-			getByText( 'WordPress Media Library' )
+		const mediaLibraryButton = await screen.findByText(
+			'WordPress Media Library'
 		);
 		fireEvent.press( mediaLibraryButton );
 
@@ -167,17 +162,17 @@ describe( 'when an image is attached', () => {
 	} );
 
 	it( 'clears the image within image edit button', async () => {
-		const { getByLabelText, getAllByText } = render(
+		const screen = render(
 			<CoverEdit
 				attributes={ attributes }
 				setAttributes={ setAttributes }
 			/>
 		);
-		fireEvent.press( getByLabelText( 'Edit image' ) );
-		const clearMediaButton = await waitFor( () =>
-			getAllByText( 'Clear Media' )
+		fireEvent.press( screen.getByLabelText( 'Edit image' ) );
+		const [ clearMediaButton ] = await screen.findAllByText(
+			'Clear Media'
 		);
-		fireEvent.press( clearMediaButton[ 0 ] );
+		fireEvent.press( clearMediaButton );
 
 		expect( setAttributes ).toHaveBeenCalledWith(
 			expect.objectContaining( {
@@ -209,22 +204,22 @@ describe( 'when an image is attached', () => {
 	} );
 
 	it( 'edits the focal point with a slider', async () => {
-		const { getByText, getByLabelText, getByTestId } = render(
+		const screen = render(
 			<CoverEdit
 				attributes={ attributes }
 				setAttributes={ setAttributes }
 			/>
 		);
-		const editFocalPointButton = await waitFor( () =>
-			getByText( 'Edit focal point' )
+		const editFocalPointButton = await screen.findByText(
+			'Edit focal point'
 		);
 		fireEvent.press( editFocalPointButton );
 		fireEvent(
-			getByTestId( 'Slider Y-Axis Position' ),
+			screen.getByTestId( 'Slider Y-Axis Position' ),
 			'valueChange',
 			'52'
 		);
-		fireEvent.press( getByLabelText( 'Apply' ) );
+		fireEvent.press( screen.getByLabelText( 'Apply' ) );
 
 		expect( setAttributes ).toHaveBeenCalledWith(
 			expect.objectContaining( {
@@ -234,21 +229,24 @@ describe( 'when an image is attached', () => {
 	} );
 
 	it( 'edits the focal point with a text input', async () => {
-		const { getByText, getByLabelText } = render(
+		const screen = render(
 			<CoverEdit
 				attributes={ attributes }
 				setAttributes={ setAttributes }
 			/>
 		);
-		const editFocalPointButton = await waitFor( () =>
-			getByText( 'Edit focal point' )
+		const editFocalPointButton = await screen.findByText(
+			'Edit focal point'
 		);
 		fireEvent.press( editFocalPointButton );
 		fireEvent.press(
-			getByText( ( attributes.focalPoint.x * 100 ).toString() )
+			screen.getByText( ( attributes.focalPoint.x * 100 ).toString() )
 		);
-		fireEvent.changeText( getByLabelText( 'X-Axis Position' ), '99' );
-		fireEvent.press( getByLabelText( 'Apply' ) );
+		fireEvent.changeText(
+			screen.getByLabelText( 'X-Axis Position' ),
+			'99'
+		);
+		fireEvent.press( screen.getByLabelText( 'Apply' ) );
 
 		expect( setAttributes ).toHaveBeenCalledWith(
 			expect.objectContaining( {
@@ -282,15 +280,13 @@ describe( 'when an image is attached', () => {
 	} );
 
 	it( 'clears the media within cell button', async () => {
-		const { getByText } = render(
+		const screen = render(
 			<CoverEdit
 				attributes={ attributes }
 				setAttributes={ setAttributes }
 			/>
 		);
-		const clearMediaButton = await waitFor( () =>
-			getByText( 'Clear Media' )
-		);
+		const clearMediaButton = await screen.findByText( 'Clear Media' );
 		fireEvent.press( clearMediaButton );
 
 		expect( setAttributes ).toHaveBeenCalledWith(
@@ -334,97 +330,79 @@ 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, getByLabelText } = await initializeEditor( {
+		const screen = await initializeEditor( {
 			initialHtml: COVER_BLOCK_PLACEHOLDER_HTML,
 		} );
 
-		const block = await waitFor( () =>
-			getByLabelText( 'Cover block. Empty' )
-		);
+		const block = await screen.findByLabelText( 'Cover block. Empty' );
 		expect( block ).toBeDefined();
 
 		// Select a color from the placeholder palette.
-		const colorPalette = await waitFor( () =>
-			getByTestId( 'color-palette' )
-		);
+		const colorPalette = await screen.findByTestId( '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( () =>
-			getByLabelText( /Cover Block\. Row 1/ )
+		const [ coverBlockWithOverlay ] = await screen.findAllByLabelText(
+			/Cover Block\. Row 1/
 		);
 		fireEvent.press( coverBlockWithOverlay );
 
 		// Open Block Settings.
-		const settingsButton = await waitFor( () =>
-			getByLabelText( 'Open Settings' )
-		);
+		const settingsButton = await screen.findByLabelText( 'Open Settings' );
 		fireEvent.press( settingsButton );
 
 		// Wait for Block Settings to be visible.
-		const blockSettingsModal = getByTestId( 'block-settings-modal' );
+		const blockSettingsModal = screen.getByTestId( 'block-settings-modal' );
 		await waitFor( () => blockSettingsModal.props.isVisible );
 
 		// Open the overlay color settings.
-		const colorOverlay = await waitFor( () =>
-			getByLabelText( 'Color. Empty' )
-		);
+		const colorOverlay = await screen.findByLabelText( 'Color. Empty' );
 		expect( colorOverlay ).toBeDefined();
 		fireEvent.press( colorOverlay );
 
 		// Find the selected color.
-		const colorPaletteButton = await waitFor( () =>
-			getByTestId( COLOR_PINK )
-		);
+		const colorPaletteButton = await screen.findByTestId( COLOR_PINK );
 		expect( colorPaletteButton ).toBeDefined();
 
 		// Select another color.
-		const newColorButton = await waitFor( () => getByTestId( COLOR_RED ) );
+		const newColorButton = await screen.findByTestId( COLOR_RED );
 		fireEvent.press( newColorButton );
 
 		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
 
 	it( 'sets a gradient overlay background when a solid background was already selected', async () => {
-		const { getByTestId, getByLabelText } = await initializeEditor( {
+		const screen = await initializeEditor( {
 			initialHtml: COVER_BLOCK_SOLID_COLOR_HTML,
 		} );
 
 		// Wait for the block to be created.
-		const coverBlock = await waitFor( () =>
-			getByLabelText( /Cover Block\. Row 1/ )
+		const [ coverBlock ] = await screen.findAllByLabelText(
+			/Cover Block\. Row 1/
 		);
-		expect( coverBlock ).toBeDefined();
 		fireEvent.press( coverBlock );
 
 		// Open Block Settings.
-		const settingsButton = await waitFor( () =>
-			getByLabelText( 'Open Settings' )
-		);
+		const settingsButton = await screen.findByLabelText( 'Open Settings' );
 		fireEvent.press( settingsButton );
 
 		// Wait for Block Settings to be visible.
-		const blockSettingsModal = getByTestId( 'block-settings-modal' );
+		const blockSettingsModal = screen.getByTestId( 'block-settings-modal' );
 		await waitFor( () => blockSettingsModal.props.isVisible );
 
 		// Open the overlay color settings.
-		const colorOverlay = await waitFor( () =>
-			getByLabelText( 'Color. Empty' )
-		);
-		expect( colorOverlay ).toBeDefined();
+		const colorOverlay = await screen.findByLabelText( 'Color. Empty' );
 		fireEvent.press( colorOverlay );
 
 		// Find the selected color.
-		const colorButton = await waitFor( () => getByTestId( COLOR_GRAY ) );
+		const colorButton = await screen.findByTestId( COLOR_GRAY );
 		expect( colorButton ).toBeDefined();
 
 		// Open the gradients.
-		const gradientsButton = await waitFor( () =>
-			getByLabelText( 'Gradient' )
-		);
+		const gradientsButton = await screen.findByLabelText( 'Gradient' );
 		expect( gradientsButton ).toBeDefined();
 
 		fireEvent( gradientsButton, 'layout', {
@@ -433,10 +411,7 @@ describe( 'color settings', () => {
 		fireEvent.press( gradientsButton );
 
 		// Find the gradient color.
-		const newGradientButton = await waitFor( () =>
-			getByTestId( GRADIENT_GREEN )
-		);
-		expect( newGradientButton ).toBeDefined();
+		const newGradientButton = await screen.findByTestId( GRADIENT_GREEN );
 		fireEvent.press( newGradientButton );
 
 		// Dismiss the Block Settings modal.
@@ -446,62 +421,48 @@ describe( 'color settings', () => {
 	} );
 
 	it( 'toggles between solid colors and gradients', async () => {
-		const { getByTestId, getByLabelText } = await initializeEditor( {
+		const screen = await initializeEditor( {
 			initialHtml: COVER_BLOCK_PLACEHOLDER_HTML,
 		} );
 
-		const block = await waitFor( () =>
-			getByLabelText( 'Cover block. Empty' )
-		);
+		const block = await screen.findByLabelText( 'Cover block. Empty' );
 		expect( block ).toBeDefined();
 
 		// Select a color from the placeholder palette.
-		const colorPalette = await waitFor( () =>
-			getByTestId( 'color-palette' )
-		);
+		const colorPalette = await screen.findByTestId( '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( () =>
-			getByLabelText( /Cover Block\. Row 1/ )
+		const [ coverBlockWithOverlay ] = await screen.findAllByLabelText(
+			/Cover Block\. Row 1/
 		);
 		fireEvent.press( coverBlockWithOverlay );
 
 		// Open Block Settings.
-		const settingsButton = await waitFor( () =>
-			getByLabelText( 'Open Settings' )
-		);
+		const settingsButton = await screen.findByLabelText( 'Open Settings' );
 		fireEvent.press( settingsButton );
 
 		// Wait for Block Settings to be visible.
-		const blockSettingsModal = getByTestId( 'block-settings-modal' );
+		const blockSettingsModal = screen.getByTestId( 'block-settings-modal' );
 		await waitFor( () => blockSettingsModal.props.isVisible );
 
 		// Open the overlay color settings.
-		const colorOverlay = await waitFor( () =>
-			getByLabelText( 'Color. Empty' )
-		);
-		expect( colorOverlay ).toBeDefined();
+		const colorOverlay = await screen.findByLabelText( 'Color. Empty' );
 		fireEvent.press( colorOverlay );
 
 		// Find the selected color.
-		const colorPaletteButton = await waitFor( () =>
-			getByTestId( COLOR_PINK )
-		);
+		const colorPaletteButton = await screen.findByTestId( COLOR_PINK );
 		expect( colorPaletteButton ).toBeDefined();
 
 		// Select another color.
-		const newColorButton = await waitFor( () => getByTestId( COLOR_RED ) );
+		const newColorButton = await screen.findByTestId( COLOR_RED );
 		fireEvent.press( newColorButton );
 
 		// Open the gradients.
-		const gradientsButton = await waitFor( () =>
-			getByLabelText( 'Gradient' )
-		);
-		expect( gradientsButton ).toBeDefined();
+		const gradientsButton = await screen.findByLabelText( 'Gradient' );
 
 		fireEvent( gradientsButton, 'layout', {
 			nativeEvent: { layout: { width: 80, height: 26 } },
@@ -509,20 +470,14 @@ describe( 'color settings', () => {
 		fireEvent.press( gradientsButton );
 
 		// Find the gradient color.
-		const newGradientButton = await waitFor( () =>
-			getByTestId( GRADIENT_GREEN )
-		);
-		expect( newGradientButton ).toBeDefined();
+		const newGradientButton = await screen.findByTestId( GRADIENT_GREEN );
 		fireEvent.press( newGradientButton );
 
 		// Go back to the settings list.
-		fireEvent.press( await waitFor( () => getByLabelText( 'Go back' ) ) );
+		fireEvent.press( await screen.findByLabelText( 'Go back' ) );
 
 		// Find the color setting.
-		const colorSetting = await waitFor( () =>
-			getByLabelText( 'Color. Empty' )
-		);
-		expect( colorSetting ).toBeDefined();
+		const colorSetting = await screen.findByLabelText( 'Color. Empty' );
 		fireEvent.press( colorSetting );
 
 		// Dismiss the Block Settings modal.
@@ -532,42 +487,34 @@ describe( 'color settings', () => {
 	} );
 
 	it( 'clears the selected overlay color and mantains the inner blocks', async () => {
-		const { getByTestId, getByLabelText, getByText } =
-			await initializeEditor( {
-				initialHtml: COVER_BLOCK_SOLID_COLOR_HTML,
-			} );
+		const screen = await initializeEditor( {
+			initialHtml: COVER_BLOCK_SOLID_COLOR_HTML,
+		} );
 
 		// Wait for the block to be created.
-		const coverBlock = await waitFor( () =>
-			getByLabelText( /Cover Block\. Row 1/ )
+		const [ coverBlock ] = await screen.findAllByLabelText(
+			/Cover Block\. Row 1/
 		);
-		expect( coverBlock ).toBeDefined();
 		fireEvent.press( coverBlock );
 
 		// Open Block Settings.
-		const settingsButton = await waitFor( () =>
-			getByLabelText( 'Open Settings' )
-		);
+		const settingsButton = await screen.findByLabelText( 'Open Settings' );
 		fireEvent.press( settingsButton );
 
 		// Wait for Block Settings to be visible.
-		const blockSettingsModal = getByTestId( 'block-settings-modal' );
+		const blockSettingsModal = screen.getByTestId( 'block-settings-modal' );
 		await waitFor( () => blockSettingsModal.props.isVisible );
 
 		// Open the overlay color settings.
-		const colorOverlay = await waitFor( () =>
-			getByLabelText( 'Color. Empty' )
-		);
-		expect( colorOverlay ).toBeDefined();
+		const colorOverlay = await screen.findByLabelText( 'Color. Empty' );
 		fireEvent.press( colorOverlay );
 
 		// Find the selected color.
-		const colorButton = await waitFor( () => getByTestId( COLOR_GRAY ) );
+		const colorButton = await screen.findByTestId( COLOR_GRAY );
 		expect( colorButton ).toBeDefined();
 
 		// Reset the selected color.
-		const resetButton = await waitFor( () => getByText( 'Reset' ) );
-		expect( resetButton ).toBeDefined();
+		const resetButton = await screen.findByText( 'Reset' );
 		fireEvent.press( resetButton );
 
 		expect( getEditorHtml() ).toMatchSnapshot();

package/src/embed/embed-controls.native.js

@@ -9,6 +9,7 @@ import { __ } from '@wordpress/i18n';
 import { PanelBody, ToggleControl } from '@wordpress/components';
 import { InspectorControls } from '@wordpress/block-editor';
 import { useDispatch } from '@wordpress/data';
+// eslint-disable-next-line no-restricted-imports
 import { store as editPostStore } from '@wordpress/edit-post';
 
 function getResponsiveHelp( checked ) {

package/src/embed/embed-preview.native.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { TouchableWithoutFeedback } from 'react-native';
-import { isEmpty } from 'lodash';
 import classnames from 'classnames/dedupe';
 
 /**
@@ -52,7 +51,7 @@ const EmbedPreview = ( {
 		styles[ `embed-preview__sandbox--align-${ align }` ];
 
 	function accessibilityLabelCreator( caption ) {
-		return isEmpty( caption )
+		return ! caption
 			? /* translators: accessibility text. Empty Embed caption. */
 			  __( 'Embed caption. Empty' )
 			: sprintf(