@wordpress/components 25.1.3 → 25.1.5

package/build-style/style.css

@@ -1636,7 +1636,7 @@ body.is-dragging-components-draggable {
 .components-guide__footer {
   align-content: center;
   display: flex;
-  height: 30px;
+  height: 36px;
   justify-content: center;
   margin: 0 0 24px 0;
   padding: 0 32px;
@@ -1655,12 +1655,15 @@ body.is-dragging-components-draggable {
   height: 30px;
   min-width: 20px;
   margin: -6px 0;
+  color: #e0e0e0;
+}
+.components-guide__page-control li[aria-current=step] .components-button {
+  color: var(--wp-components-color-accent, var(--wp-admin-theme-color));
 }
 
 .components-modal__frame.components-guide {
   border: none;
   min-width: 312px;
-  height: 80vh;
   max-height: 575px;
 }
 @media (max-width: 600px) {
@@ -1671,28 +1674,12 @@ body.is-dragging-components-draggable {
 }
 
 .components-button.components-guide__back-button, .components-button.components-guide__forward-button, .components-button.components-guide__finish-button {
-  height: 30px;
   position: absolute;
 }
-.components-button.components-guide__back-button, .components-button.components-guide__forward-button {
-  font-size: 13px;
-  padding: 4px 2px;
-}
-.components-button.components-guide__back-button.has-text svg, .components-button.components-guide__forward-button.has-text svg {
-  margin: 0;
-}
-.components-button.components-guide__back-button:hover, .components-button.components-guide__forward-button:hover {
-  text-decoration: underline;
-}
 .components-button.components-guide__back-button {
   left: 32px;
 }
-.components-button.components-guide__forward-button {
-  right: 32px;
-  color: #1386bf;
-  font-weight: bold;
-}
-.components-button.components-guide__finish-button {
+.components-button.components-guide__forward-button, .components-button.components-guide__finish-button {
   right: 32px;
 }
 

package/build-types/guide/icons.d.ts

@@ -1,5 +1,3 @@
 /// <reference types="react" />
-export declare const PageControlIcon: ({ isSelected }: {
-    isSelected: boolean;
-}) => JSX.Element;
+export declare const PageControlIcon: () => JSX.Element;
 //# sourceMappingURL=icons.d.ts.map

package/build-types/guide/icons.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../src/guide/icons.tsx"],"names":[],"mappings":";AAKA,eAAO,MAAM,eAAe;gBAAmC,OAAO;iBASrE,CAAC"}
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../src/guide/icons.tsx"],"names":[],"mappings":";AAKA,eAAO,MAAM,eAAe,mBAI3B,CAAC"}

package/build-types/guide/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/guide/index.tsx"],"names":[],"mappings":";AAmBA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,iBAAS,KAAK,CAAE,EACf,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,gBAAiC,EACjC,QAAQ,EACR,KAAU,GACV,EAAE,UAAU,sBA+GZ;AAED,eAAe,KAAK,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/guide/index.tsx"],"names":[],"mappings":";AAkBA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,iBAAS,KAAK,CAAE,EACf,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,gBAAiC,EACjC,QAAQ,EACR,KAAU,GACV,EAAE,UAAU,sBAiHZ;AAED,eAAe,KAAK,CAAC"}

package/build-types/guide/page-control.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"page-control.d.ts","sourceRoot":"","sources":["../../src/guide/page-control.tsx"],"names":[],"mappings":";AAUA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEhD,MAAM,CAAC,OAAO,UAAU,WAAW,CAAE,EACpC,WAAW,EACX,aAAa,EACb,cAAc,GACd,EAAE,gBAAgB,eA+BlB"}
+{"version":3,"file":"page-control.d.ts","sourceRoot":"","sources":["../../src/guide/page-control.tsx"],"names":[],"mappings":";AAUA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEhD,MAAM,CAAC,OAAO,UAAU,WAAW,CAAE,EACpC,WAAW,EACX,aAAa,EACb,cAAc,GACd,EAAE,gBAAgB,eA2BlB"}

package/build-types/unit-control/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/unit-control/index.tsx"],"names":[],"mappings":";AA0BA,OAAO,KAAK,EAAoB,2BAA2B,EAAE,MAAM,SAAS,CAAC;AAkM7E;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,WAAW;;;;;;;;y+KAAuC,CAAC;AAEhE,OAAO,EAAE,gCAAgC,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAC3E,eAAe,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/unit-control/index.tsx"],"names":[],"mappings":";AA2BA,OAAO,KAAK,EAAoB,2BAA2B,EAAE,MAAM,SAAS,CAAC;AAkM7E;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,WAAW;;;;;;;;y+KAAuC,CAAC;AAEhE,OAAO,EAAE,gCAAgC,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAC3E,eAAe,WAAW,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "25.1.3",
+	"version": "25.1.5",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -39,7 +39,7 @@
 		"@emotion/styled": "^11.6.0",
 		"@emotion/utils": "^1.0.0",
 		"@floating-ui/react-dom": "1.0.0",
-		"@radix-ui/react-dropdown-menu": "^2.0.4",
+		"@radix-ui/react-dropdown-menu": "2.0.4",
 		"@use-gesture/react": "^10.2.24",
 		"@wordpress/a11y": "^3.35.1",
 		"@wordpress/compose": "^6.12.1",
@@ -56,7 +56,7 @@
 		"@wordpress/keycodes": "^3.35.1",
 		"@wordpress/primitives": "^3.33.1",
 		"@wordpress/private-apis": "^0.17.1",
-		"@wordpress/rich-text": "^6.12.1",
+		"@wordpress/rich-text": "^6.12.3",
 		"@wordpress/warning": "^2.35.1",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
@@ -87,5 +87,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "7efa7c2321a958ddfa723825a0354071435a9d43"
+	"gitHead": "3eeb607ebb76c3bf06cb8acb462f0dc068f340f9"
 }

package/src/guide/icons.tsx

@@ -3,13 +3,8 @@
  */
 import { SVG, Circle } from '@wordpress/primitives';
 
-export const PageControlIcon = ( { isSelected }: { isSelected: boolean } ) => (
+export const PageControlIcon = () => (
 	<SVG width="8" height="8" fill="none" xmlns="http://www.w3.org/2000/svg">
-		<Circle
-			cx="4"
-			cy="4"
-			r="4"
-			fill={ isSelected ? '#419ECD' : '#E1E3E6' }
-		/>
+		<Circle cx="4" cy="4" r="4" />
 	</SVG>
 );

package/src/guide/index.tsx

@@ -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 { focus } from '@wordpress/dom';
 
 /**
  * Internal dependencies
@@ -59,9 +58,17 @@ function Guide( {
 	onFinish,
 	pages = [],
 }: GuideProps ) {
-	const guideContainer = useRef< HTMLDivElement >( null );
+	const ref = useRef< HTMLDivElement >( null );
 	const [ currentPage, setCurrentPage ] = useState( 0 );
 
+	useEffect( () => {
+		// Place focus at the top of the guide on mount and when the page changes.
+		const frame = ref.current?.querySelector( '.components-guide' );
+		if ( frame instanceof HTMLElement ) {
+			frame.focus();
+		}
+	}, [ currentPage ] );
+
 	useEffect( () => {
 		if ( Children.count( children ) ) {
 			deprecated( 'Passing children to <Guide>', {
@@ -71,16 +78,6 @@ function Guide( {
 		}
 	}, [ children ] );
 
-	useEffect( () => {
-		// Each time we change the current page, start from the first element of the page.
-		// This also solves any focus loss that can happen.
-		if ( guideContainer.current ) {
-			(
-				focus.tabbable.find( guideContainer.current ) as HTMLElement[]
-			 )[ 0 ]?.focus();
-		}
-	}, [ currentPage ] );
-
 	if ( Children.count( children ) ) {
 		pages =
 			Children.map( children, ( child ) => ( {
@@ -111,6 +108,7 @@ function Guide( {
 		<Modal
 			className={ classnames( 'components-guide', className ) }
 			contentLabel={ contentLabel }
+			isDismissible={ pages.length > 1 }
 			onRequestClose={ onFinish }
 			onKeyDown={ ( event ) => {
 				if ( event.code === 'ArrowLeft' ) {
@@ -123,7 +121,7 @@ function Guide( {
 					event.preventDefault();
 				}
 			} }
-			ref={ guideContainer }
+			ref={ ref }
 		>
 			<div className="components-guide__container">
 				<div className="components-guide__page">
@@ -144,6 +142,7 @@ function Guide( {
 					{ canGoBack && (
 						<Button
 							className="components-guide__back-button"
+							variant="tertiary"
 							onClick={ goBack }
 						>
 							{ __( 'Previous' ) }
@@ -152,6 +151,7 @@ function Guide( {
 					{ canGoForward && (
 						<Button
 							className="components-guide__forward-button"
+							variant="primary"
 							onClick={ goForward }
 						>
 							{ __( 'Next' ) }
@@ -160,6 +160,7 @@ function Guide( {
 					{ ! canGoForward && (
 						<Button
 							className="components-guide__finish-button"
+							variant="primary"
 							onClick={ onFinish }
 						>
 							{ finishButtonText }

package/src/guide/page-control.tsx

@@ -28,11 +28,7 @@ export default function PageControl( {
 				>
 					<Button
 						key={ page }
-						icon={
-							<PageControlIcon
-								isSelected={ page === currentPage }
-							/>
-						}
+						icon={ <PageControlIcon /> }
 						aria-label={ sprintf(
 							/* translators: 1: current page number 2: total number of pages */
 							__( 'Page %1$d of %2$d' ),

package/src/guide/style.scss

@@ -29,7 +29,7 @@
 
 			&:hover {
 				svg {
-					fill: #fff;
+					fill: $white;
 				}
 			}
 		}
@@ -57,7 +57,7 @@
 	&__footer {
 		align-content: center;
 		display: flex;
-		height: 30px;
+		height: $button-size;
 		justify-content: center;
 		margin: 0 0 $grid-unit-30 0;
 		padding: 0 $grid-unit-40;
@@ -78,6 +78,11 @@
 			height: 30px;
 			min-width: 20px;
 			margin: -6px 0;
+			color: $gray-200;
+		}
+
+		li[aria-current="step"] .components-button {
+			color: var(--wp-components-color-accent, var(--wp-admin-theme-color));
 		}
 	}
 }
