New hook: useDebounce for speak function

packages/block-directory/package.json

@@ -26,6 +26,7 @@
 		"!((src|build|build-module)/components/**)"
 	],
 	"dependencies": {
+		"@wordpress/a11y": "file:../a11y",
 		"@wordpress/api-fetch": "file:../api-fetch",
 		"@wordpress/block-editor": "file:../block-editor",
 		"@wordpress/blocks": "file:../blocks",

packages/block-directory/src/components/downloadable-blocks-panel/index.js

@@ -2,10 +2,11 @@
  * WordPress dependencies
  */
 import { Fragment } from '@wordpress/element';
-import { compose } from '@wordpress/compose';
+import { compose, useDebounce } from '@wordpress/compose';
 import { withSelect } from '@wordpress/data';
 import { __, _n, sprintf } from '@wordpress/i18n';
-import { Spinner, withSpokenMessages } from '@wordpress/components';
+import { Spinner } from '@wordpress/components';
+import { speak } from '@wordpress/a11y';
 
 /**
  * Internal dependencies
@@ -19,8 +20,9 @@ function DownloadableBlocksPanel( {
 	hasPermission,
 	isLoading,
 	isWaiting,
-	debouncedSpeak,
 } ) {
+	const debouncedSpeak = useDebounce( speak, 500 );
+
 	if ( false === hasPermission ) {
 		debouncedSpeak( __( 'No blocks found in your library.' ) );
 		return (
@@ -74,7 +76,6 @@ function DownloadableBlocksPanel( {
 }
 
 export default compose( [
-	withSpokenMessages,
 	withSelect( ( select, { filterValue } ) => {
 		const {
 			getDownloadableBlocks,

packages/block-editor/src/components/inserter/quick-inserter.js

@@ -9,13 +9,11 @@ import classnames from 'classnames';
  */
 import { useState, useMemo, useEffect } from '@wordpress/element';
 import { __, _n, sprintf } from '@wordpress/i18n';
-import {
-	VisuallyHidden,
-	Button,
-	withSpokenMessages,
-} from '@wordpress/components';
+import { VisuallyHidden, Button } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { LEFT, RIGHT, UP, DOWN, BACKSPACE, ENTER } from '@wordpress/keycodes';
+import { useDebounce } from '@wordpress/compose';
+import { speak } from '@wordpress/a11y';
 
 /**
  * Internal dependencies
@@ -107,14 +105,14 @@ function QuickInserterList( {
 	);
 }
 
-function QuickInserter( {
+export default function QuickInserter( {
 	onSelect,
 	rootClientId,
 	clientId,
 	isAppender,
 	selectBlockOnInsert,
-	debouncedSpeak,
 } ) {
+	const debouncedSpeak = useDebounce( speak, 500 );
 	const [ filterValue, setFilterValue ] = useState( '' );
 	const [
 		destinationRootClientId,
@@ -252,5 +250,3 @@ function QuickInserter( {
 	);
 	/* eslint-enable jsx-a11y/no-autofocus, jsx-a11y/no-static-element-interactions */
 }
-
-export default withSpokenMessages( QuickInserter );

packages/components/src/higher-order/with-spoken-messages/index.js

@@ -1,46 +1,26 @@
-/**
- * External dependencies
- */
-import { debounce } from 'lodash';
-
 /**
  * WordPress dependencies
  */
-import { Component } from '@wordpress/element';
+import { createHigherOrderComponent, useDebounce } from '@wordpress/compose';
 import { speak } from '@wordpress/a11y';
-import { createHigherOrderComponent } from '@wordpress/compose';
 
 /**
- * A Higher Order Component used to be provide a unique instance ID by
- * component.
+ * A Higher Order Component used to be provide speak and debounced speak
+ * functions.
+ *
+ * @see https://developer.wordpress.org/block-editor/packages/packages-a11y/#speak
  *
- * @param {WPComponent} WrappedComponent  The wrapped component.
+ * @param {WPComponent} Component The component to be wrapped.
  *
- * @return {WPComponent} The component to be rendered.
+ * @return {WPComponent} The wrapped component.
  */
