@wordpress/components 19.2.3 → 19.4.1-next.f435e9e01b.0

package/src/mobile/link-settings/index.native.js

@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { Platform, Clipboard } from 'react-native';
+import { Platform } from 'react-native';
+import Clipboard from '@react-native-clipboard/clipboard';
 /**
  * WordPress dependencies
  */
@@ -93,6 +94,7 @@ function LinkSettings( {
 	const [ urlInputValue, setUrlInputValue ] = useState( '' );
 	const [ labelInputValue, setLabelInputValue ] = useState( '' );
 	const [ linkRelInputValue, setLinkRelInputValue ] = useState( '' );
+	const onCloseSettingsSheetConsumed = useRef( false );
 	const prevEditorSidebarOpenedRef = useRef();
 
 	const { onHandleClosingBottomSheet } = useContext( BottomSheetContext );
@@ -123,6 +125,10 @@ function LinkSettings( {
 
 	useEffect( () => {
 		const isSettingSheetOpen = isVisible || editorSidebarOpened;
+		if ( isSettingSheetOpen ) {
+			onCloseSettingsSheetConsumed.current = false;
+		}
+
 		if ( options.url.autoFill && isSettingSheetOpen && ! url ) {
 			getURLFromClipboard();
 		}
@@ -174,6 +180,12 @@ function LinkSettings( {
 	}, [ urlInputValue, labelInputValue, linkRelInputValue, setAttributes ] );
 
 	const onCloseSettingsSheet = useCallback( () => {
+		if ( onCloseSettingsSheetConsumed.current ) {
+			return;
+		}
+
+		onCloseSettingsSheetConsumed.current = true;
+
 		onSetAttributes();
 
 		if ( onClose ) {

package/src/mobile/link-settings/test/edit.native.js

@@ -0,0 +1,368 @@
+// noinspection DuplicatedCode
+
+/**
+ * External dependencies
+ */
+import Clipboard from '@react-native-clipboard/clipboard';
+import { fireEvent, initializeEditor, waitFor } from 'test/helpers';
+/**
+ * WordPress dependencies
+ */
+import { registerCoreBlocks } from '@wordpress/block-library';
+import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Utility function to unregister all core block types previously registered
+ * when staging the Redux Store `beforeAll` integration tests start running.
+ *
+ * This should probably be extracted into a utility module for future tests.
+ */
+const unregisterBlocks = () => {
+	const blocks = getBlockTypes();
+
+	blocks.forEach( ( { name } ) => unregisterBlockType( name ) );
+};
+
+/**
+ * ### TODO
+ * + Try to figure out why I can't `console.log(JSON.stringify(subject.toJSON()))` anymore.
+ */
+describe.each( [
+	[
+		{
+			type: 'core/button',
+			initialHtml: `
+				<!-- wp:button {"style":{"border":{"radius":"5px"}}} -->
+				<div class="wp-block-button">
+					<a class="wp-block-button__link" style="border-radius:5px">Link</a>
+				</div>
+				<!-- /wp:button -->
+			`,
+			toJSON: () => 'core/button',
+		},
+	],
+	[
+		{
+			type: 'core/image',
+			initialHtml: `
+				<!-- wp:image {"id":20,"sizeSlug":"large","linkDestination":"custom"} -->
+				<figure class="wp-block-image size-large">
+					<img class="wp-image-20" src="https://tonytahmouchtest.files.wordpress.com/2021/10/img_0111-2.jpg?w=1024" alt="" />
+				</figure>
+				<!-- /wp:image -->
+			`,
+			toJSON: () => 'core/image',
+		},
+	],
+] )( '<LinkSettings/> from %j', ( { type, initialHtml } ) => {
+	beforeAll( () => {
+		registerCoreBlocks();
+	} );
+
+	afterAll( () => {
+		unregisterBlocks();
+	} );
+
+	/**
+	 * GIVEN an EDITOR is displayed with an EDIT IMAGE BLOCK or EDIT BUTTON BLOCK;
+	 * GIVEN the CLIPBOARD has a URL copied;
+	 * WHEN the USER selects the SETTINGS BUTTON on the EDIT IMAGE BLOCK or EDIT BUTTON BLOCK;
+	 */
+	it( 'should display the LINK SETTINGS with an EMPTY LINK TO field.', async () => {
+		// Arrange
+		const url = 'https://tonytahmouchtest.files.wordpress.com';
+		const subject = await initializeEditor( { initialHtml } );
+		Clipboard.getString.mockReturnValue( url );
+
+		// Act
+		const block = await waitFor( () =>
+			subject.getByA11yLabel(
+				type === 'core/image' ? /Image Block/ : /Button Block/
+			)
+		);
+		fireEvent.press( block );
+		fireEvent.press( block );
+		fireEvent.press(
+			await waitFor( () => subject.getByA11yLabel( 'Open Settings' ) )
+		);
+
+		// Assert
+		const linkToField = await waitFor( () =>
+			subject.getByA11yLabel(
+				`Link to, ${
+					type === 'core/image' ? 'None' : 'Search or type URL'
+				}`
+			)
+		);
+		expect( linkToField ).toBeTruthy();
+	} );
+
+	describe( '<LinkPicker/>', () => {
+		describe( 'Hide Clipboard Link Suggestion - Invalid URL in Clipboard', () => {
+			/**
+			 * GIVEN a SETTINGS BOTTOM SHEET is displayed;
+			 * GIVEN the CLIPBOARD has a NON-URL copied;
+			 * GIVEN the STATE has NO URL;
+			 * WHEN the USER selects the LINK TO cell;
+			 */
+			it( 'should display the LINK PICKER with NO FROM CLIPBOARD CELL.', async () => {
+				// Arrange
+				const url = 'tonytahmouchtest.files.wordpress.com';
+				const subject = await initializeEditor( { initialHtml } );
+				Clipboard.getString.mockReturnValue( url );
+
+				// Act
+				const block = await waitFor( () =>
+					subject.getByA11yLabel(
+						type === 'core/image' ? /Image Block/ : /Button Block/
+					)
+				);
+				fireEvent.press( block );
+				fireEvent.press( block );
+				fireEvent.press(
+					await waitFor( () =>
+						subject.getByA11yLabel( 'Open Settings' )
+					)
+				);
+				fireEvent.press(
+					await waitFor( () =>
+						subject.getByA11yLabel(
+							`Link to, ${
+								type === 'core/image'
+									? 'None'
+									: 'Search or type URL'
+							}`
+						)
+					)
+				);
+				if ( type === 'core/image' ) {
+					fireEvent.press(
+						await waitFor( () =>
+							subject.getByA11yLabel( /Custom URL/ )
+						)
+					);
+				}
+				await waitFor( () => subject.getByA11yLabel( 'Apply' ) );
+
+				// Assert
+				expect(
+					subject.queryByA11yLabel( /Copy URL from the clipboard[,]/ )
+				).toBeNull();
+			} );
+		} );
+
+		describe( 'Hide Clipboard Link Suggestion - Valid and Same URL in Clipboard', () => {
+			/**
+			 * GIVEN a SETTINGS BOTTOM SHEET is displayed;
+			 * GIVEN the CLIPBOARD has a URL copied;
+			 * GIVEN the STATE has the SAME URL as the CLIPBOARD;
+			 * WHEN the USER selects the LINK TO cell;
+			 */
+			it( 'should display the LINK PICKER with NO FROM CLIPBOARD CELL.', async () => {
+				// Arrange
+				const url = 'https://tonytahmouchtest.files.wordpress.com';
+				const subject = await initializeEditor( { initialHtml } );
+				Clipboard.getString.mockReturnValue( url );
+
+				// Act
+				const block = await waitFor( () =>
+					subject.getByA11yLabel(
+						type === 'core/image' ? /Image Block/ : /Button Block/
+					)
+				);
+				fireEvent.press( block );
+				fireEvent.press( block );
+				fireEvent.press(
+					await waitFor( () =>
+						subject.getByA11yLabel( 'Open Settings' )
+					)
+				);
+				fireEvent.press(
+					await waitFor( () =>
+						subject.getByA11yLabel(
+							`Link to, ${
+								type === 'core/image'
+									? 'None'
+									: 'Search or type URL'
+							}`
+						)
+					)
+				);
+				if ( type === 'core/image' ) {
+					fireEvent.press(
+						await waitFor( () =>
+							subject.getByA11yLabel( 'Custom URL. Empty' )
+						)
+					);
+				}
+				fireEvent.press(
+					await waitFor( () =>
+						subject.getByA11yLabel(
+							`Copy URL from the clipboard, ${ url }`
+						)
+					)
+				);
+				fireEvent.press(
+					await waitFor( () =>
+						subject.getByA11yLabel(
+							`Link to, ${
+								type === 'core/image' ? 'Custom URL' : url
+							}`
+						)
+					)
+				);
+				if ( type === 'core/image' ) {
+					fireEvent.press(
+						await waitFor( () =>
+							subject.getByA11yLabel( `Custom URL, ${ url }` )
+						)
+					);
+				}
+				await waitFor( () => subject.getByA11yLabel( 'Apply' ) );
+
+				// Assert
+				expect(
+					subject.queryByA11yLabel( /Copy URL from the clipboard[,]/ )
+				).toBeNull();
+			} );
+		} );
+
+		describe( 'Show Clipboard Link Suggestion - Valid and Different URL in Clipboard', () => {
+			/**
+			 * GIVEN a SETTINGS BOTTOM SHEET is displayed;
+			 * GIVEN the CLIPBOARD has a URL copied;
+			 * GIVEN the STATE has NO URL;
+			 * WHEN the USER selects the LINK TO cell;
+			 */
+			it(
+				'should display the LINK PICKER with the FROM CLIPBOARD CELL populated' +
+					' with the URL from the CLIPBOARD.',
+				async () => {
+					// Arrange
+					const url = 'https://tonytahmouchtest.files.wordpress.com';
+					const subject = await initializeEditor( { initialHtml } );
+					Clipboard.getString.mockReturnValue( url );
+
+					// Act
+					const block = await waitFor( () =>
+						subject.getByA11yLabel(
+							type === 'core/image'
+								? /Image Block/
+								: /Button Block/
+						)
+					);
+					fireEvent.press( block );
+					fireEvent.press( block );
+					fireEvent.press(
+						await waitFor( () =>
+							subject.getByA11yLabel( 'Open Settings' )
+						)
+					);
+					fireEvent.press(
+						await waitFor( () =>
+							subject.getByA11yLabel(
+								`Link to, ${
+									type === 'core/image'
+										? 'None'
+										: 'Search or type URL'
+								}`
+							)
+						)
+					);
+					if ( type === 'core/image' ) {
+						fireEvent.press(
+							await waitFor( () =>
+								subject.getByA11yLabel( /Custom URL/ )
+							)
+						);
+					}
+					await waitFor( () =>
+						subject.getByA11yLabel(
+							`Copy URL from the clipboard, ${ url }`
+						)
+					);
+
+					// Assert
+					const clipboardUrl = await waitFor( () =>
+						subject.getByText( url )
+					);
+					expect( clipboardUrl ).toBeTruthy();
+					const clipboardNote = await waitFor( () =>
+						subject.getByText( __( 'From clipboard' ) )
+					);
+					expect( clipboardNote ).toBeTruthy();
+				}
+			);
+		} );
+
+		describe( 'Press Clipboard Link Suggestion', () => {
+			/**
+			 * GIVEN a LINK PICKER SHEET is displayed;
+			 * GIVEN the FROM CLIPBOARD CELL is displayed;
+			 * WHEN the FROM CLIPBOARD CELL is pressed;
+			 */
+			it(
+				'should display the LINK SETTINGS with the URL from the CLIPBOARD' +
+					' populated in the LINK TO field.',
+				async () => {
+					// Arrange
+					const url = 'https://tonytahmouchtest.files.wordpress.com';
+					const subject = await initializeEditor( { initialHtml } );
+					Clipboard.getString.mockReturnValue( url );
+
+					// Act
+					const block = await waitFor( () =>
+						subject.getByA11yLabel(
+							type === 'core/image'
+								? /Image Block/
+								: /Button Block/
+						)
+					);
+					fireEvent.press( block );
+					fireEvent.press( block );
+					fireEvent.press(
+						await waitFor( () =>
+							subject.getByA11yLabel( 'Open Settings' )
+						)
+					);
+					fireEvent.press(
+						await waitFor( () =>
+							subject.getByA11yLabel(
+								`Link to, ${
+									type === 'core/image'
+										? 'None'
+										: 'Search or type URL'
+								}`
+							)
+						)
+					);
+					if ( type === 'core/image' ) {
+						fireEvent.press(
+							await waitFor( () =>
+								subject.getByA11yLabel( /Custom URL/ )
+							)
+						);
+					}
+					fireEvent.press(
+						await waitFor( () =>
+							subject.getByA11yLabel(
+								`Copy URL from the clipboard, ${ url }`
+							)
+						)
+					);
+
+					// Assert
+					const linkToField = await waitFor( () =>
+						subject.getByA11yLabel(
+							`Link to, ${
+								type === 'core/image' ? 'Custom URL' : url
+							}`
+						)
+					);
+					expect( linkToField ).toBeTruthy();
+				}
+			);
+		} );
+	} );
+} );

package/src/mobile/link-settings/test/link-settings-navigation.native.js

@@ -0,0 +1,97 @@
+/**
+ * External dependencies
+ */
+import { Keyboard, Platform } from 'react-native';
+import { render, fireEvent, waitFor } from 'test/helpers';
+
+/**
+ * Internal dependencies
+ */
+import LinkSettingsNavigation from '../link-settings-navigation';
+
+jest.useFakeTimers( 'legacy' );
+jest.spyOn( Keyboard, 'dismiss' );
+
+const subject = (
+	<LinkSettingsNavigation
+		setAttributes={ () => {} }
+		hasPicker
+		options={ {
+			url: {
+				label: 'Link URL',
+				placeholder: 'Add URL',
+				autoFocus: false,
+			},
+		} }
+		isVisible
+		withBottomSheet
+	/>
+);
+
+describe( 'Android', () => {
+	it( 'improves back animation performance by dismissing keyboard beforehand', async () => {
+		const screen = render( subject );
+		fireEvent.press( screen.getByText( 'Link to' ) );
+		fireEvent.press(
+			screen.getByA11yLabel( 'Link to, Search or type URL' )
+		);
+		// Await back button to allow async state updates to complete
+		const backButton = await waitFor( () =>
+			screen.getByA11yLabel( 'Go back' )
+		);
+		Keyboard.dismiss.mockClear();
+		fireEvent.press( backButton );
+
+		expect( Keyboard.dismiss ).toHaveBeenCalledTimes( 1 );
+	} );
+
+	it( 'improves apply animation performance by dismissing keyboard beforehand', async () => {
+		const screen = render( subject );
+		fireEvent.press( screen.getByText( 'Link to' ) );
+		// Await back button to allow async state updates to complete
+		const backButton = await waitFor( () =>
+			screen.getByA11yLabel( 'Apply' )
+		);
+		Keyboard.dismiss.mockClear();
+		fireEvent.press( backButton );
+
+		expect( Keyboard.dismiss ).toHaveBeenCalledTimes( 1 );
+	} );
+} );
+
+describe( 'iOS', () => {
+	const originalPlatform = Platform.OS;
+	beforeAll( () => {
+		Platform.OS = 'ios';
+	} );
+
+	afterAll( () => {
+		Platform.OS = originalPlatform;
+	} );
+
+	it( 'improves back animation performance by dismissing keyboard beforehand', async () => {
+		const screen = render( subject );
+		fireEvent.press( screen.getByText( 'Link to' ) );
+		// Await back button to allow async state updates to complete
+		const backButton = await waitFor( () =>
+			screen.getByA11yLabel( 'Go back' )
+		);
+		Keyboard.dismiss.mockClear();
+		fireEvent.press( backButton );
+
+		expect( Keyboard.dismiss ).toHaveBeenCalledTimes( 1 );
+	} );
+
+	it( 'improves apply animation performance by dismissing keyboard beforehand', async () => {
+		const screen = render( subject );
+		fireEvent.press( screen.getByText( 'Link to' ) );
+		// Await back button to allow async state updates to complete
+		const backButton = await waitFor( () =>
+			screen.getByA11yLabel( 'Apply' )
+		);
+		Keyboard.dismiss.mockClear();
+		fireEvent.press( backButton );
+
+		expect( Keyboard.dismiss ).toHaveBeenCalledTimes( 1 );
+	} );
+} );

package/src/mobile/readable-content-view/index.native.js

@@ -26,10 +26,13 @@ const ReadableContentView = ( { align, reversed, children, style } ) => {
 	}
 
 	useEffect( () => {
-		Dimensions.addEventListener( 'change', onDimensionsChange );
+		const dimensionsChangeSubscription = Dimensions.addEventListener(
+			'change',
+			onDimensionsChange
+		);
 
 		return () => {
-			Dimensions.removeEventListener( 'change', onDimensionsChange );
+			dimensionsChangeSubscription.remove();
 		};
 	}, [] );
 

package/src/mobile/utils/use-is-floating-keyboard.native.js

@@ -18,15 +18,12 @@ export default function useIsFloatingKeyboard() {
 			setFloating( event.endCoordinates.width !== windowWidth );
 		};
 
-		Keyboard.addListener(
+		const keyboardChangeSubscription = Keyboard.addListener(
 			'keyboardWillChangeFrame',
 			onKeyboardWillChangeFrame
 		);
 		return () => {
-			Keyboard.removeListener(
-				'keyboardWillChangeFrame',
-				onKeyboardWillChangeFrame
-			);
+			keyboardChangeSubscription.remove();
 		};
 	}, [ windowWidth ] );
 

package/src/mobile/utils/use-unit-converter-to-mobile.native.js

@@ -70,10 +70,13 @@ const useConvertUnitToMobile = ( value, unit ) => {
 	);
 
 	useEffect( () => {
-		Dimensions.addEventListener( 'change', onDimensionsChange );
+		const dimensionsChangeSubscription = Dimensions.addEventListener(
+			'change',
+			onDimensionsChange
+		);
 
 		return () => {
-			Dimensions.removeEventListener( 'change', onDimensionsChange );
+			dimensionsChangeSubscription.remove();
 		};
 	}, [] );
 

package/src/modal/README.md

@@ -255,6 +255,16 @@ This property when set to `true` will render a full screen modal.
 -   Required: No
 -   Default: `false`
 
+#### __experimentalHideHeader
+
+When set to `true`, the Modal's header (including the icon, title and close button) will not be rendered.
+
+*Warning*: This property is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
+
+-   Type: `boolean`
+-   Required: No
+-   Default: `false`
+
 ## Related components
 
 -   To notify a user with a message of medium importance, use `Notice`.

package/src/modal/aria-helper.js

@@ -1,3 +1,5 @@
+//@ts-nocheck
+
 /**
  * External dependencies
  */