Embed Block: Replace native input element with InputControl component (…

…WordPress#64668) * Embed Block: Replace native input element with InputControl component * Don't use hardcoded label Co-authored-by: t-hamano <[email protected]> Co-authored-by: Mamaduka <[email protected]> Co-authored-by: jasmussen <[email protected]>
bph · Aug 31, 2024 · b446304 · b446304
1 parent c10cf40
commit b446304
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 5 deletions.
diff --git a/packages/block-library/src/embed/edit.js b/packages/block-library/src/embed/edit.js
@@ -226,7 +226,7 @@ const EmbedEdit = ( props ) => {
 					} }
 					value={ url }
 					cannotEmbed={ cannotEmbed }
-					onChange={ ( event ) => setURL( event.target.value ) }
+					onChange={ ( value ) => setURL( value ) }
 					fallback={ () => fallback( url, onReplace ) }
 					tryAgain={ () => {
 						invalidateResolution( 'getEmbedPreview', [ url ] );

diff --git a/packages/block-library/src/embed/editor.scss b/packages/block-library/src/embed/editor.scss
@@ -12,6 +12,10 @@
 		justify-content: center;
 	}
 
+	.wp-block-embed__placeholder-input {
+		flex: 1 1 auto;
+	}
+
 	// Stops long URLs from breaking out of the no preview available screen
 	.components-placeholder__error {
 		word-break: break-word;

diff --git a/packages/block-library/src/embed/embed-placeholder.js b/packages/block-library/src/embed/embed-placeholder.js
@@ -8,6 +8,7 @@ import {
 	ExternalLink,
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
+	__experimentalInputControl as InputControl,
 } from '@wordpress/components';
 import { BlockIcon } from '@wordpress/block-editor';
 
@@ -31,15 +32,17 @@ const EmbedPlaceholder = ( {
 			) }
 		>
 			<form onSubmit={ onSubmit }>
-				<input
+				<InputControl
+					__next40pxDefaultSize
 					type="url"
 					value={ value || '' }
-					className="components-placeholder__input"
-					aria-label={ label }
+					className="wp-block-embed__placeholder-input"
+					label={ label }
+					hideLabelFromVision
 					placeholder={ __( 'Enter URL to embed here…' ) }
 					onChange={ onChange }
 				/>
-				<Button variant="primary" type="submit">
+				<Button __next40pxDefaultSize variant="primary" type="submit">
 					{ _x( 'Embed', 'button label' ) }
 				</Button>
 			</form>