Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[URLInput] Customizable control rendering #24115

Merged
merged 7 commits into from
Jul 22, 2020
Merged

[URLInput] Customizable control rendering #24115

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
915c7e1
Add renderControl prop to URLInput to make the usage of other types o…
adamziel Jul 22, 2020
fcb983f
Simplify notation
adamziel Jul 22, 2020
9346e75
Dedupe getDerivedStateFromProps
adamziel Jul 22, 2020
34aadf2
Move the className inside the rendered control
adamziel Jul 22, 2020
f709f37
Update jest snapshot
adamziel Jul 22, 2020
2741937
Restore className to the input
adamziel Jul 22, 2020
a09d005
Update snapshot
adamziel Jul 22, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/link-control/test/__snapshots__/index.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Basic rendering should render 1`] = `"<div tabindex=\\"-1\\" class=\\"block-editor-link-control\\"><div class=\\"block-editor-link-control__search-input-wrapper\\"><form><div class=\\"components-base-control block-editor-url-input block-editor-link-control__search-input\\"><div class=\\"components-base-control__field\\"><input class=\\"block-editor-url-input__input\\" type=\\"text\\" aria-label=\\"URL\\" required=\\"\\" placeholder=\\"Search or type url\\" role=\\"combobox\\" aria-expanded=\\"false\\" aria-autocomplete=\\"list\\" aria-owns=\\"block-editor-url-input-suggestions-0\\" value=\\"\\"></div></div><div class=\\"block-editor-link-control__search-actions\\"><button type=\\"submit\\" class=\\"components-button block-editor-link-control__search-submit has-icon\\" aria-label=\\"Submit\\"><svg width=\\"24\\" height=\\"24\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"-2 -2 24 24\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M16 4h2v9H7v3l-5-4 5-4v3h9V4z\\"></path></svg></button></div></form></div><fieldset class=\\"block-editor-link-control__settings\\"><legend class=\\"components-visually-hidden\\">Currently selected link settings</legend><div class=\\"components-base-control components-toggle-control block-editor-link-control__setting\\"><div class=\\"components-base-control__field\\"><span class=\\"components-form-toggle\\"><input class=\\"components-form-toggle__input\\" id=\\"inspector-toggle-control-0\\" type=\\"checkbox\\"><span class=\\"components-form-toggle__track\\"></span><span class=\\"components-form-toggle__thumb\\"></span></span><label for=\\"inspector-toggle-control-0\\" class=\\"components-toggle-control__label\\">Open in new tab</label></div></div></fieldset></div>"`;
exports[`Basic rendering should render 1`] = `"<div tabindex=\\"-1\\" class=\\"block-editor-link-control\\"><div class=\\"block-editor-link-control__search-input-wrapper\\"><form><div class=\\"components-base-control block-editor-url-input block-editor-link-control__search-input\\"><div class=\\"components-base-control__field\\"><input required=\\"\\" class=\\"block-editor-url-input__input\\" type=\\"text\\" placeholder=\\"Search or type url\\" role=\\"combobox\\" aria-label=\\"URL\\" aria-expanded=\\"false\\" aria-autocomplete=\\"list\\" aria-owns=\\"block-editor-url-input-suggestions-0\\" value=\\"\\"></div></div><div class=\\"block-editor-link-control__search-actions\\"><button type=\\"submit\\" class=\\"components-button block-editor-link-control__search-submit has-icon\\" aria-label=\\"Submit\\"><svg width=\\"24\\" height=\\"24\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"-2 -2 24 24\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M16 4h2v9H7v3l-5-4 5-4v3h9V4z\\"></path></svg></button></div></form></div><fieldset class=\\"block-editor-link-control__settings\\"><legend class=\\"components-visually-hidden\\">Currently selected link settings</legend><div class=\\"components-base-control components-toggle-control block-editor-link-control__setting\\"><div class=\\"components-base-control__field\\"><span class=\\"components-form-toggle\\"><input class=\\"components-form-toggle__input\\" id=\\"inspector-toggle-control-0\\" type=\\"checkbox\\"><span class=\\"components-form-toggle__track\\"></span><span class=\\"components-form-toggle__thumb\\"></span></span><label for=\\"inspector-toggle-control-0\\" class=\\"components-toggle-control__label\\">Open in new tab</label></div></div></fieldset></div>"`;
229 changes: 133 additions & 96 deletions packages/block-editor/src/components/url-input/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 );
Expand All @@ -52,6 +53,9 @@ class URLInput extends Component {
suggestions: [],
showSuggestions: false,
selectedSuggestion: null,

suggestionsListboxId: '',
suggestionOptionIdPrefix: '',
};
}

