Move template part title field to the block inspector.

WordPress · Feb 8, 2021 · 591f59c · 591f59c
1 parent 64bd23a
commit 591f59c
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 39 deletions.
diff --git a/packages/block-library/src/template-part/edit/index.js b/packages/block-library/src/template-part/edit/index.js
@@ -5,12 +5,14 @@ import { useSelect } from '@wordpress/data';
 import {
 	BlockControls,
 	InspectorAdvancedControls,
+	InspectorControls,
 	useBlockProps,
 	Warning,
 } from '@wordpress/block-editor';
 import {
 	SelectControl,
 	Dropdown,
+	PanelBody,
 	ToolbarGroup,
 	ToolbarButton,
 	Spinner,
@@ -80,6 +82,13 @@ export default function TemplatePartEdit( {
 
 	return (
 		<>
+			<InspectorControls>
+				<PanelBody>
+					{ isEntityAvailable && (
+						<TemplatePartNamePanel postId={ templatePartId } />
+					) }
+				</PanelBody>
+			</InspectorControls>
 			<InspectorAdvancedControls>
 				<SelectControl
 					label={ __( 'HTML element' ) }
@@ -108,7 +117,6 @@ export default function TemplatePartEdit( {
 				{ isEntityAvailable && (
 					<BlockControls>
 						<ToolbarGroup className="wp-block-template-part__block-control-group">
-							<TemplatePartNamePanel postId={ templatePartId } />
 							<Dropdown
 								className="wp-block-template-part__preview-dropdown-button"
 								contentClassName="wp-block-template-part__preview-dropdown-content"

diff --git a/packages/block-library/src/template-part/edit/name-panel.js b/packages/block-library/src/template-part/edit/name-panel.js
@@ -14,15 +14,13 @@ export default function TemplatePartNamePanel( { postId } ) {
 	);
 
 	return (
-		<div className="wp-block-template-part__name-panel">
-			<TextControl
-				label={ __( 'Title' ) }
-				value={ title }
-				onChange={ ( value ) => {
-					setTitle( value );
-				} }
-				onFocus={ ( event ) => event.target.select() }
-			/>
-		</div>
+		<TextControl
+			label={ __( 'Title' ) }
+			value={ title }
+			onChange={ ( value ) => {
+				setTitle( value );
+			} }
+			onFocus={ ( event ) => event.target.select() }
+		/>
 	);
 }
diff --git a/packages/block-library/src/template-part/editor.scss b/packages/block-library/src/template-part/editor.scss
@@ -62,34 +62,6 @@
 	}
 }
 
-.wp-block-template-part__block-control-group {
-	display: flex;
-
-	.wp-block-template-part__name-panel {
-		outline: 1px solid transparent;
-		padding: $grid-unit-10 0 $grid-unit-10 $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);
-	}
-}
-
 // Ensures a border is present when a child block is selected.
 .block-editor-block-list__block[data-type="core/template-part"] {
 	&.is-selected,