From 6ea26b01c17a1ea7aa7c5c2f9d4f3d30ef196d35 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Fri, 30 Jul 2021 12:16:26 -0400 Subject: [PATCH 1/4] update button labels with contextual info --- .../template-part/edit/placeholder/index.js | 119 +++++++++++------- .../edit/placeholder/patterns-setup.js | 16 +-- 2 files changed, 81 insertions(+), 54 deletions(-) diff --git a/packages/block-library/src/template-part/edit/placeholder/index.js b/packages/block-library/src/template-part/edit/placeholder/index.js index 2ea37ac11fdac9..7377c2dfccb1c8 100644 --- a/packages/block-library/src/template-part/edit/placeholder/index.js +++ b/packages/block-library/src/template-part/edit/placeholder/index.js @@ -9,9 +9,17 @@ import { find } from 'lodash'; import { __, sprintf } from '@wordpress/i18n'; import { useCallback, useState } from '@wordpress/element'; import { useDispatch, useSelect } from '@wordpress/data'; -import { Placeholder, Dropdown, Button, Spinner } from '@wordpress/components'; +import { + Placeholder, + Dropdown, + Button, + Spinner, + Flex, + FlexItem, +} from '@wordpress/components'; import { serialize } from '@wordpress/blocks'; import { store as coreStore } from '@wordpress/core-data'; +import { store as blockEditorStore } from '@wordpress/block-editor'; /** * Internal dependencies @@ -34,7 +42,16 @@ export default function TemplatePartPlaceholder( { const { saveEntityRecord } = useDispatch( coreStore ); const [ step, setStep ] = useState( PLACEHOLDER_STEPS.initial ); - const { areaIcon, areaLabel } = useSelect( + const blockNameWithArea = area + ? `core/template-part/${ area }` + : 'core/template-part'; + + const filterPatternsFn = ( pattern ) => + pattern?.blockTypes?.some?.( + ( blockType ) => blockType === blockNameWithArea + ); + + const { areaIcon, areaLabel, availablePatterns } = useSelect( ( select ) => { // FIXME: @wordpress/block-library should not depend on @wordpress/editor. // Blocks can be loaded into a *non-post* block editor. @@ -46,9 +63,14 @@ export default function TemplatePartPlaceholder( { const selectedArea = find( definedAreas, { area } ); const defaultArea = find( definedAreas, { area: 'uncategorized' } ); + const _availablePatterns = select( blockEditorStore ) + .__experimentalGetAllowedPatterns?.() + .filter( filterPatternsFn ); + return { areaIcon: selectedArea?.icon || defaultArea?.icon, areaLabel: selectedArea?.label || __( 'Template Part' ), + availablePatterns: _availablePatterns, }; }, [ area ] @@ -106,56 +128,65 @@ export default function TemplatePartPlaceholder( { { ! hasResolvedReplacements ? ( ) : ( - ( - <> - { enableSelection && ( - - ) } - + ) } - - - ) } - renderContent={ ( { onClose } ) => ( - - ) } - /> + + ) } + renderContent={ ( { onClose } ) => ( + + ) } + /> + + + + ) } ) } { step === PLACEHOLDER_STEPS.patterns && ( ) } diff --git a/packages/block-library/src/template-part/edit/placeholder/patterns-setup.js b/packages/block-library/src/template-part/edit/placeholder/patterns-setup.js index 6add051c040408..3b916f4d89d86a 100644 --- a/packages/block-library/src/template-part/edit/placeholder/patterns-setup.js +++ b/packages/block-library/src/template-part/edit/placeholder/patterns-setup.js @@ -4,11 +4,11 @@ import { __experimentalBlockPatternSetup as BlockPatternSetup } from '@wordpress/block-editor'; import { useEffect } from '@wordpress/element'; -export default function PatternsSetup( { area, clientId, onCreate } ) { - const blockNameWithArea = area - ? `core/template-part/${ area }` - : 'core/template-part'; - +export default function PatternsSetup( { + filterPatternsFn, + clientId, + onCreate, +} ) { return ( } onBlockPatternSelect={ onCreate } - filterPatternsFn={ ( pattern ) => - pattern?.blockTypes?.some?.( - ( blockType ) => blockType === blockNameWithArea - ) - } + filterPatternsFn={ filterPatternsFn } /> ); } From d94e1ef3067044bc9d8aabbd71082e23c6a7e8f8 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Fri, 30 Jul 2021 13:01:10 -0400 Subject: [PATCH 2/4] change 'link' to 'connect' --- .../block-library/src/template-part/edit/placeholder/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/template-part/edit/placeholder/index.js b/packages/block-library/src/template-part/edit/placeholder/index.js index 7377c2dfccb1c8..4d5a8cc361a5b4 100644 --- a/packages/block-library/src/template-part/edit/placeholder/index.js +++ b/packages/block-library/src/template-part/edit/placeholder/index.js @@ -143,7 +143,7 @@ export default function TemplatePartPlaceholder( { > { sprintf( // Translators: %s as template part area title ("Header", "Footer", etc.). - 'Link this block to an existing %s', + 'Connect this block to an existing %s', areaLabel.toLowerCase() ) } From 31251ab2e31bb7ab0bf1fa15358b8dc032c5eba9 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Mon, 2 Aug 2021 08:38:49 -0400 Subject: [PATCH 3/4] update placeholder instructions --- .../block-library/src/template-part/edit/placeholder/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/template-part/edit/placeholder/index.js b/packages/block-library/src/template-part/edit/placeholder/index.js index e54b9b7002595a..62d8ba2f14112d 100644 --- a/packages/block-library/src/template-part/edit/placeholder/index.js +++ b/packages/block-library/src/template-part/edit/placeholder/index.js @@ -117,7 +117,7 @@ export default function TemplatePartPlaceholder( { enableSelection ? sprintf( // Translators: %s as template part area title ("Header", "Footer", etc.). - 'Choose an existing %s or create a new one.', + 'Connect this block to an existing %s or create a new one.', areaLabel.toLowerCase() ) : sprintf( From 0b4e7d1bc3ff447e2366014e51755605fbdb4ab8 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Mon, 2 Aug 2021 09:13:04 -0400 Subject: [PATCH 4/4] shorten button labels --- .../template-part/edit/placeholder/index.js | 107 ++++++++---------- 1 file changed, 50 insertions(+), 57 deletions(-) diff --git a/packages/block-library/src/template-part/edit/placeholder/index.js b/packages/block-library/src/template-part/edit/placeholder/index.js index 62d8ba2f14112d..d5ce46f2696919 100644 --- a/packages/block-library/src/template-part/edit/placeholder/index.js +++ b/packages/block-library/src/template-part/edit/placeholder/index.js @@ -9,14 +9,7 @@ import { find } from 'lodash'; import { __, sprintf } from '@wordpress/i18n'; import { useCallback, useState } from '@wordpress/element'; import { useDispatch, useSelect } from '@wordpress/data'; -import { - Placeholder, - Dropdown, - Button, - Spinner, - Flex, - FlexItem, -} from '@wordpress/components'; +import { Placeholder, Dropdown, Button, Spinner } from '@wordpress/components'; import { serialize } from '@wordpress/blocks'; import { store as coreStore } from '@wordpress/core-data'; import { store as blockEditorStore } from '@wordpress/block-editor'; @@ -130,57 +123,57 @@ export default function TemplatePartPlaceholder( { { ! hasResolvedReplacements ? ( ) : ( - - ( - <> - { enableSelection && ( - - + - - ) } - - ) } - renderContent={ ( { onClose } ) => ( - - ) } - /> - - + ) } - { !! availablePatterns?.length && - // Translators: block patterns are available for this action. - __( ' (patterns available)' ) } - - - + + ) } + renderContent={ ( { onClose } ) => ( + + ) } + /> ) } ) }