Expand Down Expand Up @@ -351,6 +355,7 @@ class URLInput extends Component {
static getDerivedStateFromProps(
{
value,
instanceId,
disableSuggestions,
__experimentalShowInitialSuggestions = false,
},
Expand All @@ -370,34 +375,100 @@ class URLInput extends Component {

return {
showSuggestions: shouldShowSuggestions,
suggestionsListboxId: `block-editor-url-input-suggestions-${ instanceId }`,
suggestionOptionIdPrefix: `block-editor-url-input-suggestion-${ instanceId }`,
};
}

render() {
return (
<>
{ this.renderControl() }
{ this.renderSuggestions() }
</>
);
}

renderControl() {
const {
label,
instanceId,
className,
isFullWidth,
__experimentalRenderSuggestions: renderSuggestions,
instanceId,
placeholder = __( 'Paste URL or type to search' ),
__experimentalRenderControl: renderControl,
value = '',
autoFocus = true,
} = this.props;

const {
loading,
showSuggestions,
selectedSuggestion,
suggestionsListboxId,
suggestionOptionIdPrefix,
} = this.state;

const controlProps = {
id: `url-input-control-${ instanceId }`,
label,
className: classnames( 'block-editor-url-input', className, {
'is-full-width': isFullWidth,
} ),
};

const inputProps = {
value,
required: true,
autoFocus,
className: 'block-editor-url-input__input',
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 (
<BaseControl { ...controlProps }>
<input { ...inputProps } />
{ loading && <Spinner /> }
</BaseControl>
);
}

renderSuggestions() {
const {
className,
__experimentalRenderSuggestions: renderSuggestions,
value = '',
__experimentalShowInitialSuggestions = false,
} = this.props;

const {
showSuggestions,
suggestions,
selectedSuggestion,
suggestionsListboxId,
suggestionOptionIdPrefix,
loading,
} = 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 suggestionsListProps = {
id: suggestionsListboxId,
ref: this.autocompleteRef,
Expand All @@ -414,101 +485,67 @@ class URLInput extends Component {
};
};

/* eslint-disable jsx-a11y/no-autofocus */
return (
<BaseControl
label={ label }
id={ id }
className={ classnames( 'block-editor-url-input', className, {
'is-full-width': isFullWidth,
} ) }
>
<input
className="block-editor-url-input__input"
autoFocus={ autoFocus }
type="text"
aria-label={ __( 'URL' ) }
required
value={ value }
onChange={ this.onChange }
onFocus={ this.onFocus }
onInput={ stopEventPropagation }
placeholder={ placeholder }
onKeyDown={ this.onKeyDown }
role="combobox"
aria-expanded={ showSuggestions }
aria-autocomplete="list"
aria-owns={ suggestionsListboxId }
aria-activedescendant={
selectedSuggestion !== null
? `${ suggestionOptionIdPrefix }-${ selectedSuggestion }`
: undefined
}
ref={ this.inputRef }
/>

{ loading && <Spinner /> }
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 && (
<Popover
position="bottom"
noArrow
focusOnMount={ false }
>
<div
{ ...suggestionsListProps }
if (
! isFunction( renderSuggestions ) &&
showSuggestions &&
!! suggestions.length
) {
return (
<Popover position="bottom" noArrow focusOnMount={ false }>
<div
{ ...suggestionsListProps }
className={ classnames(
'block-editor-url-input__suggestions',
`${ className }__suggestions`
) }
>
{ suggestions.map( ( suggestion, index ) => (
<Button
{ ...buildSuggestionItemProps(
suggestion,
index
) }
key={ suggestion.id }
className={ classnames(
'block-editor-url-input__suggestions',
`${ className }__suggestions`
'block-editor-url-input__suggestion',
{
'is-selected':
index === selectedSuggestion,
}
) }
onClick={ () =>
this.handleOnClick( suggestion )
}
>
{ suggestions.map( ( suggestion, index ) => (
<Button
{ ...buildSuggestionItemProps(
suggestion,
index
) }
key={ suggestion.id }
className={ classnames(
'block-editor-url-input__suggestion',
{
'is-selected':
index ===
selectedSuggestion,
}
) }
onClick={ () =>
this.handleOnClick( suggestion )
}
>
{ suggestion.title }
</Button>
) ) }
</div>
</Popover>
) }
</BaseControl>
);
/* eslint-enable jsx-a11y/no-autofocus */
{ suggestion.title }
</Button>
) ) }
</div>
</Popover>
);
}
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
Expand Down