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 <wildworks@git.wordpress.org> Co-authored-by: Mamaduka <mamaduka@git.wordpress.org> Co-authored-by: jasmussen <joen@git.wordpress.org>
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>