diff --git a/packages/block-library/src/shortcode/edit.js b/packages/block-library/src/shortcode/edit.js index aecebd115a983..b3063077fe308 100644 --- a/packages/block-library/src/shortcode/edit.js +++ b/packages/block-library/src/shortcode/edit.js @@ -4,29 +4,25 @@ import { __ } from '@wordpress/i18n'; import { PlainText, useBlockProps } from '@wordpress/block-editor'; import { useInstanceId } from '@wordpress/compose'; -import { Icon, shortcode } from '@wordpress/icons'; +import { Placeholder } from '@wordpress/components'; +import { shortcode } from '@wordpress/icons'; export default function ShortcodeEdit( { attributes, setAttributes } ) { const instanceId = useInstanceId( ShortcodeEdit ); const inputId = `blocks-shortcode-input-${ instanceId }`; return ( -
- - setAttributes( { text } ) } - /> + <div { ...useBlockProps() }> + <Placeholder icon={ shortcode } label={ __( 'Shortcode' ) }> + <PlainText + className="blocks-shortcode__textarea" + id={ inputId } + value={ attributes.text } + aria-label={ __( 'Shortcode text' ) } + placeholder={ __( 'Write shortcode here…' ) } + onChange={ ( text ) => setAttributes( { text } ) } + /> + </Placeholder> </div> ); } diff --git a/packages/block-library/src/shortcode/editor.scss b/packages/block-library/src/shortcode/editor.scss index 56586df8eefd2..6e7f482ad19f4 100644 --- a/packages/block-library/src/shortcode/editor.scss +++ b/packages/block-library/src/shortcode/editor.scss @@ -1,9 +1,3 @@ -[data-type="core/shortcode"] { - &.components-placeholder { - min-height: 0; - } -} - // The editing view for the Shortcode block is equivalent to block UI. // Therefore we increase specificity to avoid theme styles bleeding in. .blocks-shortcode__textarea {