From 821a1ebb1b5d72e04dac6f5e07300d590c7d1a3f Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Fri, 22 May 2020 17:31:33 -0400 Subject: [PATCH 01/51] 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/51] 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/51] 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/51] 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/51] 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/51] 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/51] 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/51] 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/51] 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/51] 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/51] 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/51] 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/51] 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/51] 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 ); From 86b9b322172115d2dcf30386e632f18ed6195d64 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Thu, 28 May 2020 18:14:26 -0400 Subject: [PATCH 15/51] initial From 1776c99e950cbae6b40ab8254103633ff820a101 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Thu, 28 May 2020 19:05:29 -0400 Subject: [PATCH 16/51] moving stuff over --- packages/block-library/package.json | 1 + .../edit/template-part-previews.js | 214 ++++++++++++++++++ .../src/template-part/edit/use-async-list.js | 82 +++++++ 3 files changed, 297 insertions(+) create mode 100644 packages/block-library/src/template-part/edit/template-part-previews.js create mode 100644 packages/block-library/src/template-part/edit/use-async-list.js diff --git a/packages/block-library/package.json b/packages/block-library/package.json index b72612e963107..1cefff404d362 100644 --- a/packages/block-library/package.json +++ b/packages/block-library/package.json @@ -46,6 +46,7 @@ "@wordpress/is-shallow-equal": "file:../is-shallow-equal", "@wordpress/keycodes": "file:../keycodes", "@wordpress/primitives": "file:../primitives", + "@wordpress/priority-queue": "file:../priority-queue", "@wordpress/rich-text": "file:../rich-text", "@wordpress/server-side-render": "file:../server-side-render", "@wordpress/url": "file:../url", diff --git a/packages/block-library/src/template-part/edit/template-part-previews.js b/packages/block-library/src/template-part/edit/template-part-previews.js new file mode 100644 index 0000000000000..fda2d4af62c4d --- /dev/null +++ b/packages/block-library/src/template-part/edit/template-part-previews.js @@ -0,0 +1,214 @@ +/** + * WordPress dependencies + */ +import { useSelect, useDispatch } from '@wordpress/data'; +import { parse, createBlock } from '@wordpress/blocks'; +import { useMemo, useCallback } from '@wordpress/element'; +import { ENTER, SPACE } from '@wordpress/keycodes'; +import { __, sprintf } from '@wordpress/i18n'; +import { BlockPreview } from '@wordpress/block-editor'; +import { Icon } from '@wordpress/components'; + +/** + * Internal dependencies + */ +import useAsyncList from './use-async-list'; + +/** + * External dependencies + */ +import { groupBy } from 'lodash'; + +function TemplatePartPlaceholder() { + return ( +
+ ); +} + +function InserterPanel( { title, icon, children } ) { + return ( + <> +
+ + { title } + + +
+
+ { children } +
+ + ); +} + +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' ); + + 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 ( +
{ + if ( ENTER === event.keyCode || SPACE === event.keyCode ) { + onClick(); + } + } } + tabIndex={ 0 } + aria-label={ templatePart.slug } + > + +
+ { templatePart.slug } +
+
+ ); +} + +function TemplatePartsByTheme( { templateParts, onInsert } ) { + const templatePartsByTheme = useMemo( () => { + return Object.values( groupBy( templateParts, 'meta.theme' ) ); + }, [ templateParts ] ); + const currentShownTPs = useAsyncList( templateParts ); + + return ( + <> + { templatePartsByTheme.length && + templatePartsByTheme.map( ( templatePartList ) => ( + + { templatePartList.map( ( templatePart ) => { + return currentShownTPs.includes( templatePart ) ? ( + + ) : ( + + ); + } ) } + + ) ) } + + ); +} + +function TemplatePartSearchResults( { templateParts, onInsert, filterValue } ) { + const filteredTPs = useMemo( () => { + // Filter based on value. + const lowerFilterValue = filterValue.toLowerCase(); + const searchResults = templateParts.filter( + ( { slug, meta: { theme } } ) => + slug.toLowerCase().includes( lowerFilterValue ) || + theme.toLowerCase().includes( lowerFilterValue ) + ); + // Order based on value location. + searchResults.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 searchResults; + }, [ filterValue, templateParts ] ); + + const currentShownTPs = useAsyncList( filteredTPs ); + + return ( + <> + { filteredTPs.map( ( templatePart ) => ( + + { currentShownTPs.includes( templatePart ) ? ( + + ) : ( + + ) } + + ) ) } + + ); +} + +export default function TemplateParts( { onInsert, filterValue } ) { + const templateParts = useSelect( ( select ) => { + return select( 'core' ).getEntityRecords( + 'postType', + 'wp_template_part', + { + status: [ 'publish', 'auto-draft' ], + } + ); + }, [] ); + + if ( ! templateParts || ! templateParts.length ) { + return null; + } + + if ( filterValue ) { + return ( + + ); + } + + return ( + + ); +} diff --git a/packages/block-library/src/template-part/edit/use-async-list.js b/packages/block-library/src/template-part/edit/use-async-list.js new file mode 100644 index 0000000000000..3189cd3a00868 --- /dev/null +++ b/packages/block-library/src/template-part/edit/use-async-list.js @@ -0,0 +1,82 @@ +/** + * WordPress dependencies + */ +import { useEffect, useReducer } from '@wordpress/element'; +import { createQueue } from '@wordpress/priority-queue'; + +/** + * Returns the first items from list that are present on state. + * + * @param {Array} list New array. + * @param {Array} state Current state. + * @return {Array} First items present iin state. + */ +function getFirstItemsPresentInState( list, state ) { + const firstItems = []; + + for ( let i = 0; i < list.length; i++ ) { + const item = list[ i ]; + if ( ! state.includes( item ) ) { + break; + } + + firstItems.push( item ); + } + + return firstItems; +} + +/** + * Reducer keeping track of a list of appended items. + * + * @param {Array} state Current state + * @param {Object} action Action + * + * @return {Array} update state. + */ +function listReducer( state, action ) { + if ( action.type === 'reset' ) { + return action.list; + } + + if ( action.type === 'append' ) { + return [ ...state, action.item ]; + } + + return state; +} + +/** + * React hook returns an array which items get asynchronously appended from a source array. + * This behavior is useful if we want to render a list of items asynchronously for performance reasons. + * + * @param {Array} list Source array. + * @return {Array} Async array. + */ +function useAsyncList( list ) { + const [ current, dispatch ] = useReducer( listReducer, [] ); + + useEffect( () => { + // On reset, we keep the first items that were previously rendered. + const firstItems = getFirstItemsPresentInState( list, current ); + dispatch( { + type: 'reset', + list: firstItems, + } ); + const asyncQueue = createQueue(); + const append = ( index ) => () => { + if ( list.length <= index ) { + return; + } + dispatch( { type: 'append', item: list[ index ] } ); + asyncQueue.add( {}, append( index + 1 ) ); + }; + asyncQueue.add( {}, append( firstItems.length ) ); + + return () => asyncQueue.reset(); + }, [ list ] ); + + return current; +} + +export default useAsyncList; From 95601e6d31c426d4f58ee1eb1373bd404c87356b Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Thu, 28 May 2020 19:26:54 -0400 Subject: [PATCH 17/51] carried styles, changed classnames --- .../src/template-part/edit/placeholder.js | 7 +++++ .../edit/template-part-previews.js | 4 +-- .../src/template-part/editor.scss | 30 +++++++++++++++++++ 3 files changed, 39 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/template-part/edit/placeholder.js b/packages/block-library/src/template-part/edit/placeholder.js index f3b3f7bc43e48..33594ec9862f4 100644 --- a/packages/block-library/src/template-part/edit/placeholder.js +++ b/packages/block-library/src/template-part/edit/placeholder.js @@ -14,6 +14,12 @@ import { layout } from '@wordpress/icons'; * Internal dependencies */ import useTemplatePartPost from './use-template-part-post'; +import TemplatePartPreviews from './template-part-previews'; + +/** + * External dependencies + */ +import { noop } from 'lodash'; function TemplatePartPreview() { const [ blocks ] = useEntityBlockEditor( 'postType', 'wp_template_part' ); @@ -126,6 +132,7 @@ export default function TemplatePartPlaceholder( { setAttributes } ) { > { postId ? __( 'Choose' ) : __( 'Create' ) } + ); } diff --git a/packages/block-library/src/template-part/edit/template-part-previews.js b/packages/block-library/src/template-part/edit/template-part-previews.js index fda2d4af62c4d..2a9552877bd73 100644 --- a/packages/block-library/src/template-part/edit/template-part-previews.js +++ b/packages/block-library/src/template-part/edit/template-part-previews.js @@ -70,7 +70,7 @@ function TemplatePartItem( { templatePart, onInsert } ) { return (
{ @@ -82,7 +82,7 @@ function TemplatePartItem( { templatePart, onInsert } ) { aria-label={ templatePart.slug } > -
+
{ templatePart.slug }
diff --git a/packages/block-library/src/template-part/editor.scss b/packages/block-library/src/template-part/editor.scss index 2b38d51f999fb..1d95ca08504ce 100644 --- a/packages/block-library/src/template-part/editor.scss +++ b/packages/block-library/src/template-part/editor.scss @@ -22,3 +22,33 @@ font-weight: 600; margin-bottom: 4px; } + +.block-editor-inserter__template-part-item { + border-radius: $radius-block-ui; + cursor: pointer; + margin-top: $grid-unit-20; + transition: all 0.05s ease-in-out; + position: relative; + border: $border-width solid transparent; + + &:hover { + border: $border-width solid $theme-color; + } + + &:focus { + box-shadow: inset 0 0 0 1px $white, 0 0 0 $border-width-focus $theme-color; + + // Windows High Contrast mode will show this outline, but not the box-shadow. + outline: 2px solid transparent; + } + + &.is-placeholder { + min-height: 100px; + } +} + +.block-editor-inserter__template-part-item-title { + padding: $grid-unit-05; + font-size: 12px; + text-align: center; +} From 4d1e3da72f4f39b7dd54f8014fa1d82544f0529b Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Thu, 28 May 2020 19:49:15 -0400 Subject: [PATCH 18/51] more styles for previews --- .../src/template-part/edit/placeholder.js | 4 +++- .../src/template-part/editor.scss | 19 +++++++++++++++++-- 2 files changed, 20 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/template-part/edit/placeholder.js b/packages/block-library/src/template-part/edit/placeholder.js index 33594ec9862f4..e25435b839967 100644 --- a/packages/block-library/src/template-part/edit/placeholder.js +++ b/packages/block-library/src/template-part/edit/placeholder.js @@ -132,7 +132,9 @@ export default function TemplatePartPlaceholder( { setAttributes } ) { > { postId ? __( 'Choose' ) : __( 'Create' ) } - +
+ +
); } diff --git a/packages/block-library/src/template-part/editor.scss b/packages/block-library/src/template-part/editor.scss index 1d95ca08504ce..d795f4c9a3160 100644 --- a/packages/block-library/src/template-part/editor.scss +++ b/packages/block-library/src/template-part/editor.scss @@ -23,7 +23,22 @@ margin-bottom: 4px; } -.block-editor-inserter__template-part-item { +.wp-block-template-part__preview-container { + display: none; + width: 300px; + background: $white; + border-radius: $radius-block-ui; + border: $border-width solid $light-gray-500; + // position: absolute; + top: $grid-unit-20; + left: calc(100% + #{$grid-unit-20}); + + @include break-medium { + display: block; + } +} + +.wp-block-template-part__placeholder-preview-item { border-radius: $radius-block-ui; cursor: pointer; margin-top: $grid-unit-20; @@ -47,7 +62,7 @@ } } -.block-editor-inserter__template-part-item-title { +.wp-block-template-part__placeholder-preview-item-title { padding: $grid-unit-05; font-size: 12px; text-align: center; From 4844fa3db4ddab9a9bc20f01ebebee49c22feb99 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Thu, 28 May 2020 20:23:01 -0400 Subject: [PATCH 19/51] style tweaks --- packages/block-library/src/template-part/editor.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/template-part/editor.scss b/packages/block-library/src/template-part/editor.scss index d795f4c9a3160..e359202d2cd0d 100644 --- a/packages/block-library/src/template-part/editor.scss +++ b/packages/block-library/src/template-part/editor.scss @@ -25,7 +25,9 @@ .wp-block-template-part__preview-container { display: none; - width: 300px; + width: inherit; + max-height: 600px; + overflow-y: scroll; background: $white; border-radius: $radius-block-ui; border: $border-width solid $light-gray-500; From b6c70ad7764ef9a834afcd9af357724bdbbf05cd Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Thu, 28 May 2020 20:50:08 -0400 Subject: [PATCH 20/51] add filter input --- .../src/template-part/edit/placeholder.js | 17 ++++++++++++++++- .../block-library/src/template-part/editor.scss | 4 ++++ 2 files changed, 20 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/template-part/edit/placeholder.js b/packages/block-library/src/template-part/edit/placeholder.js index e25435b839967..7b64ff79f56b9 100644 --- a/packages/block-library/src/template-part/edit/placeholder.js +++ b/packages/block-library/src/template-part/edit/placeholder.js @@ -99,6 +99,9 @@ export default function TemplatePartPlaceholder( { setAttributes } ) { } setAttributes( nextAttributes ); }, [ postId, slug, theme ] ); + + const [ filterValue, setFilterValue ] = useState( '' ); + return ( { postId ? __( 'Choose' ) : __( 'Create' ) } + + +
- +
); diff --git a/packages/block-library/src/template-part/editor.scss b/packages/block-library/src/template-part/editor.scss index e359202d2cd0d..1d2640d650779 100644 --- a/packages/block-library/src/template-part/editor.scss +++ b/packages/block-library/src/template-part/editor.scss @@ -69,3 +69,7 @@ font-size: 12px; text-align: center; } + +.wp-block-template-part__placholder-filter-input { + width: inherit; +} From 1faecf630bde32861665e8a7e50b7b81d966cafd Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Thu, 28 May 2020 20:56:45 -0400 Subject: [PATCH 21/51] revert inserter changes --- .../src/components/inserter/menu.js | 53 +++++-------------- 1 file changed, 14 insertions(+), 39 deletions(-) diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index ca9b3898d1d37..a1811e85dba6a 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -21,7 +21,6 @@ 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(); @@ -42,7 +41,6 @@ function InserterMenu( { getBlockIndex, getBlockSelectionEnd, getBlockOrder, - hasTemplateParts, } = useSelect( ( select ) => { const { @@ -59,8 +57,6 @@ function InserterMenu( { } } return { - hasTemplateParts: getSettings() - .__experimentalEnableFullSiteEditing, hasPatterns: !! getSettings().__experimentalBlockPatterns ?.length, destinationRootClientId: destRootClientId, @@ -176,36 +172,6 @@ function InserterMenu( {
); - const templatePartsTab = ( -
- -
- ); - - 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. @@ -220,22 +186,31 @@ function InserterMenu( { >
- { tabsToUse.length > 1 && ( + { showPatterns && ( { ( tab ) => { if ( tab.name === 'blocks' ) { return blocksTab; - } else if ( tab.name === 'template parts' ) { - return templatePartsTab; } return patternsTab; } } ) } - { tabsToUse.length === 1 && blocksTab } + { ! showPatterns && blocksTab }
{ showInserterHelpPanel && hoveredItem && (
From 5b79c1c4bf284ddc707b9d704ae25fa3779fe2e6 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Thu, 28 May 2020 20:57:29 -0400 Subject: [PATCH 22/51] erm and style tags too --- packages/block-editor/src/components/inserter/style.scss | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss index 4a4b786544ded..f7557d631f2bd 100644 --- a/packages/block-editor/src/components/inserter/style.scss +++ b/packages/block-editor/src/components/inserter/style.scss @@ -247,8 +247,7 @@ $block-inserter-tabs-height: 44px; flex-shrink: 0; } -.block-editor-inserter__patterns-item, -.block-editor-inserter__template-part-item { +.block-editor-inserter__patterns-item { border-radius: $radius-block-ui; cursor: pointer; margin-top: $grid-unit-20; @@ -272,8 +271,7 @@ $block-inserter-tabs-height: 44px; } } -.block-editor-inserter__patterns-item-title, -.block-editor-inserter__template-part-item-title { +.block-editor-inserter__patterns-item-title { padding: $grid-unit-05; font-size: 12px; text-align: center; From 868082487537cd21084a6d672070f022701e6296 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Thu, 28 May 2020 20:58:08 -0400 Subject: [PATCH 23/51] remove unused file --- .../src/components/inserter/template-parts.js | 197 ------------------ 1 file changed, 197 deletions(-) delete mode 100644 packages/block-editor/src/components/inserter/template-parts.js diff --git a/packages/block-editor/src/components/inserter/template-parts.js b/packages/block-editor/src/components/inserter/template-parts.js deleted file mode 100644 index d3ffbfdc24b85..0000000000000 --- a/packages/block-editor/src/components/inserter/template-parts.js +++ /dev/null @@ -1,197 +0,0 @@ -/** - * WordPress dependencies - */ -import { useSelect, useDispatch } from '@wordpress/data'; -import { parse, createBlock } from '@wordpress/blocks'; -import { useMemo, useCallback } from '@wordpress/element'; -import { ENTER, SPACE } from '@wordpress/keycodes'; -import { __, sprintf } from '@wordpress/i18n'; -/** - * Internal dependencies - */ -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; - // 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' ); - - 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 ( -
{ - if ( ENTER === event.keyCode || SPACE === event.keyCode ) { - onClick(); - } - } } - tabIndex={ 0 } - aria-label={ templatePart.slug } - > - -
- { templatePart.slug } -
-
- ); -} - -function TemplatePartsByTheme( { templateParts, onInsert } ) { - const templatePartsByTheme = useMemo( () => { - return Object.values( groupBy( templateParts, 'meta.theme' ) ); - }, [ templateParts ] ); - const currentShownTPs = useAsyncList( templateParts ); - - return ( - <> - { templatePartsByTheme.length && - templatePartsByTheme.map( ( templatePartList ) => ( - - { templatePartList.map( ( templatePart ) => { - return currentShownTPs.includes( templatePart ) ? ( - - ) : ( - - ); - } ) } - - ) ) } - - ); -} - -function TemplatePartSearchResults( { templateParts, onInsert, filterValue } ) { - const filteredTPs = useMemo( () => { - // Filter based on value. - const lowerFilterValue = filterValue.toLowerCase(); - const searchResults = templateParts.filter( - ( { slug, meta: { theme } } ) => - slug.toLowerCase().includes( lowerFilterValue ) || - theme.toLowerCase().includes( lowerFilterValue ) - ); - // Order based on value location. - searchResults.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 searchResults; - }, [ filterValue, templateParts ] ); - - const currentShownTPs = useAsyncList( filteredTPs ); - - return ( - <> - { filteredTPs.map( ( templatePart ) => ( - - { currentShownTPs.includes( templatePart ) ? ( - - ) : ( - - ) } - - ) ) } - - ); -} - -export default function TemplateParts( { onInsert, filterValue } ) { - const templateParts = useSelect( ( select ) => { - return select( 'core' ).getEntityRecords( - 'postType', - 'wp_template_part', - { - status: [ 'publish', 'auto-draft' ], - } - ); - }, [] ); - - if ( ! templateParts || ! templateParts.length ) { - return null; - } - - if ( filterValue ) { - return ( - - ); - } - - return ( - - ); -} From bb025bedf4bb854c60e009ea48aeaf18728bd40b Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Thu, 28 May 2020 22:43:51 -0400 Subject: [PATCH 24/51] insert/selection function updated --- .../src/template-part/edit/placeholder.js | 11 ++++--- .../edit/template-part-previews.js | 29 +++++++++---------- 2 files changed, 19 insertions(+), 21 deletions(-) diff --git a/packages/block-library/src/template-part/edit/placeholder.js b/packages/block-library/src/template-part/edit/placeholder.js index 7b64ff79f56b9..bd55a0fec907e 100644 --- a/packages/block-library/src/template-part/edit/placeholder.js +++ b/packages/block-library/src/template-part/edit/placeholder.js @@ -16,11 +16,6 @@ import { layout } from '@wordpress/icons'; import useTemplatePartPost from './use-template-part-post'; import TemplatePartPreviews from './template-part-previews'; -/** - * External dependencies - */ -import { noop } from 'lodash'; - function TemplatePartPreview() { const [ blocks ] = useEntityBlockEditor( 'postType', 'wp_template_part' ); return ( @@ -100,6 +95,10 @@ export default function TemplatePartPlaceholder( { setAttributes } ) { setAttributes( nextAttributes ); }, [ postId, slug, theme ] ); + const selectTemplate = ( selection ) => { + setAttributes( selection ); + }; + const [ filterValue, setFilterValue ] = useState( '' ); return ( @@ -146,7 +145,7 @@ export default function TemplatePartPlaceholder( { setAttributes } ) {
diff --git a/packages/block-library/src/template-part/edit/template-part-previews.js b/packages/block-library/src/template-part/edit/template-part-previews.js index 2a9552877bd73..df87074525f73 100644 --- a/packages/block-library/src/template-part/edit/template-part-previews.js +++ b/packages/block-library/src/template-part/edit/template-part-previews.js @@ -2,7 +2,7 @@ * WordPress dependencies */ import { useSelect, useDispatch } from '@wordpress/data'; -import { parse, createBlock } from '@wordpress/blocks'; +import { parse } from '@wordpress/blocks'; import { useMemo, useCallback } from '@wordpress/element'; import { ENTER, SPACE } from '@wordpress/keycodes'; import { __, sprintf } from '@wordpress/i18n'; @@ -41,7 +41,7 @@ function InserterPanel( { title, icon, children } ) { ); } -function TemplatePartItem( { templatePart, onInsert } ) { +function TemplatePartItem( { templatePart, selectTemplate } ) { 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. @@ -50,12 +50,7 @@ function TemplatePartItem( { templatePart, onInsert } ) { const { createSuccessNotice } = useDispatch( 'core/notices' ); const onClick = useCallback( () => { - const templatePartBlock = createBlock( 'core/template-part', { - postId: id, - slug, - theme, - } ); - onInsert( templatePartBlock ); + selectTemplate( { postId: id, slug, theme } ); createSuccessNotice( sprintf( /* translators: %s: template part title. */ @@ -89,7 +84,7 @@ function TemplatePartItem( { templatePart, onInsert } ) { ); } -function TemplatePartsByTheme( { templateParts, onInsert } ) { +function TemplatePartsByTheme( { templateParts, selectTemplate } ) { const templatePartsByTheme = useMemo( () => { return Object.values( groupBy( templateParts, 'meta.theme' ) ); }, [ templateParts ] ); @@ -108,7 +103,7 @@ function TemplatePartsByTheme( { templateParts, onInsert } ) { ) : ( { // Filter based on value. const lowerFilterValue = filterValue.toLowerCase(); @@ -169,7 +168,7 @@ function TemplatePartSearchResults( { templateParts, onInsert, filterValue } ) { ) : ( @@ -180,7 +179,7 @@ function TemplatePartSearchResults( { templateParts, onInsert, filterValue } ) { ); } -export default function TemplateParts( { onInsert, filterValue } ) { +export default function TemplateParts( { selectTemplate, filterValue } ) { const templateParts = useSelect( ( select ) => { return select( 'core' ).getEntityRecords( 'postType', @@ -199,7 +198,7 @@ export default function TemplateParts( { onInsert, filterValue } ) { return ( ); @@ -208,7 +207,7 @@ export default function TemplateParts( { onInsert, filterValue } ) { return ( ); } From 6416e82455fa391ddfd4e4f8e6acf2c11e2c9d42 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Thu, 28 May 2020 23:11:52 -0400 Subject: [PATCH 25/51] remove old preview --- .../src/template-part/edit/placeholder.js | 43 +------------------ .../src/template-part/editor.scss | 15 ------- 2 files changed, 1 insertion(+), 57 deletions(-) diff --git a/packages/block-library/src/template-part/edit/placeholder.js b/packages/block-library/src/template-part/edit/placeholder.js index bd55a0fec907e..17490458c6a72 100644 --- a/packages/block-library/src/template-part/edit/placeholder.js +++ b/packages/block-library/src/template-part/edit/placeholder.js @@ -1,11 +1,9 @@ /** * WordPress dependencies */ -import { useEntityBlockEditor, EntityProvider } from '@wordpress/core-data'; import { __ } from '@wordpress/i18n'; -import { BlockPreview } from '@wordpress/block-editor'; import { useState, useCallback } from '@wordpress/element'; -import { useSelect, useDispatch } from '@wordpress/data'; +import { useDispatch } from '@wordpress/data'; import { cleanForSlug } from '@wordpress/url'; import { Placeholder, TextControl, Button } from '@wordpress/components'; import { layout } from '@wordpress/icons'; @@ -16,18 +14,6 @@ import { layout } from '@wordpress/icons'; import useTemplatePartPost from './use-template-part-post'; import TemplatePartPreviews from './template-part-previews'; -function TemplatePartPreview() { - const [ blocks ] = useEntityBlockEditor( 'postType', 'wp_template_part' ); - return ( -
-
- { __( 'Preview' ) } -
- -
- ); -} - export default function TemplatePartPlaceholder( { setAttributes } ) { const [ slug, _setSlug ] = useState( '' ); const [ theme, setTheme ] = useState( '' ); @@ -36,32 +22,6 @@ export default function TemplatePartPlaceholder( { setAttributes } ) { // Try to find an existing template part. const postId = useTemplatePartPost( null, slug, theme ); - // If found, get its preview. - const preview = useSelect( - ( select ) => { - if ( ! postId ) { - return; - } - const templatePart = select( 'core' ).getEntityRecord( - 'postType', - 'wp_template_part', - postId - ); - if ( templatePart ) { - return ( - - - - ); - } - }, - [ postId ] - ); - const setSlug = useCallback( ( nextSlug ) => { _setSlug( nextSlug ); setHelp( cleanForSlug( nextSlug ) ); @@ -126,7 +86,6 @@ export default function TemplatePartPlaceholder( { setAttributes } ) { className="wp-block-template-part__placeholder-input" />
- { preview } + + ); + const selectTab = ( + <>
+ + ); + + return ( + + + { ( tab ) => { + if ( tab.name === 'create' ) { + return createTab; + } + return selectTab; + } } + ); } From 616306a1b5685ebb666f4d1cc59e956c409eb478 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Fri, 29 May 2020 13:03:40 -0400 Subject: [PATCH 27/51] carried over styles, updated class name --- .../src/template-part/edit/placeholder.js | 2 +- .../src/template-part/editor.scss | 23 +++++++++++++++++++ 2 files changed, 24 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/template-part/edit/placeholder.js b/packages/block-library/src/template-part/edit/placeholder.js index 3b175685e41ff..4c4351582b7fe 100644 --- a/packages/block-library/src/template-part/edit/placeholder.js +++ b/packages/block-library/src/template-part/edit/placeholder.js @@ -117,7 +117,7 @@ export default function TemplatePartPlaceholder( { setAttributes } ) { return ( Date: Fri, 29 May 2020 13:15:34 -0400 Subject: [PATCH 28/51] more style edits, dont hide preview on small width --- packages/block-library/src/template-part/editor.scss | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/packages/block-library/src/template-part/editor.scss b/packages/block-library/src/template-part/editor.scss index c6bf7a4817c6c..9407d77524fdf 100644 --- a/packages/block-library/src/template-part/editor.scss +++ b/packages/block-library/src/template-part/editor.scss @@ -9,20 +9,14 @@ } .wp-block-template-part__preview-container { - display: none; width: inherit; max-height: 600px; overflow-y: scroll; background: $white; border-radius: $radius-block-ui; border: $border-width solid $light-gray-500; - // position: absolute; top: $grid-unit-20; left: calc(100% + #{$grid-unit-20}); - - @include break-medium { - display: block; - } } .wp-block-template-part__placeholder-preview-item { @@ -63,7 +57,6 @@ display: flex; flex-grow: 1; flex-direction: column; - margin-top: -$grid-unit-10; .components-tab-panel__tabs { border-bottom: $border-width solid $light-gray-500; @@ -75,6 +68,7 @@ } .components-tab-panel__tab-content { + margin-top: $grid-unit-20; display: flex; flex-grow: 1; flex-direction: column; From 411db1d877873f530989f557f96d3cb3648009ec Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Fri, 29 May 2020 14:10:14 -0400 Subject: [PATCH 29/51] updated help and guiding phrases --- .../src/template-part/edit/placeholder.js | 97 ++++++++++++------- 1 file changed, 64 insertions(+), 33 deletions(-) diff --git a/packages/block-library/src/template-part/edit/placeholder.js b/packages/block-library/src/template-part/edit/placeholder.js index 4c4351582b7fe..310bb3d0bc7e4 100644 --- a/packages/block-library/src/template-part/edit/placeholder.js +++ b/packages/block-library/src/template-part/edit/placeholder.js @@ -2,7 +2,7 @@ * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { useState, useCallback } from '@wordpress/element'; +import { useState, useCallback, useMemo } from '@wordpress/element'; import { useDispatch } from '@wordpress/data'; import { cleanForSlug } from '@wordpress/url'; import { @@ -19,43 +19,74 @@ import { layout } from '@wordpress/icons'; import useTemplatePartPost from './use-template-part-post'; import TemplatePartPreviews from './template-part-previews'; +const HELP_PHRASES = { + initial: __( + 'Please add a slug and theme name for your new Template Part.' + ), + unavailable: __( + 'Slug and theme combination already in use, please try another.' + ), + available: __( 'This name is available!' ), + error: __( 'Error adding template.' ), +}; + export default function TemplatePartPlaceholder( { setAttributes } ) { const [ slug, _setSlug ] = useState( '' ); - const [ theme, setTheme ] = useState( '' ); - const [ help, setHelp ] = useState(); + const [ theme, _setTheme ] = useState( '' ); + const [ help, setHelp ] = useState( '' ); // Try to find an existing template part. const postId = useTemplatePartPost( null, slug, theme ); - const setSlug = useCallback( ( nextSlug ) => { - _setSlug( nextSlug ); - setHelp( cleanForSlug( nextSlug ) ); - }, [] ); + const setSlug = useCallback( + ( nextSlug ) => { + _setSlug( nextSlug ); + if ( help ) { + setHelp( '' ); + } + }, + [ help ] + ); + + const setTheme = useCallback( + ( nextTheme ) => { + _setTheme( nextTheme ); + if ( help ) { + setHelp( '' ); + } + }, + [ help ] + ); + + const helpPhrase = useMemo( () => { + if ( ! slug || ! theme ) { + return HELP_PHRASES.initial; + } else if ( postId ) { + return HELP_PHRASES.unavailable; + } + + return HELP_PHRASES.available; + }, [ slug, theme, postId ] ); const { saveEntityRecord } = useDispatch( 'core' ); - const onChooseOrCreate = useCallback( async () => { + const onCreate = useCallback( async () => { const nextAttributes = { slug, theme }; - if ( postId !== undefined && postId !== null ) { - // Existing template part found. - nextAttributes.postId = postId; - } else { - // Create a new template part. - try { - const cleanSlug = cleanForSlug( slug ); - const templatePart = await saveEntityRecord( - 'postType', - 'wp_template_part', - { - title: cleanSlug, - status: 'publish', - slug: cleanSlug, - meta: { theme }, - } - ); - nextAttributes.postId = templatePart.id; - } catch ( err ) { - setHelp( __( 'Error adding template.' ) ); - } + // Create a new template part. + try { + const cleanSlug = cleanForSlug( slug ); + const templatePart = await saveEntityRecord( + 'postType', + 'wp_template_part', + { + title: cleanSlug, + status: 'publish', + slug: cleanSlug, + meta: { theme }, + } + ); + nextAttributes.postId = templatePart.id; + } catch ( err ) { + setHelp( HELP_PHRASES.error ); } setAttributes( nextAttributes ); }, [ postId, slug, theme ] ); @@ -74,7 +105,6 @@ export default function TemplatePartPlaceholder( { setAttributes } ) { placeholder={ __( 'header' ) } value={ slug } onChange={ setSlug } - help={ help } className="wp-block-template-part__placeholder-input" />
+
{ help || helpPhrase }
); From 2086843b157dd03cd78b4add28b0bd76386c8621 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Fri, 29 May 2020 14:58:28 -0400 Subject: [PATCH 30/51] more classNames, styles, and refactoring --- .../src/template-part/edit/placeholder.js | 9 +- .../edit/template-part-previews.js | 8 +- .../src/template-part/editor.scss | 134 +++++++++++------- 3 files changed, 91 insertions(+), 60 deletions(-) diff --git a/packages/block-library/src/template-part/edit/placeholder.js b/packages/block-library/src/template-part/edit/placeholder.js index 310bb3d0bc7e4..711459ecea71c 100644 --- a/packages/block-library/src/template-part/edit/placeholder.js +++ b/packages/block-library/src/template-part/edit/placeholder.js @@ -115,11 +115,14 @@ export default function TemplatePartPlaceholder( { setAttributes } ) { className="wp-block-template-part__placeholder-input" />
-
{ help || helpPhrase }
+
+ { help || helpPhrase } +
@@ -133,10 +136,10 @@ export default function TemplatePartPlaceholder( { setAttributes } ) { placeholder={ __( 'header' ) } value={ filterValue } onChange={ setFilterValue } - className="wp-block-template-part__placholder-filter-input" + className="wp-block-template-part__placeholder-preview-filter-input" /> -
+
+
); } function InserterPanel( { title, icon, children } ) { return ( <> -
- +
+ { title }
-
+
{ children }
diff --git a/packages/block-library/src/template-part/editor.scss b/packages/block-library/src/template-part/editor.scss index 9407d77524fdf..13f25818d329d 100644 --- a/packages/block-library/src/template-part/editor.scss +++ b/packages/block-library/src/template-part/editor.scss @@ -1,14 +1,51 @@ -.wp-block-template-part__placeholder-input-container { + +.wp-block-template-part__tabs { display: flex; - flex-wrap: wrap; - width: 100%; -} + flex-grow: 1; + flex-direction: column; + + .components-tab-panel__tabs { + border-bottom: $border-width solid $light-gray-500; + + .components-tab-panel__tabs-item { + flex-grow: 1; + margin-bottom: -$border-width; + } + } + + .components-tab-panel__tab-content { + margin-top: $grid-unit-20; + display: flex; + flex-grow: 1; + flex-direction: column; + position: relative; + } -.wp-block-template-part__placeholder-input { - margin: 5px; + .wp-block-template-part__placeholder-input-container { + display: flex; + flex-wrap: wrap; + width: 100%; + + .wp-block-template-part__placeholder-input { + margin: 5px; + } + } + + .wp-block-template-part__help-phrase { + padding: 0 $grid-unit-15 $grid-unit-15; + } + + .wp-block-template-part__create-button { + align-self: flex-start; + } + + .wp-block-template-part__placeholder-preview-filter-input { + width: inherit; + } } -.wp-block-template-part__preview-container { + +.wp-block-template-part__placeholder-preview-container { width: inherit; max-height: 600px; overflow-y: scroll; @@ -17,61 +54,52 @@ border: $border-width solid $light-gray-500; top: $grid-unit-20; left: calc(100% + #{$grid-unit-20}); -} -.wp-block-template-part__placeholder-preview-item { - border-radius: $radius-block-ui; - cursor: pointer; - margin-top: $grid-unit-20; - transition: all 0.05s ease-in-out; - position: relative; - border: $border-width solid transparent; - - &:hover { - border: $border-width solid $theme-color; - } - - &:focus { - box-shadow: inset 0 0 0 1px $white, 0 0 0 $border-width-focus $theme-color; + .wp-block-template-part__placeholder-preview-item { + border-radius: $radius-block-ui; + cursor: pointer; + margin-top: $grid-unit-20; + transition: all 0.05s ease-in-out; + position: relative; + border: $border-width solid transparent; - // Windows High Contrast mode will show this outline, but not the box-shadow. - outline: 2px solid transparent; - } + &:hover { + border: $border-width solid $theme-color; + } - &.is-placeholder { - min-height: 100px; - } -} + &:focus { + box-shadow: inset 0 0 0 1px $white, 0 0 0 $border-width-focus $theme-color; -.wp-block-template-part__placeholder-preview-item-title { - padding: $grid-unit-05; - font-size: 12px; - text-align: center; -} + // Windows High Contrast mode will show this outline, but not the box-shadow. + outline: 2px solid transparent; + } -.wp-block-template-part__placholder-filter-input { - width: inherit; -} + &.is-placeholder { + min-height: 100px; + } + } -.wp-block-template-part__tabs { - display: flex; - flex-grow: 1; - flex-direction: column; + .wp-block-template-part__placeholder-preview-item-title { + padding: $grid-unit-05; + font-size: 12px; + text-align: center; + } - .components-tab-panel__tabs { - border-bottom: $border-width solid $light-gray-500; + .wp-block-template-part__placeholder-panel-header { + display: inline-flex; + align-items: center; + padding: $grid-unit-20 $grid-unit-20 0; + } - .components-tab-panel__tabs-item { - flex-grow: 1; - margin-bottom: -$border-width; - } + .wp-block-template-part__placeholder-panel-content { + padding: 0 $grid-unit-20; } - .components-tab-panel__tab-content { - margin-top: $grid-unit-20; - display: flex; - flex-grow: 1; - flex-direction: column; - position: relative; + .wp-block-template-part__placeholder-panel-title { + color: $theme-color; + text-transform: uppercase; + font-size: 11px; + font-weight: 500; + margin-right: $grid-unit-10; } } From 50051aa23bf1aa62cf2dff37eef263885dedfa14 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Fri, 29 May 2020 15:03:05 -0400 Subject: [PATCH 31/51] change 'slug' to 'name' in editor --- .../block-library/src/template-part/edit/placeholder.js | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/packages/block-library/src/template-part/edit/placeholder.js b/packages/block-library/src/template-part/edit/placeholder.js index 711459ecea71c..e5042cd56ada3 100644 --- a/packages/block-library/src/template-part/edit/placeholder.js +++ b/packages/block-library/src/template-part/edit/placeholder.js @@ -20,11 +20,9 @@ import useTemplatePartPost from './use-template-part-post'; import TemplatePartPreviews from './template-part-previews'; const HELP_PHRASES = { - initial: __( - 'Please add a slug and theme name for your new Template Part.' - ), + initial: __( 'Please add a name and theme for your new Template Part.' ), unavailable: __( - 'Slug and theme combination already in use, please try another.' + 'Name and theme combination already in use, please try another.' ), available: __( 'This name is available!' ), error: __( 'Error adding template.' ), @@ -101,7 +99,7 @@ export default function TemplatePartPlaceholder( { setAttributes } ) { <>
Date: Fri, 29 May 2020 15:44:34 -0400 Subject: [PATCH 32/51] rename subcomponent --- .../edit/template-part-previews.js | 40 +++++++++---------- .../src/template-part/editor.scss | 6 +-- 2 files changed, 23 insertions(+), 23 deletions(-) diff --git a/packages/block-library/src/template-part/edit/template-part-previews.js b/packages/block-library/src/template-part/edit/template-part-previews.js index 747ac809517e7..9cbfc4f3f5411 100644 --- a/packages/block-library/src/template-part/edit/template-part-previews.js +++ b/packages/block-library/src/template-part/edit/template-part-previews.js @@ -25,22 +25,6 @@ function TemplatePartPlaceholder() { ); } -function InserterPanel( { title, icon, children } ) { - return ( - <> -
- - { title } - - -
-
- { children } -
- - ); -} - function TemplatePartItem( { templatePart, selectTemplate } ) { const { id, slug, theme } = templatePart; // The 'raw' property is not defined for a brief period in the save cycle. @@ -84,6 +68,22 @@ function TemplatePartItem( { templatePart, selectTemplate } ) { ); } +function PanelGroup( { title, icon, children } ) { + return ( + <> +
+ + { title } + + +
+
+ { children } +
+ + ); +} + function TemplatePartsByTheme( { templateParts, selectTemplate } ) { const templatePartsByTheme = useMemo( () => { return Object.values( groupBy( templateParts, 'meta.theme' ) ); @@ -94,7 +94,7 @@ function TemplatePartsByTheme( { templateParts, selectTemplate } ) { <> { templatePartsByTheme.length && templatePartsByTheme.map( ( templatePartList ) => ( - @@ -111,7 +111,7 @@ function TemplatePartsByTheme( { templateParts, selectTemplate } ) { /> ); } ) } - + ) ) } ); @@ -160,7 +160,7 @@ function TemplatePartSearchResults( { return ( <> { filteredTPs.map( ( templatePart ) => ( - @@ -173,7 +173,7 @@ function TemplatePartSearchResults( { ) : ( ) } - + ) ) } ); diff --git a/packages/block-library/src/template-part/editor.scss b/packages/block-library/src/template-part/editor.scss index 13f25818d329d..b2c637e4cb4c3 100644 --- a/packages/block-library/src/template-part/editor.scss +++ b/packages/block-library/src/template-part/editor.scss @@ -85,17 +85,17 @@ text-align: center; } - .wp-block-template-part__placeholder-panel-header { + .wp-block-template-part__placeholder-panel-group-header { display: inline-flex; align-items: center; padding: $grid-unit-20 $grid-unit-20 0; } - .wp-block-template-part__placeholder-panel-content { + .wp-block-template-part__placeholder-panel-group-content { padding: 0 $grid-unit-20; } - .wp-block-template-part__placeholder-panel-title { + .wp-block-template-part__placeholder-panel-group-title { color: $theme-color; text-transform: uppercase; font-size: 11px; From b763adcb72309cca3f13cc598defe09543e5f01b Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Fri, 29 May 2020 15:58:48 -0400 Subject: [PATCH 33/51] updating some e2e's --- .../specs/experiments/multi-entity-editing.test.js | 5 +++++ .../specs/experiments/multi-entity-saving.test.js | 6 ++++++ .../specs/experiments/template-part.test.js | 12 ++++++++++++ 3 files changed, 23 insertions(+) diff --git a/packages/e2e-tests/specs/experiments/multi-entity-editing.test.js b/packages/e2e-tests/specs/experiments/multi-entity-editing.test.js index 2e30dddc13faf..27aaa594e768a 100644 --- a/packages/e2e-tests/specs/experiments/multi-entity-editing.test.js +++ b/packages/e2e-tests/specs/experiments/multi-entity-editing.test.js @@ -76,6 +76,11 @@ const createTemplatePart = async ( ) => { // Create new template part. await insertBlock( 'Template Part' ); + const [ createNewButton ] = await page.$x( + '//button[contains(text(), "Create new")]' + ); + await createNewButton.click(); + await page.keyboard.press( 'Tab' ); await page.keyboard.type( templatePartName ); await page.keyboard.press( 'Tab' ); await page.keyboard.type( themeName ); diff --git a/packages/e2e-tests/specs/experiments/multi-entity-saving.test.js b/packages/e2e-tests/specs/experiments/multi-entity-saving.test.js index 63f547f3e081d..f6a1ebe9c9af6 100644 --- a/packages/e2e-tests/specs/experiments/multi-entity-saving.test.js +++ b/packages/e2e-tests/specs/experiments/multi-entity-saving.test.js @@ -27,6 +27,7 @@ describe( 'Multi-entity save flow', () => { const activatedTemplatePartSelector = `${ templatePartSelector } .block-editor-inner-blocks`; const savePanelSelector = '.entities-saved-states__panel'; const closePanelButtonSelector = 'button[aria-label="Close panel"]'; + const createNewButtonSelector = '//button[contains(text(), "Create new")]'; // Reusable assertions across Post/Site editors. const assertAllBoxesChecked = async () => { @@ -114,6 +115,11 @@ describe( 'Multi-entity save flow', () => { it( 'Should trigger multi-entity save button once template part edited', async () => { // Create new template part. await insertBlock( 'Template Part' ); + const [ createNewButton ] = await page.$x( + createNewButtonSelector + ); + await createNewButton.click(); + await page.keyboard.press( 'Tab' ); await page.keyboard.type( 'test-template-part' ); await page.keyboard.press( 'Tab' ); await page.keyboard.type( 'test-theme' ); diff --git a/packages/e2e-tests/specs/experiments/template-part.test.js b/packages/e2e-tests/specs/experiments/template-part.test.js index 4ef100ee88a6d..b8c171e8e8f32 100644 --- a/packages/e2e-tests/specs/experiments/template-part.test.js +++ b/packages/e2e-tests/specs/experiments/template-part.test.js @@ -108,12 +108,19 @@ describe( 'Template Part', () => { const activatedTemplatePartSelector = `${ templatePartSelector } .block-editor-inner-blocks`; const templatePartButtonSelector = `${ templatePartSelector } button`; const testContentSelector = `//p[contains(., "${ testContent }")]`; + const createNewButtonSelector = + '//button[contains(text(), "Create new")]'; it( 'Should prompt to create when no match found', async () => { await createNewPost(); await disablePrePublishChecks(); // Create new template part. await insertBlock( 'Template Part' ); + const [ createNewButton ] = await page.$x( + createNewButtonSelector + ); + await createNewButton.click(); + await page.keyboard.press( 'Tab' ); await page.keyboard.type( testSlug ); await page.keyboard.press( 'Tab' ); await page.keyboard.type( testTheme ); @@ -142,6 +149,11 @@ describe( 'Template Part', () => { await disablePrePublishChecks(); // Try to insert the template part we created. await insertBlock( 'Template Part' ); + const [ createNewButton ] = await page.$x( + createNewButtonSelector + ); + await createNewButton.click(); + await page.keyboard.press( 'Tab' ); await page.keyboard.type( testSlug ); await page.keyboard.press( 'Tab' ); await page.keyboard.type( testTheme ); From 6d6729ceded34aee4c646cacdb0a25b42e1e28e6 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Mon, 1 Jun 2020 17:55:31 -0400 Subject: [PATCH 34/51] updated first placeholder e2e, skipped ones that need to be rewritten for new design --- .../specs/experiments/template-part.test.js | 26 +++++++------------ 1 file changed, 10 insertions(+), 16 deletions(-) diff --git a/packages/e2e-tests/specs/experiments/template-part.test.js b/packages/e2e-tests/specs/experiments/template-part.test.js index b8c171e8e8f32..25100b01d7934 100644 --- a/packages/e2e-tests/specs/experiments/template-part.test.js +++ b/packages/e2e-tests/specs/experiments/template-part.test.js @@ -106,12 +106,11 @@ describe( 'Template Part', () => { const savePostSelector = '.editor-post-publish-button__button'; const templatePartSelector = '*[data-type="core/template-part"]'; const activatedTemplatePartSelector = `${ templatePartSelector } .block-editor-inner-blocks`; - const templatePartButtonSelector = `${ templatePartSelector } button`; const testContentSelector = `//p[contains(., "${ testContent }")]`; const createNewButtonSelector = '//button[contains(text(), "Create new")]'; - it( 'Should prompt to create when no match found', async () => { + it( 'Should insert new template part on creation', async () => { await createNewPost(); await disablePrePublishChecks(); // Create new template part. @@ -124,27 +123,22 @@ describe( 'Template Part', () => { await page.keyboard.type( testSlug ); await page.keyboard.press( 'Tab' ); await page.keyboard.type( testTheme ); - // Should say 'Create' - const placeholderButton = await page.$( - templatePartButtonSelector - ); - const text = await page.evaluate( - ( element ) => element.textContent, - placeholderButton + await page.keyboard.press( 'Tab' ); + await page.keyboard.press( 'Enter' ); + + const newTemplatePart = await page.waitForSelector( + activatedTemplatePartSelector ); - expect( text ).toBe( 'Create' ); + expect( newTemplatePart ).toBeTruthy(); // Finish creating template part, insert some text, and save. - await page.keyboard.press( 'Tab' ); - await page.keyboard.press( 'Enter' ); - await page.waitForSelector( activatedTemplatePartSelector ); await page.click( templatePartSelector ); await page.keyboard.type( testContent ); await page.click( savePostSelector ); await page.click( entitiesSaveSelector ); } ); - it( 'Should prompt to Choose when match found', async () => { + it.skip( 'Should prompt to Choose when match found', async () => { await createNewPost(); await disablePrePublishChecks(); // Try to insert the template part we created. @@ -164,12 +158,12 @@ describe( 'Template Part', () => { expect( placeholderButton ).not.toBeNull(); } ); - it( 'Should dispaly a preview when match is found', async () => { + it.skip( 'Should dispaly a preview when match is found', async () => { const [ preview ] = await page.$x( testContentSelector ); expect( preview ).toBeTruthy(); } ); - it( 'Should insert the desired template part', async () => { + it.skip( 'Should insert the desired template part', async () => { const [ placeholderButton ] = await page.$x( chooseButtonSelector ); await placeholderButton.click(); await page.waitForSelector( activatedTemplatePartSelector ); From 31a79e481ee99080d2c36abec1be0b4aeaf4d1d3 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Mon, 1 Jun 2020 21:45:09 -0400 Subject: [PATCH 35/51] added new test for preview --- .../e2e-tests/specs/experiments/template-part.test.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/e2e-tests/specs/experiments/template-part.test.js b/packages/e2e-tests/specs/experiments/template-part.test.js index 25100b01d7934..a2fe5918e0140 100644 --- a/packages/e2e-tests/specs/experiments/template-part.test.js +++ b/packages/e2e-tests/specs/experiments/template-part.test.js @@ -138,7 +138,15 @@ describe( 'Template Part', () => { await page.click( entitiesSaveSelector ); } ); - it.skip( 'Should prompt to Choose when match found', async () => { + it( 'Should preview newly added template part', async () => { + await createNewPost(); + // Try to insert the template part we created. + await insertBlock( 'Template Part' ); + const preview = await page.waitForXPath( testContentSelector ); + expect( preview ).toBeTruthy(); + } ); + + it.skip( 'Should preview added template part', async () => { await createNewPost(); await disablePrePublishChecks(); // Try to insert the template part we created. From ac60bfb70dfd43e83ad753425562bc48169a36a5 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Mon, 1 Jun 2020 21:49:57 -0400 Subject: [PATCH 36/51] test for selecting --- .../e2e-tests/specs/experiments/template-part.test.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/packages/e2e-tests/specs/experiments/template-part.test.js b/packages/e2e-tests/specs/experiments/template-part.test.js index a2fe5918e0140..1ec9012969742 100644 --- a/packages/e2e-tests/specs/experiments/template-part.test.js +++ b/packages/e2e-tests/specs/experiments/template-part.test.js @@ -146,6 +146,16 @@ describe( 'Template Part', () => { expect( preview ).toBeTruthy(); } ); + it( 'Should insert template part when preview is selected', async () => { + const [ preview ] = await page.$x( testContentSelector ); + await preview.click(); + await page.waitForSelector( activatedTemplatePartSelector ); + const templatePartContent = await page.waitForXPath( + testContentSelector + ); + expect( templatePartContent ).toBeTruthy(); + } ); + it.skip( 'Should preview added template part', async () => { await createNewPost(); await disablePrePublishChecks(); From 23cb174c05ed88160cf3dfe00167a590ffc95e9f Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Mon, 1 Jun 2020 22:14:07 -0400 Subject: [PATCH 37/51] e2e should be g2g --- .../specs/experiments/template-part.test.js | 30 +++++-------------- 1 file changed, 7 insertions(+), 23 deletions(-) diff --git a/packages/e2e-tests/specs/experiments/template-part.test.js b/packages/e2e-tests/specs/experiments/template-part.test.js index 1ec9012969742..650b25b04a305 100644 --- a/packages/e2e-tests/specs/experiments/template-part.test.js +++ b/packages/e2e-tests/specs/experiments/template-part.test.js @@ -99,8 +99,6 @@ describe( 'Template Part', () => { const testContent = 'some words...'; // Selectors - const chooseButtonSelector = - '//div[contains(@class,"is-selected")]//button[text()="Choose"]'; const entitiesSaveSelector = '.editor-entities-saved-states__save-button'; const savePostSelector = '.editor-post-publish-button__button'; @@ -109,6 +107,8 @@ describe( 'Template Part', () => { const testContentSelector = `//p[contains(., "${ testContent }")]`; const createNewButtonSelector = '//button[contains(text(), "Create new")]'; + const disabledButtonSelector = + '.wp-block-template-part__create-button[disabled]'; it( 'Should insert new template part on creation', async () => { await createNewPost(); @@ -156,10 +156,9 @@ describe( 'Template Part', () => { expect( templatePartContent ).toBeTruthy(); } ); - it.skip( 'Should preview added template part', async () => { + it( 'Should disable create button for slug/theme combo', async () => { await createNewPost(); - await disablePrePublishChecks(); - // Try to insert the template part we created. + // Create new template part. await insertBlock( 'Template Part' ); const [ createNewButton ] = await page.$x( createNewButtonSelector @@ -169,26 +168,11 @@ describe( 'Template Part', () => { await page.keyboard.type( testSlug ); await page.keyboard.press( 'Tab' ); await page.keyboard.type( testTheme ); - // Should say 'Choose' - const placeholderButton = await page.waitForXPath( - chooseButtonSelector - ); - expect( placeholderButton ).not.toBeNull(); - } ); - it.skip( 'Should dispaly a preview when match is found', async () => { - const [ preview ] = await page.$x( testContentSelector ); - expect( preview ).toBeTruthy(); - } ); - - it.skip( 'Should insert the desired template part', async () => { - const [ placeholderButton ] = await page.$x( chooseButtonSelector ); - await placeholderButton.click(); - await page.waitForSelector( activatedTemplatePartSelector ); - const templatePartContent = await page.waitForXPath( - testContentSelector + const disabledButton = await page.waitForSelector( + disabledButtonSelector ); - expect( templatePartContent ).toBeTruthy(); + expect( disabledButton ).toBeTruthy(); } ); } ); } ); From e6d4d66811bfde4a8edeead181e2ca0bf68cf575 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Tue, 2 Jun 2020 22:36:11 -0400 Subject: [PATCH 38/51] package lock --- package-lock.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package-lock.json b/package-lock.json index 0473318676eb7..55484364afec1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9905,6 +9905,7 @@ "@wordpress/is-shallow-equal": "file:packages/is-shallow-equal", "@wordpress/keycodes": "file:packages/keycodes", "@wordpress/primitives": "file:packages/primitives", + "@wordpress/priority-queue": "file:packages/priority-queue", "@wordpress/rich-text": "file:packages/rich-text", "@wordpress/server-side-render": "file:packages/server-side-render", "@wordpress/url": "file:packages/url", From 6c23e015740a63c0f9f17456455233cf832f84a6 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Mon, 8 Jun 2020 19:37:27 -0400 Subject: [PATCH 39/51] move useAsyncList to compose package --- package-lock.json | 3 +- packages/block-editor/package.json | 1 - .../src/components/inserter/block-patterns.js | 3 +- packages/block-library/package.json | 1 - .../edit/template-part-previews.js | 6 +- .../src/template-part/edit/use-async-list.js | 82 ------------------- packages/compose/README.md | 13 +++ packages/compose/package.json | 1 + .../src/hooks/use-async-list/index.js} | 0 packages/compose/src/index.js | 1 + packages/compose/src/index.native.js | 1 + 11 files changed, 19 insertions(+), 93 deletions(-) delete mode 100644 packages/block-library/src/template-part/edit/use-async-list.js rename packages/{block-editor/src/components/inserter/use-async-list.js => compose/src/hooks/use-async-list/index.js} (100%) diff --git a/package-lock.json b/package-lock.json index 55484364afec1..188cc87cb1f7e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9857,7 +9857,6 @@ "@wordpress/is-shallow-equal": "file:packages/is-shallow-equal", "@wordpress/keyboard-shortcuts": "file:packages/keyboard-shortcuts", "@wordpress/keycodes": "file:packages/keycodes", - "@wordpress/priority-queue": "file:packages/priority-queue", "@wordpress/rich-text": "file:packages/rich-text", "@wordpress/shortcode": "file:packages/shortcode", "@wordpress/token-list": "file:packages/token-list", @@ -9905,7 +9904,6 @@ "@wordpress/is-shallow-equal": "file:packages/is-shallow-equal", "@wordpress/keycodes": "file:packages/keycodes", "@wordpress/primitives": "file:packages/primitives", - "@wordpress/priority-queue": "file:packages/priority-queue", "@wordpress/rich-text": "file:packages/rich-text", "@wordpress/server-side-render": "file:packages/server-side-render", "@wordpress/url": "file:packages/url", @@ -10005,6 +10003,7 @@ "@babel/runtime": "^7.9.2", "@wordpress/element": "file:packages/element", "@wordpress/is-shallow-equal": "file:packages/is-shallow-equal", + "@wordpress/priority-queue": "file:packages/priority-queue", "clipboard": "^2.0.1", "lodash": "^4.17.15", "mousetrap": "^1.6.2", diff --git a/packages/block-editor/package.json b/packages/block-editor/package.json index d6dae28ba8a46..b167a239d8555 100644 --- a/packages/block-editor/package.json +++ b/packages/block-editor/package.json @@ -43,7 +43,6 @@ "@wordpress/is-shallow-equal": "file:../is-shallow-equal", "@wordpress/keyboard-shortcuts": "file:../keyboard-shortcuts", "@wordpress/keycodes": "file:../keycodes", - "@wordpress/priority-queue": "file:../priority-queue", "@wordpress/rich-text": "file:../rich-text", "@wordpress/shortcode": "file:../shortcode", "@wordpress/token-list": "file:../token-list", diff --git a/packages/block-editor/src/components/inserter/block-patterns.js b/packages/block-editor/src/components/inserter/block-patterns.js index d92486522d12e..6b8d813c02dda 100644 --- a/packages/block-editor/src/components/inserter/block-patterns.js +++ b/packages/block-editor/src/components/inserter/block-patterns.js @@ -11,12 +11,11 @@ import { parse, cloneBlock } from '@wordpress/blocks'; import { useDispatch, useSelect } from '@wordpress/data'; import { ENTER, SPACE } from '@wordpress/keycodes'; import { __, sprintf, _x } from '@wordpress/i18n'; - +import { useAsyncList } from '@wordpress/compose'; /** * Internal dependencies */ import BlockPreview from '../block-preview'; -import useAsyncList from './use-async-list'; import InserterPanel from './panel'; import { searchItems } from './search-items'; import InserterNoResults from './no-results'; diff --git a/packages/block-library/package.json b/packages/block-library/package.json index 1cefff404d362..b72612e963107 100644 --- a/packages/block-library/package.json +++ b/packages/block-library/package.json @@ -46,7 +46,6 @@ "@wordpress/is-shallow-equal": "file:../is-shallow-equal", "@wordpress/keycodes": "file:../keycodes", "@wordpress/primitives": "file:../primitives", - "@wordpress/priority-queue": "file:../priority-queue", "@wordpress/rich-text": "file:../rich-text", "@wordpress/server-side-render": "file:../server-side-render", "@wordpress/url": "file:../url", diff --git a/packages/block-library/src/template-part/edit/template-part-previews.js b/packages/block-library/src/template-part/edit/template-part-previews.js index 9cbfc4f3f5411..805fd11fd5b09 100644 --- a/packages/block-library/src/template-part/edit/template-part-previews.js +++ b/packages/block-library/src/template-part/edit/template-part-previews.js @@ -8,11 +8,7 @@ import { ENTER, SPACE } from '@wordpress/keycodes'; import { __, sprintf } from '@wordpress/i18n'; import { BlockPreview } from '@wordpress/block-editor'; import { Icon } from '@wordpress/components'; - -/** - * Internal dependencies - */ -import useAsyncList from './use-async-list'; +import { useAsyncList } from '@wordpress/compose'; /** * External dependencies diff --git a/packages/block-library/src/template-part/edit/use-async-list.js b/packages/block-library/src/template-part/edit/use-async-list.js deleted file mode 100644 index 3189cd3a00868..0000000000000 --- a/packages/block-library/src/template-part/edit/use-async-list.js +++ /dev/null @@ -1,82 +0,0 @@ -/** - * WordPress dependencies - */ -import { useEffect, useReducer } from '@wordpress/element'; -import { createQueue } from '@wordpress/priority-queue'; - -/** - * Returns the first items from list that are present on state. - * - * @param {Array} list New array. - * @param {Array} state Current state. - * @return {Array} First items present iin state. - */ -function getFirstItemsPresentInState( list, state ) { - const firstItems = []; - - for ( let i = 0; i < list.length; i++ ) { - const item = list[ i ]; - if ( ! state.includes( item ) ) { - break; - } - - firstItems.push( item ); - } - - return firstItems; -} - -/** - * Reducer keeping track of a list of appended items. - * - * @param {Array} state Current state - * @param {Object} action Action - * - * @return {Array} update state. - */ -function listReducer( state, action ) { - if ( action.type === 'reset' ) { - return action.list; - } - - if ( action.type === 'append' ) { - return [ ...state, action.item ]; - } - - return state; -} - -/** - * React hook returns an array which items get asynchronously appended from a source array. - * This behavior is useful if we want to render a list of items asynchronously for performance reasons. - * - * @param {Array} list Source array. - * @return {Array} Async array. - */ -function useAsyncList( list ) { - const [ current, dispatch ] = useReducer( listReducer, [] ); - - useEffect( () => { - // On reset, we keep the first items that were previously rendered. - const firstItems = getFirstItemsPresentInState( list, current ); - dispatch( { - type: 'reset', - list: firstItems, - } ); - const asyncQueue = createQueue(); - const append = ( index ) => () => { - if ( list.length <= index ) { - return; - } - dispatch( { type: 'append', item: list[ index ] } ); - asyncQueue.add( {}, append( index + 1 ) ); - }; - asyncQueue.add( {}, append( firstItems.length ) ); - - return () => asyncQueue.reset(); - }, [ list ] ); - - return current; -} - -export default useAsyncList; diff --git a/packages/compose/README.md b/packages/compose/README.md index 104199c6ea5c5..087ed6a3cbd17 100644 --- a/packages/compose/README.md +++ b/packages/compose/README.md @@ -119,6 +119,19 @@ _Returns_ - `WPComponent`: Component class with generated display name assigned. +# **useAsyncList** + +React hook returns an array which items get asynchronously appended from a source array. +This behavior is useful if we want to render a list of items asynchronously for performance reasons. + +_Parameters_ + +- _list_ `Array`: Source array. + +_Returns_ + +- `Array`: Async array. + # **useCopyOnClick** Copies the text to the clipboard when the element is clicked. diff --git a/packages/compose/package.json b/packages/compose/package.json index a1802b54fd09e..a3a67db33b739 100644 --- a/packages/compose/package.json +++ b/packages/compose/package.json @@ -26,6 +26,7 @@ "@babel/runtime": "^7.9.2", "@wordpress/element": "file:../element", "@wordpress/is-shallow-equal": "file:../is-shallow-equal", + "@wordpress/priority-queue": "file:../priority-queue", "clipboard": "^2.0.1", "lodash": "^4.17.15", "mousetrap": "^1.6.2", diff --git a/packages/block-editor/src/components/inserter/use-async-list.js b/packages/compose/src/hooks/use-async-list/index.js similarity index 100% rename from packages/block-editor/src/components/inserter/use-async-list.js rename to packages/compose/src/hooks/use-async-list/index.js diff --git a/packages/compose/src/index.js b/packages/compose/src/index.js index a0ac7c7f00350..42a7af7507673 100644 --- a/packages/compose/src/index.js +++ b/packages/compose/src/index.js @@ -21,3 +21,4 @@ export { default as useMediaQuery } from './hooks/use-media-query'; export { default as useReducedMotion } from './hooks/use-reduced-motion'; export { default as useViewportMatch } from './hooks/use-viewport-match'; export { default as useResizeObserver } from './hooks/use-resize-observer'; +export { default as useAsyncList } from './hooks/use-async-list'; diff --git a/packages/compose/src/index.native.js b/packages/compose/src/index.native.js index d1129d4836e3d..eb3181954b025 100644 --- a/packages/compose/src/index.native.js +++ b/packages/compose/src/index.native.js @@ -19,6 +19,7 @@ export { default as useKeyboardShortcut } from './hooks/use-keyboard-shortcut'; export { default as useMediaQuery } from './hooks/use-media-query'; export { default as useReducedMotion } from './hooks/use-reduced-motion'; export { default as useViewportMatch } from './hooks/use-viewport-match'; +export { default as useAsyncList } from './hooks/use-async-list'; // Higher-order components export { default as withPreferredColorScheme } from './higher-order/with-preferred-color-scheme'; From cd7388da3eebcb134ee78a91d02798be4a3edb6f Mon Sep 17 00:00:00 2001 From: Addison Stavlo Date: Tue, 9 Jun 2020 20:40:56 -0400 Subject: [PATCH 40/51] Update packages/block-editor/src/components/inserter/block-patterns.js Co-authored-by: Enrique Piqueras --- packages/block-editor/src/components/inserter/block-patterns.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-editor/src/components/inserter/block-patterns.js b/packages/block-editor/src/components/inserter/block-patterns.js index 6b8d813c02dda..6d9a5871cecc8 100644 --- a/packages/block-editor/src/components/inserter/block-patterns.js +++ b/packages/block-editor/src/components/inserter/block-patterns.js @@ -12,6 +12,7 @@ import { useDispatch, useSelect } from '@wordpress/data'; import { ENTER, SPACE } from '@wordpress/keycodes'; import { __, sprintf, _x } from '@wordpress/i18n'; import { useAsyncList } from '@wordpress/compose'; + /** * Internal dependencies */ From dbe4dcc9c00a763465b0204baea53622ad4e8258 Mon Sep 17 00:00:00 2001 From: Addison Stavlo Date: Tue, 9 Jun 2020 20:41:12 -0400 Subject: [PATCH 41/51] Update packages/block-library/src/template-part/edit/placeholder.js Co-authored-by: Enrique Piqueras --- packages/block-library/src/template-part/edit/placeholder.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/template-part/edit/placeholder.js b/packages/block-library/src/template-part/edit/placeholder.js index e5042cd56ada3..2e224ecbd0591 100644 --- a/packages/block-library/src/template-part/edit/placeholder.js +++ b/packages/block-library/src/template-part/edit/placeholder.js @@ -153,7 +153,7 @@ export default function TemplatePartPlaceholder( { setAttributes } ) { tabs={ [ { name: 'select', - /* translators: Select tab of template part creation palceholder */ + /* translators: Select tab of template part creation placeholder. */ title: __( 'Select from existing' ), }, { From e3283dee739e175041fbb19f67fb4cd1f695d6d9 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Wed, 10 Jun 2020 13:28:49 -0400 Subject: [PATCH 42/51] remove unnecessary frags --- .../edit/template-part-previews.js | 74 ++++++++----------- 1 file changed, 30 insertions(+), 44 deletions(-) diff --git a/packages/block-library/src/template-part/edit/template-part-previews.js b/packages/block-library/src/template-part/edit/template-part-previews.js index 805fd11fd5b09..ec59f949bb2db 100644 --- a/packages/block-library/src/template-part/edit/template-part-previews.js +++ b/packages/block-library/src/template-part/edit/template-part-previews.js @@ -86,31 +86,24 @@ function TemplatePartsByTheme( { templateParts, selectTemplate } ) { }, [ templateParts ] ); const currentShownTPs = useAsyncList( templateParts ); - return ( - <> - { templatePartsByTheme.length && - templatePartsByTheme.map( ( templatePartList ) => ( - - { templatePartList.map( ( templatePart ) => { - return currentShownTPs.includes( templatePart ) ? ( - - ) : ( - - ); - } ) } - - ) ) } - - ); + return templatePartsByTheme.map( ( templatePartList ) => ( + + { templatePartList.map( ( templatePart ) => { + return currentShownTPs.includes( templatePart ) ? ( + + ) : ( + + ); + } ) } + + ) ); } function TemplatePartSearchResults( { @@ -153,26 +146,19 @@ function TemplatePartSearchResults( { const currentShownTPs = useAsyncList( filteredTPs ); - return ( - <> - { filteredTPs.map( ( templatePart ) => ( - ( + + { currentShownTPs.includes( templatePart ) ? ( + - { currentShownTPs.includes( templatePart ) ? ( - - ) : ( - - ) } - - ) ) } - - ); + templatePart={ templatePart } + selectTemplate={ selectTemplate } + /> + ) : ( + + ) } + + ) ); } export default function TemplateParts( { selectTemplate, filterValue } ) { From edbb49833d8a1fdee79d391d0fd8d171c2282c49 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Wed, 10 Jun 2020 13:32:57 -0400 Subject: [PATCH 43/51] use setAttributes instead of rename --- .../src/template-part/edit/placeholder.js | 6 +----- .../edit/template-part-previews.js | 18 +++++++++--------- 2 files changed, 10 insertions(+), 14 deletions(-) diff --git a/packages/block-library/src/template-part/edit/placeholder.js b/packages/block-library/src/template-part/edit/placeholder.js index 2e224ecbd0591..6c39483b535be 100644 --- a/packages/block-library/src/template-part/edit/placeholder.js +++ b/packages/block-library/src/template-part/edit/placeholder.js @@ -89,10 +89,6 @@ export default function TemplatePartPlaceholder( { setAttributes } ) { setAttributes( nextAttributes ); }, [ postId, slug, theme ] ); - const selectTemplate = ( selection ) => { - setAttributes( selection ); - }; - const [ filterValue, setFilterValue ] = useState( '' ); const createTab = ( @@ -139,7 +135,7 @@ export default function TemplatePartPlaceholder( { setAttributes } ) {
diff --git a/packages/block-library/src/template-part/edit/template-part-previews.js b/packages/block-library/src/template-part/edit/template-part-previews.js index ec59f949bb2db..050a775a299de 100644 --- a/packages/block-library/src/template-part/edit/template-part-previews.js +++ b/packages/block-library/src/template-part/edit/template-part-previews.js @@ -21,7 +21,7 @@ function TemplatePartPlaceholder() { ); } -function TemplatePartItem( { templatePart, selectTemplate } ) { +function TemplatePartItem( { templatePart, setAttributes } ) { 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. @@ -30,7 +30,7 @@ function TemplatePartItem( { templatePart, selectTemplate } ) { const { createSuccessNotice } = useDispatch( 'core/notices' ); const onClick = useCallback( () => { - selectTemplate( { postId: id, slug, theme } ); + setAttributes( { postId: id, slug, theme } ); createSuccessNotice( sprintf( /* translators: %s: template part title. */ @@ -80,7 +80,7 @@ function PanelGroup( { title, icon, children } ) { ); } -function TemplatePartsByTheme( { templateParts, selectTemplate } ) { +function TemplatePartsByTheme( { templateParts, setAttributes } ) { const templatePartsByTheme = useMemo( () => { return Object.values( groupBy( templateParts, 'meta.theme' ) ); }, [ templateParts ] ); @@ -96,7 +96,7 @@ function TemplatePartsByTheme( { templateParts, selectTemplate } ) { ) : ( @@ -108,7 +108,7 @@ function TemplatePartsByTheme( { templateParts, selectTemplate } ) { function TemplatePartSearchResults( { templateParts, - selectTemplate, + setAttributes, filterValue, } ) { const filteredTPs = useMemo( () => { @@ -152,7 +152,7 @@ function TemplatePartSearchResults( { ) : ( @@ -161,7 +161,7 @@ function TemplatePartSearchResults( { ) ); } -export default function TemplateParts( { selectTemplate, filterValue } ) { +export default function TemplateParts( { setAttributes, filterValue } ) { const templateParts = useSelect( ( select ) => { return select( 'core' ).getEntityRecords( 'postType', @@ -180,7 +180,7 @@ export default function TemplateParts( { selectTemplate, filterValue } ) { return ( ); @@ -189,7 +189,7 @@ export default function TemplateParts( { selectTemplate, filterValue } ) { return ( ); } From 8e503db10b567356da95aca934f1ea69f99fa4c2 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Wed, 10 Jun 2020 13:46:08 -0400 Subject: [PATCH 44/51] add per_page, remove auto-draft --- .../src/template-part/edit/template-part-previews.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/template-part/edit/template-part-previews.js b/packages/block-library/src/template-part/edit/template-part-previews.js index 050a775a299de..707e7193b1d9d 100644 --- a/packages/block-library/src/template-part/edit/template-part-previews.js +++ b/packages/block-library/src/template-part/edit/template-part-previews.js @@ -167,7 +167,8 @@ export default function TemplateParts( { setAttributes, filterValue } ) { 'postType', 'wp_template_part', { - status: [ 'publish', 'auto-draft' ], + status: [ 'publish' ], + per_page: -1, } ); }, [] ); From 0c5fc43bc02fbb907b3ef192255c6b29b28380e9 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Wed, 10 Jun 2020 14:40:53 -0400 Subject: [PATCH 45/51] rename placeholder --- .../src/template-part/edit/template-part-previews.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/template-part/edit/template-part-previews.js b/packages/block-library/src/template-part/edit/template-part-previews.js index 707e7193b1d9d..4f718b2dfbf45 100644 --- a/packages/block-library/src/template-part/edit/template-part-previews.js +++ b/packages/block-library/src/template-part/edit/template-part-previews.js @@ -15,7 +15,7 @@ import { useAsyncList } from '@wordpress/compose'; */ import { groupBy } from 'lodash'; -function TemplatePartPlaceholder() { +function PreviewPlaceholder() { return (
); @@ -99,7 +99,7 @@ function TemplatePartsByTheme( { templateParts, setAttributes } ) { setAttributes={ setAttributes } /> ) : ( - + ); } ) } @@ -155,7 +155,7 @@ function TemplatePartSearchResults( { setAttributes={ setAttributes } /> ) : ( - + ) } ) ); From 37a2c99e1d671a9cef790a7eff4b2c1e5b3afa37 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Wed, 10 Jun 2020 14:43:32 -0400 Subject: [PATCH 46/51] update classnames missing placeholder prefix --- .../block-library/src/template-part/edit/placeholder.js | 6 +++--- packages/block-library/src/template-part/editor.scss | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/block-library/src/template-part/edit/placeholder.js b/packages/block-library/src/template-part/edit/placeholder.js index 6c39483b535be..89e7d7cf62f6a 100644 --- a/packages/block-library/src/template-part/edit/placeholder.js +++ b/packages/block-library/src/template-part/edit/placeholder.js @@ -109,14 +109,14 @@ export default function TemplatePartPlaceholder( { setAttributes } ) { className="wp-block-template-part__placeholder-input" />
-
+
{ help || helpPhrase }
@@ -145,7 +145,7 @@ export default function TemplatePartPlaceholder( { setAttributes } ) { return ( Date: Wed, 10 Jun 2020 14:50:14 -0400 Subject: [PATCH 47/51] use placeholder subdirectory --- .../template-part/edit/{placeholder.js => placeholder/index.js} | 2 +- .../edit/{ => placeholder}/template-part-previews.js | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename packages/block-library/src/template-part/edit/{placeholder.js => placeholder/index.js} (98%) rename packages/block-library/src/template-part/edit/{ => placeholder}/template-part-previews.js (100%) diff --git a/packages/block-library/src/template-part/edit/placeholder.js b/packages/block-library/src/template-part/edit/placeholder/index.js similarity index 98% rename from packages/block-library/src/template-part/edit/placeholder.js rename to packages/block-library/src/template-part/edit/placeholder/index.js index 89e7d7cf62f6a..6dd4b81ee263f 100644 --- a/packages/block-library/src/template-part/edit/placeholder.js +++ b/packages/block-library/src/template-part/edit/placeholder/index.js @@ -16,7 +16,7 @@ import { layout } from '@wordpress/icons'; /** * Internal dependencies */ -import useTemplatePartPost from './use-template-part-post'; +import useTemplatePartPost from '../use-template-part-post'; import TemplatePartPreviews from './template-part-previews'; const HELP_PHRASES = { diff --git a/packages/block-library/src/template-part/edit/template-part-previews.js b/packages/block-library/src/template-part/edit/placeholder/template-part-previews.js similarity index 100% rename from packages/block-library/src/template-part/edit/template-part-previews.js rename to packages/block-library/src/template-part/edit/placeholder/template-part-previews.js From c027167ebfad11176b8ff075739a2d7ef6e98abf Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Wed, 10 Jun 2020 17:37:52 -0400 Subject: [PATCH 48/51] added resolved query merge --- .../placeholder/template-part-previews.js | 20 +++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/template-part/edit/placeholder/template-part-previews.js b/packages/block-library/src/template-part/edit/placeholder/template-part-previews.js index 4f718b2dfbf45..5a71f0865467d 100644 --- a/packages/block-library/src/template-part/edit/placeholder/template-part-previews.js +++ b/packages/block-library/src/template-part/edit/placeholder/template-part-previews.js @@ -13,7 +13,7 @@ import { useAsyncList } from '@wordpress/compose'; /** * External dependencies */ -import { groupBy } from 'lodash'; +import { groupBy, uniq } from 'lodash'; function PreviewPlaceholder() { return ( @@ -163,7 +163,7 @@ function TemplatePartSearchResults( { export default function TemplateParts( { setAttributes, filterValue } ) { const templateParts = useSelect( ( select ) => { - return select( 'core' ).getEntityRecords( + const publishedTemplateParts = select( 'core' ).getEntityRecords( 'postType', 'wp_template_part', { @@ -171,6 +171,22 @@ export default function TemplateParts( { setAttributes, filterValue } ) { per_page: -1, } ); + const resolvedTemplateParts = select( 'core' ).getEntityRecords( + 'postType', + 'wp_template_part', + { + resolved: true, + per_page: -1, + } + ); + const combinedTemplateParts = []; + if ( publishedTemplateParts ) { + combinedTemplateParts.push( ...publishedTemplateParts ); + } + if ( resolvedTemplateParts ) { + combinedTemplateParts.push( ...resolvedTemplateParts ); + } + return uniq( combinedTemplateParts ); }, [] ); if ( ! templateParts || ! templateParts.length ) { From 294afbee7dbc23ea454333215409939d9018504f Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Wed, 10 Jun 2020 18:24:38 -0400 Subject: [PATCH 49/51] remove helpPhrase memo --- .../src/template-part/edit/placeholder/index.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 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 6dd4b81ee263f..1da611ae52337 100644 --- a/packages/block-library/src/template-part/edit/placeholder/index.js +++ b/packages/block-library/src/template-part/edit/placeholder/index.js @@ -2,7 +2,7 @@ * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { useState, useCallback, useMemo } from '@wordpress/element'; +import { useState, useCallback } from '@wordpress/element'; import { useDispatch } from '@wordpress/data'; import { cleanForSlug } from '@wordpress/url'; import { @@ -56,7 +56,7 @@ export default function TemplatePartPlaceholder( { setAttributes } ) { [ help ] ); - const helpPhrase = useMemo( () => { + const getHelpPhrase = () => { if ( ! slug || ! theme ) { return HELP_PHRASES.initial; } else if ( postId ) { @@ -64,7 +64,7 @@ export default function TemplatePartPlaceholder( { setAttributes } ) { } return HELP_PHRASES.available; - }, [ slug, theme, postId ] ); + }; const { saveEntityRecord } = useDispatch( 'core' ); const onCreate = useCallback( async () => { @@ -110,7 +110,7 @@ export default function TemplatePartPlaceholder( { setAttributes } ) { />
- { help || helpPhrase } + { help || getHelpPhrase() }