MediaPlaceholder: Use InputControl in URL popover (WordPress#65656)

* MediaPlaceholder: Use InputControl in URL popover * Tweak width in mobile Co-authored-by: mirka <[email protected]> Co-authored-by: ciampo <[email protected]>
MaxMood96 · Sep 25, 2024 · 893d684 · 893d684
1 parent 0a09968
commit 893d684
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 36 deletions.
diff --git a/packages/block-editor/src/components/media-placeholder/content.scss b/packages/block-editor/src/components/media-placeholder/content.scss
@@ -1,27 +1,11 @@
 .block-editor-media-placeholder__url-input-form {
-	display: flex;
-
-	// Selector requires a lot of specificity to override base styles.
-	input[type="url"].block-editor-media-placeholder__url-input-field {
-		width: 100%;
-		min-width: 200px;
-
-		@include break-small() {
-			width: 300px;
-		}
-
-		flex-grow: 1;
-		border: none;
-		border-radius: 0;
-		margin: 2px;
+	min-width: 260px;
 
+	@include break-small() {
+		width: 300px;
 	}
 }
 
-.block-editor-media-placeholder__url-input-submit-button {
-	flex-shrink: 1;
-}
-
 .block-editor-media-placeholder__cancel-button.is-link {
 	margin: 1em;
 	display: block;

diff --git a/packages/block-editor/src/components/media-placeholder/index.js b/packages/block-editor/src/components/media-placeholder/index.js
@@ -11,6 +11,8 @@ import {
 	FormFileUpload,
 	Placeholder,
 	DropZone,
+	__experimentalInputControl as InputControl,
+	__experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,
 	withFilters,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
@@ -42,21 +44,23 @@ const InsertFromURLPopover = ( {
 			className="block-editor-media-placeholder__url-input-form"
 			onSubmit={ onSubmit }
 		>
-			<input
-				className="block-editor-media-placeholder__url-input-field"
-				type="text"
-				aria-label={ __( 'URL' ) }
+			<InputControl
+				__next40pxDefaultSize
+				label={ __( 'URL' ) }
+				hideLabelFromVision
 				placeholder={ __( 'Paste or type URL' ) }
 				onChange={ onChange }
 				value={ src }
-			/>
-			<Button
-				// TODO: Switch to `true` (40px size) if possible
-				__next40pxDefaultSize={ false }
-				className="block-editor-media-placeholder__url-input-submit-button"
-				icon={ keyboardReturn }
-				label={ __( 'Apply' ) }
-				type="submit"
+				suffix={
+					<InputControlSuffixWrapper variant="control">
+						<Button
+							size="small"
+							icon={ keyboardReturn }
+							label={ __( 'Apply' ) }
+							type="submit"
+						/>
+					</InputControlSuffixWrapper>
+				}
 			/>
 		</form>
 	</URLPopover>
@@ -166,10 +170,6 @@ export function MediaPlaceholder( {
 		);
 	};
 
-	const onChangeSrc = ( event ) => {
-		setSrc( event.target.value );
-	};
-
 	const onFilesUpload = ( files ) => {
 		if (
 			! handleUpload ||
@@ -405,7 +405,7 @@ export function MediaPlaceholder( {
 			onSelectURL && (
 				<URLSelectionUI
 					src={ src }
-					onChangeSrc={ onChangeSrc }
+					onChangeSrc={ setSrc }
 					onSelectURL={ onSelectURL }
 				/>
 			)