Move template part title field to the block inspector. (#28835)

Co-authored-by: Riad Benguella <benguella@gmail.com>
WordPress · Feb 10, 2021 · c54caa2 · c54caa2
1 parent bd651b2
commit c54caa2
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 69 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={ __( 'Template 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,

diff --git a/packages/e2e-tests/specs/experiments/multi-entity-editing.test.js b/packages/e2e-tests/specs/experiments/multi-entity-editing.test.js
@@ -8,6 +8,8 @@ import {
 	trashAllPosts,
 	activateTheme,
 	canvas,
+	openDocumentSettingsSidebar,
+	pressKeyWithModifier,
 } from '@wordpress/e2e-test-utils';
 
 /**
@@ -37,7 +39,17 @@ const createTemplatePart = async (
 			? '.wp-block-template-part .wp-block-template-part .block-editor-block-list__layout'
 			: '.wp-block-template-part .block-editor-block-list__layout'
 	);
-	await page.focus( '.wp-block-template-part__name-panel input' );
+	await openDocumentSettingsSidebar();
+
+	const nameInputSelector =
+		'.block-editor-block-inspector .components-text-control__input';
+	const nameInput = await page.waitForSelector( nameInputSelector );
+	await nameInput.click();
+
+	// Select all of the text in the title field.
+	await pressKeyWithModifier( 'primary', 'a' );
+
+	// Give the reusable block a title
 	await page.keyboard.type( templatePartName );
 };
 

diff --git a/packages/e2e-tests/specs/experiments/multi-entity-saving.test.js b/packages/e2e-tests/specs/experiments/multi-entity-saving.test.js
@@ -112,10 +112,6 @@ describe( 'Multi-entity save flow', () => {
 
 			// Should trigger multi-entity save button once template part edited.
 			await assertMultiSaveEnabled();
-			// TODO: Remove when toolbar supports text fields
-			expect( console ).toHaveWarnedWith(
-				'Using custom components as toolbar controls is deprecated. Please use ToolbarItem or ToolbarButton components instead. See: https://developer.wordpress.org/block-editor/components/toolbar-button/#inside-blockcontrols'
-			);
 
 			// Should only have save panel a11y button active after child entities edited.
 			await assertExistance( publishA11ySelector, false );

diff --git a/packages/e2e-tests/specs/experiments/template-part.test.js b/packages/e2e-tests/specs/experiments/template-part.test.js
@@ -112,11 +112,6 @@ describe( 'Template Part', () => {
 			// Detach blocks from template part using ellipsis menu.
 			await triggerEllipsisMenuItem( 'Detach blocks from template part' );
 
-			// TODO: Remove when toolbar supports text fields
-			expect( console ).toHaveWarnedWith(
-				'Using custom components as toolbar controls is deprecated. Please use ToolbarItem or ToolbarButton components instead. See: https://developer.wordpress.org/block-editor/components/toolbar-button/#inside-blockcontrols'
-			);
-
 			// Verify there is one less template part on the page.
 			const finalTemplateParts = await canvas().$$(
 				'.wp-block-template-part'
@@ -150,11 +145,6 @@ describe( 'Template Part', () => {
 			// Verify new template part is created with expected content.
 			await assertParagraphInTemplatePart( 'Some block...' );
 
-			// TODO: Remove when toolbar supports text fields
-			expect( console ).toHaveWarnedWith(
-				'Using custom components as toolbar controls is deprecated. Please use ToolbarItem or ToolbarButton components instead. See: https://developer.wordpress.org/block-editor/components/toolbar-button/#inside-blockcontrols'
-			);
-
 			// Verify there is 1 more template part on the page than previously.
 			const finalTemplateParts = await canvas().$$(
 				'.wp-block-template-part'
@@ -194,11 +184,6 @@ describe( 'Template Part', () => {
 			await assertParagraphInTemplatePart( 'Some block #1' );
 			await assertParagraphInTemplatePart( 'Some block #2' );
 
-			// TODO: Remove when toolbar supports text fields
-			expect( console ).toHaveWarnedWith(
-				'Using custom components as toolbar controls is deprecated. Please use ToolbarItem or ToolbarButton components instead. See: https://developer.wordpress.org/block-editor/components/toolbar-button/#inside-blockcontrols'
-			);
-
 			// Verify there is 1 more template part on the page than previously.
 			const finalTemplateParts = await canvas().$$(
 				'.wp-block-template-part'
@@ -247,11 +232,6 @@ describe( 'Template Part', () => {
 			await page.click( savePostSelector );
 			await page.click( entitiesSaveSelector );
 
-			// TODO: Remove when toolbar supports text fields
-			expect( console ).toHaveWarnedWith(
-				'Using custom components as toolbar controls is deprecated. Please use ToolbarItem or ToolbarButton components instead. See: https://developer.wordpress.org/block-editor/components/toolbar-button/#inside-blockcontrols'
-			);
-
 			await createNewPost();
 			// Try to insert the template part we created.
 			await insertBlock( 'Template Part' );
@@ -268,11 +248,6 @@ describe( 'Template Part', () => {
 				testContentSelector
 			);
 			expect( templatePartContent ).toBeTruthy();
-
-			// TODO: Remove when toolbar supports text fields
-			expect( console ).toHaveWarnedWith(
-				'Using custom components as toolbar controls is deprecated. Please use ToolbarItem or ToolbarButton components instead. See: https://developer.wordpress.org/block-editor/components/toolbar-button/#inside-blockcontrols'
-			);
 		} );
 	} );
 } );