From ddc77971cac733515951bc105cc2d00d0558cba8 Mon Sep 17 00:00:00 2001 From: Hiroshi Urabe Date: Fri, 5 Jun 2020 01:43:51 +0900 Subject: [PATCH 1/5] useSelect for site-title . --- packages/block-editor/README.md | 18 ++++++++++++++- .../src/components/block-title/index.js | 23 ++++++++++--------- 2 files changed, 29 insertions(+), 12 deletions(-) diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index fe0657a95bf74a..962a91ac90c70b 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -186,7 +186,23 @@ _Related_ # **BlockTitle** -Undocumented declaration. +Renders the block's configured title as a string, or empty if the title +cannot be determined. + +_Usage_ + +```jsx + +``` + +_Parameters_ + +- _props_ `Object`: +- _props.clientId_ `?string`: Block Client ID. + +_Returns_ + +- `?string`: Block title. # **BlockToolbar** diff --git a/packages/block-editor/src/components/block-title/index.js b/packages/block-editor/src/components/block-title/index.js index 6834df11498922..08a7e4895e1c3c 100644 --- a/packages/block-editor/src/components/block-title/index.js +++ b/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'; /** @@ -15,11 +15,19 @@ import { getBlockType } from '@wordpress/blocks'; * ``` * * @param {Object} props - * @param {?string} props.name Block name. + * @param {?string} props.clientId Block Client ID. * * @return {?string} Block title. */ -export function BlockTitle( { name } ) { +export function BlockTitle( { clientId } ) { + const name = useSelect( + ( select ) => { + const { getBlockName } = select( 'core/block-editor' ); + return getBlockName( clientId ); + }, + [ clientId ] + ); + if ( ! name ) { return null; } @@ -32,11 +40,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; From 06b19b58e7af184fc15f70c912cc172c0db0e233 Mon Sep 17 00:00:00 2001 From: Hiroshi Urabe Date: Fri, 5 Jun 2020 03:16:00 +0900 Subject: [PATCH 2/5] check clientId --- packages/block-editor/README.md | 2 +- .../block-editor/src/components/block-title/index.js | 9 ++++++--- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index 962a91ac90c70b..c7df34922083cc 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -198,7 +198,7 @@ _Usage_ _Parameters_ - _props_ `Object`: -- _props.clientId_ `?string`: Block Client ID. +- _props.clientId_ `string`: Client ID of block. _Returns_ diff --git a/packages/block-editor/src/components/block-title/index.js b/packages/block-editor/src/components/block-title/index.js index 08a7e4895e1c3c..a063be5e93095d 100644 --- a/packages/block-editor/src/components/block-title/index.js +++ b/packages/block-editor/src/components/block-title/index.js @@ -14,14 +14,17 @@ import { getBlockType } from '@wordpress/blocks'; * * ``` * - * @param {Object} props - * @param {?string} props.clientId Block Client ID. + * @param {Object} props + * @param {string} props.clientId Client ID of block. * * @return {?string} Block title. */ -export function BlockTitle( { clientId } ) { +function BlockTitle( { clientId } ) { const name = useSelect( ( select ) => { + if ( ! clientId ) { + return null; + } const { getBlockName } = select( 'core/block-editor' ); return getBlockName( clientId ); }, From a2df857950722a51ca8ceccec8bc1522cd08de96 Mon Sep 17 00:00:00 2001 From: Hiroshi Urabe Date: Fri, 5 Jun 2020 03:16:38 +0900 Subject: [PATCH 3/5] update contributors document. --- docs/contributors/coding-guidelines.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/contributors/coding-guidelines.md b/docs/contributors/coding-guidelines.md index c69b7d6e419098..5fea9211b10e6a 100644 --- a/docs/contributors/coding-guidelines.md +++ b/docs/contributors/coding-guidelines.md @@ -452,11 +452,11 @@ Documenting a function component should be treated the same as any other functio * @example * * ```jsx - * + * * ``` * - * @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. */ From 8f9293a040a2b368d8639ddc18c307401dc9f618 Mon Sep 17 00:00:00 2001 From: Hiroshi Urabe Date: Fri, 5 Jun 2020 03:46:52 +0900 Subject: [PATCH 4/5] fix test --- .../src/components/block-title/test/index.js | 23 ++++++++++++++++--- 1 file changed, 20 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/components/block-title/test/index.js b/packages/block-editor/src/components/block-title/test/index.js index 4306ae6247b93b..d0479223b4c417 100644 --- a/packages/block-editor/src/components/block-title/test/index.js +++ b/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( ); @@ -30,13 +41,19 @@ describe( 'BlockTitle', () => { } ); it( 'renders nothing if block type does not exist', () => { - const wrapper = shallow( ); + useSelect.mockImplementation( () => 'name-not-exists' ); + const wrapper = shallow( + + ); expect( wrapper.type() ).toBe( null ); } ); it( 'renders title if block type exists', () => { - const wrapper = shallow( ); + useSelect.mockImplementation( () => 'name-exists' ); + const wrapper = shallow( + + ); expect( wrapper.text() ).toBe( 'Block Title' ); } ); From 3c1eca6ad47131519fb267c62a9f07e2f5fbd874 Mon Sep 17 00:00:00 2001 From: Hiroshi Urabe Date: Fri, 5 Jun 2020 04:30:27 +0900 Subject: [PATCH 5/5] fix export --- packages/block-editor/src/components/block-title/index.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/block-editor/src/components/block-title/index.js b/packages/block-editor/src/components/block-title/index.js index a063be5e93095d..0ccb00c5311a98 100644 --- a/packages/block-editor/src/components/block-title/index.js +++ b/packages/block-editor/src/components/block-title/index.js @@ -19,7 +19,7 @@ import { getBlockType } from '@wordpress/blocks'; * * @return {?string} Block title. */ -function BlockTitle( { clientId } ) { +export default function BlockTitle( { clientId } ) { const name = useSelect( ( select ) => { if ( ! clientId ) { @@ -42,5 +42,3 @@ function BlockTitle( { clientId } ) { return blockType.title; } - -export default BlockTitle;