[URLInput] Customizable control rendering

[adamziel]

Description

URLInput makes it possible to customize how suggestions are rendered via __experimentalRenderSuggestions. Unfortunately, it assumes that the general structure of the component is more or less as follows:

<BaseControl>
    <input />
    <LoadingIndicator />
    <Popover><Suggestions /></Popover>
</BaseControl>

This works for some use cases, but doesn't serve the in-toolbar editing () very well, where the following structure would be preferred:

<>
    <div>
        <InputControl suffix={ <LoadingIndicator /> } />
    </div>
    <Popover><Suggestions /></Popover>
</>

(Note that aria-activedescendant allows this change in structure as long as valid aria-owns is present)

This PR closes this gap by adding an __experimentalRenderControl prop. Let's take a look at quick&dirty example of usage:

<URLInput
    renderControl={ ( controlProps, inputProps, isLoading ) => (
        <InputControl
            { ...controlProps }
            { ...inputProps } 
            prefix={
                <div className="toolbar-link-control__icon-wrapper">
                    <Icon icon={ linkIcon } />
                </div>
            }/>
    ) }
/>

And a result:

How has this been tested?

This PR is not supposed to change any behavior. To test it, simply walk through a few places where the URLInput is used (a full list available at #24089) and confirm they work the same before and after applying this PR.

Alternatives considered

At this point it seems like the control and suggestions could become two separate components. Alternatively, their respective logic could be extracted into hooks. The scope of such changes would be large and the usefulness very limited at this time so I decided to update the URLInput component as it is.

Types of changes

Non-breaking changes

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR.

[github-actions]

Size Change: +129 B (0%)

Total Size: 1.15 MB

Filename	Size	Change
build/block-editor/index.min.js	125 kB	+129 B (0%)

ℹ️ View Unchanged

Filename	Size	Change
build/a11y/index.min.js	1.14 kB	0 B
build/annotations/index.min.js	3.67 kB	0 B
build/api-fetch/index.min.js	3.43 kB	0 B
build/autop/index.min.js	2.82 kB	0 B
build/blob/index.min.js	620 B	0 B
build/block-directory/index.min.js	7.63 kB	0 B
build/block-directory/style-rtl.css	953 B	0 B
build/block-directory/style.css	952 B	0 B
build/block-editor/style-rtl.css	10.8 kB	0 B
build/block-editor/style.css	10.8 kB	0 B
build/block-library/editor-rtl.css	7.61 kB	0 B
build/block-library/editor.css	7.61 kB	0 B
build/block-library/index.min.js	132 kB	0 B
build/block-library/style-rtl.css	7.82 kB	0 B
build/block-library/style.css	7.83 kB	0 B
build/block-library/theme-rtl.css	728 B	0 B
build/block-library/theme.css	729 B	0 B
build/block-serialization-default-parser/index.min.js	1.88 kB	0 B
build/block-serialization-spec-parser/index.min.js	3.1 kB	0 B
build/blocks/index.min.js	48.3 kB	0 B
build/components/index.min.js	200 kB	0 B
build/components/style-rtl.css	15.7 kB	0 B
build/components/style.css	15.6 kB	0 B
build/compose/index.min.js	9.68 kB	0 B
build/core-data/index.min.js	11.5 kB	0 B
build/data-controls/index.min.js	1.29 kB	0 B
build/data/index.min.js	8.45 kB	0 B
build/date/index.min.js	5.38 kB	0 B
build/deprecated/index.min.js	772 B	0 B
build/dom-ready/index.min.js	568 B	0 B
build/dom/index.min.js	3.23 kB	0 B
build/edit-navigation/index.min.js	10.8 kB	0 B
build/edit-navigation/style-rtl.css	1.08 kB	0 B
build/edit-navigation/style.css	1.08 kB	0 B
build/edit-post/index.min.js	304 kB	0 B
build/edit-post/style-rtl.css	5.61 kB	0 B
build/edit-post/style.css	5.61 kB	0 B
build/edit-site/index.min.js	16.9 kB	0 B
build/edit-site/style-rtl.css	3.06 kB	0 B
build/edit-site/style.css	3.06 kB	0 B
build/edit-widgets/index.min.js	9.37 kB	0 B
build/edit-widgets/style-rtl.css	2.45 kB	0 B
build/edit-widgets/style.css	2.45 kB	0 B
build/editor/editor-styles-rtl.css	537 B	0 B
build/editor/editor-styles.css	539 B	0 B
build/editor/index.min.js	45.3 kB	0 B
build/editor/style-rtl.css	3.78 kB	0 B
build/editor/style.css	3.78 kB	0 B
build/element/index.min.js	4.65 kB	0 B
build/escape-html/index.min.js	733 B	0 B
build/format-library/index.min.js	7.72 kB	0 B
build/format-library/style-rtl.css	547 B	0 B
build/format-library/style.css	548 B	0 B
build/hooks/index.min.js	2.13 kB	0 B
build/html-entities/index.min.js	621 B	0 B
build/i18n/index.min.js	3.56 kB	0 B
build/is-shallow-equal/index.min.js	711 B	0 B
build/keyboard-shortcuts/index.min.js	2.51 kB	0 B
build/keycodes/index.min.js	1.94 kB	0 B
build/list-reusable-blocks/index.min.js	3.12 kB	0 B
build/list-reusable-blocks/style-rtl.css	476 B	0 B
build/list-reusable-blocks/style.css	476 B	0 B
build/media-utils/index.min.js	5.32 kB	0 B
build/notices/index.min.js	1.79 kB	0 B
build/nux/index.min.js	3.4 kB	0 B
build/nux/style-rtl.css	671 B	0 B
build/nux/style.css	668 B	0 B
build/plugins/index.min.js	2.56 kB	0 B
build/primitives/index.min.js	1.4 kB	0 B
build/priority-queue/index.min.js	789 B	0 B
build/redux-routine/index.min.js	2.85 kB	0 B
build/rich-text/index.min.js	13.9 kB	0 B
build/server-side-render/index.min.js	2.71 kB	0 B
build/shortcode/index.min.js	1.7 kB	0 B
build/token-list/index.min.js	1.27 kB	0 B
build/url/index.min.js	4.06 kB	0 B
build/viewport/index.min.js	1.85 kB	0 B
build/warning/index.min.js	1.14 kB	0 B
build/wordcount/index.min.js	1.17 kB	0 B

_{compressed-size-action}

[draganescu]

I tested locally and nothing seems to break. It also looks like the simplest path ahead right now.