Add Label Support for URLInput Component

[pstonier]

Description

Added the ability to set a label for the URLInput field to follow the same structure as the TextControl.

How has this been tested?

Locally in Chrome.

Screenshots

Types of changes

• Replaces the container div of the component with a BaseControl component to leverage the label support.
• Updates HTML Structure to conditionally load a label if defined.

Checklist:

• [ X ] My code is tested.
• [ X ] My code follows the WordPress code style.
• [ X ] My code follows the accessibility standards.
• [X ] My code has proper inline documentation.
• [ X] I've included developer documentation if appropriate.

[jorgefilipecosta]

Hi @pstonier, thank you for your contribution.
I used the following test component to verify differences between components with labels and components without label and to compare against the result in master:

	const [ url, setUrl ] = useState( '' );
	return (
		<>
			<URLInput
				value={ url }
				onChange={ setUrl }
			/>
			<URLInput
				label="With label"
				value={ url }
				onChange={ setUrl }
			/>
		</>
	);

Things worked as expected, and the only difference between the result in this branch and the result in the master is that in this branch the label appears.

I noticed that when this component is used in the inspector without additional styles changes, the dimensions are wrong, and the result is unexpected, but that is not a regression from these changes.

[pstonier]

I agree with your suggestions and have submitted the changes.

[talldan]

It looks like there's an issue with the styles in the link popover:

There's some extra bottom margin added by BaseControl.

[pstonier]

Thanks for catching that. The most recent commit should fix it.

[pablinos]

This might be necessary, but it didn't fix the styling problem for me. Adding the following rule, removed the extra space below the input:

.block-editor-url-input > .components-base-control__field {
	margin-bottom: 0;
}

@talldan is this the margin that you were referring to?

[talldan]

Hey @pablinos. Yep, that looks like it.

[pento]

I pushed a couple of commits to finish this PR off, and tested as a replacement for the hackery in Automattic/jetpack#13745.

@pstonier: Are you able to rebase this PR? GitHub was acting up on me when I tried to push a rebase, it should hopefully work for you.

[pento]

I'm liking where this is at. Thank you for your persistence in getting this across the line, @pstonier!