@@ -85,7 +90,6 @@
 .components-modal__frame.components-guide {
 	border: none;
 	min-width: 312px;
-	height: 80vh;
 	max-height: 575px;
 
 	@media ( max-width: $break-small ) {
@@ -98,34 +102,14 @@
 	&.components-guide__back-button,
 	&.components-guide__forward-button,
 	&.components-guide__finish-button {
-		height: 30px;
 		position: absolute;
 	}
 
-	&.components-guide__back-button,
-	&.components-guide__forward-button {
-		font-size: $default-font-size;
-		padding: 4px 2px;
-
-		&.has-text svg {
-			margin: 0;
-		}
-
-		&:hover {
-			text-decoration: underline;
-		}
-	}
-
 	&.components-guide__back-button {
 		left: $grid-unit-40;
 	}
 
-	&.components-guide__forward-button {
-		right: $grid-unit-40;
-		color: #1386bf;
-		font-weight: bold;
-	}
-
+	&.components-guide__forward-button,
 	&.components-guide__finish-button {
 		right: $grid-unit-40;
 	}

package/src/unit-control/index.tsx

@@ -24,6 +24,7 @@ import {
 	getValidParsedQuantityAndUnit,
 } from './utils';
 import { useControlledState } from '../utils/hooks';
+import { escapeRegExp } from '../utils/strings';
 import type { UnitControlProps, UnitControlOnChangeCallback } from './types';
 
 function UnforwardedUnitControl(
@@ -76,9 +77,9 @@ function UnforwardedUnitControl(
 		);
 		const [ { value: firstUnitValue = '' } = {}, ...rest ] = list;
 		const firstCharacters = rest.reduce( ( carry, { value } ) => {
-			const first = value?.substring( 0, 1 ) || '';
+			const first = escapeRegExp( value?.substring( 0, 1 ) || '' );
 			return carry.includes( first ) ? carry : `${ carry }|${ first }`;
-		}, firstUnitValue.substring( 0, 1 ) );
+		}, escapeRegExp( firstUnitValue.substring( 0, 1 ) ) );
 		return [ list, new RegExp( `^(?:${ firstCharacters })$`, 'i' ) ];
 	}, [ nonNullValueProp, unitProp, unitsProp ] );
 	const [ parsedQuantity, parsedUnit ] = getParsedQuantityAndUnit(

package/src/unit-control/test/index.tsx

@@ -373,18 +373,21 @@ describe( 'UnitControl', () => {
 			const units = [
 				{ value: 'pt', label: 'pt', default: 0 },
 				{ value: 'vmax', label: 'vmax', default: 10 },
+				// Proves that units with regex control characters don't error.
+				{ value: '+', label: '+', default: 10 },
 			];
 
 			render( <UnitControl units={ units } /> );
 
 			const options = getSelectOptions();
 
-			expect( options.length ).toBe( 2 );
+			expect( options.length ).toBe( 3 );
 
-			const [ pt, vmax ] = options;
+			const [ pt, vmax, plus ] = options;
 
 			expect( pt.value ).toBe( 'pt' );
 			expect( vmax.value ).toBe( 'vmax' );
+			expect( plus.value ).toBe( '+' );
 		} );
 
 		it( 'should reset value on unit change, if unit has default value', async () => {