From 75435729c5e5777145db2d69c42bb6aa70c5ec10 Mon Sep 17 00:00:00 2001 From: David Szabo Date: Mon, 15 Feb 2021 18:03:59 +0100 Subject: [PATCH 1/6] Incorporate getLabel into useBlockDisplayInformation --- packages/block-editor/README.md | 12 ++-- .../src/components/block-title/index.js | 21 ++----- .../use-block-display-information/index.js | 61 +++++++++++++------ 3 files changed, 53 insertions(+), 41 deletions(-) diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index 0515228f27a59..9a802bb36dc75 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -574,14 +574,16 @@ _Related_ # **useBlockDisplayInformation** -Hook used to try to find a matching block variation and return -the appropriate information for display reasons. In order to -to try to find a match we need to things: +Hook used appropriate information for display reasons. +It takes variations and custom `label` function into account. + +In order to try to find a variation match we need to things: 1\. Block's client id to extract it's current attributes. 2\. A block variation should have set `isActive` prop to a proper function. -If for any reason a block variaton match cannot be found, -the returned information come from the Block Type. +Value from custom `label` function is prioritized, if that's not found +then the block variation' information is returned. If both are missing +then the information is returned from the Block Type. If no blockType is found with the provided clientId, returns null. _Parameters_ diff --git a/packages/block-editor/src/components/block-title/index.js b/packages/block-editor/src/components/block-title/index.js index e15a290b9ffae..8febaad8f8a89 100644 --- a/packages/block-editor/src/components/block-title/index.js +++ b/packages/block-editor/src/components/block-title/index.js @@ -7,11 +7,7 @@ import { truncate } from 'lodash'; * WordPress dependencies */ import { useSelect } from '@wordpress/data'; -import { - getBlockType, - __experimentalGetBlockLabel as getBlockLabel, - isReusableBlock, -} from '@wordpress/blocks'; +import { getBlockType, isReusableBlock } from '@wordpress/blocks'; /** * Internal dependencies @@ -35,7 +31,7 @@ import { store as blockEditorStore } from '../../store'; * @return {?string} Block title. */ export default function BlockTitle( { clientId } ) { - const { attributes, name, reusableBlockTitle } = useSelect( + const { name, reusableBlockTitle } = useSelect( ( select ) => { if ( ! clientId ) { return {}; @@ -51,7 +47,6 @@ export default function BlockTitle( { clientId } ) { } const isReusable = isReusableBlock( getBlockType( blockName ) ); return { - attributes: getBlockAttributes( clientId ), name: blockName, reusableBlockTitle: isReusable && @@ -65,13 +60,7 @@ export default function BlockTitle( { clientId } ) { const blockInformation = useBlockDisplayInformation( clientId ); if ( ! name || ! blockInformation ) return null; - const blockType = getBlockType( name ); - const label = reusableBlockTitle || getBlockLabel( blockType, attributes ); - // Label will fallback to the title if no label is defined for the current - // label context. If the label is defined we prioritize it over possible - // possible block variation title match. - if ( label !== blockType.title ) { - return truncate( label, { length: 35 } ); - } - return blockInformation.title; + + const label = reusableBlockTitle || blockInformation.title; + return truncate( label, { length: 35 } ); } diff --git a/packages/block-editor/src/components/use-block-display-information/index.js b/packages/block-editor/src/components/use-block-display-information/index.js index 7ee0d350ffef8..62d5f93295dfd 100644 --- a/packages/block-editor/src/components/use-block-display-information/index.js +++ b/packages/block-editor/src/components/use-block-display-information/index.js @@ -2,7 +2,10 @@ * WordPress dependencies */ import { useSelect } from '@wordpress/data'; -import { store as blocksStore } from '@wordpress/blocks'; +import { + store as blocksStore, + __experimentalGetBlockLabel as getBlockLabel, +} from '@wordpress/blocks'; /** * Internal dependencies @@ -22,49 +25,67 @@ import { store as blockEditorStore } from '../../store'; */ /** - * Hook used to try to find a matching block variation and return - * the appropriate information for display reasons. In order to - * to try to find a match we need to things: + * Hook used appropriate information for display reasons. + * It takes variations and custom `label` function into account. + * + * In order to try to find a variation match we need to things: * 1. Block's client id to extract it's current attributes. * 2. A block variation should have set `isActive` prop to a proper function. * - * If for any reason a block variaton match cannot be found, - * the returned information come from the Block Type. + * Value from custom `label` function is prioritized, if that's not found + * then the block variation' information is returned. If both are missing + * then the information is returned from the Block Type. * If no blockType is found with the provided clientId, returns null. * * @param {string} clientId Block's client id. * @return {?WPBlockDisplayInformation} Block's display information, or `null` when the block or its type not found. */ - export default function useBlockDisplayInformation( clientId ) { return useSelect( ( select ) => { if ( ! clientId ) return null; + const { getBlockName, getBlockAttributes } = select( blockEditorStore ); const { getBlockType, getBlockVariations } = select( blocksStore ); + const blockName = getBlockName( clientId ); const blockType = getBlockType( blockName ); if ( ! blockType ) return null; + const variations = getBlockVariations( blockName ); - const blockTypeInfo = { - title: blockType.title, - icon: blockType.icon, - description: blockType.description, - }; - if ( ! variations?.length ) return blockTypeInfo; const attributes = getBlockAttributes( clientId ); - const match = variations.find( ( variation ) => - variation.isActive?.( attributes, variation.attributes ) - ); - if ( ! match ) return blockTypeInfo; + + const dynamicTitle = getBlockLabel( blockType, attributes ); + const variationInfo = getVariationInfo( variations, attributes ); + + const title = + dynamicTitle && dynamicTitle !== blockType.title + ? dynamicTitle + : variationInfo.title || blockType.title; + const icon = variationInfo.icon || blockType.icon; + const description = + variationInfo.description || blockType.description; + return { - title: match.title || blockType.title, - icon: match.icon || blockType.icon, - description: match.description || blockType.description, + title, + icon, + description, }; }, [ clientId ] ); } + +function getVariationInfo( variations, attributes ) { + const emptyInfo = { title: null, icon: null, description: null }; + if ( ! variations?.length ) { + return emptyInfo; + } + + const match = variations.find( ( variation ) => + variation.isActive?.( attributes, variation.attributes ) + ); + return match || emptyInfo; +} From 759f113f809cc70d13d2b1ccc601309f3560a30d Mon Sep 17 00:00:00 2001 From: David Szabo Date: Mon, 15 Feb 2021 18:13:16 +0100 Subject: [PATCH 2/6] Update readme --- .../use-block-display-information/README.md | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/packages/block-editor/src/components/use-block-display-information/README.md b/packages/block-editor/src/components/use-block-display-information/README.md index 6d52ee452cc48..a50f43cbac8d1 100644 --- a/packages/block-editor/src/components/use-block-display-information/README.md +++ b/packages/block-editor/src/components/use-block-display-information/README.md @@ -1,11 +1,16 @@ # useBlockDisplayInformation -A React Hook that tries to find a matching block variation and returns the appropriate information for display reasons. In order to try to find a match we need two things: +Hook used appropriate information for display reasons. +It takes variations and custom `label` function into account. -1. Block's client id to extract its current attributes. -2. A block variation has `isActive` prop defined with a matcher function. +In order to try to find a variation match we need to things: +1\. Block's client id to extract it's current attributes. +2\. A block variation should have set `isActive` prop to a proper function. -If for any reason a block variaton match cannot be found, the returned information come from the Block Type. +Value from custom `label` function is prioritized, if that's not found +then the block variation' information is returned. If both are missing +then the information is returned from the Block Type. +If no blockType is found with the provided clientId, returns null. ### Usage From c1dad7a990124cb787b8beade8857dd8eddb9695 Mon Sep 17 00:00:00 2001 From: David Szabo Date: Mon, 15 Feb 2021 18:58:34 +0100 Subject: [PATCH 3/6] Update test --- .../src/components/block-title/test/index.js | 18 ++++-------------- 1 file changed, 4 insertions(+), 14 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 e2fb00937ba04..153a5a051be6f 100644 --- a/packages/block-editor/src/components/block-title/test/index.js +++ b/packages/block-editor/src/components/block-title/test/index.js @@ -30,26 +30,16 @@ jest.mock( '@wordpress/blocks', () => { 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; - } - }, }; } ); jest.mock( '../../use-block-display-information', () => { const resultsMap = { 'id-name-exists': { title: 'Block Title' }, - 'id-name-with-label': { title: 'Block With Label' }, - 'id-name-with-long-label': { title: 'Block With Long Label' }, + 'id-name-with-label': { title: 'Test Label' }, + 'id-name-with-long-label': { + title: 'This is a longer label than typical for blocks to have.', + }, }; return jest.fn( ( clientId ) => resultsMap[ clientId ] ); } ); From 723590a6536b71f35d0b706dd76597779d3effc4 Mon Sep 17 00:00:00 2001 From: David Szabo Date: Tue, 16 Feb 2021 13:53:21 +0100 Subject: [PATCH 4/6] Fix documentation --- packages/block-editor/README.md | 9 +++++---- .../components/use-block-display-information/README.md | 9 +++++---- .../components/use-block-display-information/index.js | 9 +++++---- 3 files changed, 15 insertions(+), 12 deletions(-) diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index 9a802bb36dc75..67ed206423d67 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -574,17 +574,18 @@ _Related_ # **useBlockDisplayInformation** -Hook used appropriate information for display reasons. +Hook used to return appropriate information for display reasons. It takes variations and custom `label` function into account. -In order to try to find a variation match we need to things: -1\. Block's client id to extract it's current attributes. +In order to try to find a variation match we need two things: +1\. Block's client id to extract its current attributes. 2\. A block variation should have set `isActive` prop to a proper function. Value from custom `label` function is prioritized, if that's not found then the block variation' information is returned. If both are missing then the information is returned from the Block Type. -If no blockType is found with the provided clientId, returns null. + +If no `blockType` is found with the provided `clientId`, returns `null`. _Parameters_ diff --git a/packages/block-editor/src/components/use-block-display-information/README.md b/packages/block-editor/src/components/use-block-display-information/README.md index a50f43cbac8d1..409304016a6fa 100644 --- a/packages/block-editor/src/components/use-block-display-information/README.md +++ b/packages/block-editor/src/components/use-block-display-information/README.md @@ -1,16 +1,17 @@ # useBlockDisplayInformation -Hook used appropriate information for display reasons. +Hook used to return appropriate information for display reasons. It takes variations and custom `label` function into account. -In order to try to find a variation match we need to things: -1\. Block's client id to extract it's current attributes. +In order to try to find a variation match we need two things: +1\. Block's client id to extract its current attributes. 2\. A block variation should have set `isActive` prop to a proper function. Value from custom `label` function is prioritized, if that's not found then the block variation' information is returned. If both are missing then the information is returned from the Block Type. -If no blockType is found with the provided clientId, returns null. + +If no `blockType` is found with the provided `clientId`, returns `null`. ### Usage diff --git a/packages/block-editor/src/components/use-block-display-information/index.js b/packages/block-editor/src/components/use-block-display-information/index.js index 62d5f93295dfd..5c992293ae28e 100644 --- a/packages/block-editor/src/components/use-block-display-information/index.js +++ b/packages/block-editor/src/components/use-block-display-information/index.js @@ -25,17 +25,18 @@ import { store as blockEditorStore } from '../../store'; */ /** - * Hook used appropriate information for display reasons. + * Hook used to return appropriate information for display reasons. * It takes variations and custom `label` function into account. * - * In order to try to find a variation match we need to things: - * 1. Block's client id to extract it's current attributes. + * In order to try to find a variation match we need two things: + * 1. Block's client id to extract its current attributes. * 2. A block variation should have set `isActive` prop to a proper function. * * Value from custom `label` function is prioritized, if that's not found * then the block variation' information is returned. If both are missing * then the information is returned from the Block Type. - * If no blockType is found with the provided clientId, returns null. + * + * If no `blockType` is found with the provided `clientId`, returns `null`. * * @param {string} clientId Block's client id. * @return {?WPBlockDisplayInformation} Block's display information, or `null` when the block or its type not found. From e903a4fca2600d58aefbddcc71e1479fd4c0a430 Mon Sep 17 00:00:00 2001 From: David Szabo Date: Tue, 16 Feb 2021 14:12:39 +0100 Subject: [PATCH 5/6] Add e2e test --- .../experiments/settings-sidebar.test.js | 29 ++++++++++++++++++- 1 file changed, 28 insertions(+), 1 deletion(-) diff --git a/packages/e2e-tests/specs/experiments/settings-sidebar.test.js b/packages/e2e-tests/specs/experiments/settings-sidebar.test.js index 7d82b95f48cae..76926106a9bf0 100644 --- a/packages/e2e-tests/specs/experiments/settings-sidebar.test.js +++ b/packages/e2e-tests/specs/experiments/settings-sidebar.test.js @@ -39,9 +39,22 @@ async function getTemplateCard() { }; } +async function getBlockCard() { + return { + title: await page.$eval( + '.block-editor-block-card__title', + ( element ) => element.innerText + ), + description: await page.$eval( + '.block-editor-block-card__description', + ( element ) => element.innerText + ), + }; +} + describe( 'Settings sidebar', () => { beforeAll( async () => { - await activateTheme( 'tt1-blocks' ); + await activateTheme( 'theme-experiments/tt1-blocks' ); await trashAllPosts( 'wp_template' ); await trashAllPosts( 'wp_template_part' ); } ); @@ -95,5 +108,19 @@ describe( 'Settings sidebar', () => { expect( await getActiveTabLabel() ).toEqual( 'Block (selected)' ); } ); + + it( `should show template part's name in the block card if a template part block is selected`, async () => { + const allBlocks = await getAllBlocks(); + const headerTemplatePart = allBlocks.find( + ( { name, attributes } ) => + name === 'core/template-part' && + attributes?.slug === 'header' + ); + await selectBlockByClientId( headerTemplatePart.clientId ); + + await toggleSidebar(); + + expect( ( await getBlockCard() ).title ).toEqual( 'Header' ); + } ); } ); } ); From e08215bb22912a67e54dd4b365b5a1f519f173ed Mon Sep 17 00:00:00 2001 From: David Szabo Date: Tue, 16 Feb 2021 14:19:58 +0100 Subject: [PATCH 6/6] Revert activateTheme --- packages/e2e-tests/specs/experiments/settings-sidebar.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/e2e-tests/specs/experiments/settings-sidebar.test.js b/packages/e2e-tests/specs/experiments/settings-sidebar.test.js index 76926106a9bf0..5103f8269560f 100644 --- a/packages/e2e-tests/specs/experiments/settings-sidebar.test.js +++ b/packages/e2e-tests/specs/experiments/settings-sidebar.test.js @@ -54,7 +54,7 @@ async function getBlockCard() { describe( 'Settings sidebar', () => { beforeAll( async () => { - await activateTheme( 'theme-experiments/tt1-blocks' ); + await activateTheme( 'tt1-blocks' ); await trashAllPosts( 'wp_template' ); await trashAllPosts( 'wp_template_part' ); } );