prep build 10/17

.eslintrc.js

@@ -135,6 +135,7 @@ module.exports = {
 							'negate',
 							'noop',
 							'nth',
+							'omitBy',
 							'once',
 							'overEvery',
 							'partial',
@@ -319,6 +320,11 @@ module.exports = {
 			excludedFiles: [ 'test/e2e/**/*.js' ],
 			extends: [ 'plugin:@wordpress/eslint-plugin/test-unit' ],
 		},
+		{
+			files: [ '**/test/**/*.js' ],
+			excludedFiles: [ '**/*.@(android|ios|native).js' ],
+			extends: [ 'plugin:jest-dom/recommended' ],
+		},
 		{
 			files: [ 'packages/e2e-test*/**/*.js' ],
 			excludedFiles: [ 'packages/e2e-test-utils-playwright/**/*.js' ],

docs/how-to-guides/block-tutorial/creating-dynamic-blocks.md

@@ -221,4 +221,4 @@ registerBlockType( 'gutenberg-examples/example-dynamic', {
 
 {% end %}
 
-Note that this code uses the `wp-server-side-render` package but not `wp-data`. Make sure to update the dependencies in the PHP code. You can use wp-scripts to automatically build dependencies (see the [gutenberg-examples repo](https://github.com/WordPress/gutenberg-examples/tree/HEAD/01-basic-esnext) for PHP code setup).
+Note that this code uses the `wp-server-side-render` package but not `wp-data`. Make sure to update the dependencies in the PHP code. You can use wp-scripts to automatically build dependencies (see the [gutenberg-examples repo](https://github.com/WordPress/gutenberg-examples/tree/trunk/blocks-jsx/01-basic-esnext) for PHP code setup).

docs/reference-guides/block-api/block-supports.md

@@ -105,6 +105,20 @@ supports: {
 }
 ```
 
+## ariaLabel
+
+- Type: `boolean`
+- Default value: `false`
+
+ARIA-labels let you define an accessible label for elements. This property allows enabling the definition of an aria-label for the block, without exposing a UI field.
+
+```js
+supports: {
+	// Add the support for aria label.
+	ariaLabel: true
+}
+```
+
 ## className
 
 -   Type: `boolean`

lib/blocks.php

@@ -26,6 +26,7 @@ function gutenberg_reregister_core_block_types() {
 				'heading',
 				'html',
 				'list',
+				'list-item',
 				'media-text',
 				'missing',
 				'more',

package.json

@@ -185,6 +185,7 @@
 		"eslint-import-resolver-node": "0.3.4",
 		"eslint-plugin-eslint-comments": "3.1.2",
 		"eslint-plugin-import": "2.25.2",
+		"eslint-plugin-jest-dom": "4.0.2",
 		"eslint-plugin-playwright": "0.8.0",
 		"eslint-plugin-ssr-friendly": "1.0.6",
 		"execa": "4.0.2",

packages/a11y/src/test/clear.test.js

@@ -16,7 +16,7 @@ describe( 'clear', () => {
 		document.body.appendChild( container2 );
 
 		clear();
-		expect( container1 ).toHaveTextContent( '' );
-		expect( container2 ).toHaveTextContent( '' );
+		expect( container1 ).toBeEmptyDOMElement();
+		expect( container2 ).toBeEmptyDOMElement();
 	} );
 } );

packages/a11y/src/test/index.test.js

@@ -43,7 +43,7 @@ describe( 'speak', () => {
 		it( 'should set the textcontent of the polite aria-live region', () => {
 			speak( 'default message' );
 			expect( containerPolite ).toHaveTextContent( 'default message' );
-			expect( containerAssertive ).toHaveTextContent( '' );
+			expect( containerAssertive ).toBeEmptyDOMElement();
 			expect( clear ).toHaveBeenCalled();
 			expect( filterMessage ).toHaveBeenCalledWith( 'default message' );
 		} );
@@ -52,7 +52,7 @@ describe( 'speak', () => {
 	describe( 'in assertive mode', () => {
 		it( 'should set the textcontent of the assertive aria-live region', () => {
 			speak( 'assertive message', 'assertive' );
-			expect( containerPolite ).toHaveTextContent( '' );
+			expect( containerPolite ).toBeEmptyDOMElement();
 			expect( containerAssertive ).toHaveTextContent(
 				'assertive message'
 			);
@@ -63,7 +63,7 @@ describe( 'speak', () => {
 		it( 'should set the textcontent of the polite aria-live region', () => {
 			speak( 'polite message', 'polite' );
 			expect( containerPolite ).toHaveTextContent( 'polite message' );
-			expect( containerAssertive ).toHaveTextContent( '' );
+			expect( containerAssertive ).toBeEmptyDOMElement();
 		} );
 	} );
 

packages/block-editor/src/components/spacing-sizes-control/spacing-input-control.js

@@ -227,7 +227,7 @@ export default function SpacingInputControl( {
 					<RangeControl
 						value={ customRangeValue }
 						min={ 0 }
-						max={ 100 }
+						max={ 300 }
 						withInputField={ false }
 						onChange={ handleCustomValueSliderChange }
 						className="components-spacing-sizes-control__custom-value-range"

packages/block-editor/src/store/reducer.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { reduce, omit, mapValues, isEqual, isEmpty, omitBy } from 'lodash';
+import { reduce, omit, mapValues, isEqual, isEmpty } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -417,15 +417,15 @@ const withBlockTree =
 				break;
 			}
 			case 'SAVE_REUSABLE_BLOCK_SUCCESS': {
-				const updatedBlockUids = Object.keys(
-					omitBy( newState.attributes, ( attributes, clientId ) => {
+				const updatedBlockUids = Object.entries( newState.attributes )
+					.filter( ( [ clientId, attributes ] ) => {
 						return (
-							newState.byClientId[ clientId ].name !==
-								'core/block' ||
-							attributes.ref !== action.updatedId
+							newState.byClientId[ clientId ].name ===
+								'core/block' &&
+							attributes.ref === action.updatedId
 						);
 					} )
-				);
+					.map( ( [ clientId ] ) => clientId );
 
 				newState.tree = updateParentInnerBlocksInTree(
 					newState,

packages/components/CHANGELOG.md

@@ -5,6 +5,8 @@
 ### Bug Fix
 
 -   `FontSizePicker`: Ensure that fluid font size presets appear correctly in the UI controls ([#44791](https://github.com/WordPress/gutenberg/pull/44791)).
+-   `Navigator`: prevent partially hiding focus ring styles, by removing unnecessary overflow rules on `NavigatorScreen` ([#44973](https://github.com/WordPress/gutenberg/pull/44973)).
+-   `Navigator`: restore focus only once per location  ([#44972](https://github.com/WordPress/gutenberg/pull/44972)).
 
 ### Documentation
 
@@ -15,6 +17,7 @@
 -   `Modal`: Convert to TypeScript ([#42949](https://github.com/WordPress/gutenberg/pull/42949)).
 -   `Sandbox`: Use `toString` to create observe and resize script string ([#42872](https://github.com/WordPress/gutenberg/pull/42872)).
 -   `Navigator`: refactor unit tests to TypeScript and to `user-event` ([#44970](https://github.com/WordPress/gutenberg/pull/44970)).
+-   `Navigator`: Refactor Storybook code to TypeScript and controls ([#44979](https://github.com/WordPress/gutenberg/pull/44979)).
 
 ## 21.2.0 (2022-10-05)
 

packages/components/src/navigator/index.ts

@@ -1,5 +1,5 @@
-export { default as NavigatorProvider } from './navigator-provider';
-export { default as NavigatorScreen } from './navigator-screen';
-export { default as NavigatorButton } from './navigator-button';
-export { default as NavigatorBackButton } from './navigator-back-button';
+export { NavigatorProvider } from './navigator-provider';
+export { NavigatorScreen } from './navigator-screen';
+export { NavigatorButton } from './navigator-button';
+export { NavigatorBackButton } from './navigator-back-button';
 export { default as useNavigator } from './use-navigator';

packages/components/src/navigator/navigator-back-button/component.tsx

@@ -11,7 +11,7 @@ import { View } from '../../view';
 import { useNavigatorBackButton } from './hook';
 import type { NavigatorBackButtonProps } from '../types';
 
-function NavigatorBackButton(
+function UnconnectedNavigatorBackButton(
 	props: WordPressComponentProps< NavigatorBackButtonProps, 'button' >,
 	forwardedRef: ForwardedRef< any >
 ) {
@@ -54,9 +54,9 @@ function NavigatorBackButton(
  * );
  * ```
  */
-const ConnectedNavigatorBackButton = contextConnect(
-	NavigatorBackButton,
+export const NavigatorBackButton = contextConnect(
+	UnconnectedNavigatorBackButton,
 	'NavigatorBackButton'
 );
 
-export default ConnectedNavigatorBackButton;
+export default NavigatorBackButton;

packages/components/src/navigator/navigator-back-button/index.ts

@@ -1 +1 @@
-export { default } from './component';
+export { default as NavigatorBackButton } from './component';

packages/components/src/navigator/navigator-button/component.tsx

@@ -11,7 +11,7 @@ import { View } from '../../view';
 import { useNavigatorButton } from './hook';
 import type { NavigatorButtonProps } from '../types';
 
-function NavigatorButton(
+function UnconnectedNavigatorButton(
 	props: WordPressComponentProps< NavigatorButtonProps, 'button' >,
 	forwardedRef: ForwardedRef< any >
 ) {
@@ -53,9 +53,9 @@ function NavigatorButton(
  * );
  * ```
  */
-const ConnectedNavigatorButton = contextConnect(
-	NavigatorButton,
+export const NavigatorButton = contextConnect(
+	UnconnectedNavigatorButton,
 	'NavigatorButton'
 );
 
-export default ConnectedNavigatorButton;
+export default NavigatorButton;

packages/components/src/navigator/navigator-button/index.ts

@@ -1 +1 @@
-export { default } from './component';
+export { default as NavigatorButton } from './component';

packages/components/src/navigator/navigator-provider/component.tsx

@@ -26,7 +26,7 @@ import type {
 	NavigatorContext as NavigatorContextType,
 } from '../types';
 
-function NavigatorProvider(
+function UnconnectedNavigatorProvider(
 	props: WordPressComponentProps< NavigatorProviderProps, 'div' >,
 	forwardedRef: ForwardedRef< any >
 ) {
@@ -49,6 +49,7 @@ function NavigatorProvider(
 					...options,
 					path,
 					isBack: false,
+					hasRestoredFocus: false,
 				},
 			] );
 		},
@@ -62,6 +63,7 @@ function NavigatorProvider(
 				{
 					...locationHistory[ locationHistory.length - 2 ],
 					isBack: true,
+					hasRestoredFocus: false,
 				},
 			] );
 		}
@@ -129,9 +131,9 @@ function NavigatorProvider(
  * );
  * ```
  */
-const ConnectedNavigatorProvider = contextConnect(
-	NavigatorProvider,
+export const NavigatorProvider = contextConnect(
+	UnconnectedNavigatorProvider,
 	'NavigatorProvider'
 );
 
-export default ConnectedNavigatorProvider;
+export default NavigatorProvider;

packages/components/src/navigator/navigator-provider/index.ts

@@ -1 +1 @@
-export { default } from './component';
+export { default as NavigatorProvider } from './component';

packages/components/src/navigator/navigator-screen/component.tsx

@@ -42,7 +42,10 @@ type Props = Omit<
 	keyof MotionProps
 >;
 
-function NavigatorScreen( props: Props, forwardedRef: ForwardedRef< any > ) {
+function UnconnectedNavigatorScreen(
+	props: Props,
+	forwardedRef: ForwardedRef< any >
+) {
 	const { children, className, path, ...otherProps } = useContextSystem(
 		props,
 		'NavigatorScreen'
@@ -62,14 +65,20 @@ function NavigatorScreen( props: Props, forwardedRef: ForwardedRef< any > ) {
 		// - if the current location is not the initial one (to avoid moving focus on page load)
 		// - when the screen becomes visible
 		// - if the wrapper ref has been assigned
-		if ( isInitialLocation || ! isMatch || ! wrapperRef.current ) {
+		// - if focus hasn't already been restored for the current location
+		if (
+			isInitialLocation ||
+			! isMatch ||
+			! wrapperRef.current ||
+			location.hasRestoredFocus
+		) {
 			return;
 		}
 
 		const activeElement = wrapperRef.current.ownerDocument.activeElement;
 
 		// If an element is already focused within the wrapper do not focus the
-		// element. This prevents inputs or buttons from losing focus unecessarily.
+		// element. This prevents inputs or buttons from losing focus unnecessarily.
 		if ( wrapperRef.current.contains( activeElement ) ) {
 			return;
 		}
@@ -93,10 +102,12 @@ function NavigatorScreen( props: Props, forwardedRef: ForwardedRef< any > ) {
 			elementToFocus = firstTabbable ?? wrapperRef.current;
 		}
 
+		location.hasRestoredFocus = true;
 		elementToFocus.focus();
 	}, [
 		isInitialLocation,
 		isMatch,
+		location.hasRestoredFocus,
 		location.isBack,
 		previousLocation?.focusTargetSelector,
 	] );
@@ -200,9 +211,9 @@ function NavigatorScreen( props: Props, forwardedRef: ForwardedRef< any > ) {
  * );
  * ```
  */
-const ConnectedNavigatorScreen = contextConnect(
-	NavigatorScreen,
+export const NavigatorScreen = contextConnect(
+	UnconnectedNavigatorScreen,
 	'NavigatorScreen'
 );
 
-export default ConnectedNavigatorScreen;
+export default NavigatorScreen;

packages/components/src/navigator/navigator-screen/index.ts

@@ -1 +1 @@
-export { default } from './component';
+export { default as NavigatorScreen } from './component';