Shortcode Block: fix layout margin override

WordPress · May 12, 2024 · 8180df0 · 8180df0
1 parent f73d44e
commit 8180df0
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 23 deletions.
diff --git 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 (
-		<div { ...useBlockProps( { className: 'components-placeholder' } ) }>
-			<label
-				htmlFor={ inputId }
-				className="components-placeholder__label"
-			>
-				<Icon icon={ shortcode } />
-				{ __( 'Shortcode' ) }
-			</label>
-			<PlainText
-				className="blocks-shortcode__textarea"
-				id={ inputId }
-				value={ attributes.text }
-				aria-label={ __( 'Shortcode text' ) }
-				placeholder={ __( 'Write shortcode here…' ) }
-				onChange={ ( text ) => 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
@@ -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 {