@wordpress/components 20.0.1-next.d6164808d3.0 → 20.0.2-next.957ca95e4c.0

package/src/gradient-picker/README.md

@@ -17,6 +17,7 @@ const myGradientPicker = () => {
 
 	return (
 		<GradientPicker
+			__nextHasNoMargin
 			value={ gradient }
 			onChange={ ( currentGradient ) => setGradient( currentGradient ) }
 			gradients={ [
@@ -92,3 +93,11 @@ If true, the gradient picker will not be displayed and only defined gradients fr
 -   Type: `Boolean`
 -   Required: No
 -   Default: false
+
+### __nextHasNoMargin
+
+Start opting into the new margin-free styles that will become the default in a future version, currently scheduled to be WordPress 6.4. (The prop can be safely removed once this happens.)
+
+-   Type: `Boolean`
+-   Required: No
+-   Default: `false`

package/src/gradient-picker/index.js

@@ -8,6 +8,7 @@ import { map } from 'lodash';
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { useCallback, useMemo } from '@wordpress/element';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -120,6 +121,14 @@ export default function GradientPicker( {
 			? MultipleOrigin
 			: SingleOrigin;
 
+	if ( ! __nextHasNoMargin ) {
+		deprecated( 'Outer margin styles for wp.components.GradientPicker', {
+			since: '6.1',
+			version: '6.4',
+			hint: 'Set the `__nextHasNoMargin` prop to true to start opting into the new styles, which will become the default in a future version',
+		} );
+	}
+
 	// Can be removed when deprecation period is over
 	const deprecatedMarginSpacerProps = ! __nextHasNoMargin
 		? { marginTop: 3 }

package/src/gradient-picker/stories/index.js

@@ -74,6 +74,7 @@ const Template = ( { onChange, ...props } ) => {
 
 export const Default = Template.bind( {} );
 Default.args = {
+	__nextHasNoMargin: true,
 	gradients: GRADIENTS,
 };
 

package/src/guide/index.js

@@ -9,7 +9,6 @@ import classnames from 'classnames';
 import { useState, useEffect, Children, useRef } from '@wordpress/element';
 import deprecated from '@wordpress/deprecated';
 import { __ } from '@wordpress/i18n';
-import { LEFT, RIGHT } from '@wordpress/keycodes';
 import { focus } from '@wordpress/dom';
 
 /**
@@ -76,10 +75,14 @@ export default function Guide( {
 			contentLabel={ contentLabel }
 			onRequestClose={ onFinish }
 			onKeyDown={ ( event ) => {
-				if ( event.keyCode === LEFT ) {
+				if ( event.code === 'ArrowLeft' ) {
 					goBack();
-				} else if ( event.keyCode === RIGHT ) {
+					// Do not scroll the modal's contents.
+					event.preventDefault();
+				} else if ( event.code === 'ArrowRight' ) {
 					goForward();
+					// Do not scroll the modal's contents.
+					event.preventDefault();
 				}
 			} }
 			ref={ guideContainer }

package/src/guide/test/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render, screen } from '@testing-library/react';
+import { render, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 /**
@@ -118,4 +118,141 @@ describe( 'Guide', () => {
 
 		expect( onFinish ).toHaveBeenCalled();
 	} );
+
+	describe( 'page navigation', () => {
+		it( 'renders an empty list when there are no pages', () => {
+			render( <Guide pages={ [] } /> );
+			expect(
+				screen.queryByRole( 'list', {
+					name: 'Guide controls',
+				} )
+			).not.toBeInTheDocument();
+			expect(
+				screen.queryByRole( 'button', {
+					name: /page \d of \d/i,
+				} )
+			).not.toBeInTheDocument();
+		} );
+
+		it( 'renders a button for each page', () => {
+			render(
+				<Guide
+					pages={ [
+						{ content: <p>Page 1</p> },
+						{ content: <p>Page 2</p> },
+						{ content: <p>Page 3</p> },
+						{ content: <p>Page 4</p> },
+					] }
+				/>
+			);
+			const listContainer = screen.getByRole( 'list', {
+				name: 'Guide controls',
+			} );
+			expect(
+				within( listContainer ).getAllByRole( 'button', {
+					name: /page \d of \d/i,
+				} )
+			).toHaveLength( 4 );
+		} );
+
+		it( 'sets the current page when a button is clicked', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+
+			render(
+				<Guide
+					pages={ [
+						{ content: <p>Page 1</p> },
+						{ content: <p>Page 2</p> },
+						{ content: <p>Page 3</p> },
+					] }
+				/>
+			);
+
+			expect( screen.getByText( 'Page 1' ) ).toBeVisible();
+			expect( screen.queryByText( 'Page 2' ) ).not.toBeInTheDocument();
+			expect( screen.queryByText( 'Page 3' ) ).not.toBeInTheDocument();
+
+			await user.click(
+				screen.getByRole( 'button', { name: 'Page 2 of 3' } )
+			);
+
+			expect( screen.getByText( 'Page 2' ) ).toBeVisible();
+			expect( screen.queryByText( 'Page 1' ) ).not.toBeInTheDocument();
+			expect( screen.queryByText( 'Page 3' ) ).not.toBeInTheDocument();
+
+			await user.click(
+				screen.getByRole( 'button', { name: 'Page 3 of 3' } )
+			);
+
+			expect( screen.getByText( 'Page 3' ) ).toBeVisible();
+			expect( screen.queryByText( 'Page 1' ) ).not.toBeInTheDocument();
+			expect( screen.queryByText( 'Page 2' ) ).not.toBeInTheDocument();
+
+			await user.click(
+				screen.getByRole( 'button', { name: 'Page 1 of 3' } )
+			);
+
+			expect( screen.getByText( 'Page 1' ) ).toBeVisible();
+			expect( screen.queryByText( 'Page 2' ) ).not.toBeInTheDocument();
+			expect( screen.queryByText( 'Page 3' ) ).not.toBeInTheDocument();
+		} );
+
+		it( 'allows navigating through the pages with the left and right arrows', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+
+			render(
+				<Guide
+					pages={ [
+						{ content: <p>Page 1</p> },
+						{ content: <p>Page 2</p> },
+						{ content: <p>Page 3</p> },
+					] }
+				/>
+			);
+
+			expect( screen.getByText( 'Page 1' ) ).toBeVisible();
+			expect( screen.queryByText( 'Page 2' ) ).not.toBeInTheDocument();
+			expect( screen.queryByText( 'Page 3' ) ).not.toBeInTheDocument();
+
+			await user.keyboard( '[ArrowLeft]' );
+
+			expect( screen.getByText( 'Page 1' ) ).toBeVisible();
+			expect( screen.queryByText( 'Page 2' ) ).not.toBeInTheDocument();
+			expect( screen.queryByText( 'Page 3' ) ).not.toBeInTheDocument();
+
+			await user.keyboard( '[ArrowRight]' );
+
+			expect( screen.getByText( 'Page 2' ) ).toBeVisible();
+			expect( screen.queryByText( 'Page 1' ) ).not.toBeInTheDocument();
+			expect( screen.queryByText( 'Page 3' ) ).not.toBeInTheDocument();
+
+			await user.keyboard( '[ArrowRight]' );
+
+			expect( screen.getByText( 'Page 3' ) ).toBeVisible();
+			expect( screen.queryByText( 'Page 1' ) ).not.toBeInTheDocument();
+			expect( screen.queryByText( 'Page 2' ) ).not.toBeInTheDocument();
+
+			await user.keyboard( '[ArrowRight]' );
+
+			expect( screen.getByText( 'Page 3' ) ).toBeVisible();
+			expect( screen.queryByText( 'Page 1' ) ).not.toBeInTheDocument();
+			expect( screen.queryByText( 'Page 2' ) ).not.toBeInTheDocument();
+
+			await user.keyboard( '[ArrowLeft]' );
+
+			expect( screen.getByText( 'Page 2' ) ).toBeVisible();
+			expect( screen.queryByText( 'Page 1' ) ).not.toBeInTheDocument();
+			expect( screen.queryByText( 'Page 3' ) ).not.toBeInTheDocument();
+
+			await user.keyboard( '[ArrowLeft]' );
+
+			expect( screen.getByText( 'Page 1' ) ).toBeVisible();
+			expect( screen.queryByText( 'Page 2' ) ).not.toBeInTheDocument();
+			expect( screen.queryByText( 'Page 3' ) ).not.toBeInTheDocument();
+		} );
+	} );
 } );

package/src/higher-order/with-constrained-tabbing/index.js

@@ -11,7 +11,7 @@ const withConstrainedTabbing = createHigherOrderComponent(
 		function ComponentWithConstrainedTabbing( props ) {
 			const ref = useConstrainedTabbing();
 			return (
-				<div ref={ ref } tabIndex="-1">
+				<div ref={ ref } tabIndex={ -1 }>
 					<WrappedComponent { ...props } />
 				</div>
 			);

package/src/higher-order/with-spoken-messages/index.js

@@ -4,6 +4,8 @@
 import { createHigherOrderComponent, useDebounce } from '@wordpress/compose';
 import { speak } from '@wordpress/a11y';
 
+/** @typedef {import('@wordpress/element').WPComponent} WPComponent */
+
 /**
  * A Higher Order Component used to be provide speak and debounced speak
  * functions.

package/src/isolated-event-container/index.js

@@ -4,6 +4,9 @@
 import { forwardRef } from '@wordpress/element';
 import deprecated from '@wordpress/deprecated';
 
+/**
+ * @type {import('react').MouseEventHandler<HTMLDivElement>}
+ */
 function stopPropagation( event ) {
 	event.stopPropagation();
 }

package/src/mobile/global-styles-context/utils.native.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { camelCase } from 'change-case';
-import { find, get, has } from 'lodash';
+import { find, get } from 'lodash';
 import { Dimensions } from 'react-native';
 
 /**
@@ -224,7 +224,12 @@ export function parseStylesVariables( styles, mappedValues, customValues ) {
 			const customValuesData = customValues ?? JSON.parse( stylesBase );
 			stylesBase = stylesBase.replace( regex, ( _$1, $2 ) => {
 				const path = $2.split( '--' );
-				if ( has( customValuesData, path ) ) {
+				if (
+					path.reduce(
+						( prev, curr ) => prev && prev[ curr ],
+						customValuesData
+					)
+				) {
 					return get( customValuesData, path );
 				}
 

package/src/navigable-container/menu.js

@@ -1,8 +1,4 @@
 // @ts-nocheck
-/**
- * External dependencies
- */
-import { includes } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -35,11 +31,11 @@ export function NavigableMenu(
 			previous = [ LEFT, UP ];
 		}
 
-		if ( includes( next, keyCode ) ) {
+		if ( next.includes( keyCode ) ) {
 			return 1;
-		} else if ( includes( previous, keyCode ) ) {
+		} else if ( previous.includes( keyCode ) ) {
 			return -1;
-		} else if ( includes( [ DOWN, UP, LEFT, RIGHT ], keyCode ) ) {
+		} else if ( [ DOWN, UP, LEFT, RIGHT ].includes( keyCode ) ) {
 			// Key press should be handled, e.g. have event propagation and
 			// default behavior handled by NavigableContainer but not result
 			// in an offset.

package/src/navigation/menu/menu-title-search.js

@@ -3,7 +3,6 @@
  */
 import { useEffect, useRef } from '@wordpress/element';
 import { __, _n, sprintf } from '@wordpress/i18n';
-import { ESCAPE } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
@@ -61,7 +60,7 @@ function MenuTitleSearch( {
 	};
 
 	function onKeyDown( event ) {
-		if ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {
+		if ( event.code === 'Escape' && ! event.defaultPrevented ) {
 			event.preventDefault();
 			onClose();
 		}

package/src/palette-edit/index.js

@@ -173,16 +173,19 @@ function Option( {
 						/>
 					) }
 					{ isGradient && (
-						<CustomGradientPicker
-							__experimentalIsRenderedInSidebar
-							value={ value }
-							onChange={ ( newGradient ) =>
-								onChange( {
-									...element,
-									gradient: newGradient,
-								} )
-							}
-						/>
+						<div className="components-palette-edit__popover-gradient-picker">
+							<CustomGradientPicker
+								__nextHasNoMargin
+								__experimentalIsRenderedInSidebar
+								value={ value }
+								onChange={ ( newGradient ) =>
+									onChange( {
+										...element,
+										gradient: newGradient,
+									} )
+								}
+							/>
+						</div>
 					) }
 				</Popover>
 			) }
@@ -451,6 +454,7 @@ export default function PaletteEdit( {
 					{ ! isEditing &&
 						( isGradient ? (
 							<GradientPicker
+								__nextHasNoMargin
 								gradients={ gradients }
 								onChange={ () => {} }
 								clearable={ false }

package/src/palette-edit/style.scss

@@ -1,14 +1,6 @@
-.components-palette-edit__popover {
-	.components-custom-gradient-picker__gradient-bar {
-		margin-top: 0;
-	}
-	.components-custom-gradient-picker__ui-line {
-		margin-bottom: 0;
-	}
-	.components-custom-gradient-picker {
-		width: 280px;
-		padding: 8px;
-	}
+.components-palette-edit__popover-gradient-picker {
+	width: 280px;
+	padding: 8px;
 }
 .components-dropdown-menu__menu {
 	.components-palette-edit__menu-button {

package/src/placeholder/style.scss

@@ -177,9 +177,6 @@
 	box-shadow: none;
 	min-width: 100px;
 
-	// Radius fallback value.
-	border-radius: $radius-block-ui;
-
 	// Blur the background so layered dashed placeholders are still visually separate.
 	// We also provide a semitransparent background so as to allow duotones to sheen through.
 	backdrop-filter: blur(100px);
@@ -213,7 +210,7 @@
 	}
 
 	// By painting the borders here, we enable them to be replaced by the Border control.
-	border: $border-width dashed currentColor;
+	@include placeholder-style();
 	overflow: hidden;
 }
 

package/src/popover/index.js

@@ -143,7 +143,6 @@ const Popover = (
 		expandOnMobile,
 		onFocusOutside,
 		__unstableSlotName = SLOT_NAME,
-		__unstableObserveElement,
 		__unstableForcePosition = false,
 		__unstableShift = false,
 		...contentProps
@@ -374,59 +373,42 @@ const Popover = (
 		return autoUpdate(
 			resultingReferenceRef,
 			refs.floating.current,
-			update
+			update,
+			{
+				animationFrame: true,
+			}
 		);
 		// 'reference' and 'refs.floating' are refs and don't need to be listed
 		// as dependencies (see https://github.com/WordPress/gutenberg/pull/41612)
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ anchorRef, anchorRect, getAnchorRect, update ] );
 
-	// This is only needed for a smooth transition when moving blocks.
-	useLayoutEffect( () => {
-		if ( ! __unstableObserveElement ) {
-			return;
-		}
-		const observer = new window.MutationObserver( update );
-		observer.observe( __unstableObserveElement, { attributes: true } );
-
-		return () => {
-			observer.disconnect();
-		};
-	}, [ __unstableObserveElement, update ] );
-
 	// If the reference element is in a different ownerDocument (e.g. iFrame),
 	// we need to manually update the floating's position as the reference's owner
 	// document scrolls. Also update the frame offset if the view resizes.
 	useLayoutEffect( () => {
-		if ( referenceOwnerDocument === document ) {
+		const referenceAndFloatingHaveSameDocument =
+			referenceOwnerDocument === document;
+		const hasFrameElement =
+			!! referenceOwnerDocument?.defaultView?.frameElement;
+
+		if ( referenceAndFloatingHaveSameDocument || ! hasFrameElement ) {
 			frameOffsetRef.current = undefined;
 			return;
 		}
 
 		const { defaultView } = referenceOwnerDocument;
 
-		referenceOwnerDocument.addEventListener( 'scroll', update );
+		const updateFrameOffset = () => {
+			frameOffsetRef.current = getFrameOffset( referenceOwnerDocument );
+			update();
+		};
+		defaultView.addEventListener( 'resize', updateFrameOffset );
 
-		let updateFrameOffset;
-		const hasFrameElement =
-			!! referenceOwnerDocument?.defaultView?.frameElement;
-		if ( hasFrameElement ) {
-			updateFrameOffset = () => {
-				frameOffsetRef.current = getFrameOffset(
-					referenceOwnerDocument
-				);
-				update();
-			};
-			updateFrameOffset();
-			defaultView.addEventListener( 'resize', updateFrameOffset );
-		}
+		updateFrameOffset();
 
 		return () => {
-			referenceOwnerDocument.removeEventListener( 'scroll', update );
-
-			if ( updateFrameOffset ) {
-				defaultView.removeEventListener( 'resize', updateFrameOffset );
-			}
+			defaultView.removeEventListener( 'resize', updateFrameOffset );
 		};
 	}, [ referenceOwnerDocument, update ] );
 

package/src/popover/stories/index.js

@@ -73,7 +73,6 @@ export default {
 			options: AVAILABLE_POSITIONS,
 		},
 		__unstableSlotName: { control: { type: null } },
-		__unstableObserveElement: { control: { type: null } },
 		__unstableForcePosition: { control: { type: 'boolean' } },
 		__unstableShift: { control: { type: 'boolean' } },
 	},

package/src/text-highlight/index.tsx

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { escapeRegExp } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -11,6 +6,7 @@ import { createInterpolateElement } from '@wordpress/element';
 /**
  * Internal dependencies
  */
+import { escapeRegExp } from '../utils/strings';
 import type { TextHighlightProps } from './types';
 
 /**