@wordpress/components 19.1.5 → 19.2.1-next.33ec3857e2.0

package/src/mobile/gridicons/index.native.js

@@ -9,6 +9,9 @@ const fromPathData24x24 = ( pathData ) => (
 	</SVG>
 );
 
+export const clipboard = fromPathData24x24(
+	'M16 18H8v-2h8v2zm0-6H8v2h8v-2zm2-9h-2v2h2v15H6V5h2V3H6a2 2 0 00-2 2v15a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2zm-4 2V4a2 2 0 10-4 0v1a2 2 0 00-2 2v1h8V7a2 2 0 00-2-2z'
+);
 export const posts = fromPathData24x24(
 	'M16 19H3v-2h13v2zm5-10H3v2h18V9zM3 5v2h11V5H3zm14 0v2h4V5h-4zm-6 8v2h10v-2H11zm-8 0v2h5v-2H3z'
 );
@@ -21,15 +24,12 @@ export const refresh = fromPathData24x24(
 export const noticeOutline = fromPathData24x24(
 	'M12 4c4.41 0 8 3.59 8 8s-3.59 8-8 8-8-3.59-8-8 3.59-8 8-8m0-2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm1 13h-2v2h2v-2zm-2-2h2l.5-6h-3l.5 6z'
 );
-
 export const empty = (
 	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" />
 );
-
 export const search = fromPathData24x24(
 	'M21,19l-5.154-5.154C16.574,12.742,17,11.421,17,10c0-3.866-3.134-7-7-7s-7,3.134-7,7c0,3.866,3.134,7,7,7 c1.421,0,2.742-0.426,3.846-1.154L19,21L21,19z M5,10c0-2.757,2.243-5,5-5s5,2.243,5,5s-2.243,5-5,5S5,12.757,5,10z'
 );
-
 export default {
 	empty,
 	posts,

package/src/mobile/inserter-button/style.native.scss

@@ -42,6 +42,7 @@
 	padding-top: 4;
 	padding-bottom: 0;
 	justify-content: center;
+	text-align: center;
 	font-size: 12;
 	color: $gray-dark;
 }

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

@@ -1,16 +1,16 @@
 /**
  * External dependencies
  */
-import { SafeAreaView, TouchableOpacity, View } from 'react-native';
+import { Clipboard, SafeAreaView, TouchableOpacity, View } from 'react-native';
 import { lowerCase, startsWith } from 'lodash';
 
 /**
  * WordPress dependencies
  */
-import { useState } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
+import { useEffect, useState } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
 import { BottomSheet, Icon } from '@wordpress/components';
-import { getProtocol, prependHTTP } from '@wordpress/url';
+import { getProtocol, isURL, prependHTTP } from '@wordpress/url';
 import { link, cancelCircleFilled } from '@wordpress/icons';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 
@@ -47,12 +47,20 @@ export const createDirectEntry = ( value ) => {
 	};
 };
 
