From 915c7e13a0cbdbe5dfb4c7d6988f51e638b907c2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= Date: Wed, 22 Jul 2020 14:00:13 +0200 Subject: [PATCH 1/7] Add renderControl prop to URLInput to make the usage of other types of controls possible (and easy) --- .../src/components/url-input/index.js | 239 +++++++++++------- 1 file changed, 142 insertions(+), 97 deletions(-) diff --git a/packages/block-editor/src/components/url-input/index.js b/packages/block-editor/src/components/url-input/index.js index b567bc343243a..c9b802d1e0251 100644 --- a/packages/block-editor/src/components/url-input/index.js +++ b/packages/block-editor/src/components/url-input/index.js @@ -27,6 +27,7 @@ import { isURL } from '@wordpress/url'; // as being considered from the input. const stopEventPropagation = ( event ) => event.stopPropagation(); +/* eslint-disable jsx-a11y/no-autofocus */ class URLInput extends Component { constructor( props ) { super( props ); @@ -52,6 +53,17 @@ class URLInput extends Component { suggestions: [], showSuggestions: false, selectedSuggestion: null, + + suggestionsListboxId: '', + suggestionOptionIdPrefix: '', + }; + } + + getDerivedStateFromProps( { instanceId, state } ) { + return { + ...state, + suggestionsListboxId: `block-editor-url-input-suggestions-${ instanceId }`, + suggestionOptionIdPrefix: `block-editor-url-input-suggestion-${ instanceId }`, }; } @@ -374,29 +386,96 @@ class URLInput extends Component { } render() { + const { className, isFullWidth } = this.props; + + return ( +
+ { this.renderControl() } + { this.renderSuggestions() } +
+ ); + } + + renderControl() { const { label, instanceId, - className, - isFullWidth, - __experimentalRenderSuggestions: renderSuggestions, placeholder = __( 'Paste URL or type to search' ), + renderControl, value = '', autoFocus = true, - __experimentalShowInitialSuggestions = false, } = this.props; const { + loading, showSuggestions, - suggestions, selectedSuggestion, - loading, + suggestionsListboxId, + suggestionOptionIdPrefix, } = this.state; const id = `url-input-control-${ instanceId }`; - const suggestionsListboxId = `block-editor-url-input-suggestions-${ instanceId }`; - const suggestionOptionIdPrefix = `block-editor-url-input-suggestion-${ instanceId }`; + const controlProps = { + id, + label, + }; + + const inputProps = { + value, + required: true, + autoFocus, + + type: 'text', + onChange: this.onChange, + onFocus: this.onFocus, + onInput: stopEventPropagation, + placeholder, + onKeyDown: this.onKeyDown, + role: 'combobox', + 'aria-label': __( 'URL' ), + 'aria-expanded': showSuggestions, + 'aria-autocomplete': 'list', + 'aria-owns': suggestionsListboxId, + 'aria-activedescendant': + selectedSuggestion !== null + ? `${ suggestionOptionIdPrefix }-${ selectedSuggestion }` + : undefined, + ref: this.inputRef, + }; + + if ( renderControl ) { + return renderControl( controlProps, inputProps, loading ); + } + + return ( + + + { loading && } + + ); + } + + renderSuggestions() { + const { + className, + __experimentalRenderSuggestions: renderSuggestions, + value = '', + __experimentalShowInitialSuggestions = false, + } = this.props; + + const { + showSuggestions, + suggestions, + selectedSuggestion, + suggestionsListboxId, + suggestionOptionIdPrefix, + loading, + } = this.state; const suggestionsListProps = { id: suggestionsListboxId, @@ -414,101 +493,67 @@ class URLInput extends Component { }; }; - /* eslint-disable jsx-a11y/no-autofocus */ - return ( - - - - { loading && } + if ( + isFunction( renderSuggestions ) && + showSuggestions && + !! suggestions.length + ) { + return renderSuggestions( { + suggestions, + selectedSuggestion, + suggestionsListProps, + buildSuggestionItemProps, + isLoading: loading, + handleSuggestionClick: this.handleOnClick, + isInitialSuggestions: + __experimentalShowInitialSuggestions && + ! ( value && value.length ), + } ); + } - { isFunction( renderSuggestions ) && - showSuggestions && - !! suggestions.length && - renderSuggestions( { - suggestions, - selectedSuggestion, - suggestionsListProps, - buildSuggestionItemProps, - isLoading: loading, - handleSuggestionClick: this.handleOnClick, - isInitialSuggestions: - __experimentalShowInitialSuggestions && - ! ( value && value.length ), - } ) } - - { ! isFunction( renderSuggestions ) && - showSuggestions && - !! suggestions.length && ( - -
+
+ { suggestions.map( ( suggestion, index ) => ( + - ) ) } -
- - ) } - - ); - /* eslint-enable jsx-a11y/no-autofocus */ + { suggestion.title } + + ) ) } +
+ + ); + } + return null; } } +/* eslint-enable jsx-a11y/no-autofocus */ /** * @see https://github.com/WordPress/gutenberg/blob/master/packages/block-editor/src/components/url-input/README.md From fcb983f7f84fdd4e31fd67148bd2d3b31fbebead Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= Date: Wed, 22 Jul 2020 14:02:55 +0200 Subject: [PATCH 2/7] Simplify notation --- packages/block-editor/src/components/url-input/index.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/block-editor/src/components/url-input/index.js b/packages/block-editor/src/components/url-input/index.js index c9b802d1e0251..03621c1bfcbdb 100644 --- a/packages/block-editor/src/components/url-input/index.js +++ b/packages/block-editor/src/components/url-input/index.js @@ -405,7 +405,7 @@ class URLInput extends Component { label, instanceId, placeholder = __( 'Paste URL or type to search' ), - renderControl, + __experimentalRenderControl: renderControl, value = '', autoFocus = true, } = this.props; @@ -418,10 +418,8 @@ class URLInput extends Component { suggestionOptionIdPrefix, } = this.state; - const id = `url-input-control-${ instanceId }`; - const controlProps = { - id, + id: `url-input-control-${ instanceId }`, label, }; From 9346e75cbcfeca6663aef496b3903ef7d47cfa70 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= Date: Wed, 22 Jul 2020 14:17:39 +0200 Subject: [PATCH 3/7] Dedupe getDerivedStateFromProps --- .../block-editor/src/components/url-input/index.js | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/packages/block-editor/src/components/url-input/index.js b/packages/block-editor/src/components/url-input/index.js index 03621c1bfcbdb..b0acd7d8bbae7 100644 --- a/packages/block-editor/src/components/url-input/index.js +++ b/packages/block-editor/src/components/url-input/index.js @@ -59,14 +59,6 @@ class URLInput extends Component { }; } - getDerivedStateFromProps( { instanceId, state } ) { - return { - ...state, - suggestionsListboxId: `block-editor-url-input-suggestions-${ instanceId }`, - suggestionOptionIdPrefix: `block-editor-url-input-suggestion-${ instanceId }`, - }; - } - componentDidUpdate( prevProps ) { const { showSuggestions, selectedSuggestion } = this.state; const { value } = this.props; @@ -363,6 +355,7 @@ class URLInput extends Component { static getDerivedStateFromProps( { value, + instanceId, disableSuggestions, __experimentalShowInitialSuggestions = false, }, @@ -382,6 +375,8 @@ class URLInput extends Component { return { showSuggestions: shouldShowSuggestions, + suggestionsListboxId: `block-editor-url-input-suggestions-${ instanceId }`, + suggestionOptionIdPrefix: `block-editor-url-input-suggestion-${ instanceId }`, }; } From 34aadf2c71f34b8c2b0da7e34eb3a65ad7d0ad67 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= Date: Wed, 22 Jul 2020 14:28:23 +0200 Subject: [PATCH 4/7] Move the className inside the rendered control --- .../src/components/url-input/index.js | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/packages/block-editor/src/components/url-input/index.js b/packages/block-editor/src/components/url-input/index.js index b0acd7d8bbae7..21ccf5aaf251c 100644 --- a/packages/block-editor/src/components/url-input/index.js +++ b/packages/block-editor/src/components/url-input/index.js @@ -381,23 +381,19 @@ class URLInput extends Component { } render() { - const { className, isFullWidth } = this.props; - return ( -
+ <> { this.renderControl() } { this.renderSuggestions() } -
+ ); } renderControl() { const { label, + className, + isFullWidth, instanceId, placeholder = __( 'Paste URL or type to search' ), __experimentalRenderControl: renderControl, @@ -416,6 +412,9 @@ class URLInput extends Component { const controlProps = { id: `url-input-control-${ instanceId }`, label, + className: classnames( 'block-editor-url-input', className, { + 'is-full-width': isFullWidth, + } ), }; const inputProps = { From f709f37acb30ce6f8a7ea2824221b44860369ba5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= Date: Wed, 22 Jul 2020 14:29:37 +0200 Subject: [PATCH 5/7] Update jest snapshot --- .../components/link-control/test/__snapshots__/index.js.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/link-control/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/link-control/test/__snapshots__/index.js.snap index ba12d07037b9d..80c4e67e5ec9e 100644 --- a/packages/block-editor/src/components/link-control/test/__snapshots__/index.js.snap +++ b/packages/block-editor/src/components/link-control/test/__snapshots__/index.js.snap @@ -1,3 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Basic rendering should render 1`] = `"
Currently selected link settings
"`; +exports[`Basic rendering should render 1`] = `"
Currently selected link settings
"`; From 2741937e3f30e1c654c4ac3773e6106e5d43f36a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= Date: Wed, 22 Jul 2020 15:00:17 +0200 Subject: [PATCH 6/7] Restore className to the input --- packages/block-editor/src/components/url-input/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/url-input/index.js b/packages/block-editor/src/components/url-input/index.js index 21ccf5aaf251c..5d1876960eeff 100644 --- a/packages/block-editor/src/components/url-input/index.js +++ b/packages/block-editor/src/components/url-input/index.js @@ -421,7 +421,7 @@ class URLInput extends Component { value, required: true, autoFocus, - + className: 'block-editor-url-input__input', type: 'text', onChange: this.onChange, onFocus: this.onFocus, From a09d005415a2835e837ed66c0ab7507cd550c7bf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= Date: Wed, 22 Jul 2020 15:00:45 +0200 Subject: [PATCH 7/7] Update snapshot --- .../components/link-control/test/__snapshots__/index.js.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/link-control/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/link-control/test/__snapshots__/index.js.snap index 80c4e67e5ec9e..b4f09d2a787f9 100644 --- a/packages/block-editor/src/components/link-control/test/__snapshots__/index.js.snap +++ b/packages/block-editor/src/components/link-control/test/__snapshots__/index.js.snap @@ -1,3 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Basic rendering should render 1`] = `"
Currently selected link settings
"`; +exports[`Basic rendering should render 1`] = `"
Currently selected link settings
"`;