From 2205f539ca2c34f6b2a2d44840bfc2a9fd284fea Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Fri, 5 Mar 2021 14:09:21 -0500 Subject: [PATCH 1/3] show template part specific patterns in inserter when in context --- lib/block-patterns.php | 92 +++++++++++++++++++ .../inserter/hooks/use-patterns-state.js | 61 +++++++++++- 2 files changed, 149 insertions(+), 4 deletions(-) diff --git a/lib/block-patterns.php b/lib/block-patterns.php index d376fb59aea1e9..31b197fdf08a3f 100644 --- a/lib/block-patterns.php +++ b/lib/block-patterns.php @@ -62,3 +62,95 @@ ', ) ); + +register_block_pattern( + 'template-part/tt1-header', + array( + 'title' => __( 'test-TT1 header', 'gutenberg' ), + 'scope' => array( + 'inserter' => false, + 'block' => array( 'core/template-part' ), + 'variation' => 'header', + ), + 'categories' => array( 'tp_header' ), + 'content' => ' + + + + +
+
+ +
+ + + +
+ +
+
+ + + + + ', + ) +); + +register_block_pattern( + 'template-part/tt1-footer', + array( + 'title' => __( 'test-TT1 footer', 'gutenberg' ), + 'scope' => array( + 'inserter' => false, + 'block' => array( 'core/template-part' ), + 'variation' => 'footer', + ), + 'categories' => array( 'tp_footer' ), + 'content' => ' + + + + +
+
+

example@example.com
T. +00 (0)1 22 33 44 55

+
+ + +
+

2, Rue Louis-Boilly
Paris, France

+
+ + +
+
    + + +
+
+
+ + + + + + + +
+ + + +
+
+ + + +
+

Proudly powered by WordPress.

