URLInput: Replace input with InputControl

[rahulharpal1603]

What?

Fixes #64709

Why?

The URLInput component uses an input element directly, instead of a standard component like InputControl or TextControl. This will cause styles to drift from the rest of the app, since it won't receive style updates with the rest of the componentry.

Also, the LinkControl and Social-Links inputs were inconsistent, as mentioned in the issue. This is now fixed.

How?

I imported _experimentalInputControl and replaced <input> with <InputControl> also, I added the ability to pass suffix in the case of LinkControl URL Input.

LinkControl and SocialLinks are now consistent, the button outside of SocialLinks is now inside the input field:

Before:

After:

Screenshots or screencast

This PR is not ready to merge yet because of the above issues; when we try to autofill, the blue highlight is not covering the input box fully; this is due to the width not being 100%; I am not able to figure out how to fix this.

Update:

Now the above issue is resolved, it was due to CSS specificity conflicts and I have fixed that. Also the old CSS of the input tag is now cleaned up

After Fix:

Here, the highlight is not covered fully because of the suffix button being there. This one is intended behaviour:

In this, the highlight covers it fully:

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: rahulharpal1603 <[email protected]>
Co-authored-by: ciampo <[email protected]>
Co-authored-by: mirka <[email protected]>
Co-authored-by: tyxla <[email protected]>
Co-authored-by: jasmussen <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[github-actions]

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @rahulharpal1603! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

[ciampo]

This PR is not ready to merge yet because of the above issues; when we try to autofill, the blue highlight is not covering the input box fully; this is due to the width not being 100%; I am not able to figure out how to fix this.

That's just a consequence of rendering a suffix in InputControl, which causes the underlying <input /> HTML element to be a bit narrower. I believe that the light blue background that you show in your screenshot is a browser style to highlight the input field when suggesting auto-complete values. Not sure we can do much about this, @mirka ?

[mirka]

Thanks for contributing!

There is also a usage in the Social Icons block that needs to be updated to use the suffix (see discussion in original issue).

[mirka]

Not sure we can do much about this

Yes, that is expected behavior. Actually I'm curious when/how that autocomplete is enabled @rahulharpal1603. I've never seen it on these URL inputs, and I don't think a user would ever want it? 🤔 Maybe it's something that should be explicitly disabled.

[rahulharpal1603]

Thanks for contributing!

There is also a usage in the Social Icons block that needs to be updated to use the suffix (see discussion in original issue).

But in that, the button is outside the input border and the suffix puts the button inside the border.

[mirka]

But in that, the button is outside the input border and the suffix puts the button inside the border.

Exactly! And we agreed that the button placement should be the same as in LinkControl #64709 (comment)

[rahulharpal1603]

But in that, the button is outside the input border and the suffix puts the button inside the border.

Exactly! And we agreed that the button placement should be the same as in LinkControl #64709 (comment)

Yes, I would make them consistent.

[mirka]

Can we also do some CSS cleanup for the block-editor-url-input__input class? It looks like we won't be needing most (or all?) of the CSS for this, now that it's styled properly with the InputControl component.

[rahulharpal1603]

Can we also do some CSS cleanup for the block-editor-url-input__input class? It looks like we won't be needing most (or all?) of the CSS for this, now that it's styled properly with the InputControl component.

Sure

[rahulharpal1603]

@mirka, all of the requirements you mentioned above have been met. I have tested the final version. Please review the changes.

Also, kindly go through the updated PR description. I have attached new screenshots.

[mirka]

Thanks for all the follow-ups, I really appreciate how much we got to clean up here!

[rahulharpal1603]

Thanks for all the follow-ups, I really appreciate how much we got to clean up here!

Thanks a lot! Your code reviews were really insightful.

[rahulharpal1603]

Thanks for all the follow-ups, I really appreciate how much we got to clean up here!

Also, I am curious about one more thing. When would the changes made by this code reflect on the wordpress website?

[mirka]

If your site is using the Gutenberg beta plugin (released every two weeks), then it'll be in the next 19.3 release. If not, you'll see it in the next major WordPress release, which is 6.7.

[ciampo]

I just noticed this props here which looks like a typo — should we remove it? Was it meant to be something like `{...props} ? @mirka

[rahulharpal1603]

Yes, I think that this is a typo; "props" was never there in the first place.

[mirka]

Cleanup in #65650