From 659c8e2e78e8f6ec6cf249c66ab9ddad91bd46f5 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Wed, 5 May 2021 15:16:17 -0400 Subject: [PATCH 1/6] updated base results --- .../src/template-part/edit/index.js | 17 +++++++---- .../template-part/edit/placeholder/index.js | 1 + .../src/template-part/edit/selection/index.js | 7 ++++- .../edit/selection/template-part-previews.js | 30 ++++++++++++------- 4 files changed, 38 insertions(+), 17 deletions(-) diff --git a/packages/block-library/src/template-part/edit/index.js b/packages/block-library/src/template-part/edit/index.js index 6359a206803c55..ca7ff8aded12a7 100644 --- a/packages/block-library/src/template-part/edit/index.js +++ b/packages/block-library/src/template-part/edit/index.js @@ -42,7 +42,13 @@ export default function TemplatePartEdit( { // Set the postId block attribute if it did not exist, // but wait until the inner blocks have loaded to allow // new edits to trigger this. - const { isResolved, innerBlocks, isMissing, defaultWrapper } = useSelect( + const { + isResolved, + innerBlocks, + isMissing, + defaultWrapper, + area, + } = useSelect( ( select ) => { const { getEditedEntityRecord, hasFinishedResolution } = select( coreStore @@ -57,6 +63,8 @@ export default function TemplatePartEdit( { const entityRecord = templatePartId ? getEditedEntityRecord( ...getEntityArgs ) : null; + const _area = entityRecord?.area || attributes.area; + const hasResolvedEntity = templatePartId ? hasFinishedResolution( 'getEditedEntityRecord', @@ -66,16 +74,14 @@ export default function TemplatePartEdit( { const defaultWrapperElement = select( editorStore ) .__experimentalGetDefaultTemplatePartAreas() - .find( - ( { area } ) => - area === ( entityRecord?.area || attributes.area ) - )?.area_tag; + .find( ( { area: value } ) => value === _area )?.area_tag; return { innerBlocks: getBlocks( clientId ), isResolved: hasResolvedEntity, isMissing: hasResolvedEntity && ! entityRecord, defaultWrapper: defaultWrapperElement || 'div', + area: _area, }; }, [ templatePartId, clientId ] @@ -157,6 +163,7 @@ export default function TemplatePartEdit( { ) } /> 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 d4233d68991611..8de0d6e731fa6c 100644 --- a/packages/block-library/src/template-part/edit/placeholder/index.js +++ b/packages/block-library/src/template-part/edit/placeholder/index.js @@ -93,6 +93,7 @@ export default function TemplatePartPlaceholder( { ) } /> diff --git a/packages/block-library/src/template-part/edit/selection/index.js b/packages/block-library/src/template-part/edit/selection/index.js index ec62b10deeb400..93a39b8c3bec21 100644 --- a/packages/block-library/src/template-part/edit/selection/index.js +++ b/packages/block-library/src/template-part/edit/selection/index.js @@ -22,7 +22,11 @@ const stopKeyPropagation = ( event ) => event.stopPropagation(); // Disable reason (no-static-element-interactions): Navigational key-presses within // the menu are prevented from triggering WritingFlow and ObserveTyping interactions. /* eslint-disable jsx-a11y/no-static-element-interactions */ -export default function TemplatePartSelection( { setAttributes, onClose } ) { +export default function TemplatePartSelection( { + setAttributes, + onClose, + area, +} ) { const [ filterValue, setFilterValue ] = useState( '' ); return (
diff --git a/packages/block-library/src/template-part/edit/selection/template-part-previews.js b/packages/block-library/src/template-part/edit/selection/template-part-previews.js index 416f19fc203d30..d402e665fd8b2b 100644 --- a/packages/block-library/src/template-part/edit/selection/template-part-previews.js +++ b/packages/block-library/src/template-part/edit/selection/template-part-previews.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { groupBy, deburr } from 'lodash'; +import { deburr } from 'lodash'; /** * WordPress dependencies @@ -102,20 +102,21 @@ function PanelGroup( { title, icon, children } ) { ); } -function TemplatePartsByTheme( { +function TemplatePartsByArea( { templateParts, setAttributes, onClose, composite, + area, } ) { - const templatePartsByTheme = useMemo( () => { - return Object.values( groupBy( templateParts, 'theme' ) ); - }, [ templateParts ] ); + const templatePartsByArea = useMemo( () => { + return templateParts.filter( ( item ) => item.area === area ); + }, [ templateParts, area ] ); const currentShownTPs = useAsyncList( templateParts ); - return templatePartsByTheme.map( ( templatePartList ) => ( - - { templatePartList.map( ( templatePart ) => { + return ( + + { templatePartsByArea.map( ( templatePart ) => { return currentShownTPs.includes( templatePart ) ? ( - ) ); + ); } function TemplatePartSearchResults( { @@ -138,6 +139,7 @@ function TemplatePartSearchResults( { filterValue, onClose, composite, + area, } ) { const filteredTPs = useMemo( () => { // Filter based on value. @@ -203,13 +205,17 @@ export default function TemplatePartPreviews( { setAttributes, filterValue, onClose, + area, } ) { const composite = useCompositeState(); const templateParts = useSelect( ( select ) => { return ( select( coreStore ).getEntityRecords( 'postType', - 'wp_template_part' + 'wp_template_part', + { + per_page: -1, + } ) || [] ); }, [] ); @@ -231,6 +237,7 @@ export default function TemplatePartPreviews( { filterValue={ filterValue } onClose={ onClose } composite={ composite } + area={ area } /> ); @@ -242,11 +249,12 @@ export default function TemplatePartPreviews( { role="listbox" aria-label={ __( 'List of template parts' ) } > - ); From 2be5f3c217ad3a38fb3f423f2bc65d8e5dff6da4 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Wed, 5 May 2021 16:03:51 -0400 Subject: [PATCH 2/6] update search results --- .../edit/selection/template-part-previews.js | 97 +++++++++++++------ 1 file changed, 66 insertions(+), 31 deletions(-) diff --git a/packages/block-library/src/template-part/edit/selection/template-part-previews.js b/packages/block-library/src/template-part/edit/selection/template-part-previews.js index d402e665fd8b2b..b56c7e1fe89c91 100644 --- a/packages/block-library/src/template-part/edit/selection/template-part-previews.js +++ b/packages/block-library/src/template-part/edit/selection/template-part-previews.js @@ -21,6 +21,7 @@ import { import { useAsyncList } from '@wordpress/compose'; import { store as noticesStore } from '@wordpress/notices'; import { store as coreStore } from '@wordpress/core-data'; +import { store as editorStore } from '@wordpress/editor'; function PreviewPlaceholder() { return ( @@ -139,63 +140,98 @@ function TemplatePartSearchResults( { filterValue, onClose, composite, - area, } ) { - const filteredTPs = useMemo( () => { + const { labelsByArea } = useSelect( ( select ) => { + const definedAreas = select( + editorStore + ).__experimentalGetDefaultTemplatePartAreas(); + const _labelsByArea = {}; + definedAreas.forEach( ( item ) => { + _labelsByArea[ item.area ] = item.label; + } ); + return { + labelsByArea: _labelsByArea, + }; + } ); + const { filteredTPs, groupedResults } = useMemo( () => { // Filter based on value. // Remove diacritics and convert to lowercase to normalize. const normalizedFilterValue = deburr( filterValue ).toLowerCase(); const searchResults = templateParts.filter( - ( { slug, theme } ) => - slug.toLowerCase().includes( normalizedFilterValue ) || + ( { title: { rendered: title }, area } ) => + deburr( title ) + .toLowerCase() + .includes( normalizedFilterValue ) || // Since diacritics can be used in theme names, remove them for the comparison. - deburr( theme ).toLowerCase().includes( normalizedFilterValue ) + deburr( labelsByArea[ area ] ) + .toLowerCase() + .includes( normalizedFilterValue ) ); // Order based on value location. searchResults.sort( ( a, b ) => { - // First prioritize index found in slug. - const indexInSlugA = a.slug + // First prioritize index found in title. + // Deburr for diacritics. + const indexInTitleA = deburr( a.title.rendered ) .toLowerCase() .indexOf( normalizedFilterValue ); - const indexInSlugB = b.slug + const indexInTitleB = deburr( b.title.rendered ) .toLowerCase() .indexOf( normalizedFilterValue ); - if ( indexInSlugA !== -1 && indexInSlugB !== -1 ) { - return indexInSlugA - indexInSlugB; - } else if ( indexInSlugA !== -1 ) { + if ( indexInTitleA !== -1 && indexInTitleB !== -1 ) { + return indexInTitleA - indexInTitleB; + } else if ( indexInTitleA !== -1 ) { return -1; - } else if ( indexInSlugB !== -1 ) { + } else if ( indexInTitleB !== -1 ) { return 1; } - // Second prioritize index found in theme. - // Since diacritics can be used in theme names, remove them for the comparison. + // Second prioritize index found in area. return ( - deburr( a.theme ) + deburr( labelsByArea[ a.area ] ) .toLowerCase() .indexOf( normalizedFilterValue ) - - deburr( b.theme ).toLowerCase().indexOf( normalizedFilterValue ) + deburr( labelsByArea[ b.area ] ) + .toLowerCase() + .indexOf( normalizedFilterValue ) ); } ); - return searchResults; + const _groupedResults = []; + for ( let i = 0; i < searchResults.length; i++ ) { + if ( + i !== 0 && + searchResults[ i ].area === searchResults[ i - 1 ].area + ) { + _groupedResults[ _groupedResults.length - 1 ].push( + searchResults[ i ] + ); + } else { + _groupedResults.push( [ searchResults[ i ] ] ); + } + } + return { + filteredTPs: searchResults, + groupedResults: _groupedResults, + }; }, [ filterValue, templateParts ] ); const currentShownTPs = useAsyncList( filteredTPs ); - return filteredTPs.map( ( templatePart ) => ( + return groupedResults.map( ( group ) => ( - { currentShownTPs.includes( templatePart ) ? ( - - ) : ( - + { group.map( ( templatePart ) => + currentShownTPs.includes( templatePart ) ? ( + + ) : ( + + ) ) } ) ); @@ -237,7 +273,6 @@ export default function TemplatePartPreviews( { filterValue={ filterValue } onClose={ onClose } composite={ composite } - area={ area } /> ); From 400de224c82f85de28a4ad5899b229e9a94dc65c Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Thu, 6 May 2021 09:08:41 -0400 Subject: [PATCH 3/6] add comment --- .../src/template-part/edit/selection/template-part-previews.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/block-library/src/template-part/edit/selection/template-part-previews.js b/packages/block-library/src/template-part/edit/selection/template-part-previews.js index b56c7e1fe89c91..6d9520b37e9e4f 100644 --- a/packages/block-library/src/template-part/edit/selection/template-part-previews.js +++ b/packages/block-library/src/template-part/edit/selection/template-part-previews.js @@ -194,6 +194,8 @@ function TemplatePartSearchResults( { .indexOf( normalizedFilterValue ) ); } ); + // Group filtered resutls together if their neighbors share the same area. + // This helps not show redundant panel groups side by side in the results. const _groupedResults = []; for ( let i = 0; i < searchResults.length; i++ ) { if ( From 398fd8e8299838b9124431b1d915814bc5313050 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Thu, 6 May 2021 09:47:51 -0400 Subject: [PATCH 4/6] add default value for area prop --- .../src/template-part/edit/selection/template-part-previews.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/template-part/edit/selection/template-part-previews.js b/packages/block-library/src/template-part/edit/selection/template-part-previews.js index 6d9520b37e9e4f..d1aef8d59007d6 100644 --- a/packages/block-library/src/template-part/edit/selection/template-part-previews.js +++ b/packages/block-library/src/template-part/edit/selection/template-part-previews.js @@ -108,7 +108,7 @@ function TemplatePartsByArea( { setAttributes, onClose, composite, - area, + area = 'uncategorized', } ) { const templatePartsByArea = useMemo( () => { return templateParts.filter( ( item ) => item.area === area ); From b7753731e831c1ae91c9d6d20caa392ff357787c Mon Sep 17 00:00:00 2001 From: Addison Stavlo Date: Fri, 7 May 2021 08:03:43 -0400 Subject: [PATCH 5/6] Update packages/block-library/src/template-part/edit/selection/template-part-previews.js MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Dávid Szabó --- .../src/template-part/edit/selection/template-part-previews.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/template-part/edit/selection/template-part-previews.js b/packages/block-library/src/template-part/edit/selection/template-part-previews.js index d1aef8d59007d6..5c0cdef092d9ba 100644 --- a/packages/block-library/src/template-part/edit/selection/template-part-previews.js +++ b/packages/block-library/src/template-part/edit/selection/template-part-previews.js @@ -194,7 +194,7 @@ function TemplatePartSearchResults( { .indexOf( normalizedFilterValue ) ); } ); - // Group filtered resutls together if their neighbors share the same area. + // Group filtered results together if their neighbors share the same area. // This helps not show redundant panel groups side by side in the results. const _groupedResults = []; for ( let i = 0; i < searchResults.length; i++ ) { From 141974d4f1e0f0a5fbc80a4e5f0d93e64871f676 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Mon, 10 May 2021 10:17:40 -0400 Subject: [PATCH 6/6] show all variations by default for general/uncategorized case --- .../edit/selection/template-part-previews.js | 87 +++++++++++-------- 1 file changed, 52 insertions(+), 35 deletions(-) diff --git a/packages/block-library/src/template-part/edit/selection/template-part-previews.js b/packages/block-library/src/template-part/edit/selection/template-part-previews.js index 5c0cdef092d9ba..90509ce3eda162 100644 --- a/packages/block-library/src/template-part/edit/selection/template-part-previews.js +++ b/packages/block-library/src/template-part/edit/selection/template-part-previews.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { deburr } from 'lodash'; +import { groupBy, deburr } from 'lodash'; /** * WordPress dependencies @@ -109,29 +109,42 @@ function TemplatePartsByArea( { onClose, composite, area = 'uncategorized', + labelsByArea, } ) { const templatePartsByArea = useMemo( () => { - return templateParts.filter( ( item ) => item.area === area ); + return Object.values( groupBy( templateParts, 'area' ) ); }, [ templateParts, area ] ); const currentShownTPs = useAsyncList( templateParts ); - return ( - - { templatePartsByArea.map( ( templatePart ) => { - return currentShownTPs.includes( templatePart ) ? ( - - ) : ( - - ); - } ) } - - ); + return templatePartsByArea.map( ( templatePartList ) => { + // Only return corresponding area if block/entity is not uncategorized/general version. + if ( 'uncategorized' !== area && templatePartList[ 0 ].area !== area ) { + return null; + } + return ( + + { templatePartList.map( ( templatePart ) => { + return currentShownTPs.includes( templatePart ) ? ( + + ) : ( + + ); + } ) } + + ); + } ); } function TemplatePartSearchResults( { @@ -140,19 +153,8 @@ function TemplatePartSearchResults( { filterValue, onClose, composite, + labelsByArea, } ) { - const { labelsByArea } = useSelect( ( select ) => { - const definedAreas = select( - editorStore - ).__experimentalGetDefaultTemplatePartAreas(); - const _labelsByArea = {}; - definedAreas.forEach( ( item ) => { - _labelsByArea[ item.area ] = item.label; - } ); - return { - labelsByArea: _labelsByArea, - }; - } ); const { filteredTPs, groupedResults } = useMemo( () => { // Filter based on value. // Remove diacritics and convert to lowercase to normalize. @@ -246,16 +248,29 @@ export default function TemplatePartPreviews( { area, } ) { const composite = useCompositeState(); - const templateParts = useSelect( ( select ) => { - return ( + + const { templateParts, labelsByArea } = useSelect( ( select ) => { + const _templateParts = select( coreStore ).getEntityRecords( 'postType', 'wp_template_part', { per_page: -1, } - ) || [] - ); + ) || []; + + const definedAreas = select( + editorStore + ).__experimentalGetDefaultTemplatePartAreas(); + const _labelsByArea = {}; + definedAreas.forEach( ( item ) => { + _labelsByArea[ item.area ] = item.label; + } ); + + return { + templateParts: _templateParts, + labelsByArea: _labelsByArea, + }; }, [] ); if ( ! templateParts || ! templateParts.length ) { @@ -275,6 +290,7 @@ export default function TemplatePartPreviews( { filterValue={ filterValue } onClose={ onClose } composite={ composite } + labelsByArea={ labelsByArea } /> ); @@ -292,6 +308,7 @@ export default function TemplatePartPreviews( { onClose={ onClose } composite={ composite } area={ area } + labelsByArea={ labelsByArea } /> );