Template Part: Move "title" to block toolbar (#24450)

* Move block title to block toolbar * Update createTemplatePart input selector
WordPress · Aug 11, 2020 · 8e7844b · 8e7844b
1 parent 7b29541
commit 8e7844b
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 15 deletions.
diff --git a/packages/block-library/src/template-part/edit/index.js b/packages/block-library/src/template-part/edit/index.js
@@ -3,6 +3,7 @@
  */
 import { useRef, useEffect } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
+import { BlockControls } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -16,7 +17,6 @@ export default function TemplatePartEdit( {
 	attributes: { postId: _postId, slug, theme },
 	setAttributes,
 	clientId,
-	isSelected,
 } ) {
 	const initialPostId = useRef( _postId );
 	const initialSlug = useRef( slug );
@@ -29,18 +29,11 @@ export default function TemplatePartEdit( {
 	// but wait until the third inner blocks change,
 	// because the first 2 are just the template part
 	// content loading.
-	const { innerBlocks, hasSelectedInnerBlock } = useSelect(
+	const { innerBlocks } = useSelect(
 		( select ) => {
-			const {
-				getBlocks,
-				hasSelectedInnerBlock: getHasSelectedInnerBlock,
-			} = select( 'core/block-editor' );
+			const { getBlocks } = select( 'core/block-editor' );
 			return {
 				innerBlocks: getBlocks( clientId ),
-				hasSelectedInnerBlock: getHasSelectedInnerBlock(
-					clientId,
-					true
-				),
 			};
 		},
 		[ clientId ]
@@ -68,12 +61,12 @@ export default function TemplatePartEdit( {
 		// Part of a template file, post ID already resolved.
 		return (
 			<>
-				{ ( isSelected || hasSelectedInnerBlock ) && (
+				<BlockControls>
 					<TemplatePartNamePanel
 						postId={ postId }
 						setAttributes={ setAttributes }
 					/>
-				) }
+				</BlockControls>
 				<TemplatePartInnerBlocks
 					postId={ postId }
 					hasInnerBlocks={ innerBlocks.length > 0 }

diff --git a/packages/block-library/src/template-part/editor.scss b/packages/block-library/src/template-part/editor.scss
@@ -61,10 +61,9 @@
 
 .wp-block-template-part__name-panel {
 	background-color: $white;
-	border-radius: $radius-block-ui;
 	box-shadow: 0 0 0 $border-width $gray-900;
 	outline: 1px solid transparent;
-	padding: ($grid-unit-10 - $border-width - $border-width) $grid-unit-15;
+	padding: $grid-unit-10 $grid-unit-15;
 
 	.components-base-control__field {
 		align-items: center;

diff --git a/packages/e2e-tests/specs/experiments/multi-entity-editing.test.js b/packages/e2e-tests/specs/experiments/multi-entity-editing.test.js
@@ -62,7 +62,7 @@ const createTemplatePart = async (
 			? '.wp-block[data-type="core/template-part"] .wp-block[data-type="core/template-part"] .block-editor-inner-blocks'
 			: '.wp-block[data-type="core/template-part"] .block-editor-inner-blocks'
 	);
-	await page.keyboard.press( 'Tab' );
+	await page.focus( '.wp-block-template-part__name-panel input' );
 	await page.keyboard.type( templatePartName );
 };