-export default createHigherOrderComponent( ( WrappedComponent ) => {
-	return class extends Component {
-		constructor() {
-			super( ...arguments );
-			this.debouncedSpeak = debounce( this.speak.bind( this ), 500 );
-		}
-
-		speak( message, type = 'polite' ) {
-			speak( message, type );
-		}
-
-		componentWillUnmount() {
-			this.debouncedSpeak.cancel();
-		}
-
-		render() {
-			return (
-				<WrappedComponent
-					{ ...this.props }
-					speak={ this.speak }
-					debouncedSpeak={ this.debouncedSpeak }
-				/>
-			);
-		}
-	};
-}, 'withSpokenMessages' );
+export default createHigherOrderComponent(
+	( Component ) => ( props ) => (
+		<Component
+			{ ...props }
+			speak={ speak }
+			debouncedSpeak={ useDebounce( speak, 500 ) }
+		/>
+	),
+	'withSpokenMessages'
+);

packages/compose/README.md

@@ -146,6 +146,17 @@ _Returns_
 
 -   `boolean`: Whether or not the text has been copied. Resets after the timeout.
 
+<a name="useDebounce" href="#useDebounce">#</a> **useDebounce**
+
+Debounces a function with Lodash's `debounce`. A new debounced function will
+be returned and any scheduled calls cancelled if any of the arguments change,
+including the function to debounce, so please wrap functions created on
+render in components in `useCallback`.
+
+_Parameters_
+
+-   _args_ `...any`: Arguments passed to Lodash's `debounce`.
+
 <a name="useInstanceId" href="#useInstanceId">#</a> **useInstanceId**
 
 Provides a unique instance ID.

packages/compose/package.json

@@ -32,7 +32,8 @@
 		"clipboard": "^2.0.1",
 		"lodash": "^4.17.19",
 		"mousetrap": "^1.6.5",
