From 1671622f80b8f1e574357e1207cc61c6f6ff7a8c Mon Sep 17 00:00:00 2001 From: Noah Allen Date: Thu, 9 Jul 2020 13:15:45 -0700 Subject: [PATCH 1/6] Use blockLabel for BlockTitle component --- .../src/components/block-title/index.js | 35 ++++++++++++++++--- 1 file changed, 30 insertions(+), 5 deletions(-) diff --git a/packages/block-editor/src/components/block-title/index.js b/packages/block-editor/src/components/block-title/index.js index 0ccb00c5311a98..83d4cade7ad3d1 100644 --- a/packages/block-editor/src/components/block-title/index.js +++ b/packages/block-editor/src/components/block-title/index.js @@ -1,8 +1,16 @@ +/** + * External dependencies + */ +import { truncate } from 'lodash'; + /** * WordPress dependencies */ import { useSelect } from '@wordpress/data'; -import { getBlockType } from '@wordpress/blocks'; +import { + getBlockType, + __experimentalGetBlockLabel as getBlockLabel, +} from '@wordpress/blocks'; /** * Renders the block's configured title as a string, or empty if the title @@ -20,13 +28,18 @@ import { getBlockType } from '@wordpress/blocks'; * @return {?string} Block title. */ export default function BlockTitle( { clientId } ) { - const name = useSelect( + const { attributes, name } = useSelect( ( select ) => { if ( ! clientId ) { return null; } - const { getBlockName } = select( 'core/block-editor' ); - return getBlockName( clientId ); + const { getBlockName, getBlockAttributes } = select( + 'core/block-editor' + ); + return { + attributes: getBlockAttributes( clientId ), + name: getBlockName( clientId ), + }; }, [ clientId ] ); @@ -40,5 +53,17 @@ export default function BlockTitle( { clientId } ) { return null; } - return blockType.title; + const { __experimentalLabel, title } = blockType; + + // Check if it supports the label first. getBlockLabel will return the title + // if no label exists. We want to know if the label is undefined so that we + // can format it uniquely. + const label = + __experimentalLabel && + truncate( getBlockLabel( blockType, attributes ), { length: 25 } ); + + if ( label ) { + return `${ title } (${ label })`; + } + return title; } From 1957e5f55fe8075e5f8db5551ffd997659854556 Mon Sep 17 00:00:00 2001 From: Noah Allen Date: Tue, 14 Jul 2020 20:40:57 -0700 Subject: [PATCH 2/6] Use dash as separator --- packages/block-editor/src/components/block-title/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/block-title/index.js b/packages/block-editor/src/components/block-title/index.js index 83d4cade7ad3d1..b0cee44081dd16 100644 --- a/packages/block-editor/src/components/block-title/index.js +++ b/packages/block-editor/src/components/block-title/index.js @@ -60,10 +60,10 @@ export default function BlockTitle( { clientId } ) { // can format it uniquely. const label = __experimentalLabel && - truncate( getBlockLabel( blockType, attributes ), { length: 25 } ); + truncate( getBlockLabel( blockType, attributes ), { length: 15 } ); if ( label ) { - return `${ title } (${ label })`; + return `${ title } - ${ label }`; } return title; } From f48416500c2f7b6b99b4056ceace4ac1e6125536 Mon Sep 17 00:00:00 2001 From: Noah Allen Date: Wed, 15 Jul 2020 12:07:55 -0700 Subject: [PATCH 3/6] Check if label does not equal title, use colon --- .../src/components/block-title/index.js | 16 ++++++---------- 1 file changed, 6 insertions(+), 10 deletions(-) diff --git a/packages/block-editor/src/components/block-title/index.js b/packages/block-editor/src/components/block-title/index.js index b0cee44081dd16..b6517d2c8577ef 100644 --- a/packages/block-editor/src/components/block-title/index.js +++ b/packages/block-editor/src/components/block-title/index.js @@ -53,17 +53,13 @@ export default function BlockTitle( { clientId } ) { return null; } - const { __experimentalLabel, title } = blockType; + const { title } = blockType; + const label = getBlockLabel( blockType, attributes ); - // Check if it supports the label first. getBlockLabel will return the title - // if no label exists. We want to know if the label is undefined so that we - // can format it uniquely. - const label = - __experimentalLabel && - truncate( getBlockLabel( blockType, attributes ), { length: 15 } ); - - if ( label ) { - return `${ title } - ${ label }`; + // Label will often fall back to the title if no label is defined for the + // clurrent label context. We do not want "Paragraph: Paragraph". + if ( label !== title ) { + return `${ title }: ${ truncate( label, { length: 15 } ) }`; } return title; } From 27aa6c06dad4b472f0dbed4c46e592387826bb5d Mon Sep 17 00:00:00 2001 From: Noah Allen Date: Tue, 11 Aug 2020 21:40:57 -0700 Subject: [PATCH 4/6] Fix typo in comment Co-authored-by: Pascal Birchler --- packages/block-editor/src/components/block-title/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/block-title/index.js b/packages/block-editor/src/components/block-title/index.js index b6517d2c8577ef..d5a00628dff88c 100644 --- a/packages/block-editor/src/components/block-title/index.js +++ b/packages/block-editor/src/components/block-title/index.js @@ -57,7 +57,7 @@ export default function BlockTitle( { clientId } ) { const label = getBlockLabel( blockType, attributes ); // Label will often fall back to the title if no label is defined for the - // clurrent label context. We do not want "Paragraph: Paragraph". + // current label context. We do not want "Paragraph: Paragraph". if ( label !== title ) { return `${ title }: ${ truncate( label, { length: 15 } ) }`; } From 9cdf64c81a75e4b43810bc1e038133e015276b5e Mon Sep 17 00:00:00 2001 From: Noah Allen Date: Wed, 12 Aug 2020 15:49:41 -0700 Subject: [PATCH 5/6] Update BlockTitle unit tests --- .../src/components/block-title/test/index.js | 64 ++++++++++++++++++- 1 file changed, 61 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 d0479223b4c417..d268699d09668d 100644 --- a/packages/block-editor/src/components/block-title/test/index.js +++ b/packages/block-editor/src/components/block-title/test/index.js @@ -22,6 +22,24 @@ jest.mock( '@wordpress/blocks', () => { case 'name-exists': return { title: 'Block Title' }; + + case 'name-with-label': + return { title: 'Block With Label' }; + + case 'name-with-long-label': + return { title: 'Block With Long Label' }; + } + }, + __experimentalGetBlockLabel( { title } ) { + switch ( title ) { + case 'Block With Label': + return 'Test Label'; + + case 'Block With Long Label': + return 'This is a longer label than typical for blocks to have.'; + + default: + return title; } }, }; @@ -34,14 +52,22 @@ jest.mock( '@wordpress/data/src/components/use-select', () => { } ); describe( 'BlockTitle', () => { - it( 'renders nothing if name is falsey', () => { + it( 'renders nothing if name is falsey2', () => { + useSelect.mockImplementation( () => ( { + name: null, + attributes: null, + } ) ); + const wrapper = shallow( ); expect( wrapper.type() ).toBe( null ); } ); it( 'renders nothing if block type does not exist', () => { - useSelect.mockImplementation( () => 'name-not-exists' ); + useSelect.mockImplementation( () => ( { + name: 'name-not-exists', + attributes: null, + } ) ); const wrapper = shallow( ); @@ -50,11 +76,43 @@ describe( 'BlockTitle', () => { } ); it( 'renders title if block type exists', () => { - useSelect.mockImplementation( () => 'name-exists' ); + useSelect.mockImplementation( () => ( { + name: 'name-exists', + attributes: null, + } ) ); + const wrapper = shallow( ); expect( wrapper.text() ).toBe( 'Block Title' ); } ); + + it( 'renders label if it is set', () => { + useSelect.mockImplementation( () => ( { + name: 'name-with-label', + attributes: null, + } ) ); + + const wrapper = shallow( + + ); + + expect( wrapper.text() ).toBe( 'Block With Label: Test Label' ); + } ); + + it( 'truncates the label if it is too long', () => { + useSelect.mockImplementation( () => ( { + name: 'name-with-long-label', + attributes: null, + } ) ); + + const wrapper = shallow( + + ); + + expect( wrapper.text() ).toBe( + 'Block With Long Label: This is a lo...' + ); + } ); } ); From 60cd2e533a13c4ae0dbfae565188b449e3e7ecdd Mon Sep 17 00:00:00 2001 From: Noah Allen Date: Thu, 13 Aug 2020 13:47:33 -0700 Subject: [PATCH 6/6] Fix possible error when clientId did not exist --- packages/block-editor/src/components/block-title/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/block-title/index.js b/packages/block-editor/src/components/block-title/index.js index d5a00628dff88c..3a36d53e12e17c 100644 --- a/packages/block-editor/src/components/block-title/index.js +++ b/packages/block-editor/src/components/block-title/index.js @@ -31,7 +31,7 @@ export default function BlockTitle( { clientId } ) { const { attributes, name } = useSelect( ( select ) => { if ( ! clientId ) { - return null; + return {}; } const { getBlockName, getBlockAttributes } = select( 'core/block-editor'