Template Part: Improve name panel style.

WordPress · Jun 25, 2020 · 8e20287 · 8e20287
1 parent 2769fc7
commit 8e20287
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 11 deletions.
diff --git a/packages/block-library/src/template-part/edit/name-panel.js b/packages/block-library/src/template-part/edit/name-panel.js
@@ -20,16 +20,17 @@ export default function TemplatePartNamePanel( { postId, setAttributes } ) {
 		postId
 	);
 	return (
-		<TextControl
-			hideLabelFromVision
-			label={ __( 'Name' ) }
-			value={ title }
-			onChange={ ( value ) => {
-				setTitle( value );
-				const slug = cleanForSlug( value );
-				setSlug( slug );
-				setAttributes( { slug } );
-			} }
-		/>
+		<div className="wp-block-template-part__name-panel">
+			<TextControl
+				label={ __( 'Name' ) }
+				value={ title }
+				onChange={ ( value ) => {
+					setTitle( value );
+					const slug = cleanForSlug( value );
+					setSlug( slug );
+					setAttributes( { slug } );
+				} }
+			/>
+		</div>
 	);
 }
diff --git a/packages/block-library/src/template-part/editor.scss b/packages/block-library/src/template-part/editor.scss
@@ -58,3 +58,30 @@
 		font-weight: 500;
 	}
 }
+
+.wp-block-template-part__name-panel {
+	background-color: $white;
+	border-radius: $radius-block-ui;
+	box-shadow: 0 0 0 $border-width $dark-gray-primary;
+	outline: 1px solid transparent;
+	padding: ($grid-unit-10 - $border-width - $border-width) $grid-unit-15;
+
+	.components-base-control__field {
+		align-items: center;
+		display: flex;
+		margin-bottom: 0;
+	}
+
+	.components-base-control__label {
+		margin-bottom: 0;
+		margin-right: 8px;
+	}
+}
+
+.is-navigate-mode .is-selected .wp-block-template-part__name-panel {
+	box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color);
+
+	.is-dark-theme & {
+		box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color);
+	}
+}