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

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

package/src/modal/index.js

@@ -1,3 +1,5 @@
+//@ts-nocheck
+
 /**
  * External dependencies
  */
@@ -6,7 +8,12 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { createPortal, useEffect, useRef } from '@wordpress/element';
+import {
+	createPortal,
+	useEffect,
+	useRef,
+	forwardRef,
+} from '@wordpress/element';
 import {
 	useInstanceId,
 	useFocusReturn,
@@ -30,31 +37,34 @@ import StyleProvider from '../style-provider';
 // Used to count the number of open modals.
 let openModalCount = 0;
 
-export default function Modal( {
-	bodyOpenClassName = 'modal-open',
-	role = 'dialog',
-	title = null,
-	focusOnMount = true,
-	shouldCloseOnEsc = true,
-	shouldCloseOnClickOutside = true,
-	isDismissable, // Deprecated
-	isDismissible = isDismissable || true,
-	/* accessibility */
-	aria = {
-		labelledby: null,
-		describedby: null,
-	},
-	onRequestClose,
-	icon,
-	closeButtonLabel,
-	children,
-	style,
-	overlayClassName,
-	className,
-	contentLabel,
-	onKeyDown,
-	isFullScreen = false,
-} ) {
+function Modal( props, forwardedRef ) {
+	const {
+		bodyOpenClassName = 'modal-open',
+		role = 'dialog',
+		title = null,
+		focusOnMount = true,
+		shouldCloseOnEsc = true,
+		shouldCloseOnClickOutside = true,
+		isDismissable, // Deprecated
+		isDismissible = isDismissable || true,
+		/* accessibility */
+		aria = {
+			labelledby: null,
+			describedby: null,
+		},
+		onRequestClose,
+		icon,
+		closeButtonLabel,
+		children,
+		style,
+		overlayClassName,
+		className,
+		contentLabel,
+		onKeyDown,
+		isFullScreen = false,
+		__experimentalHideHeader = false,
+	} = props;
+
 	const ref = useRef();
 	const instanceId = useInstanceId( Modal );
 	const headingId = title
@@ -106,7 +116,7 @@ export default function Modal( {
 	return createPortal(
 		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
 		<div
-			ref={ ref }
+			ref={ useMergeRefs( [ ref, forwardedRef ] ) }
 			className={ classnames(
 				'components-modal__screen-overlay',
 				overlayClassName
@@ -139,38 +149,43 @@ export default function Modal( {
 					onKeyDown={ onKeyDown }
 				>
 					<div
-						className={ 'components-modal__content' }
+						className={ classnames( 'components-modal__content', {
+							'hide-header': __experimentalHideHeader,
+						} ) }
 						role="document"
 					>
-						<div className="components-modal__header">
-							<div className="components-modal__header-heading-container">
-								{ icon && (
-									<span
-										className="components-modal__icon-container"
-										aria-hidden
-									>
-										{ icon }
-									</span>
-								) }
-								{ title && (
-									<h1
-										id={ headingId }
-										className="components-modal__header-heading"
-									>
-										{ title }
-									</h1>
+						{ ! __experimentalHideHeader && (
+							<div className="components-modal__header">
+								<div className="components-modal__header-heading-container">
+									{ icon && (
+										<span
+											className="components-modal__icon-container"
+											aria-hidden
+										>
+											{ icon }
+										</span>
+									) }
+									{ title && (
+										<h1
+											id={ headingId }
+											className="components-modal__header-heading"
+										>
+											{ title }
+										</h1>
+									) }
+								</div>
+								{ isDismissible && (
+									<Button
+										onClick={ onRequestClose }
+										icon={ closeSmall }
+										label={
+											closeButtonLabel ||
+											__( 'Close dialog' )
+										}
+									/>
 								) }
 							</div>
-							{ isDismissible && (
-								<Button
-									onClick={ onRequestClose }
-									icon={ closeSmall }
-									label={
-										closeButtonLabel || __( 'Close dialog' )
-									}
-								/>
-							) }
-						</div>
+						) }
 						{ children }
 					</div>
 				</div>
@@ -179,3 +194,5 @@ export default function Modal( {
 		document.body
 	);
 }
+
+export default forwardRef( Modal );

package/src/modal/stories/index.js

@@ -20,7 +20,7 @@ export default {
 	title: 'Components/Modal',
 	component: Modal,
 	parameters: {
-		knobs: { disabled: false },
+		knobs: { disable: false },
 	},
 };
 
@@ -55,6 +55,10 @@ export const _default = () => {
 		'shouldCloseOnClickOutside',
 		true
 	);
+	const __experimentalHideHeader = boolean(
+		'__experimentalHideHeader',
+		false
+	);
 
 	const iconComponent = showIcon ? <Icon icon={ wordpress } /> : null;
 
@@ -65,6 +69,7 @@ export const _default = () => {
 		shouldCloseOnEsc,
 		shouldCloseOnClickOutside,
 		title,
+		__experimentalHideHeader,
 	};
 
 	return <ModalExample { ...modalProps } />;

package/src/modal/style.scss

@@ -126,4 +126,13 @@
 		display: block;
 		margin-bottom: $grid-unit-30;
 	}
+
+	&.hide-header {
+		margin-top: 0;
+		padding-top: $grid-unit-30;
+
+		&::before {
+			content: none;
+		}
+	}
 }

package/src/modal/test/index.js

@@ -46,4 +46,15 @@ describe( 'Modal', () => {
 		const titleId = within( dialog ).getByText( 'Test Title' ).id;
 		expect( dialog ).toHaveAttribute( 'aria-labelledby', titleId );
 	} );
+
+	it( 'hides the header when the `__experimentalHideHeader` prop is used', () => {
+		render(
+			<Modal title="Test Title" __experimentalHideHeader>
+				<p>Modal content</p>
+			</Modal>
+		);
+		const dialog = screen.getByRole( 'dialog' );
+		const title = within( dialog ).queryByText( 'Test Title' );
+		expect( title ).not.toBeInTheDocument();
+	} );
 } );

package/src/navigation/README.md

@@ -44,15 +44,6 @@ const MyNavigation = () => (
 	</Navigation>
 );
 ```
-## CSS Classes leveraged
-
-The structural CSS for the navigation block targets generic classnames across menu items of multiple types including those automatically generated by the Page List block. Here are some of the notable classnames and what they are used for:
-
-- `.wp-block-navigation__submenu-container` is applied to submenus to main menu items.
-- `.wp-block-navigation-item` is applied to every menu item.
-- `.wp-block-navigation-item__content` is applied to the link inside a menu item.
-- `.wp-block-navigation-item__label` is applied to the innermost container around the menu item text label.
-- `.wp-block-navigation__submenu-icon` is applied to the submenu indicator (chevron).
 
 ## Navigation Props
 

package/src/notice/stories/index.js

@@ -12,7 +12,7 @@ export default {
 	title: 'Components/Notice',
 	component: Notice,
 	parameters: {
-		knobs: { disabled: false },
+		knobs: { disable: false },
 	},
 };