From 3b74b830969a3b39633505c0e7de5b01b0fe1063 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Wed, 28 Apr 2021 23:02:43 +0300 Subject: [PATCH 1/2] [Block Library - Query]: Allow term addition from user case-insensitive input --- .../query/edit/query-inspector-controls.js | 37 ++++++++++++++++--- 1 file changed, 32 insertions(+), 5 deletions(-) diff --git a/packages/block-library/src/query/edit/query-inspector-controls.js b/packages/block-library/src/query/edit/query-inspector-controls.js index 71e9f38017ee3a..b3fabe11445374 100644 --- a/packages/block-library/src/query/edit/query-inspector-controls.js +++ b/packages/block-library/src/query/edit/query-inspector-controls.js @@ -56,6 +56,28 @@ const CreateNewPostLink = ( { type } ) => { ); }; +// Helper function to get the term id based on user input in terms `FormTokenField`. +const getTermIdByTermValue = ( termsMapedByName, termValue ) => { + // First we check for exact match by `term.id` or case sensitive `term.name` match. + const termId = termValue?.id || termsMapedByName[ termValue ]?.id; + if ( termId ) return termId; + /** + * Here we make an extra check for entered terms in a non case sensitive way, + * to match user expectations, due to `FormTokenField` behaviour that shows + * suggestions which are case insensitive. + * + * Although WP tries to discourage users to add terms with the same name (case insensitive), + * it's still possible if you manually change the name, as long as the terms have different slugs. + * In this edge case we always apply the first match from the terms list. + */ + const termValueLower = termValue.toLocaleLowerCase(); + for ( const term in termsMapedByName ) { + if ( term.toLocaleLowerCase() === termValueLower ) { + return termsMapedByName[ term ].id; + } + } +}; + export default function QueryInspectorControls( { attributes: { query, layout }, setQuery, @@ -114,11 +136,16 @@ export default function QueryInspectorControls( { }; // Handles categories and tags changes. const onTermsChange = ( terms, queryProperty ) => ( newTermValues ) => { - const termIds = newTermValues.reduce( ( accumulator, termValue ) => { - const termId = termValue?.id || terms.mapByName[ termValue ]?.id; - if ( termId ) accumulator.push( termId ); - return accumulator; - }, [] ); + const termIds = Array.from( + newTermValues.reduce( ( accumulator, termValue ) => { + const termId = getTermIdByTermValue( + terms.mapByName, + termValue + ); + if ( termId ) accumulator.add( termId ); + return accumulator; + }, new Set() ) + ); setQuery( { [ queryProperty ]: termIds } ); }; const onCategoriesChange = onTermsChange( categories, 'categoryIds' ); From af7ba55b3bb74248cd239532698dbc8d00576172 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Fri, 14 May 2021 16:29:36 +0300 Subject: [PATCH 2/2] fix typo --- .../src/query/edit/query-inspector-controls.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/query/edit/query-inspector-controls.js b/packages/block-library/src/query/edit/query-inspector-controls.js index b3fabe11445374..dff59bf40868e3 100644 --- a/packages/block-library/src/query/edit/query-inspector-controls.js +++ b/packages/block-library/src/query/edit/query-inspector-controls.js @@ -57,9 +57,9 @@ const CreateNewPostLink = ( { type } ) => { }; // Helper function to get the term id based on user input in terms `FormTokenField`. -const getTermIdByTermValue = ( termsMapedByName, termValue ) => { +const getTermIdByTermValue = ( termsMappedByName, termValue ) => { // First we check for exact match by `term.id` or case sensitive `term.name` match. - const termId = termValue?.id || termsMapedByName[ termValue ]?.id; + const termId = termValue?.id || termsMappedByName[ termValue ]?.id; if ( termId ) return termId; /** * Here we make an extra check for entered terms in a non case sensitive way, @@ -71,9 +71,9 @@ const getTermIdByTermValue = ( termsMapedByName, termValue ) => { * In this edge case we always apply the first match from the terms list. */ const termValueLower = termValue.toLocaleLowerCase(); - for ( const term in termsMapedByName ) { + for ( const term in termsMappedByName ) { if ( term.toLocaleLowerCase() === termValueLower ) { - return termsMapedByName[ term ].id; + return termsMappedByName[ term ].id; } } };