diff --git a/packages/block-editor/src/components/media-placeholder/content.scss b/packages/block-editor/src/components/media-placeholder/content.scss
index eeb2928df80ba..2f7bb2e673f12 100644
--- 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
index 9482c9f418174..f16e431722723 100644
--- 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 }
>
-
-