From 821a1ebb1b5d72e04dac6f5e07300d590c7d1a3f Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Fri, 22 May 2020 17:31:33 -0400 Subject: [PATCH 01/14] initial commit --- packages/block-editor/src/components/inserter/menu.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index a1811e85dba6a..ba57c9d6cc92b 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -200,6 +200,11 @@ function InserterMenu( { /* translators: Patterns tab title in the block inserter. */ title: __( 'Patterns' ), }, + { + name: 'template parts', + /* translators: Template Parts tab title in the block inserter. */ + title: __( 'Template Parts' ), + }, ] } > { ( tab ) => { From 43f1b5118635871950b089b93afa9c3456e8296d Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Fri, 22 May 2020 18:03:56 -0400 Subject: [PATCH 02/14] conditioned behind experiment --- .../src/components/inserter/menu.js | 46 +++++++++++-------- 1 file changed, 27 insertions(+), 19 deletions(-) diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index ba57c9d6cc92b..d15070da6964e 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -41,6 +41,7 @@ function InserterMenu( { getBlockIndex, getBlockSelectionEnd, getBlockOrder, + hasTemplateParts, } = useSelect( ( select ) => { const { @@ -57,6 +58,8 @@ function InserterMenu( { } } return { + hasTemplateParts: getSettings() + .__experimentalEnableFullSiteEditing, hasPatterns: !! getSettings().__experimentalBlockPatterns ?.length, destinationRootClientId: destRootClientId, @@ -172,6 +175,27 @@ function InserterMenu( { ); + const tabsToUse = [ + { + name: 'blocks', + /* translators: Blocks tab title in the block inserter. */ + title: __( 'Blocks' ), + }, + ]; + if ( showPatterns ) { + tabsToUse.push( { + name: 'patterns', + /* translators: Patterns tab title in the block inserter. */ + title: __( 'Patterns' ), + } ); + } + if ( hasTemplateParts ) { + tabsToUse.push( { + name: 'template parts', + /* translators: Template Parts tab title in the block inserter. */ + title: __( 'Template Parts' ), + } ); + } // Disable reason (no-autofocus): The inserter menu is a modal display, not one which // is always visible, and one which already incurs this behavior of autoFocus via // Popover's focusOnMount. @@ -186,26 +210,10 @@ function InserterMenu( { >
- { showPatterns && ( + { tabsToUse.length > 1 && ( { ( tab ) => { if ( tab.name === 'blocks' ) { @@ -215,7 +223,7 @@ function InserterMenu( { } } ) } - { ! showPatterns && blocksTab } + { tabsToUse.length === 1 && blocksTab }
{ showInserterHelpPanel && hoveredItem && (
From 22a11589f0c380ded4ef922a59d2991e9436115b Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Mon, 25 May 2020 13:35:35 -0400 Subject: [PATCH 03/14] create TP component --- packages/block-editor/src/components/inserter/menu.js | 9 +++++++++ .../src/components/inserter/template-parts.js | 7 +++++++ 2 files changed, 16 insertions(+) create mode 100644 packages/block-editor/src/components/inserter/template-parts.js diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index d15070da6964e..ea8bc7412a9f8 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -21,6 +21,7 @@ import InserterSearchForm from './search-form'; import InserterPreviewPanel from './preview-panel'; import InserterBlockList from './block-list'; import BlockPatterns from './block-patterns'; +import TemplateParts from './template-parts'; const stopKeyPropagation = ( event ) => event.stopPropagation(); @@ -175,6 +176,12 @@ function InserterMenu( {
); + const templatePartsTab = ( +
+ +
+ ); + const tabsToUse = [ { name: 'blocks', @@ -218,6 +225,8 @@ function InserterMenu( { { ( tab ) => { if ( tab.name === 'blocks' ) { return blocksTab; + } else if ( tab.name === 'template parts' ) { + return templatePartsTab; } return patternsTab; } } diff --git a/packages/block-editor/src/components/inserter/template-parts.js b/packages/block-editor/src/components/inserter/template-parts.js new file mode 100644 index 0000000000000..4da0e21eabde6 --- /dev/null +++ b/packages/block-editor/src/components/inserter/template-parts.js @@ -0,0 +1,7 @@ +export default function TemplateParts() { + return ( +
+

TPs!!!

+
+ ); +} From 7f1b30a4bf54a8333c6dfbea88ac206296c32b6c Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Mon, 25 May 2020 14:11:57 -0400 Subject: [PATCH 04/14] show previews of each template part --- .../src/components/inserter/template-parts.js | 47 ++++++++++++++++++- 1 file changed, 46 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/inserter/template-parts.js b/packages/block-editor/src/components/inserter/template-parts.js index 4da0e21eabde6..2fc58256cd9f3 100644 --- a/packages/block-editor/src/components/inserter/template-parts.js +++ b/packages/block-editor/src/components/inserter/template-parts.js @@ -1,7 +1,52 @@ +/** + * WordPress dependencies + */ +import { useSelect } from '@wordpress/data'; +import { parse } from '@wordpress/blocks'; +import { useMemo } from '@wordpress/element'; +/** + * Internal dependencies + */ +import BlockPreview from '../block-preview'; + +function TemplatePartItem( { templatePart } ) { + const blocks = useMemo( () => parse( templatePart.content.raw ), [ + templatePart.content.raw, + ] ); + + return ( +
+ +
{ templatePart.slug }
+
+ ); +} + export default function TemplateParts() { + const templateParts = useSelect( ( select ) => { + return select( 'core' ).getEntityRecords( + 'postType', + 'wp_template_part', + { + status: [ 'publish', 'auto-draft' ], + } + ); + }, [] ); + + if ( ! Array.isArray( templateParts ) ) { + return null; + } + return (
-

TPs!!!

+ { templateParts.map( ( templatePart ) => { + return ( + + ); + } ) }
); } From 5372af6e90fc2ec29b1aba2899654995972260ca Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Mon, 25 May 2020 14:19:30 -0400 Subject: [PATCH 05/14] remove early return --- .../src/components/inserter/template-parts.js | 21 ++++++++----------- 1 file changed, 9 insertions(+), 12 deletions(-) diff --git a/packages/block-editor/src/components/inserter/template-parts.js b/packages/block-editor/src/components/inserter/template-parts.js index 2fc58256cd9f3..e05e419e1ce27 100644 --- a/packages/block-editor/src/components/inserter/template-parts.js +++ b/packages/block-editor/src/components/inserter/template-parts.js @@ -33,20 +33,17 @@ export default function TemplateParts() { ); }, [] ); - if ( ! Array.isArray( templateParts ) ) { - return null; - } - return (
- { templateParts.map( ( templatePart ) => { - return ( - - ); - } ) } + { templateParts && + templateParts.map( ( templatePart ) => { + return ( + + ); + } ) }
); } From ff8bcffe4d3db9d1219b2592075d5db855b7e889 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Mon, 25 May 2020 14:58:53 -0400 Subject: [PATCH 06/14] kind of inserting --- .../src/components/inserter/menu.js | 5 ++- .../src/components/inserter/template-parts.js | 36 ++++++++++++++++--- 2 files changed, 36 insertions(+), 5 deletions(-) diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index ea8bc7412a9f8..ca9b3898d1d37 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -178,7 +178,10 @@ function InserterMenu( { const templatePartsTab = (
- +
); diff --git a/packages/block-editor/src/components/inserter/template-parts.js b/packages/block-editor/src/components/inserter/template-parts.js index e05e419e1ce27..7e117fbf938ba 100644 --- a/packages/block-editor/src/components/inserter/template-parts.js +++ b/packages/block-editor/src/components/inserter/template-parts.js @@ -1,28 +1,55 @@ +/** + * External dependencies + */ +import { map } from 'lodash'; + /** * WordPress dependencies */ import { useSelect } from '@wordpress/data'; -import { parse } from '@wordpress/blocks'; +import { parse, cloneBlock } from '@wordpress/blocks'; import { useMemo } from '@wordpress/element'; +import { ENTER, SPACE } from '@wordpress/keycodes'; /** * Internal dependencies */ import BlockPreview from '../block-preview'; -function TemplatePartItem( { templatePart } ) { +function TemplatePartItem( { templatePart, onInsert } ) { + const { id, slug, theme } = templatePart; const blocks = useMemo( () => parse( templatePart.content.raw ), [ templatePart.content.raw, ] ); + const blocksToInsert = useMemo( + () => + parse( + `` + ), + [ id, slug, theme ] + ); + + const onClick = () => + onInsert( map( blocksToInsert, ( block ) => cloneBlock( block ) ) ); + return ( -
+
{ + if ( ENTER === event.keyCode || SPACE === event.keyCode ) { + onClick(); + } + } } + tabIndex={ 0 } + >
{ templatePart.slug }
); } -export default function TemplateParts() { +export default function TemplateParts( { onInsert } ) { const templateParts = useSelect( ( select ) => { return select( 'core' ).getEntityRecords( 'postType', @@ -41,6 +68,7 @@ export default function TemplateParts() { ); } ) } From 932e3559e49150476065c4f9c9cb163873abf02c Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Mon, 25 May 2020 17:19:08 -0400 Subject: [PATCH 07/14] styles --- .../block-editor/src/components/inserter/style.scss | 6 ++++-- .../src/components/inserter/template-parts.js | 11 ++++++++--- 2 files changed, 12 insertions(+), 5 deletions(-) diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss index f7557d631f2bd..4a4b786544ded 100644 --- a/packages/block-editor/src/components/inserter/style.scss +++ b/packages/block-editor/src/components/inserter/style.scss @@ -247,7 +247,8 @@ $block-inserter-tabs-height: 44px; flex-shrink: 0; } -.block-editor-inserter__patterns-item { +.block-editor-inserter__patterns-item, +.block-editor-inserter__template-part-item { border-radius: $radius-block-ui; cursor: pointer; margin-top: $grid-unit-20; @@ -271,7 +272,8 @@ $block-inserter-tabs-height: 44px; } } -.block-editor-inserter__patterns-item-title { +.block-editor-inserter__patterns-item-title, +.block-editor-inserter__template-part-item-title { padding: $grid-unit-05; font-size: 12px; text-align: center; diff --git a/packages/block-editor/src/components/inserter/template-parts.js b/packages/block-editor/src/components/inserter/template-parts.js index 7e117fbf938ba..88a64e67dcf04 100644 --- a/packages/block-editor/src/components/inserter/template-parts.js +++ b/packages/block-editor/src/components/inserter/template-parts.js @@ -14,6 +14,7 @@ import { ENTER, SPACE } from '@wordpress/keycodes'; * Internal dependencies */ import BlockPreview from '../block-preview'; +import InserterPanel from './panel'; function TemplatePartItem( { templatePart, onInsert } ) { const { id, slug, theme } = templatePart; @@ -34,6 +35,7 @@ function TemplatePartItem( { templatePart, onInsert } ) { return (
{ @@ -42,9 +44,12 @@ function TemplatePartItem( { templatePart, onInsert } ) { } } } tabIndex={ 0 } + aria-label={ templatePart.slug } > -
{ templatePart.slug }
+
+ { templatePart.slug } +
); } @@ -61,7 +66,7 @@ export default function TemplateParts( { onInsert } ) { }, [] ); return ( -
+ { templateParts && templateParts.map( ( templatePart ) => { return ( @@ -72,6 +77,6 @@ export default function TemplateParts( { onInsert } ) { /> ); } ) } -
+ ); } From 37ee5ae5eb61eed3979a684142530878e1a94b3d Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Mon, 25 May 2020 18:30:06 -0400 Subject: [PATCH 08/14] better inserting / bug fix --- .../src/components/inserter/template-parts.js | 28 ++++++------------- 1 file changed, 9 insertions(+), 19 deletions(-) diff --git a/packages/block-editor/src/components/inserter/template-parts.js b/packages/block-editor/src/components/inserter/template-parts.js index 88a64e67dcf04..05a317fa040cd 100644 --- a/packages/block-editor/src/components/inserter/template-parts.js +++ b/packages/block-editor/src/components/inserter/template-parts.js @@ -1,13 +1,8 @@ -/** - * External dependencies - */ -import { map } from 'lodash'; - /** * WordPress dependencies */ import { useSelect } from '@wordpress/data'; -import { parse, cloneBlock } from '@wordpress/blocks'; +import { parse, createBlock } from '@wordpress/blocks'; import { useMemo } from '@wordpress/element'; import { ENTER, SPACE } from '@wordpress/keycodes'; /** @@ -18,20 +13,15 @@ import InserterPanel from './panel'; function TemplatePartItem( { templatePart, onInsert } ) { const { id, slug, theme } = templatePart; - const blocks = useMemo( () => parse( templatePart.content.raw ), [ - templatePart.content.raw, - ] ); - - const blocksToInsert = useMemo( - () => - parse( - `` - ), - [ id, slug, theme ] - ); + const content = templatePart.content.raw || ''; + const blocks = useMemo( () => parse( content ), [ content ] ); + const templatePartBlock = createBlock( 'core/template-part', { + postId: id, + slug, + theme, + } ); - const onClick = () => - onInsert( map( blocksToInsert, ( block ) => cloneBlock( block ) ) ); + const onClick = () => onInsert( templatePartBlock ); return (
Date: Tue, 26 May 2020 18:52:28 -0400 Subject: [PATCH 09/14] group by theme --- .../src/components/inserter/template-parts.js | 39 +++++++++++++------ 1 file changed, 27 insertions(+), 12 deletions(-) diff --git a/packages/block-editor/src/components/inserter/template-parts.js b/packages/block-editor/src/components/inserter/template-parts.js index 05a317fa040cd..3b1574daa787e 100644 --- a/packages/block-editor/src/components/inserter/template-parts.js +++ b/packages/block-editor/src/components/inserter/template-parts.js @@ -11,6 +11,11 @@ import { ENTER, SPACE } from '@wordpress/keycodes'; import BlockPreview from '../block-preview'; import InserterPanel from './panel'; +/** + * External dependencies + */ +import { groupBy } from 'lodash'; + function TemplatePartItem( { templatePart, onInsert } ) { const { id, slug, theme } = templatePart; const content = templatePart.content.raw || ''; @@ -55,18 +60,28 @@ export default function TemplateParts( { onInsert } ) { ); }, [] ); + // Group by Theme. + const templatePartsByTheme = useMemo( () => { + return Object.values( groupBy( templateParts, 'meta.theme' ) ); + }, [ templateParts ] ); + return ( - - { templateParts && - templateParts.map( ( templatePart ) => { - return ( - - ); - } ) } - + <> + { templatePartsByTheme.length && + templatePartsByTheme.map( ( templatePartList ) => ( + + { templatePartList.map( ( templatePart ) => ( + + ) ) } + + ) ) } + ); } From 49dce606bda5b4d479c6f878cf4da921b46e8711 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Tue, 26 May 2020 19:08:03 -0400 Subject: [PATCH 10/14] added success notice --- .../src/components/inserter/template-parts.js | 30 ++++++++++++++----- 1 file changed, 22 insertions(+), 8 deletions(-) diff --git a/packages/block-editor/src/components/inserter/template-parts.js b/packages/block-editor/src/components/inserter/template-parts.js index 3b1574daa787e..ba8ce673ec177 100644 --- a/packages/block-editor/src/components/inserter/template-parts.js +++ b/packages/block-editor/src/components/inserter/template-parts.js @@ -1,10 +1,11 @@ /** * WordPress dependencies */ -import { useSelect } from '@wordpress/data'; +import { useSelect, useDispatch } from '@wordpress/data'; import { parse, createBlock } from '@wordpress/blocks'; -import { useMemo } from '@wordpress/element'; +import { useMemo, useCallback } from '@wordpress/element'; import { ENTER, SPACE } from '@wordpress/keycodes'; +import { __, sprintf } from '@wordpress/i18n'; /** * Internal dependencies */ @@ -20,13 +21,26 @@ function TemplatePartItem( { templatePart, onInsert } ) { const { id, slug, theme } = templatePart; const content = templatePart.content.raw || ''; const blocks = useMemo( () => parse( content ), [ content ] ); - const templatePartBlock = createBlock( 'core/template-part', { - postId: id, - slug, - theme, - } ); + const { createSuccessNotice } = useDispatch( 'core/notices' ); - const onClick = () => onInsert( templatePartBlock ); + const onClick = useCallback( () => { + const templatePartBlock = createBlock( 'core/template-part', { + postId: id, + slug, + theme, + } ); + onInsert( templatePartBlock ); + createSuccessNotice( + sprintf( + /* translators: %s: template part title. */ + __( 'Template Part "%s" inserted.' ), + slug + ), + { + type: 'snackbar', + } + ); + }, [ id, slug, theme ] ); return (
Date: Tue, 26 May 2020 19:29:42 -0400 Subject: [PATCH 11/14] set up for search section --- .../src/components/inserter/template-parts.js | 45 ++++++++++++++----- 1 file changed, 34 insertions(+), 11 deletions(-) diff --git a/packages/block-editor/src/components/inserter/template-parts.js b/packages/block-editor/src/components/inserter/template-parts.js index ba8ce673ec177..038f2493854c7 100644 --- a/packages/block-editor/src/components/inserter/template-parts.js +++ b/packages/block-editor/src/components/inserter/template-parts.js @@ -63,17 +63,7 @@ function TemplatePartItem( { templatePart, onInsert } ) { ); } -export default function TemplateParts( { onInsert } ) { - const templateParts = useSelect( ( select ) => { - return select( 'core' ).getEntityRecords( - 'postType', - 'wp_template_part', - { - status: [ 'publish', 'auto-draft' ], - } - ); - }, [] ); - +function TemplatePartsByTheme( { templateParts, onInsert } ) { // Group by Theme. const templatePartsByTheme = useMemo( () => { return Object.values( groupBy( templateParts, 'meta.theme' ) ); @@ -99,3 +89,36 @@ export default function TemplateParts( { onInsert } ) { ); } + +function TemplatePartSearchResults( { templateParts, onInsert, filterValue } ) { + return

I am the search results...

; +} + +export default function TemplateParts( { onInsert, filterValue } ) { + const templateParts = useSelect( ( select ) => { + return select( 'core' ).getEntityRecords( + 'postType', + 'wp_template_part', + { + status: [ 'publish', 'auto-draft' ], + } + ); + }, [] ); + + if ( filterValue ) { + return ( + + ); + } + + return ( + + ); +} From 6892fcda3232c725e7fa403fe0d6d7874708810d Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Tue, 26 May 2020 20:13:58 -0400 Subject: [PATCH 12/14] filtering working --- .../src/components/inserter/template-parts.js | 50 ++++++++++++++++++- 1 file changed, 49 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/inserter/template-parts.js b/packages/block-editor/src/components/inserter/template-parts.js index 038f2493854c7..266d093625af8 100644 --- a/packages/block-editor/src/components/inserter/template-parts.js +++ b/packages/block-editor/src/components/inserter/template-parts.js @@ -91,7 +91,55 @@ function TemplatePartsByTheme( { templateParts, onInsert } ) { } function TemplatePartSearchResults( { templateParts, onInsert, filterValue } ) { - return

I am the search results...

; + const filteredTPs = useMemo( () => { + // Filter based on value. + const lowerFilterValue = filterValue.toLowerCase(); + const thing = templateParts.filter( + ( { slug, meta: { theme } } ) => + slug.toLowerCase().includes( lowerFilterValue ) || + theme.toLowerCase().includes( lowerFilterValue ) + ); + // Order based on value location. + thing.sort( ( a, b ) => { + // First prioritize index found in slug. + const indexInSlugA = a.slug + .toLowerCase() + .indexOf( lowerFilterValue ); + const indexInSlugB = b.slug + .toLowerCase() + .indexOf( lowerFilterValue ); + if ( indexInSlugA !== -1 && indexInSlugB !== -1 ) { + return indexInSlugA - indexInSlugB; + } else if ( indexInSlugA !== -1 ) { + return -1; + } else if ( indexInSlugB !== -1 ) { + return 1; + } + // Second prioritize index found in theme. + return ( + a.meta.theme.toLowerCase().indexOf( lowerFilterValue ) - + b.meta.theme.toLowerCase().indexOf( lowerFilterValue ) + ); + } ); + return thing; + }, [ filterValue, templateParts ] ); + + return ( + <> + { filteredTPs.map( ( templatePart ) => ( + + + + ) ) } + + ); } export default function TemplateParts( { onInsert, filterValue } ) { From d52e5abf627e3353a13a5efd7113ac677f35497e Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Tue, 26 May 2020 20:47:12 -0400 Subject: [PATCH 13/14] placeholders and async list --- .../src/components/inserter/template-parts.js | 50 ++++++++++++++----- 1 file changed, 37 insertions(+), 13 deletions(-) diff --git a/packages/block-editor/src/components/inserter/template-parts.js b/packages/block-editor/src/components/inserter/template-parts.js index 266d093625af8..6d786ab626be6 100644 --- a/packages/block-editor/src/components/inserter/template-parts.js +++ b/packages/block-editor/src/components/inserter/template-parts.js @@ -11,12 +11,19 @@ import { __, sprintf } from '@wordpress/i18n'; */ import BlockPreview from '../block-preview'; import InserterPanel from './panel'; +import useAsyncList from './use-async-list'; /** * External dependencies */ import { groupBy } from 'lodash'; +function TemplatePartPlaceholder() { + return ( +
+ ); +} + function TemplatePartItem( { templatePart, onInsert } ) { const { id, slug, theme } = templatePart; const content = templatePart.content.raw || ''; @@ -64,11 +71,12 @@ function TemplatePartItem( { templatePart, onInsert } ) { } function TemplatePartsByTheme( { templateParts, onInsert } ) { - // Group by Theme. const templatePartsByTheme = useMemo( () => { return Object.values( groupBy( templateParts, 'meta.theme' ) ); }, [ templateParts ] ); + const currentShownTPs = useAsyncList( templateParts ); + return ( <> { templatePartsByTheme.length && @@ -77,13 +85,19 @@ function TemplatePartsByTheme( { templateParts, onInsert } ) { key={ templatePartList[ 0 ].meta.theme } title={ templatePartList[ 0 ].meta.theme } > - { templatePartList.map( ( templatePart ) => ( - - ) ) } + { templatePartList.map( ( templatePart ) => { + return currentShownTPs.includes( templatePart ) ? ( + + ) : ( + + ); + } ) } ) ) } @@ -124,6 +138,8 @@ function TemplatePartSearchResults( { templateParts, onInsert, filterValue } ) { return thing; }, [ filterValue, templateParts ] ); + const currentShownTPs = useAsyncList( filteredTPs ); + return ( <> { filteredTPs.map( ( templatePart ) => ( @@ -131,11 +147,15 @@ function TemplatePartSearchResults( { templateParts, onInsert, filterValue } ) { key={ templatePart.id } title={ templatePart.meta.theme } > - + { currentShownTPs.includes( templatePart ) ? ( + + ) : ( + + ) } ) ) } @@ -153,6 +173,10 @@ export default function TemplateParts( { onInsert, filterValue } ) { ); }, [] ); + if ( ! templateParts || ! templateParts.length ) { + return null; + } + if ( filterValue ) { return ( Date: Tue, 26 May 2020 21:50:09 -0400 Subject: [PATCH 14/14] comment and var name change --- .../src/components/inserter/template-parts.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/block-editor/src/components/inserter/template-parts.js b/packages/block-editor/src/components/inserter/template-parts.js index 6d786ab626be6..d3ffbfdc24b85 100644 --- a/packages/block-editor/src/components/inserter/template-parts.js +++ b/packages/block-editor/src/components/inserter/template-parts.js @@ -26,6 +26,8 @@ function TemplatePartPlaceholder() { function TemplatePartItem( { templatePart, onInsert } ) { const { id, slug, theme } = templatePart; + // The 'raw' property is not defined for a brief period in the save cycle. + // The fallback prevents an error in the parse function while saving. const content = templatePart.content.raw || ''; const blocks = useMemo( () => parse( content ), [ content ] ); const { createSuccessNotice } = useDispatch( 'core/notices' ); @@ -74,7 +76,6 @@ function TemplatePartsByTheme( { templateParts, onInsert } ) { const templatePartsByTheme = useMemo( () => { return Object.values( groupBy( templateParts, 'meta.theme' ) ); }, [ templateParts ] ); - const currentShownTPs = useAsyncList( templateParts ); return ( @@ -108,13 +109,13 @@ function TemplatePartSearchResults( { templateParts, onInsert, filterValue } ) { const filteredTPs = useMemo( () => { // Filter based on value. const lowerFilterValue = filterValue.toLowerCase(); - const thing = templateParts.filter( + const searchResults = templateParts.filter( ( { slug, meta: { theme } } ) => slug.toLowerCase().includes( lowerFilterValue ) || theme.toLowerCase().includes( lowerFilterValue ) ); // Order based on value location. - thing.sort( ( a, b ) => { + searchResults.sort( ( a, b ) => { // First prioritize index found in slug. const indexInSlugA = a.slug .toLowerCase() @@ -135,7 +136,7 @@ function TemplatePartSearchResults( { templateParts, onInsert, filterValue } ) { b.meta.theme.toLowerCase().indexOf( lowerFilterValue ) ); } ); - return thing; + return searchResults; }, [ filterValue, templateParts ] ); const currentShownTPs = useAsyncList( filteredTPs );