Fixed background grey of the Shortcode block placeholder screen (Word…

…Press#14719)

* Changed the background grey of the shortcode block to match all the other placeholder setup screens on other blocks. Fixes WordPress#14718

* Restyled shortcode block to match placeholder block styling.

* Rebased and force pushed to catch up with changes made to this file since @gziolo made some changes.

packages/block-library/src/shortcode/edit.js

@@ -10,8 +10,8 @@ const ShortcodeEdit = ( { attributes, setAttributes, instanceId } ) => {
 	const inputId = `blocks-shortcode-input-${ instanceId }`;
 
 	return (
-		<div className="wp-block-shortcode">
-			<label htmlFor={ inputId }>
+		<div className="wp-block-shortcode  components-placeholder">
+			<label htmlFor={ inputId } className="components-placeholder__label">
 				<Dashicon icon="shortcode" />
 				{ __( 'Shortcode' ) }
 			</label>

packages/block-library/src/shortcode/editor.scss

@@ -1,22 +1,24 @@
 .wp-block-shortcode {
 	display: flex;
-	flex-direction: row;
+	flex-direction: column;
 	padding: $block-padding;
-	background-color: $light-gray-100;
+	background-color: $dark-opacity-light-200;
 	font-size: $default-font-size;
 	font-family: $default-font;
 
 	label {
 		display: flex;
 		align-items: center;
-		margin-right: $grid-size;
 		white-space: nowrap;
 		font-weight: 600;
 		flex-shrink: 0;
 	}
 
 	.block-editor-plain-text {
 		flex-grow: 1;
+		line-height: 1;
+		max-height: 30px;
+		width: 80%;
 	}
 
 	.dashicon {