+
+
+ ', + ) +); + diff --git a/packages/block-editor/src/components/inserter/hooks/use-patterns-state.js b/packages/block-editor/src/components/inserter/hooks/use-patterns-state.js index 1b14286c821bf3..40a6850773a7d4 100644 --- a/packages/block-editor/src/components/inserter/hooks/use-patterns-state.js +++ b/packages/block-editor/src/components/inserter/hooks/use-patterns-state.js @@ -7,7 +7,7 @@ import { map } from 'lodash'; * WordPress dependencies */ import { useCallback } from '@wordpress/element'; -import { cloneBlock } from '@wordpress/blocks'; +import { store as blocksStore, cloneBlock } from '@wordpress/blocks'; import { useDispatch, useSelect } from '@wordpress/data'; import { __, sprintf } from '@wordpress/i18n'; import { store as noticesStore } from '@wordpress/notices'; @@ -31,15 +31,68 @@ const usePatternsState = ( onInsert, rootClientId ) => { const { __experimentalGetAllowedPatterns, getSettings } = select( blockEditorStore ); + + const activeTemplatePartId = select( + blockEditorStore + ).__experimentalGetActiveBlockIdByBlockNames( [ + 'core/template-part', + ] ); + + const contextualPatterns = { + patterns: [], + patternCategories: [], + }; + + if ( activeTemplatePartId ) { + const block = select( blockEditorStore ).getBlock( + activeTemplatePartId + ); + const variations = select( blocksStore ).getBlockVariations( + 'core/template-part' + ); + + const match = variations.find( ( variation ) => + variation.isActive?.( + block.attributes, + variation.attributes + ) + ); + + const templatePartpatterns = select( + blockEditorStore + ).__experimentalGetScopedBlockPatterns( + 'block', + 'core/template-part' + ); + + const contextualInserterPatterns = templatePartpatterns.filter( + ( pattern ) => pattern.scope.variation === match?.name + ); + + contextualPatterns.patterns = contextualInserterPatterns; + contextualPatterns.patternCategories = [ + { + name: 'tp_' + match.name, + label: 'Template part: ' + match.name, + }, + ]; + } + const inserterPatterns = __experimentalGetAllowedPatterns( rootClientId ).filter( ( pattern ) => ! pattern.scope || pattern.scope.inserter ); + return { - patterns: inserterPatterns, - patternCategories: getSettings() - .__experimentalBlockPatternCategories, + patterns: [ + ...contextualPatterns.patterns, + ...inserterPatterns, + ], + patternCategories: [ + ...contextualPatterns.patternCategories, + ...getSettings().__experimentalBlockPatternCategories, + ], }; }, [ rootClientId ] From 9636b08c0b01f7a089ae47101b8491cfa5c4a094 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Fri, 5 Mar 2021 14:32:03 -0500 Subject: [PATCH 2/3] update category name and label to use block name and block label --- lib/block-patterns.php | 4 ++-- .../inserter/hooks/use-patterns-state.js | 19 ++++++++++++++----- 2 files changed, 16 insertions(+), 7 deletions(-) diff --git a/lib/block-patterns.php b/lib/block-patterns.php index 31b197fdf08a3f..dd5dc836389589 100644 --- a/lib/block-patterns.php +++ b/lib/block-patterns.php @@ -72,7 +72,7 @@ 'block' => array( 'core/template-part' ), 'variation' => 'header', ), - 'categories' => array( 'tp_header' ), + 'categories' => array( 'core/template-part_header' ), 'content' => ' @@ -106,7 +106,7 @@ 'block' => array( 'core/template-part' ), 'variation' => 'footer', ), - 'categories' => array( 'tp_footer' ), + 'categories' => array( 'core/template-part_footer' ), 'content' => ' diff --git a/packages/block-editor/src/components/inserter/hooks/use-patterns-state.js b/packages/block-editor/src/components/inserter/hooks/use-patterns-state.js index 40a6850773a7d4..6e031764f4d10c 100644 --- a/packages/block-editor/src/components/inserter/hooks/use-patterns-state.js +++ b/packages/block-editor/src/components/inserter/hooks/use-patterns-state.js @@ -7,7 +7,12 @@ import { map } from 'lodash'; * WordPress dependencies */ import { useCallback } from '@wordpress/element'; -import { store as blocksStore, cloneBlock } from '@wordpress/blocks'; +import { + store as blocksStore, + cloneBlock, + __experimentalGetBlockLabel as getBlockLabel, + getBlockType, +} from '@wordpress/blocks'; import { useDispatch, useSelect } from '@wordpress/data'; import { __, sprintf } from '@wordpress/i18n'; import { store as noticesStore } from '@wordpress/notices'; @@ -51,7 +56,7 @@ const usePatternsState = ( onInsert, rootClientId ) => { 'core/template-part' ); - const match = variations.find( ( variation ) => + const activeVariation = variations.find( ( variation ) => variation.isActive?.( block.attributes, variation.attributes @@ -66,14 +71,18 @@ const usePatternsState = ( onInsert, rootClientId ) => { ); const contextualInserterPatterns = templatePartpatterns.filter( - ( pattern ) => pattern.scope.variation === match?.name + ( pattern ) => + pattern.scope.variation === activeVariation?.name ); contextualPatterns.patterns = contextualInserterPatterns; contextualPatterns.patternCategories = [ { - name: 'tp_' + match.name, - label: 'Template part: ' + match.name, + name: `${ block.name }_` + activeVariation.name, + label: getBlockLabel( + getBlockType( block.name ), + block.attributes + ), }, ]; } From 36e828ea7c1b342cf980db389b882310c5e2ee3e Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Mon, 8 Mar 2021 17:52:38 -0500 Subject: [PATCH 3/3] try replace all template parts inner blocks when pattern is for template part block --- .../inserter/hooks/use-insertion-point.js | 18 ++++++++-- .../inserter/hooks/use-patterns-state.js | 36 +++++++++++++++---- .../src/components/inserter/menu.js | 16 +++++++-- 3 files changed, 60 insertions(+), 10 deletions(-) diff --git a/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js b/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js index 069b33f6bc0ac9..e180424c449283 100644 --- a/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js +++ b/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js @@ -106,10 +106,24 @@ function useInsertionPoint( { } = useDispatch( blockEditorStore ); const onInsertBlocks = useCallback( - ( blocks, meta, shouldForceFocusBlock = false ) => { + ( + blocks, + meta, + shouldForceFocusBlock = false, + __experimentalReplaceInnerBlocks = false, + innerBlocksToReplace = [] + ) => { const selectedBlock = getSelectedBlock(); - if ( + if ( __experimentalReplaceInnerBlocks ) { + replaceBlocks( + innerBlocksToReplace, + blocks, + null, + shouldFocusBlock || shouldForceFocusBlock ? 0 : null, + meta + ); + } else if ( ! isAppender && selectedBlock && isUnmodifiedDefaultBlock( selectedBlock ) diff --git a/packages/block-editor/src/components/inserter/hooks/use-patterns-state.js b/packages/block-editor/src/components/inserter/hooks/use-patterns-state.js index 6e031764f4d10c..6d776dc1f36e51 100644 --- a/packages/block-editor/src/components/inserter/hooks/use-patterns-state.js +++ b/packages/block-editor/src/components/inserter/hooks/use-patterns-state.js @@ -31,13 +31,18 @@ import { store as blockEditorStore } from '../../../store'; * @return {Array} Returns the patterns state. (patterns, categories, onSelect handler) */ const usePatternsState = ( onInsert, rootClientId ) => { - const { patternCategories, patterns } = useSelect( + const { + patternCategories, + patterns, + activeTemplatePartId, + innerBlocksToReplace, + } = useSelect( ( select ) => { const { __experimentalGetAllowedPatterns, getSettings } = select( blockEditorStore ); - const activeTemplatePartId = select( + const _activeTemplatePartId = select( blockEditorStore ).__experimentalGetActiveBlockIdByBlockNames( [ 'core/template-part', @@ -48,9 +53,9 @@ const usePatternsState = ( onInsert, rootClientId ) => { patternCategories: [], }; - if ( activeTemplatePartId ) { + if ( _activeTemplatePartId ) { const block = select( blockEditorStore ).getBlock( - activeTemplatePartId + _activeTemplatePartId ); const variations = select( blocksStore ).getBlockVariations( 'core/template-part' @@ -102,15 +107,28 @@ const usePatternsState = ( onInsert, rootClientId ) => { ...contextualPatterns.patternCategories, ...getSettings().__experimentalBlockPatternCategories, ], + activeTemplatePartId: _activeTemplatePartId, + innerBlocksToReplace: _activeTemplatePartId + ? select( blockEditorStore ) + .getBlocks( _activeTemplatePartId ) + .map( ( item ) => item.clientId ) + : [], }; }, [ rootClientId ] ); const { createSuccessNotice } = useDispatch( noticesStore ); const onClickPattern = useCallback( ( pattern, blocks ) => { + const shouldReplaceInnerBlocks = + !! activeTemplatePartId && + pattern.scope?.block?.includes( 'core/template-part' ); + onInsert( map( blocks, ( block ) => cloneBlock( block ) ), - pattern.name + pattern.name, + false, + shouldReplaceInnerBlocks, + innerBlocksToReplace ); createSuccessNotice( sprintf( @@ -124,7 +142,13 @@ const usePatternsState = ( onInsert, rootClientId ) => { ); }, [] ); - return [ patterns, patternCategories, onClickPattern ]; + return [ + patterns, + patternCategories, + onClickPattern, + activeTemplatePartId, + innerBlocksToReplace, + ]; }; export default usePatternsState; diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index d18973d1d37dbb..08191b1a8beceb 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -75,8 +75,20 @@ function InserterMenu( { ); const onInsertPattern = useCallback( - ( blocks, patternName ) => { - onInsertBlocks( blocks, { patternName } ); + ( + blocks, + patternName, + shouldForceFocusBlock, + shouldReplaceInnerBlocks, + innerBlocksToReplace + ) => { + onInsertBlocks( + blocks, + { patternName }, + shouldForceFocusBlock, + shouldReplaceInnerBlocks, + innerBlocksToReplace + ); onSelect(); }, [ onInsertBlocks, onSelect ]