BlockTitle: refactor withSelect to useSelect

docs/contributors/coding-guidelines.md

@@ -452,11 +452,11 @@ Documenting a function component should be treated the same as any other functio
  * @example
  *
  * ```jsx
- * <BlockTitle name="my-plugin/my-block" />
+ * <BlockTitle clientId="afd1cb17-2c08-4e7a-91be-007ba7ddc3a1" />
  * ```
  *
- * @param {Object}  props      Component props.
- * @param {?string} props.name Block name.
+ * @param {Object} props
+ * @param {string} props.clientId Client ID of block.
  *
  * @return {?string} Block title.
  */

packages/block-editor/README.md

@@ -186,7 +186,23 @@ _Related_
 
 <a name="BlockTitle" href="#BlockTitle">#</a> **BlockTitle**
 
-Undocumented declaration.
+Renders the block's configured title as a string, or empty if the title
+cannot be determined.
+
+_Usage_
+
+```jsx
+<BlockTitle clientId="afd1cb17-2c08-4e7a-91be-007ba7ddc3a1" />
+```
+
+_Parameters_
+
+-   _props_ `Object`: 
+-   _props.clientId_ `string`: Client ID of block.
+
+_Returns_
+
+-   `?string`: Block title.
 
 <a name="BlockToolbar" href="#BlockToolbar">#</a> **BlockToolbar**
 

packages/block-editor/src/components/block-title/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { withSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import { getBlockType } from '@wordpress/blocks';
 
 /**
@@ -14,12 +14,23 @@ import { getBlockType } from '@wordpress/blocks';
  * <BlockTitle clientId="afd1cb17-2c08-4e7a-91be-007ba7ddc3a1" />
  * ```
  *
- * @param {Object}  props
- * @param {?string} props.name Block name.
+ * @param {Object} props
+ * @param {string} props.clientId Client ID of block.
  *
  * @return {?string} Block title.
  */
-export function BlockTitle( { name } ) {
+function BlockTitle( { clientId } ) {
+	const name = useSelect(
+		( select ) => {
+			if ( ! clientId ) {
+				return null;
+			}
+			const { getBlockName } = select( 'core/block-editor' );
+			return getBlockName( clientId );
+		},
+		[ clientId ]
+	);
+
 	if ( ! name ) {
 		return null;
 	}
@@ -32,11 +43,4 @@ export function BlockTitle( { name } ) {
 	return blockType.title;
 }
 
-export default withSelect( ( select, ownProps ) => {
-	const { getBlockName } = select( 'core/block-editor' );
-	const { clientId } = ownProps;
-
-	return {
-		name: getBlockName( clientId ),
-	};
-} )( BlockTitle );
+export default BlockTitle;

packages/block-editor/src/components/block-title/test/index.js

@@ -3,10 +3,15 @@
  */
 import { shallow } from 'enzyme';
 
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+
 /**
  * Internal dependencies
  */
-import { BlockTitle } from '../';
+import BlockTitle from '../';
 
 jest.mock( '@wordpress/blocks', () => {
 	return {
@@ -22,6 +27,12 @@ jest.mock( '@wordpress/blocks', () => {
 	};
 } );
 
+jest.mock( '@wordpress/data/src/components/use-select', () => {
+	// This allows us to tweak the returned value on each test
+	const mock = jest.fn();
+	return mock;
+} );
+
 describe( 'BlockTitle', () => {
 	it( 'renders nothing if name is falsey', () => {
 		const wrapper = shallow( <BlockTitle /> );
@@ -30,13 +41,19 @@ describe( 'BlockTitle', () => {
 	} );
 
 	it( 'renders nothing if block type does not exist', () => {
-		const wrapper = shallow( <BlockTitle name="name-not-exists" /> );
+		useSelect.mockImplementation( () => 'name-not-exists' );
+		const wrapper = shallow(
+			<BlockTitle clientId="afd1cb17-2c08-4e7a-91be-007ba7ddc3a1" />
+		);
 
 		expect( wrapper.type() ).toBe( null );
 	} );
 
 	it( 'renders title if block type exists', () => {
-		const wrapper = shallow( <BlockTitle name="name-exists" /> );
+		useSelect.mockImplementation( () => 'name-exists' );
+		const wrapper = shallow(
+			<BlockTitle clientId="afd1cb17-2c08-4e7a-91be-007ba7ddc3a1" />
+		);
 
 		expect( wrapper.text() ).toBe( 'Block Title' );
 	} );