Skip to content

Commit

Permalink
MediaPlaceholder: Use InputControl in URL popover
Browse files Browse the repository at this point in the history
  • Loading branch information
mirka committed Sep 25, 2024
1 parent 69e00bd commit e4cf0e1
Show file tree
Hide file tree
Showing 2 changed files with 20 additions and 36 deletions.
Original file line number Diff line number Diff line change
@@ -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: 200px;

@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;
Expand Down
34 changes: 17 additions & 17 deletions packages/block-editor/src/components/media-placeholder/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ import {
FormFileUpload,
Placeholder,
DropZone,
__experimentalInputControl as InputControl,
__experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,
withFilters,
} from '@wordpress/components';
import { __ } from '@wordpress/i18n';
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -167,10 +171,6 @@ export function MediaPlaceholder( {
);
};

const onChangeSrc = ( event ) => {
setSrc( event.target.value );
};

const onFilesUpload = ( files ) => {
if (
! handleUpload ||
Expand Down Expand Up @@ -407,7 +407,7 @@ export function MediaPlaceholder( {
onSelectURL && (
<URLSelectionUI
src={ src }
onChangeSrc={ onChangeSrc }
onChangeSrc={ setSrc }
onSelectURL={ onSelectURL }
/>
)
Expand Down

0 comments on commit e4cf0e1

Please sign in to comment.