From 29a237f03b461105acdd088aa8ee64c5c5e4b598 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= Date: Thu, 8 Oct 2020 13:18:32 +0300 Subject: [PATCH 1/4] New hooks: useSpeak and useDebouncedSpeak --- package-lock.json | 9 ++- .../downloadable-blocks-panel/index.js | 8 +-- .../src/components/inserter/quick-inserter.js | 13 ++-- .../with-spoken-messages/index.js | 59 +++++++------------ packages/compose/README.md | 16 +++++ packages/compose/package.json | 4 +- .../compose/src/hooks/use-debounce/index.js | 21 +++++++ .../src/hooks/use-debounced-speak/index.js | 20 +++++++ packages/compose/src/hooks/use-speak/index.js | 13 ++++ packages/compose/src/index.js | 2 + .../components/header/feature-toggle/index.js | 7 +-- .../visual-editor/block-inspector-button.js | 12 ++-- .../components/header/feature-toggle/index.js | 9 ++- packages/format-library/package.json | 1 + .../format-library/src/text-color/inline.js | 13 ++-- 15 files changed, 131 insertions(+), 76 deletions(-) create mode 100644 packages/compose/src/hooks/use-debounce/index.js create mode 100644 packages/compose/src/hooks/use-debounced-speak/index.js create mode 100644 packages/compose/src/hooks/use-speak/index.js diff --git a/package-lock.json b/package-lock.json index e9538d2b09edb5..f9ba6a549a27a9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17016,13 +17016,15 @@ "version": "file:packages/compose", "requires": { "@babel/runtime": "^7.11.2", + "@wordpress/a11y": "file:packages/a11y", "@wordpress/element": "file:packages/element", "@wordpress/is-shallow-equal": "file:packages/is-shallow-equal", "@wordpress/priority-queue": "file:packages/priority-queue", "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" }, "dependencies": { "@babel/runtime": { @@ -17690,6 +17692,7 @@ "@babel/runtime": "^7.11.2", "@wordpress/block-editor": "file:packages/block-editor", "@wordpress/components": "file:packages/components", + "@wordpress/compose": "file:packages/compose", "@wordpress/data": "file:packages/data", "@wordpress/dom": "file:packages/dom", "@wordpress/element": "file:packages/element", @@ -46055,7 +46058,7 @@ "dependencies": { "clone-deep": { "version": "0.2.4", - "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-0.2.4.tgz", + "resolved": "http://registry.npmjs.org/clone-deep/-/clone-deep-0.2.4.tgz", "integrity": "sha1-TnPdCen7lxzDhnDF3O2cGJZIHMY=", "dev": true, "requires": { @@ -46089,7 +46092,7 @@ "dependencies": { "kind-of": { "version": "2.0.1", - "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-2.0.1.tgz", + "resolved": "http://registry.npmjs.org/kind-of/-/kind-of-2.0.1.tgz", "integrity": "sha1-AY7HpM5+OobLkUG+UZ0kyPqpgbU=", "dev": true, "requires": { diff --git a/packages/block-directory/src/components/downloadable-blocks-panel/index.js b/packages/block-directory/src/components/downloadable-blocks-panel/index.js index 835141927c7ba3..24a120b50ef321 100644 --- a/packages/block-directory/src/components/downloadable-blocks-panel/index.js +++ b/packages/block-directory/src/components/downloadable-blocks-panel/index.js @@ -2,10 +2,10 @@ * WordPress dependencies */ import { Fragment } from '@wordpress/element'; -import { compose } from '@wordpress/compose'; +import { compose, useDebouncedSpeak } 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'; /** * Internal dependencies @@ -19,8 +19,9 @@ function DownloadableBlocksPanel( { hasPermission, isLoading, isWaiting, - debouncedSpeak, } ) { + const debouncedSpeak = useDebouncedSpeak(); + if ( false === hasPermission ) { debouncedSpeak( __( 'No blocks found in your library.' ) ); return ( @@ -74,7 +75,6 @@ function DownloadableBlocksPanel( { } export default compose( [ - withSpokenMessages, withSelect( ( select, { filterValue } ) => { const { getDownloadableBlocks, diff --git a/packages/block-editor/src/components/inserter/quick-inserter.js b/packages/block-editor/src/components/inserter/quick-inserter.js index 2ce611558621ce..5b25afcd432360 100644 --- a/packages/block-editor/src/components/inserter/quick-inserter.js +++ b/packages/block-editor/src/components/inserter/quick-inserter.js @@ -9,13 +9,10 @@ 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 { useDebouncedSpeak } from '@wordpress/compose'; /** * Internal dependencies @@ -107,14 +104,14 @@ function QuickInserterList( { ); } -function QuickInserter( { +export default function QuickInserter( { onSelect, rootClientId, clientId, isAppender, selectBlockOnInsert, - debouncedSpeak, } ) { + const debouncedSpeak = useDebouncedSpeak(); const [ filterValue, setFilterValue ] = useState( '' ); const [ destinationRootClientId, @@ -252,5 +249,3 @@ function QuickInserter( { ); /* eslint-enable jsx-a11y/no-autofocus, jsx-a11y/no-static-element-interactions */ } - -export default withSpokenMessages( QuickInserter ); diff --git a/packages/components/src/higher-order/with-spoken-messages/index.js b/packages/components/src/higher-order/with-spoken-messages/index.js index 6649fc0337cb0c..fb5cd0fa672694 100644 --- a/packages/components/src/higher-order/with-spoken-messages/index.js +++ b/packages/components/src/higher-order/with-spoken-messages/index.js @@ -1,46 +1,29 @@ -/** - * External dependencies - */ -import { debounce } from 'lodash'; - /** * WordPress dependencies */ -import { Component } from '@wordpress/element'; -import { speak } from '@wordpress/a11y'; -import { createHigherOrderComponent } from '@wordpress/compose'; +import { + createHigherOrderComponent, + useSpeak, + useDebouncedSpeak, +} 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 ( - - ); - } - }; -}, 'withSpokenMessages' ); +export default createHigherOrderComponent( + ( Component ) => ( props ) => ( + + ), + 'withSpokenMessages' +); diff --git a/packages/compose/README.md b/packages/compose/README.md index 1419312fa809ab..b360d5b2f412bc 100644 --- a/packages/compose/README.md +++ b/packages/compose/README.md @@ -146,6 +146,14 @@ _Returns_ - `boolean`: Whether or not the text has been copied. Resets after the timeout. +# **useDebouncedSpeak** + +Returns a debounced speak function. + +_Related_ + +- + # **useInstanceId** Provides a unique instance ID. @@ -222,6 +230,14 @@ _Returns_ - `Array`: An array of {Element} `resizeListener` and {?Object} `sizes` with properties `width` and `height` +# **useSpeak** + +Returns a speak function. + +_Related_ + +- + # **useViewportMatch** Returns true if the viewport matches the given query, or false otherwise. diff --git a/packages/compose/package.json b/packages/compose/package.json index 215b908716b4ee..d92c455d460825 100644 --- a/packages/compose/package.json +++ b/packages/compose/package.json @@ -26,13 +26,15 @@ "sideEffects": false, "dependencies": { "@babel/runtime": "^7.11.2", + "@wordpress/a11y": "file:../a11y", "@wordpress/element": "file:../element", "@wordpress/is-shallow-equal": "file:../is-shallow-equal", "@wordpress/priority-queue": "file:../priority-queue", "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" diff --git a/packages/compose/src/hooks/use-debounce/index.js b/packages/compose/src/hooks/use-debounce/index.js new file mode 100644 index 00000000000000..b6cdb5600c04a6 --- /dev/null +++ b/packages/compose/src/hooks/use-debounce/index.js @@ -0,0 +1,21 @@ +/** + * 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`. + * + * @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; +} diff --git a/packages/compose/src/hooks/use-debounced-speak/index.js b/packages/compose/src/hooks/use-debounced-speak/index.js new file mode 100644 index 00000000000000..db6560900c2c9b --- /dev/null +++ b/packages/compose/src/hooks/use-debounced-speak/index.js @@ -0,0 +1,20 @@ +/** + * WordPress dependencies + */ +import { speak } from '@wordpress/a11y'; + +/** + * Internal dependencies + */ +import useDebounce from '../use-debounce'; + +const WAIT = 500; + +/** + * Returns a debounced speak function. + * + * @see https://developer.wordpress.org/block-editor/packages/packages-a11y/#speak + */ +export default function useDebouncedSpeak() { + return useDebounce( speak, WAIT ); +} diff --git a/packages/compose/src/hooks/use-speak/index.js b/packages/compose/src/hooks/use-speak/index.js new file mode 100644 index 00000000000000..54716e1f88468d --- /dev/null +++ b/packages/compose/src/hooks/use-speak/index.js @@ -0,0 +1,13 @@ +/** + * WordPress dependencies + */ +import { speak } from '@wordpress/a11y'; + +/** + * Returns a speak function. + * + * @see https://developer.wordpress.org/block-editor/packages/packages-a11y/#speak + */ +export default function useSpeak() { + return speak; +} diff --git a/packages/compose/src/index.js b/packages/compose/src/index.js index 9e3844f0b7d5af..e234125c87ed65 100644 --- a/packages/compose/src/index.js +++ b/packages/compose/src/index.js @@ -24,3 +24,5 @@ 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 useSpeak } from './hooks/use-speak'; +export { default as useDebouncedSpeak } from './hooks/use-debounced-speak'; diff --git a/packages/edit-post/src/components/header/feature-toggle/index.js b/packages/edit-post/src/components/header/feature-toggle/index.js index 98b09b744e1d31..39f489713ba190 100644 --- a/packages/edit-post/src/components/header/feature-toggle/index.js +++ b/packages/edit-post/src/components/header/feature-toggle/index.js @@ -7,8 +7,8 @@ import { flow } from 'lodash'; * WordPress dependencies */ import { withSelect, withDispatch } from '@wordpress/data'; -import { compose } from '@wordpress/compose'; -import { MenuItem, withSpokenMessages } from '@wordpress/components'; +import { compose, useSpeak } from '@wordpress/compose'; +import { MenuItem } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { check } from '@wordpress/icons'; @@ -19,9 +19,9 @@ function FeatureToggle( { info, messageActivated, messageDeactivated, - speak, shortcut, } ) { + const speak = useSpeak(); const speakMessage = () => { if ( isActive ) { speak( messageDeactivated || __( 'Feature deactivated' ) ); @@ -53,5 +53,4 @@ export default compose( [ dispatch( 'core/edit-post' ).toggleFeature( ownProps.feature ); }, } ) ), - withSpokenMessages, ] )( FeatureToggle ); diff --git a/packages/edit-post/src/components/visual-editor/block-inspector-button.js b/packages/edit-post/src/components/visual-editor/block-inspector-button.js index 90a02c74ef5845..835d4122bddc47 100644 --- a/packages/edit-post/src/components/visual-editor/block-inspector-button.js +++ b/packages/edit-post/src/components/visual-editor/block-inspector-button.js @@ -7,14 +7,12 @@ 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 { useSpeak } from '@wordpress/compose'; -export function BlockInspectorButton( { - onClick = noop, - small = false, - speak, -} ) { +export function BlockInspectorButton( { onClick = noop, small = false } ) { + const speak = useSpeak(); const { shortcut, areAdvancedSettingsOpened } = useSelect( ( select ) => ( { shortcut: select( @@ -64,4 +62,4 @@ export function BlockInspectorButton( { ); } -export default withSpokenMessages( BlockInspectorButton ); +export default BlockInspectorButton; diff --git a/packages/edit-site/src/components/header/feature-toggle/index.js b/packages/edit-site/src/components/header/feature-toggle/index.js index dec13c805690bf..b6b71797fecfec 100644 --- a/packages/edit-site/src/components/header/feature-toggle/index.js +++ b/packages/edit-site/src/components/header/feature-toggle/index.js @@ -7,18 +7,19 @@ 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 { useSpeak } from '@wordpress/compose'; -function FeatureToggle( { +export default function FeatureToggle( { feature, label, info, messageActivated, messageDeactivated, - speak, } ) { + const speak = useSpeak(); const speakMessage = () => { if ( isActive ) { speak( messageDeactivated || __( 'Feature deactivated' ) ); @@ -48,5 +49,3 @@ function FeatureToggle( { ); } - -export default withSpokenMessages( FeatureToggle ); diff --git a/packages/format-library/package.json b/packages/format-library/package.json index 62a8bfd41c827b..8fc1ddcd3050dd 100644 --- a/packages/format-library/package.json +++ b/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", diff --git a/packages/format-library/src/text-color/inline.js b/packages/format-library/src/text-color/inline.js index b43bc14fe309cf..a464dbdd4a24bb 100644 --- a/packages/format-library/src/text-color/inline.js +++ b/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 ; }; -const InlineColorUI = ( { name, value, onChange, onClose, addingColor } ) => { +export default function InlineColorUI( { + name, + value, + onChange, + onClose, + addingColor, +} ) { return ( { ); -}; - -export default withSpokenMessages( InlineColorUI ); +} From c3d62013547eefb168708b6306ec1e41a9fc709a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= Date: Thu, 8 Oct 2020 13:35:35 +0300 Subject: [PATCH 2/4] Export for native --- packages/compose/src/index.native.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/compose/src/index.native.js b/packages/compose/src/index.native.js index eb3181954b0252..19588093d6b8d3 100644 --- a/packages/compose/src/index.native.js +++ b/packages/compose/src/index.native.js @@ -28,3 +28,5 @@ 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 useSpeak } from './hooks/use-speak'; +export { default as useDebouncedSpeak } from './hooks/use-debounced-speak'; From 28f35787de66e17fd1dca8461c3941c806a3c3c3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= Date: Mon, 12 Oct 2020 14:46:13 +0300 Subject: [PATCH 3/4] Export useDebounce instead --- package-lock.json | 2 ++ packages/block-directory/package.json | 1 + .../downloadable-blocks-panel/index.js | 5 +++-- .../src/components/inserter/quick-inserter.js | 5 +++-- .../with-spoken-messages/index.js | 11 ++++------ packages/compose/README.md | 19 +++++++----------- .../compose/src/hooks/use-debounce/index.js | 5 ++++- .../src/hooks/use-debounced-speak/index.js | 20 ------------------- packages/compose/src/hooks/use-speak/index.js | 13 ------------ packages/compose/src/index.js | 3 +-- packages/compose/src/index.native.js | 3 +-- .../components/header/feature-toggle/index.js | 4 ++-- .../visual-editor/block-inspector-button.js | 3 +-- packages/edit-site/package.json | 1 + .../components/header/feature-toggle/index.js | 3 +-- 15 files changed, 31 insertions(+), 67 deletions(-) delete mode 100644 packages/compose/src/hooks/use-debounced-speak/index.js delete mode 100644 packages/compose/src/hooks/use-speak/index.js diff --git a/package-lock.json b/package-lock.json index f9ba6a549a27a9..c878c2380781ee 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16746,6 +16746,7 @@ "@wordpress/block-directory": { "version": "file:packages/block-directory", "requires": { + "@wordpress/a11y": "file:packages/a11y", "@wordpress/api-fetch": "file:packages/api-fetch", "@wordpress/block-editor": "file:packages/block-editor", "@wordpress/blocks": "file:packages/blocks", @@ -17400,6 +17401,7 @@ "version": "file:packages/edit-site", "requires": { "@babel/runtime": "^7.11.2", + "@wordpress/a11y": "file:packages/a11y", "@wordpress/api-fetch": "file:packages/api-fetch", "@wordpress/block-editor": "file:packages/block-editor", "@wordpress/block-library": "file:packages/block-library", diff --git a/packages/block-directory/package.json b/packages/block-directory/package.json index 96d4a8c5858adf..861f6f5531a3dd 100644 --- a/packages/block-directory/package.json +++ b/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", diff --git a/packages/block-directory/src/components/downloadable-blocks-panel/index.js b/packages/block-directory/src/components/downloadable-blocks-panel/index.js index 24a120b50ef321..6cdde9efc28c9a 100644 --- a/packages/block-directory/src/components/downloadable-blocks-panel/index.js +++ b/packages/block-directory/src/components/downloadable-blocks-panel/index.js @@ -2,10 +2,11 @@ * WordPress dependencies */ import { Fragment } from '@wordpress/element'; -import { compose, useDebouncedSpeak } from '@wordpress/compose'; +import { compose, useDebounce } from '@wordpress/compose'; import { withSelect } from '@wordpress/data'; import { __, _n, sprintf } from '@wordpress/i18n'; import { Spinner } from '@wordpress/components'; +import { speak } from '@wordpress/a11y'; /** * Internal dependencies @@ -20,7 +21,7 @@ function DownloadableBlocksPanel( { isLoading, isWaiting, } ) { - const debouncedSpeak = useDebouncedSpeak(); + const debouncedSpeak = useDebounce( speak, 500 ); if ( false === hasPermission ) { debouncedSpeak( __( 'No blocks found in your library.' ) ); diff --git a/packages/block-editor/src/components/inserter/quick-inserter.js b/packages/block-editor/src/components/inserter/quick-inserter.js index 5b25afcd432360..ac2c3f80b945fe 100644 --- a/packages/block-editor/src/components/inserter/quick-inserter.js +++ b/packages/block-editor/src/components/inserter/quick-inserter.js @@ -12,7 +12,8 @@ import { __, _n, sprintf } from '@wordpress/i18n'; import { VisuallyHidden, Button } from '@wordpress/components'; import { useSelect, useDispatch } from '@wordpress/data'; import { LEFT, RIGHT, UP, DOWN, BACKSPACE, ENTER } from '@wordpress/keycodes'; -import { useDebouncedSpeak } from '@wordpress/compose'; +import { useDebounce } from '@wordpress/compose'; +import { speak } from '@wordpress/a11y'; /** * Internal dependencies @@ -111,7 +112,7 @@ export default function QuickInserter( { isAppender, selectBlockOnInsert, } ) { - const debouncedSpeak = useDebouncedSpeak(); + const debouncedSpeak = useDebounce( speak, 500 ); const [ filterValue, setFilterValue ] = useState( '' ); const [ destinationRootClientId, diff --git a/packages/components/src/higher-order/with-spoken-messages/index.js b/packages/components/src/higher-order/with-spoken-messages/index.js index fb5cd0fa672694..b2836e6a5fc7ca 100644 --- a/packages/components/src/higher-order/with-spoken-messages/index.js +++ b/packages/components/src/higher-order/with-spoken-messages/index.js @@ -1,11 +1,8 @@ /** * WordPress dependencies */ -import { - createHigherOrderComponent, - useSpeak, - useDebouncedSpeak, -} from '@wordpress/compose'; +import { createHigherOrderComponent, useDebounce } from '@wordpress/compose'; +import { speak } from '@wordpress/a11y'; /** * A Higher Order Component used to be provide speak and debounced speak @@ -21,8 +18,8 @@ export default createHigherOrderComponent( ( Component ) => ( props ) => ( ), 'withSpokenMessages' diff --git a/packages/compose/README.md b/packages/compose/README.md index b360d5b2f412bc..3c9ad543080dcc 100644 --- a/packages/compose/README.md +++ b/packages/compose/README.md @@ -146,13 +146,16 @@ _Returns_ - `boolean`: Whether or not the text has been copied. Resets after the timeout. -# **useDebouncedSpeak** +# **useDebounce** -Returns a debounced speak function. +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`. -_Related_ +_Parameters_ -- +- _args_ `...any`: Arguments passed to Lodash's `debounce`. # **useInstanceId** @@ -230,14 +233,6 @@ _Returns_ - `Array`: An array of {Element} `resizeListener` and {?Object} `sizes` with properties `width` and `height` -# **useSpeak** - -Returns a speak function. - -_Related_ - -- - # **useViewportMatch** Returns true if the viewport matches the given query, or false otherwise. diff --git a/packages/compose/src/hooks/use-debounce/index.js b/packages/compose/src/hooks/use-debounce/index.js index b6cdb5600c04a6..1a901ed0ebea64 100644 --- a/packages/compose/src/hooks/use-debounce/index.js +++ b/packages/compose/src/hooks/use-debounce/index.js @@ -10,7 +10,10 @@ import { useMemoOne } from 'use-memo-one'; import { useEffect } from '@wordpress/element'; /** - * Debounces a function with Lodash's `debounce`. + * 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`. */ diff --git a/packages/compose/src/hooks/use-debounced-speak/index.js b/packages/compose/src/hooks/use-debounced-speak/index.js deleted file mode 100644 index db6560900c2c9b..00000000000000 --- a/packages/compose/src/hooks/use-debounced-speak/index.js +++ /dev/null @@ -1,20 +0,0 @@ -/** - * WordPress dependencies - */ -import { speak } from '@wordpress/a11y'; - -/** - * Internal dependencies - */ -import useDebounce from '../use-debounce'; - -const WAIT = 500; - -/** - * Returns a debounced speak function. - * - * @see https://developer.wordpress.org/block-editor/packages/packages-a11y/#speak - */ -export default function useDebouncedSpeak() { - return useDebounce( speak, WAIT ); -} diff --git a/packages/compose/src/hooks/use-speak/index.js b/packages/compose/src/hooks/use-speak/index.js deleted file mode 100644 index 54716e1f88468d..00000000000000 --- a/packages/compose/src/hooks/use-speak/index.js +++ /dev/null @@ -1,13 +0,0 @@ -/** - * WordPress dependencies - */ -import { speak } from '@wordpress/a11y'; - -/** - * Returns a speak function. - * - * @see https://developer.wordpress.org/block-editor/packages/packages-a11y/#speak - */ -export default function useSpeak() { - return speak; -} diff --git a/packages/compose/src/index.js b/packages/compose/src/index.js index e234125c87ed65..3afcc9df90c585 100644 --- a/packages/compose/src/index.js +++ b/packages/compose/src/index.js @@ -24,5 +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 useSpeak } from './hooks/use-speak'; -export { default as useDebouncedSpeak } from './hooks/use-debounced-speak'; +export { default as useDebounce } from './hooks/use-debounce'; diff --git a/packages/compose/src/index.native.js b/packages/compose/src/index.native.js index 19588093d6b8d3..53abcc48aca482 100644 --- a/packages/compose/src/index.native.js +++ b/packages/compose/src/index.native.js @@ -28,5 +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 useSpeak } from './hooks/use-speak'; -export { default as useDebouncedSpeak } from './hooks/use-debounced-speak'; +export { default as useDebounce } from './hooks/use-debounce'; diff --git a/packages/edit-post/src/components/header/feature-toggle/index.js b/packages/edit-post/src/components/header/feature-toggle/index.js index 39f489713ba190..f0f52e04cf8d18 100644 --- a/packages/edit-post/src/components/header/feature-toggle/index.js +++ b/packages/edit-post/src/components/header/feature-toggle/index.js @@ -7,10 +7,11 @@ import { flow } from 'lodash'; * WordPress dependencies */ import { withSelect, withDispatch } from '@wordpress/data'; -import { compose, useSpeak } from '@wordpress/compose'; +import { compose } from '@wordpress/compose'; import { MenuItem } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { check } from '@wordpress/icons'; +import { speak } from '@wordpress/a11y'; function FeatureToggle( { onToggle, @@ -21,7 +22,6 @@ function FeatureToggle( { messageDeactivated, shortcut, } ) { - const speak = useSpeak(); const speakMessage = () => { if ( isActive ) { speak( messageDeactivated || __( 'Feature deactivated' ) ); diff --git a/packages/edit-post/src/components/visual-editor/block-inspector-button.js b/packages/edit-post/src/components/visual-editor/block-inspector-button.js index 835d4122bddc47..5a57dcd63e5ae7 100644 --- a/packages/edit-post/src/components/visual-editor/block-inspector-button.js +++ b/packages/edit-post/src/components/visual-editor/block-inspector-button.js @@ -9,10 +9,9 @@ import { noop } from 'lodash'; import { __ } from '@wordpress/i18n'; import { MenuItem } from '@wordpress/components'; import { useSelect, useDispatch } from '@wordpress/data'; -import { useSpeak } from '@wordpress/compose'; +import { speak } from '@wordpress/a11y'; export function BlockInspectorButton( { onClick = noop, small = false } ) { - const speak = useSpeak(); const { shortcut, areAdvancedSettingsOpened } = useSelect( ( select ) => ( { shortcut: select( diff --git a/packages/edit-site/package.json b/packages/edit-site/package.json index f72fd6312abb12..2c4ae7fdd3f4f0 100644 --- a/packages/edit-site/package.json +++ b/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", diff --git a/packages/edit-site/src/components/header/feature-toggle/index.js b/packages/edit-site/src/components/header/feature-toggle/index.js index b6b71797fecfec..e45b82ee5518d9 100644 --- a/packages/edit-site/src/components/header/feature-toggle/index.js +++ b/packages/edit-site/src/components/header/feature-toggle/index.js @@ -10,7 +10,7 @@ import { useSelect, useDispatch } from '@wordpress/data'; import { MenuItem } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { check } from '@wordpress/icons'; -import { useSpeak } from '@wordpress/compose'; +import { speak } from '@wordpress/a11y'; export default function FeatureToggle( { feature, @@ -19,7 +19,6 @@ export default function FeatureToggle( { messageActivated, messageDeactivated, } ) { - const speak = useSpeak(); const speakMessage = () => { if ( isActive ) { speak( messageDeactivated || __( 'Feature deactivated' ) ); From 7320d0f4e49f77f0a6c12b9f56337bad7e37f5a3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= Date: Mon, 12 Oct 2020 15:04:35 +0300 Subject: [PATCH 4/4] Remove dependency --- package-lock.json | 1 - packages/compose/package.json | 1 - 2 files changed, 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index c878c2380781ee..e4caa1f2d16049 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17017,7 +17017,6 @@ "version": "file:packages/compose", "requires": { "@babel/runtime": "^7.11.2", - "@wordpress/a11y": "file:packages/a11y", "@wordpress/element": "file:packages/element", "@wordpress/is-shallow-equal": "file:packages/is-shallow-equal", "@wordpress/priority-queue": "file:packages/priority-queue", diff --git a/packages/compose/package.json b/packages/compose/package.json index d92c455d460825..c74092df4ce3eb 100644 --- a/packages/compose/package.json +++ b/packages/compose/package.json @@ -26,7 +26,6 @@ "sideEffects": false, "dependencies": { "@babel/runtime": "^7.11.2", - "@wordpress/a11y": "file:../a11y", "@wordpress/element": "file:../element", "@wordpress/is-shallow-equal": "file:../is-shallow-equal", "@wordpress/priority-queue": "file:../priority-queue",