+const getURLFromClipboard = async () => {
+	const text = await Clipboard.getString();
+	return !! text && isURL( text ) ? text : '';
+};
+
 export const LinkPicker = ( {
 	value: initialValue,
 	onLinkPicked,
 	onCancel: cancel,
 } ) => {
-	const [ value, setValue ] = useState( initialValue );
+	const [ { value, clipboardUrl }, setValue ] = useState( {
+		value: initialValue,
+		clipboardUrl: '',
+	} );
 	const directEntry = createDirectEntry( value );
 
 	// the title of a direct entry is displayed as the raw input value, but if we
@@ -66,7 +74,7 @@ export const LinkPicker = ( {
 	};
 
 	const clear = () => {
-		setValue( '' );
+		setValue( { value: '', clipboardUrl } );
 	};
 
 	const omniCellStyle = usePreferredColorSchemeStyle(
@@ -79,6 +87,14 @@ export const LinkPicker = ( {
 		styles.iconDark
 	);
 
+	useEffect( () => {
+		getURLFromClipboard()
+			.then( ( url ) => setValue( { value, clipboardUrl: url } ) )
+			.catch( () => setValue( { value, clipboardUrl: '' } ) );
+	}, [] );
+
+	// TODO: Localize the accessibility label.
+	// TODO: Decide on if `LinkSuggestionItemCell` with `isDirectEntry` makes sense.
 	return (
 		<SafeAreaView style={ styles.safeArea }>
 			<NavBar>
@@ -96,7 +112,9 @@ export const LinkPicker = ( {
 					autoCapitalize="none"
 					autoCorrect={ false }
 					keyboardType="url"
-					onChangeValue={ setValue }
+					onChangeValue={ ( newValue ) => {
+						setValue( { value: newValue, clipboardUrl } );
+					} }
 					onSubmit={ onSubmit }
 					/* eslint-disable-next-line jsx-a11y/no-autofocus */
 					autoFocus
@@ -115,6 +133,22 @@ export const LinkPicker = ( {
 						</TouchableOpacity>
 					) }
 				</BottomSheet.Cell>
+				{ !! clipboardUrl && clipboardUrl !== value && (
+					<BottomSheet.LinkSuggestionItemCell
+						accessible
+						accessibilityLabel={ sprintf(
+							/* translators: Copy URL from the clipboard, https://sample.url */
+							__( 'Copy URL from the clipboard, %s' ),
+							clipboardUrl
+						) }
+						suggestion={ {
+							type: 'clipboard',
+							url: clipboardUrl,
+							isDirectEntry: true,
+						} }
+						onLinkPicked={ pickLink }
+					/>
+				) }
 				{ !! value && (
 					<LinkPickerResults
 						query={ value }

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

@@ -93,6 +93,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 +124,10 @@ function LinkSettings( {
 
 	useEffect( () => {
 		const isSettingSheetOpen = isVisible || editorSidebarOpened;
+		if ( isSettingSheetOpen ) {
+			onCloseSettingsSheetConsumed.current = false;
+		}
+
 		if ( options.url.autoFill && isSettingSheetOpen && ! url ) {
 			getURLFromClipboard();
 		}
@@ -174,6 +179,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,432 @@
+// noinspection DuplicatedCode
+
+/**
+ * External dependencies
+ */
+import { Clipboard } from 'react-native';
+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;
+	 */
+	// eslint-disable-next-line jest/no-done-callback
+	it( 'should display the LINK SETTINGS with an EMPTY LINK TO field.', async ( done ) => {
+		// Arrange
+		const expectation =
+			'The LINK SETTINGS > LINK TO field SHOULD be displayed WITHOUT a URL from the CLIPBOARD.';
+		const url = 'https://tonytahmouchtest.files.wordpress.com';
+		const subject = await initializeEditor( { initialHtml } );
+		Clipboard.getString.mockReturnValue( url );
+
+		// Act
+		try {
+			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' ) )
+			);
+		} catch ( error ) {
+			done.fail( error );
+		}
+
+		// Assert
+		try {
+			await waitFor( () =>
+				subject.getByA11yLabel(
+					`Link to, ${
+						type === 'core/image' ? 'None' : 'Search or type URL'
+					}`
+				)
+			);
+			done();
+		} catch ( error ) {
+			done.fail( expectation );
+		}
+	} );
+
+	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;
+			 */
+			// eslint-disable-next-line jest/no-done-callback
+			it( 'should display the LINK PICKER with NO FROM CLIPBOARD CELL.', async ( done ) => {
+				// Arrange
+				const expectation =
+					'The LINK PICKER > LINK SUGGESTION SHOULD NOT suggest the URL from the CLIPBOARD.';
+				const url = 'tonytahmouchtest.files.wordpress.com';
+				const subject = await initializeEditor( { initialHtml } );
+				Clipboard.getString.mockReturnValue( url );
+
+				// Act
+				try {
+					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' ) );
+				} catch ( error ) {
+					done.fail( error );
+				}
+
+				// Assert
+				waitFor(
+					() =>
+						subject.getByA11yLabel(
+							/Copy URL from the clipboard[,]/
+						),
+					{ timeout: 50, interval: 10 }
+				)
+					.then( () => done.fail( expectation ) )
+					.catch( () => done() );
+			} );
+		} );
+
+		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;
+			 */
+			// eslint-disable-next-line jest/no-done-callback
+			it( 'should display the LINK PICKER with NO FROM CLIPBOARD CELL.', async ( done ) => {
+				// Arrange
+				const expectation =
+					'The LINK PICKER > LINK SUGGESTION SHOULD NOT suggest the URL from the CLIPBOARD.';
+				const url = 'https://tonytahmouchtest.files.wordpress.com';
+				const subject = await initializeEditor( { initialHtml } );
+				Clipboard.getString.mockReturnValue( url );
+
+				// Act
+				try {
+					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' ) );
+				} catch ( error ) {
+					done.fail( error );
+				}
+
+				// Assert
+				waitFor(
+					() =>
+						subject.getByA11yLabel(
+							/Copy URL from the clipboard[,]/
+						),
+					{ timeout: 50, interval: 10 }
+				)
+					.then( () => done.fail( expectation ) )
+					.catch( () => done() );
+			} );
+		} );
+
+		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.',
+				// eslint-disable-next-line jest/no-done-callback
+				async ( done ) => {
+					// Arrange
+					const url = 'https://tonytahmouchtest.files.wordpress.com';
+					const expectation =
+						'The LINK PICKER > LINK SUGGESTION SHOULD suggest the URL from the CLIPBOARD, e.g.,' +
+						`
+					${ url }
+					${ __( 'From clipboard' ) }
+				`;
+					const subject = await initializeEditor( { initialHtml } );
+					Clipboard.getString.mockReturnValue( url );
+
+					// Act
+					try {
+						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 }`
+							)
+						);
+					} catch ( error ) {
+						done.fail( error );
+					}
+
+					// Assert
+					try {
+						await waitFor( () => subject.getByText( url ) );
+						await waitFor( () =>
+							subject.getByText( __( 'From clipboard' ) )
+						);
+						done();
+					} catch ( error ) {
+						done.fail( expectation );
+					}
+				}
+			);
+		} );
+
+		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.',
+				// eslint-disable-next-line jest/no-done-callback
+				async ( done ) => {
+					// Arrange
+					const expectation =
+						'The LINK SETTINGS > LINK TO field SHOULD be displayed WITH a URL from the CLIPBOARD.';
+					const url = 'https://tonytahmouchtest.files.wordpress.com';
+					const subject = await initializeEditor( { initialHtml } );
+					Clipboard.getString.mockReturnValue( url );
+
+					// Act
+					try {
+						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 }`
+								)
+							)
+						);
+					} catch ( error ) {
+						done.fail( error );
+					}
+
+					// Assert
+					try {
+						await waitFor( () =>
+							subject.getByA11yLabel(
+								`Link to, ${
+									type === 'core/image' ? 'Custom URL' : url
+								}`
+							)
+						);
+						done();
+					} catch ( error ) {
+						done.fail( expectation );
+					}
+				}
+			);
+		} );
+	} );
+} );

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
  */