PostTaxonomiesFlatTermSelector: Restore space between tag list and mo…

…st used tags (#66566) * PostTaxonomiesFlatTermSelector: Restore space between tag list and most used tags * Update packages/editor/src/components/post-taxonomies/flat-term-selector.js Co-authored-by: Lena Morita <[email protected]> --------- Co-authored-by: t-hamano <[email protected]> Co-authored-by: mirka <[email protected]>
WordPress · Oct 29, 2024 · bcdba59 · bcdba59 · github-actions · Oct 29, 2024
1 parent 3a4cc10
commit bcdba59
Showing 1 changed file with 15 additions and 4 deletions.
diff --git a/packages/editor/src/components/post-taxonomies/flat-term-selector.js b/packages/editor/src/components/post-taxonomies/flat-term-selector.js
@@ -2,8 +2,12 @@
  * WordPress dependencies
  */
 import { __, _x, sprintf } from '@wordpress/i18n';
-import { useEffect, useMemo, useState } from '@wordpress/element';
-import { FormTokenField, withFilters } from '@wordpress/components';
+import { Fragment, useEffect, useMemo, useState } from '@wordpress/element';
+import {
+	FormTokenField,
+	withFilters,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import deprecated from '@wordpress/deprecated';
 import { store as coreStore } from '@wordpress/core-data';
@@ -288,8 +292,15 @@ export function FlatTermSelector( { slug, __nextHasNoMarginBottom } ) {
 		singularName
 	);
 
+	const Wrapper = ( { children } ) =>
+		__nextHasNoMarginBottom ? (
+			<VStack spacing={ 4 }>{ children }</VStack>
+		) : (
+			<Fragment>{ children }</Fragment>
+		);
+
 	return (
-		<>
+		<Wrapper>
 			<FormTokenField
 				__next40pxDefaultSize
 				value={ values }
@@ -306,7 +317,7 @@ export function FlatTermSelector( { slug, __nextHasNoMarginBottom } ) {
 				__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
 			/>
 			<MostUsedTerms taxonomy={ taxonomy } onSelect={ appendTerm } />
-		</>
+		</Wrapper>
 	);
 }