Use ToolbarItem on TemplateParts

WordPress · Sep 10, 2020 · dfde4c7 · dfde4c7
1 parent 191e228
commit dfde4c7
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 13 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 { ToolbarItem } from '@wordpress/components';
 import {
 	BlockControls,
 	__experimentalBlock as Block,
@@ -67,7 +68,8 @@ export default function TemplatePartEdit( {
 		return (
 			<BlockWrapper>
 				<BlockControls>
-					<TemplatePartNamePanel
+					<ToolbarItem
+						as={ TemplatePartNamePanel }
 						postId={ postId }
 						setAttributes={ setAttributes }
 					/>

diff --git a/packages/block-library/src/template-part/edit/name-panel.js b/packages/block-library/src/template-part/edit/name-panel.js
@@ -1,12 +1,13 @@
 /**
  * WordPress dependencies
  */
+import { forwardRef } from '@wordpress/element';
 import { useEntityProp } from '@wordpress/core-data';
 import { TextControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { cleanForSlug } from '@wordpress/url';
 
-export default function TemplatePartNamePanel( { postId, setAttributes } ) {
+function TemplatePartNamePanel( { postId, setAttributes, ...props }, ref ) {
 	const [ title, setTitle ] = useEntityProp(
 		'postType',
 		'wp_template_part',
@@ -22,6 +23,8 @@ export default function TemplatePartNamePanel( { postId, setAttributes } ) {
 	return (
 		<div className="wp-block-template-part__name-panel">
 			<TextControl
+				{ ...props }
+				ref={ ref }
 				label={ __( 'Name' ) }
 				value={ title || slug }
 				onChange={ ( value ) => {
@@ -30,8 +33,15 @@ export default function TemplatePartNamePanel( { postId, setAttributes } ) {
 					setSlug( newSlug );
 					setAttributes( { slug: newSlug, postId } );
 				} }
-				onFocus={ ( event ) => event.target.select() }
+				onFocus={ ( event ) => {
+					if ( props.onFocus ) {
+						props.onFocus( event );
+					}
+					event.target.select();
+				} }
 			/>
 		</div>
 	);
 }
+
+export default forwardRef( TemplatePartNamePanel );
diff --git a/packages/components/src/text-control/index.js b/packages/components/src/text-control/index.js
@@ -2,22 +2,26 @@
  * WordPress dependencies
  */
 import { useInstanceId } from '@wordpress/compose';
+import { forwardRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import BaseControl from '../base-control';
 
-export default function TextControl( {
-	label,
-	hideLabelFromVision,
-	value,
-	help,
-	className,
-	onChange,
-	type = 'text',
-	...props
-} ) {
+function TextControl(
+	{
+		label,
+		hideLabelFromVision,
+		value,
+		help,
+		className,
+		onChange,
+		type = 'text',
+		...props
+	},
+	ref
+) {
 	const instanceId = useInstanceId( TextControl );
 	const id = `inspector-text-control-${ instanceId }`;
 	const onChangeValue = ( event ) => onChange( event.target.value );
@@ -37,8 +41,11 @@ export default function TextControl( {
 				value={ value }
 				onChange={ onChangeValue }
 				aria-describedby={ !! help ? id + '__help' : undefined }
+				ref={ ref }
 				{ ...props }
 			/>
 		</BaseControl>
 	);
 }
+
+export default forwardRef( TextControl );