-		"react-resize-aware": "^3.0.1"
+		"react-resize-aware": "^3.0.1",
+		"use-memo-one": "^1.1.1"
 	},
 	"publishConfig": {
 		"access": "public"

packages/compose/src/hooks/use-debounce/index.js

@@ -0,0 +1,24 @@
+/**
+ * External dependencies
+ */
+import { debounce } from 'lodash';
+import { useMemoOne } from 'use-memo-one';
+
+/**
+ * WordPress dependencies
+ */
+import { useEffect } from '@wordpress/element';
+
+/**
+ * Debounces a function with Lodash's `debounce`. A new debounced function will
+ * be returned and any scheduled calls cancelled if any of the arguments change,
+ * including the function to debounce, so please wrap functions created on
+ * render in components in `useCallback`.
+ *
+ * @param {...any} args Arguments passed to Lodash's `debounce`.
+ */
+export default function useDebounce( ...args ) {
+	const debounced = useMemoOne( () => debounce( ...args ), args );
+	useEffect( () => () => debounced.cancel(), [ debounced ] );
+	return debounced;
+}

packages/compose/src/index.js

@@ -24,3 +24,4 @@ export { default as useViewportMatch } from './hooks/use-viewport-match';
 export { default as useResizeObserver } from './hooks/use-resize-observer';
 export { default as useAsyncList } from './hooks/use-async-list';
 export { default as useWarnOnChange } from './hooks/use-warn-on-change';
+export { default as useDebounce } from './hooks/use-debounce';

packages/compose/src/index.native.js

@@ -28,3 +28,4 @@ export { default as withPreferredColorScheme } from './higher-order/with-preferr
 export { default as usePreferredColorScheme } from './hooks/use-preferred-color-scheme';
 export { default as usePreferredColorSchemeStyle } from './hooks/use-preferred-color-scheme-style';
 export { default as useResizeObserver } from './hooks/use-resize-observer';
+export { default as useDebounce } from './hooks/use-debounce';

packages/edit-post/src/components/header/feature-toggle/index.js

@@ -8,9 +8,10 @@ import { flow } from 'lodash';
  */
 import { withSelect, withDispatch } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
-import { MenuItem, withSpokenMessages } from '@wordpress/components';
+import { MenuItem } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { check } from '@wordpress/icons';
+import { speak } from '@wordpress/a11y';
 
 function FeatureToggle( {
 	onToggle,
@@ -19,7 +20,6 @@ function FeatureToggle( {
 	info,
 	messageActivated,
 	messageDeactivated,
-	speak,
 	shortcut,
 } ) {
 	const speakMessage = () => {
@@ -53,5 +53,4 @@ export default compose( [
 			dispatch( 'core/edit-post' ).toggleFeature( ownProps.feature );
 		},
 	} ) ),
-	withSpokenMessages,
 ] )( FeatureToggle );

packages/edit-post/src/components/visual-editor/block-inspector-button.js

@@ -7,14 +7,11 @@ import { noop } from 'lodash';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { MenuItem, withSpokenMessages } from '@wordpress/components';
+import { MenuItem } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
+import { speak } from '@wordpress/a11y';
 
-export function BlockInspectorButton( {
-	onClick = noop,
-	small = false,
-	speak,
-} ) {
+export function BlockInspectorButton( { onClick = noop, small = false } ) {
 	const { shortcut, areAdvancedSettingsOpened } = useSelect(
 		( select ) => ( {
 			shortcut: select(
@@ -64,4 +61,4 @@ export function BlockInspectorButton( {
 	);
 }
 
-export default withSpokenMessages( BlockInspectorButton );
+export default BlockInspectorButton;

packages/edit-site/package.json

@@ -28,6 +28,7 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.11.2",
+		"@wordpress/a11y": "file:../a11y",
 		"@wordpress/api-fetch": "file:../api-fetch",
 		"@wordpress/block-editor": "file:../block-editor",
 		"@wordpress/block-library": "file:../block-library",

packages/edit-site/src/components/header/feature-toggle/index.js

@@ -7,17 +7,17 @@ import { flow } from 'lodash';
  * WordPress dependencies
  */
 import { useSelect, useDispatch } from '@wordpress/data';
-import { MenuItem, withSpokenMessages } from '@wordpress/components';
+import { MenuItem } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { check } from '@wordpress/icons';
+import { speak } from '@wordpress/a11y';
 
-function FeatureToggle( {
+export default function FeatureToggle( {
 	feature,
 	label,
 	info,
 	messageActivated,
 	messageDeactivated,
-	speak,
 } ) {
 	const speakMessage = () => {
 		if ( isActive ) {
@@ -48,5 +48,3 @@ function FeatureToggle( {
 		</MenuItem>
 	);
 }
-
-export default withSpokenMessages( FeatureToggle );

packages/format-library/package.json

@@ -25,6 +25,7 @@
 		"@babel/runtime": "^7.11.2",
 		"@wordpress/block-editor": "file:../block-editor",
 		"@wordpress/components": "file:../components",
+		"@wordpress/compose": "file:../compose",
 		"@wordpress/data": "file:../data",
 		"@wordpress/dom": "file:../dom",
 		"@wordpress/element": "file:../element",

packages/format-library/src/text-color/inline.js

@@ -8,7 +8,6 @@ import { get } from 'lodash';
  */
 import { useCallback, useMemo } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
-import { withSpokenMessages } from '@wordpress/components';
 import { getRectangleFromRange } from '@wordpress/dom';
 import {
 	applyFormat,
@@ -119,7 +118,13 @@ const ColorPicker = ( { name, value, onChange } ) => {
 	return <ColorPalette value={ activeColor } onChange={ onColorChange } />;
 };
 
-const InlineColorUI = ( { name, value, onChange, onClose, addingColor } ) => {
+export default function InlineColorUI( {
+	name,
+	value,
+	onChange,
+	onClose,
+	addingColor,
+} ) {
 	return (
 		<ColorPopoverAtLink
 			value={ value }
@@ -130,6 +135,4 @@ const InlineColorUI = ( { name, value, onChange, onClose, addingColor } ) => {
 			<ColorPicker name={ name } value={ value } onChange={ onChange } />
 		</ColorPopoverAtLink>
 	);
-};
-
-export default withSpokenMessages( InlineColorUI );
+}