@wordpress/editor 14.9.0 → 14.11.0

package/src/components/global-keyboard-shortcuts/register-shortcuts.js

@@ -72,7 +72,7 @@ function EditorKeyboardShortcutsRegister() {
 		registerShortcut( {
 			name: 'core/editor/toggle-list-view',
 			category: 'global',
-			description: __( 'Open the List View.' ),
+			description: __( 'Show or hide the List View.' ),
 			keyCombination: {
 				modifier: 'access',
 				character: 'o',
@@ -82,7 +82,7 @@ function EditorKeyboardShortcutsRegister() {
 		registerShortcut( {
 			name: 'core/editor/toggle-distraction-free',
 			category: 'global',
-			description: __( 'Toggle distraction free mode.' ),
+			description: __( 'Enter or exit distraction free mode.' ),
 			keyCombination: {
 				modifier: 'primaryShift',
 				character: '\\',
@@ -92,7 +92,7 @@ function EditorKeyboardShortcutsRegister() {
 		registerShortcut( {
 			name: 'core/editor/toggle-sidebar',
 			category: 'global',
-			description: __( 'Show or hide the Settings sidebar.' ),
+			description: __( 'Show or hide the Settings panel.' ),
 			keyCombination: {
 				modifier: 'primaryShift',
 				character: ',',

package/src/components/global-styles-provider/index.js

@@ -56,13 +56,27 @@ function useGlobalStylesUserConfig() {
 				select( coreStore ).__experimentalGetCurrentGlobalStylesId();
 
 			let record;
-			const userCanEditGlobalStyles = canUser( 'update', {
-				kind: 'root',
-				name: 'globalStyles',
-				id: _globalStylesId,
-			} );
 
-			if ( _globalStylesId ) {
+			// We want the global styles ID request to finish before triggering
+			// the OPTIONS request for user capabilities, otherwise it will
+			// fetch `/wp/v2/global-styles` instead of
+			// `/wp/v2/global-styles/{id}`!
+			// Please adjust the preloaded requests if this changes!
+			const userCanEditGlobalStyles = _globalStylesId
+				? canUser( 'update', {
+						kind: 'root',
+						name: 'globalStyles',
+						id: _globalStylesId,
+				  } )
+				: null;
+
+			if (
+				_globalStylesId &&
+				// We want the OPTIONS request for user capabilities to finish
+				// before getting the records, otherwise we'll fetch both!
+				typeof userCanEditGlobalStyles === 'boolean'
+			) {
+				// Please adjust the preloaded requests if this changes!
 				if ( userCanEditGlobalStyles ) {
 					record = getEditedEntityRecord(
 						'root',

package/src/components/header/index.js

@@ -12,6 +12,7 @@ import { PinnedItems } from '@wordpress/interface';
 /**
  * Internal dependencies
  */
+import CollabSidebar from '../collab-sidebar';
 import BackButton, { useHasBackButton } from './back-button';
 import CollapsibleBlockToolbar from '../collapsible-block-toolbar';
 import DocumentBar from '../document-bar';
@@ -149,7 +150,7 @@ function Header( {
 				) }
 
 				{ canBeZoomedOut && isEditorIframed && isWideViewport && (
-					<ZoomOutToggle />
+					<ZoomOutToggle disabled={ forceDisableBlockTools } />
 				) }
 
 				<PreviewDropdown
@@ -174,6 +175,7 @@ function Header( {
 						}
 					/>
 				) }
+				<CollabSidebar />
 
 				{ customSaveButton }
 				<MoreMenu />

package/src/components/header/style.scss

@@ -130,6 +130,7 @@
 		// ... and display labels.
 		&::after {
 			content: attr(aria-label);
+			white-space: nowrap;
 		}
 		&[aria-disabled="true"] {
 			background-color: transparent;

package/src/components/inserter-sidebar/index.js

@@ -33,15 +33,12 @@ export default function InserterSidebar() {
 			getInserter,
 			isPublishSidebarOpened,
 		} = unlock( select( editorStore ) );
-		const {
-			getBlockRootClientId,
-			__unstableGetEditorMode,
-			getSectionRootClientId,
-		} = unlock( select( blockEditorStore ) );
+		const { getBlockRootClientId, isZoomOut, getSectionRootClientId } =
+			unlock( select( blockEditorStore ) );
 		const { get } = select( preferencesStore );
 		const { getActiveComplementaryArea } = select( interfaceStore );
 		const getBlockSectionRootClientId = () => {
-			if ( __unstableGetEditorMode() === 'zoom-out' ) {
+			if ( isZoomOut() ) {
 				const sectionRootClientId = getSectionRootClientId();
 
 				if ( sectionRootClientId ) {

package/src/components/page-attributes/parent.js

@@ -212,8 +212,10 @@ function PostParentToggle( { isOpen, onClick } ) {
 			className="editor-post-parent__panel-toggle"
 			variant="tertiary"
 			aria-expanded={ isOpen }
-			// translators: %s: Current post parent.
-			aria-label={ sprintf( __( 'Change parent: %s' ), parentTitle ) }
+			aria-label={
+				// translators: %s: Current post parent.
+				sprintf( __( 'Change parent: %s' ), parentTitle )
+			}
 			onClick={ onClick }
 		>
 			{ parentTitle }
@@ -261,9 +263,9 @@ export function ParentRow() {
 						<div>
 							{ createInterpolateElement(
 								sprintf(
-									/* translators: %1$s The home URL of the WordPress installation without the scheme. */
+									/* translators: %s: The home URL of the WordPress installation without the scheme. */
 									__(
-										'Child pages inherit characteristics from their parent, such as URL structure. For instance, if "Pricing" is a child of "Services", its URL would be %1$s<wbr />/services<wbr />/pricing.'
+										'Child pages inherit characteristics from their parent, such as URL structure. For instance, if "Pricing" is a child of "Services", its URL would be %s<wbr />/services<wbr />/pricing.'
 									),
 									filterURLForDisplay( homeUrl ).replace(
 										/([/.])/g,

package/src/components/plugin-more-menu-item/index.js

@@ -1,9 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { compose } from '@wordpress/compose';
 import { MenuItem } from '@wordpress/components';
-import { withPluginContext } from '@wordpress/plugins';
+import { usePluginContext } from '@wordpress/plugins';
 import { ActionItem } from '@wordpress/interface';
 
 /**
@@ -62,12 +61,14 @@ import { ActionItem } from '@wordpress/interface';
  *
  * @return {Component} The component to be rendered.
  */
-export default compose(
-	withPluginContext( ( context, ownProps ) => {
-		return {
-			as: ownProps.as ?? MenuItem,
-			icon: ownProps.icon || context.icon,
-			name: 'core/plugin-more-menu',
-		};
-	} )
-)( ActionItem );
+export default function PluginMoreMenuItem( props ) {
+	const context = usePluginContext();
+	return (
+		<ActionItem
+			name="core/plugin-more-menu"
+			as={ props.as ?? MenuItem }
+			icon={ props.icon || context.icon }
+			{ ...props }
+		/>
+	);
+}

package/src/components/plugin-preview-menu-item/index.js

@@ -1,9 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { compose } from '@wordpress/compose';
 import { MenuItem } from '@wordpress/components';
-import { withPluginContext } from '@wordpress/plugins';
+import { usePluginContext } from '@wordpress/plugins';
 import { ActionItem } from '@wordpress/interface';
 
 /**
@@ -27,12 +26,12 @@ import { ActionItem } from '@wordpress/interface';
  * }
  *
  * const ExternalPreviewMenuItem = () => (
- *   <PreviewDropdownMenuItem
+ *   <PluginPreviewMenuItem
  *     icon={ external }
  *     onClick={ onPreviewClick }
  *   >
  *     { __( 'Preview in new tab' ) }
- *   </PreviewDropdownMenuItem>
+ *   </PluginPreviewMenuItem>
  * );
  * registerPlugin( 'external-preview-menu-item', {
  *     render: ExternalPreviewMenuItem,
@@ -41,12 +40,14 @@ import { ActionItem } from '@wordpress/interface';
  *
  * @return {Component} The rendered menu item component.
  */
-export default compose(
-	withPluginContext( ( context, ownProps ) => {
-		return {
-			as: ownProps.as ?? MenuItem,
-			icon: ownProps.icon || context.icon,
-			name: 'core/plugin-preview-menu',
-		};
-	} )
-)( ActionItem );
+export default function PluginPreviewMenuItem( props ) {
+	const context = usePluginContext();
+	return (
+		<ActionItem
+			name="core/plugin-preview-menu"
+			as={ props.as ?? MenuItem }
+			icon={ props.icon || context.icon }
+			{ ...props }
+		/>
+	);
+}

package/src/components/plugin-sidebar/index.js

@@ -1,15 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
 import { ComplementaryArea } from '@wordpress/interface';
 
-/**
- * Internal dependencies
- */
-import { store as editorStore } from '../../store';
-
 /**
  * Renders a sidebar when activated. The contents within the `PluginSidebar` will appear as content within the sidebar.
  * It also automatically renders a corresponding `PluginSidebarMenuItem` component when `isPinnable` flag is set to `true`.
@@ -76,16 +69,10 @@ import { store as editorStore } from '../../store';
  * ```
  */
 export default function PluginSidebar( { className, ...props } ) {
-	const { postTitle } = useSelect( ( select ) => {
-		return {
-			postTitle: select( editorStore ).getEditedPostAttribute( 'title' ),
-		};
-	}, [] );
 	return (
 		<ComplementaryArea
 			panelClassName={ className }
 			className="editor-sidebar"
-			smallScreenTitle={ postTitle || __( '(no title)' ) }
 			scope="core"
 			{ ...props }
 		/>

package/src/components/post-actions/index.js

@@ -18,7 +18,7 @@ import { store as coreStore } from '@wordpress/core-data';
 import { unlock } from '../../lock-unlock';
 import { usePostActions } from './actions';
 
-const { DropdownMenuV2, kebabCase } = unlock( componentsPrivateApis );
+const { Menu, kebabCase } = unlock( componentsPrivateApis );
 
 export default function PostActions( { postType, postId, onActionPerformed } ) {
 	const [ isActionsMenuOpen, setIsActionsMenuOpen ] = useState( false );
@@ -54,7 +54,7 @@ export default function PostActions( { postType, postId, onActionPerformed } ) {
 	}, [ allActions, itemWithPermissions ] );
 
 	return (
-		<DropdownMenuV2
+		<Menu
 			open={ isActionsMenuOpen }
 			trigger={
 				<Button
@@ -79,7 +79,7 @@ export default function PostActions( { postType, postId, onActionPerformed } ) {
 					setIsActionsMenuOpen( false );
 				} }
 			/>
-		</DropdownMenuV2>
+		</Menu>
 	);
 }
 
@@ -93,12 +93,9 @@ function DropdownMenuItemTrigger( { action, onClick, items } ) {
 	const label =
 		typeof action.label === 'string' ? action.label : action.label( items );
 	return (
-		<DropdownMenuV2.Item
-			onClick={ onClick }
-			hideOnClick={ ! action.RenderModal }
-		>
-			<DropdownMenuV2.ItemLabel>{ label }</DropdownMenuV2.ItemLabel>
-		</DropdownMenuV2.Item>
+		<Menu.Item onClick={ onClick } hideOnClick={ ! action.RenderModal }>
+			<Menu.ItemLabel>{ label }</Menu.ItemLabel>
+		</Menu.Item>
 	);
 }
 
@@ -145,7 +142,7 @@ function ActionWithModal( { action, item, ActionTrigger, onClose } ) {
 // With an added onClose prop.
 function ActionsDropdownMenuGroup( { actions, item, onClose } ) {
 	return (
-		<DropdownMenuV2.Group>
+		<Menu.Group>
 			{ actions.map( ( action ) => {
 				if ( action.RenderModal ) {
 					return (
@@ -167,6 +164,6 @@ function ActionsDropdownMenuGroup( { actions, item, onClose } ) {
 					/>
 				);
 			} ) }
-		</DropdownMenuV2.Group>
+		</Menu.Group>
 	);
 }

package/src/components/post-author/panel.js

@@ -25,8 +25,10 @@ function PostAuthorToggle( { isOpen, onClick } ) {
 			className="editor-post-author__panel-toggle"
 			variant="tertiary"
 			aria-expanded={ isOpen }
-			// translators: %s: Current post link.
-			aria-label={ sprintf( __( 'Change author: %s' ), authorName ) }
+			aria-label={
+				// translators: %s: Author name.
+				sprintf( __( 'Change author: %s' ), authorName )
+			}
 			onClick={ onClick }
 		>
 			{ authorName }

package/src/components/post-card-panel/index.js

@@ -1,7 +1,3 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
@@ -22,27 +18,20 @@ import { store as editorStore } from '../../store';
 import {
 	TEMPLATE_POST_TYPE,
 	TEMPLATE_PART_POST_TYPE,
-	PATTERN_POST_TYPE,
-	GLOBAL_POST_TYPES,
 } from '../../store/constants';
 import { unlock } from '../../lock-unlock';
 import PostActions from '../post-actions';
+import usePageTypeBadge from '../../utils/pageTypeBadge';
 
 export default function PostCardPanel( {
 	postType,
 	postId,
 	onActionPerformed,
 } ) {
-	const { isFrontPage, isPostsPage, title, icon, isSync } = useSelect(
+	const { title, icon } = useSelect(
 		( select ) => {
 			const { __experimentalGetTemplateInfo } = select( editorStore );
-			const { canUser, getEditedEntityRecord } = select( coreStore );
-			const siteSettings = canUser( 'read', {
-				kind: 'root',
-				name: 'site',
-			} )
-				? getEditedEntityRecord( 'root', 'site' )
-				: undefined;
+			const { getEditedEntityRecord } = select( coreStore );
 			const _record = getEditedEntityRecord(
 				'postType',
 				postType,
@@ -52,31 +41,18 @@ export default function PostCardPanel( {
 				[ TEMPLATE_POST_TYPE, TEMPLATE_PART_POST_TYPE ].includes(
 					postType
 				) && __experimentalGetTemplateInfo( _record );
-			let _isSync = false;
-			if ( GLOBAL_POST_TYPES.includes( postType ) ) {
-				if ( PATTERN_POST_TYPE === postType ) {
-					// When the post is first created, the top level wp_pattern_sync_status is not set so get meta value instead.
-					const currentSyncStatus =
-						_record?.meta?.wp_pattern_sync_status === 'unsynced'
-							? 'unsynced'
-							: _record?.wp_pattern_sync_status;
-					_isSync = currentSyncStatus !== 'unsynced';
-				} else {
-					_isSync = true;
-				}
-			}
 			return {
 				title: _templateInfo?.title || _record?.title,
 				icon: unlock( select( editorStore ) ).getPostIcon( postType, {
 					area: _record?.area,
 				} ),
-				isSync: _isSync,
-				isFrontPage: siteSettings?.page_on_front === postId,
-				isPostsPage: siteSettings?.page_for_posts === postId,
 			};
 		},
 		[ postId, postType ]
 	);
+
+	const pageTypeBadge = usePageTypeBadge();
+
 	return (
 		<div className="editor-post-card-panel">
 			<HStack
@@ -84,12 +60,7 @@ export default function PostCardPanel( {
 				className="editor-post-card-panel__header"
 				align="flex-start"
 			>
-				<Icon
-					className={ clsx( 'editor-post-card-panel__icon', {
-						'is-sync': isSync,
-					} ) }
-					icon={ icon }
-				/>
+				<Icon className="editor-post-card-panel__icon" icon={ icon } />
 				<Text
 					numberOfLines={ 2 }
 					truncate
@@ -99,14 +70,9 @@ export default function PostCardPanel( {
 					lineHeight="20px"
 				>
 					{ title ? decodeEntities( title ) : __( 'No title' ) }
-					{ isFrontPage && (
-						<span className="editor-post-card-panel__title-badge">
-							{ __( 'Homepage' ) }
-						</span>
-					) }
-					{ isPostsPage && (
+					{ pageTypeBadge && (
 						<span className="editor-post-card-panel__title-badge">
-							{ __( 'Posts Page' ) }
+							{ pageTypeBadge }
 						</span>
 					) }
 				</Text>

package/src/components/post-card-panel/style.scss

@@ -34,17 +34,9 @@
 	}
 }
 
-.editor-post-card-panel__icon.is-sync {
-	fill: var(--wp-block-synced-color);
-
-	& + .editor-post-card-panel__title {
-		color: var(--wp-block-synced-color);
-	}
-}
-
 .editor-post-card-panel__title-badge {
 	background: $gray-100;
-	color: $gray-700;
+	color: $gray-800;
 	padding: 0 $grid-unit-05;
 	border-radius: $radius-small;
 	font-size: 12px;

package/src/components/post-content-information/index.js

@@ -70,7 +70,7 @@ export default function PostContentInformation() {
 		readingTime <= 1
 			? __( '1 minute' )
 			: sprintf(
-					// translators: %s: the number of minutes to read the post.
+					/* translators: %s: the number of minutes to read the post. */
 					_n( '%s minute', '%s minutes', readingTime ),
 					readingTime.toLocaleString()
 			  );

package/src/components/post-featured-image/index.js

@@ -121,6 +121,35 @@ function PostFeaturedImage( {
 		} );
 	}
 
+	/**
+	 * Generates the featured image alt text for this editing context.
+	 *
+	 * @param {Object} imageMedia                               The image media object.
+	 * @param {string} imageMedia.alt_text                      The alternative text of the image.
+	 * @param {Object} imageMedia.media_details                 The media details of the image.
+	 * @param {Object} imageMedia.media_details.sizes           The sizes of the image.
+	 * @param {Object} imageMedia.media_details.sizes.full      The full size details of the image.
+	 * @param {string} imageMedia.media_details.sizes.full.file The file name of the full size image.
+	 * @param {string} imageMedia.slug                          The slug of the image.
+	 * @return {string} The featured image alt text.
+	 */
+	function getImageDescription( imageMedia ) {
+		if ( imageMedia.alt_text ) {
+			return sprintf(
+				// Translators: %s: The selected image alt text.
+				__( 'Current image: %s' ),
+				imageMedia.alt_text
+			);
+		}
+		return sprintf(
+			// Translators: %s: The selected image filename.
+			__(
+				'The current image has no alternative text. The file name is: %s'
+			),
+			imageMedia.media_details.sizes?.full?.file || imageMedia.slug
+		);
+	}
+
 	return (
 		<PostFeaturedImageCheck>
 			{ noticeUI }
@@ -130,21 +159,7 @@ function PostFeaturedImage( {
 						id={ `editor-post-featured-image-${ featuredImageId }-describedby` }
 						className="hidden"
 					>
-						{ media.alt_text &&
-							sprintf(
-								// Translators: %s: The selected image alt text.
-								__( 'Current image: %s' ),
-								media.alt_text
-							) }
-						{ ! media.alt_text &&
-							sprintf(
-								// Translators: %s: The selected image filename.
-								__(
-									'The current image has no alternative text. The file name is: %s'
-								),
-								media.media_details.sizes?.full?.file ||
-									media.slug
-							) }
+						{ getImageDescription( media ) }
 					</div>
 				) }
 				<MediaUploadCheck fallback={ instructions }>
@@ -188,7 +203,7 @@ function PostFeaturedImage( {
 										<img
 											className="editor-post-featured-image__preview-image"
 											src={ mediaSourceUrl }
-											alt=""
+											alt={ getImageDescription( media ) }
 										/>
 									) }
 									{ isLoading && <Spinner /> }

package/src/components/post-featured-image/style.scss

@@ -41,8 +41,6 @@
 .editor-post-featured-image__preview {
 	width: 100%;
 	padding: 0;
-	transition: all 0.1s ease-out;
-	@include reduce-motion("transition");
 	box-shadow: 0 0 0 0 var(--wp-admin-theme-color);
 	overflow: hidden; // Ensure the focus style properly encapsulates the image.
 	outline-offset: -#{$border-width};
@@ -66,6 +64,11 @@
 
 .editor-post-featured-image__toggle {
 	box-shadow: inset 0 0 0 $border-width $gray-400;
+
+	&:focus:not(:disabled) {
+		// Allow smooth transition between focused and unfocused box-shadow states.
+		box-shadow: 0 0 0 currentColor inset, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+	}
 }
 
 .editor-post-featured-image__actions {

package/src/components/post-last-revision/index.js

@@ -44,7 +44,7 @@ function PostLastRevision() {
 				icon={ backup }
 				iconPosition="right"
 				text={ sprintf(
-					/* translators: %s: number of revisions */
+					/* translators: %s: number of revisions. */
 					__( 'Revisions (%s)' ),
 					revisionsCount
 				) }

package/src/components/post-saved-state/test/__snapshots__/index.js.snap

@@ -16,7 +16,7 @@ exports[`PostSavedState returns a disabled button if the post is not saveable 1`
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      d="M17.3 10.1c0-2.5-2.1-4.4-4.8-4.4-2.2 0-4.1 1.4-4.6 3.3h-.2C5.7 9 4 10.7 4 12.8c0 2.1 1.7 3.8 3.7 3.8h9c1.8 0 3.2-1.5 3.2-3.3.1-1.6-1.1-2.9-2.6-3.2zm-.5 5.1h-4v-2.4L14 14l1-1-3-3-3 3 1 1 1.2-1.2v2.4H7.7c-1.2 0-2.2-1.1-2.2-2.3s1-2.4 2.2-2.4H9l.3-1.1c.4-1.3 1.7-2.2 3.2-2.2 1.8 0 3.3 1.3 3.3 2.9v1.3l1.3.2c.8.1 1.4.9 1.4 1.8 0 1-.8 1.8-1.7 1.8z"
+      d="M17.3 10.1C17.3 7.60001 15.2 5.70001 12.5 5.70001C10.3 5.70001 8.4 7.10001 7.9 9.00001H7.7C5.7 9.00001 4 10.7 4 12.8C4 14.9 5.7 16.6 7.7 16.6H9.5V15.2H7.7C6.5 15.2 5.5 14.1 5.5 12.9C5.5 11.7 6.5 10.5 7.7 10.5H9L9.3 9.40001C9.7 8.10001 11 7.20001 12.5 7.20001C14.3 7.20001 15.8 8.50001 15.8 10.1V11.4L17.1 11.6C17.9 11.7 18.5 12.5 18.5 13.4C18.5 14.4 17.7 15.2 16.8 15.2H14.5V16.6H16.7C18.5 16.6 19.9 15.1 19.9 13.3C20 11.7 18.8 10.4 17.3 10.1Z M14.1245 14.2426L15.1852 13.182L12.0032 10L8.82007 13.1831L9.88072 14.2438L11.25 12.8745V18H12.75V12.8681L14.1245 14.2426Z"
     />
   </svg>
 </button>

package/src/components/post-schedule/label.js

@@ -48,7 +48,7 @@ export function getFullPostScheduleLabel( dateAttribute ) {
 
 	const timezoneAbbreviation = getTimezoneAbbreviation();
 	const formattedDate = dateI18n(
-		// translators: If using a space between 'g:i' and 'a', use a non-breaking space.
+		// translators: Use a non-breaking space between 'g:i' and 'a' if appropriate.
 		_x( 'F j, Y g:i\xa0a', 'post schedule full date format' ),
 		date
 	);

package/src/components/post-sticky/test/index.js

@@ -35,23 +35,23 @@ function setupUseSelectMock( { hasStickyAction, postType } ) {
 describe( 'PostSticky', () => {
 	it( 'should not render anything if the post type is not "post"', () => {
 		setupUseSelectMock( { hasStickyAction: true, postType: 'page' } );
-		render( <PostStickyCheck>Can Toggle Sticky</PostStickyCheck> );
+		render( <PostStickyCheck>Can Show Sticky</PostStickyCheck> );
 		expect(
-			screen.queryByText( 'Can Toggle Sticky' )
+			screen.queryByText( 'Can Show Sticky' )
 		).not.toBeInTheDocument();
 	} );
 
 	it( "should not render anything if post doesn't support stickying", () => {
 		setupUseSelectMock( { hasStickyAction: false, postType: 'post' } );
-		render( <PostStickyCheck>Can Toggle Sticky</PostStickyCheck> );
+		render( <PostStickyCheck>Can Show Sticky</PostStickyCheck> );
 		expect(
-			screen.queryByText( 'Can Toggle Sticky' )
+			screen.queryByText( 'Can Show Sticky' )
 		).not.toBeInTheDocument();
 	} );
 
 	it( 'should render if the post supports stickying', () => {
 		setupUseSelectMock( { hasStickyAction: true, postType: 'post' } );
-		render( <PostStickyCheck>Can Toggle Sticky</PostStickyCheck> );
-		expect( screen.getByText( 'Can Toggle Sticky' ) ).toBeVisible();
+		render( <PostStickyCheck>Can Show Sticky</PostStickyCheck> );
+		expect( screen.getByText( 'Can Show Sticky' ) ).toBeVisible();
 	} );
 } );

package/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>
 	);
 }