@wordpress/block-library 9.1.0 → 9.3.0

package/src/image/style.scss

@@ -1,4 +1,9 @@
 .wp-block-image {
+
+	a {
+		display: inline-block;
+	}
+
 	img {
 		height: auto;
 		max-width: 100%;
@@ -27,6 +32,11 @@
 		text-align: center;
 	}
 
+	&.alignfull a,
+	&.alignwide a {
+		width: 100%;
+	}
+
 	&.alignfull img,
 	&.alignwide img {
 		height: auto;
@@ -78,7 +88,7 @@
 	// Supply caption styles to images, even if the theme hasn't opted in.
 	// Reason being: the new markup, <figcaptions>, are not likely to be styled in the majority of existing themes,
 	// so we supply the styles so as to not appear broken or unstyled in those themes.
-	figcaption {
+	:where(figcaption) {
 		@include caption-style();
 	}
 

package/src/image/transforms.js

@@ -159,7 +159,7 @@ const transforms = {
 			transform( files ) {
 				const blocks = files.map( ( file ) => {
 					return createBlock( 'core/image', {
-						url: createBlobURL( file ),
+						blob: createBlobURL( file ),
 					} );
 				} );
 				return blocks;

package/src/list-item/block.json

@@ -21,8 +21,15 @@
 	},
 	"supports": {
 		"className": false,
-		"__experimentalSelector": ".wp-block-list > li",
 		"splitting": true,
+		"color": {
+			"gradients": true,
+			"link": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true
+			}
+		},
 		"spacing": {
 			"margin": true,
 			"padding": true,
@@ -47,5 +54,8 @@
 		"interactivity": {
 			"clientNavigation": true
 		}
+	},
+	"selectors": {
+		"root": ".wp-block-list > li"
 	}
 }

package/src/list-item/edit.js

@@ -61,7 +61,7 @@ export function IndentUI( { clientId } ) {
 				icon={ isRTL() ? formatIndentRTL : formatIndent }
 				title={ __( 'Indent' ) }
 				describedBy={ __( 'Indent list item' ) }
-				isDisabled={ ! canIndent }
+				disabled={ ! canIndent }
 				onClick={ () => indentListItem() }
 			/>
 		</>

package/src/list-item/hooks/use-merge.js

@@ -92,11 +92,25 @@ export default function useMerge( clientId, onMerge ) {
 				// list.
 				const [ nestedListClientId ] = getBlockOrder( clientIdB );
 				if ( nestedListClientId ) {
-					moveBlocksToPosition(
-						getBlockOrder( nestedListClientId ),
-						nestedListClientId,
-						getBlockRootClientId( clientIdA )
-					);
+					// If we are merging with the previous list item, and the
+					// previous list item does not have nested list, move the
+					// nested list to the previous list item.
+					if (
+						getPreviousBlockClientId( clientIdB ) === clientIdA &&
+						! getBlockOrder( clientIdA ).length
+					) {
+						moveBlocksToPosition(
+							[ nestedListClientId ],
+							clientIdB,
+							clientIdA
+						);
+					} else {
+						moveBlocksToPosition(
+							getBlockOrder( nestedListClientId ),
+							nestedListClientId,
+							getBlockRootClientId( clientIdA )
+						);
+					}
 				}
 				mergeBlocks( clientIdA, clientIdB );
 			} );

package/src/lock-unlock.js

@@ -5,6 +5,6 @@ import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/pri
 
 export const { lock, unlock } =
 	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
-		'I know using unstable features means my theme or plugin will inevitably break in the next version of WordPress.',
+		'I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.',
 		'@wordpress/block-library'
 	);

package/src/loginout/block.json

@@ -17,6 +17,9 @@
 			"default": true
 		}
 	},
+	"example": {
+		"viewportWidth": 350
+	},
 	"supports": {
 		"className": true,
 		"spacing": {

package/src/media-text/edit.js

@@ -46,7 +46,7 @@ import {
 	TEMPLATE,
 } from './constants';
 import { unlock } from '../lock-unlock';
-import { TOOLSPANEL_DROPDOWNMENU_PROPS } from '../utils/constants';
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
 const { ResolutionTool } = unlock( blockEditorPrivateApis );
 
@@ -276,6 +276,7 @@ function MediaTextEdit( {
 			mediaSizeSlug: newMediaSizeSlug,
 		} );
 	};
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
 	const mediaTextGeneralSettings = (
 		<ToolsPanel
@@ -290,7 +291,7 @@ function MediaTextEdit( {
 					mediaSizeSlug: undefined,
 				} );
 			} }
-			dropdownMenuProps={ TOOLSPANEL_DROPDOWNMENU_PROPS }
+			dropdownMenuProps={ dropdownMenuProps }
 		>
 			<ToolsPanelItem
 				label={ __( 'Media width' ) }

package/src/media-text/index.php

@@ -29,28 +29,78 @@ function render_block_core_media_text( $attributes, $content ) {
 		return $content;
 	}
 
-	$image_tag = '<figure class="wp-block-media-text__media"><img>';
-	$content   = preg_replace( '/<figure\s+class="wp-block-media-text__media">/', $image_tag, $content );
+	$media_tag_processor   = new WP_HTML_Tag_Processor( $content );
+	$wrapping_figure_query = array(
+		'tag_name'   => 'figure',
+		'class_name' => 'wp-block-media-text__media',
+	);
+	$has_media_on_right    = isset( $attributes['mediaPosition'] ) && 'right' === $attributes['mediaPosition'];
+	$image_fill            = isset( $attributes['imageFill'] ) && $attributes['imageFill'];
+	$focal_point           = isset( $attributes['focalPoint'] ) ? round( $attributes['focalPoint']['x'] * 100 ) . '% ' . round( $attributes['focalPoint']['y'] * 100 ) . '%' : '50% 50%';
+	$unique_id             = 'wp-block-media-text__media-' . wp_unique_id();
 
-	$processor = new WP_HTML_Tag_Processor( $content );
-	if ( isset( $attributes['imageFill'] ) && $attributes['imageFill'] ) {
-		$position = '50% 50%';
-		if ( isset( $attributes['focalPoint'] ) ) {
-			$position = round( $attributes['focalPoint']['x'] * 100 ) . '% ' . round( $attributes['focalPoint']['y'] * 100 ) . '%';
+	if ( $has_media_on_right ) {
+		// Loop through all the figure tags and set a bookmark on the last figure tag.
+		while ( $media_tag_processor->next_tag( $wrapping_figure_query ) ) {
+			$media_tag_processor->set_bookmark( 'last_figure' );
+		}
+		if ( $media_tag_processor->has_bookmark( 'last_figure' ) ) {
+			$media_tag_processor->seek( 'last_figure' );
+			if ( $image_fill ) {
+				$media_tag_processor->set_attribute( 'style', 'background-image:url(' . esc_url( $current_featured_image ) . ');background-position:' . $focal_point . ';' );
+			} else {
+				// Insert a unique ID to identify the figure tag.
+				$media_tag_processor->set_attribute( 'id', $unique_id );
+			}
+		}
+	} else {
+		if ( $media_tag_processor->next_tag( $wrapping_figure_query ) ) {
+			if ( $image_fill ) {
+				$media_tag_processor->set_attribute( 'style', 'background-image:url(' . esc_url( $current_featured_image ) . ');background-position:' . $focal_point . ';' );
+			} else {
+				// Insert a unique ID to identify the figure tag.
+				$media_tag_processor->set_attribute( 'id', $unique_id );
+			}
 		}
-		$processor->next_tag( 'figure' );
-		$processor->set_attribute( 'style', 'background-image:url(' . esc_url( $current_featured_image ) . ');background-position:' . $position . ';' );
-	}
-	$processor->next_tag( 'img' );
-	$media_size_slug = 'full';
-	if ( isset( $attributes['mediaSizeSlug'] ) ) {
-		$media_size_slug = $attributes['mediaSizeSlug'];
 	}
-	$processor->set_attribute( 'src', esc_url( $current_featured_image ) );
-	$processor->set_attribute( 'class', 'wp-image-' . get_post_thumbnail_id() . ' size-' . $media_size_slug );
-	$processor->set_attribute( 'alt', trim( strip_tags( get_post_meta( get_post_thumbnail_id(), '_wp_attachment_image_alt', true ) ) ) );
 
-	$content = $processor->get_updated_html();
+	$content = $media_tag_processor->get_updated_html();
+
+	// If the image is not set to fill, add the image tag inside the figure tag,
+	// and update the image attributes in order to display the featured image.
+	if ( ! $image_fill ) {
+		$media_size_slug = isset( $attributes['mediaSizeSlug'] ) ? $attributes['mediaSizeSlug'] : 'full';
+		$image_tag       = '<img class="wp-block-media-text__featured_image">';
+		$content         = preg_replace(
+			'/(<figure\s+id="' . preg_quote( $unique_id, '/' ) . '"\s+class="wp-block-media-text__media"\s*>)/',
+			'$1' . $image_tag,
+			$content
+		);
+
+		$image_tag_processor = new WP_HTML_Tag_Processor( $content );
+		if ( $image_tag_processor->next_tag(
+			array(
+				'tag_name' => 'figure',
+				'id'       => $unique_id,
+			)
+		) ) {
+			// The ID is only used to ensure that the correct figure tag is selected,
+			// and can now be removed.
+			$image_tag_processor->remove_attribute( 'id' );
+			if ( $image_tag_processor->next_tag(
+				array(
+					'tag_name'   => 'img',
+					'class_name' => 'wp-block-media-text__featured_image',
+				)
+			) ) {
+				$image_tag_processor->set_attribute( 'src', esc_url( $current_featured_image ) );
+				$image_tag_processor->set_attribute( 'class', 'wp-image-' . get_post_thumbnail_id() . ' size-' . $media_size_slug );
+				$image_tag_processor->set_attribute( 'alt', trim( strip_tags( get_post_meta( get_post_thumbnail_id(), '_wp_attachment_image_alt', true ) ) ) );
+
+				$content = $image_tag_processor->get_updated_html();
+			}
+		}
+	}
 
 	return $content;
 }

package/src/media-text/style.scss

@@ -68,6 +68,10 @@
 	/*!rtl:end:ignore*/
 }
 
+.wp-block-media-text__media a {
+	display: inline-block;
+}
+
 .wp-block-media-text__media img,
 .wp-block-media-text__media video {
 	height: auto;

package/src/navigation/index.php

@@ -519,9 +519,11 @@ class WP_Navigation_Block_Renderer {
 			';
 		}
 
+		$overlay_inline_styles = esc_attr( safecss_filter_attr( $colors['overlay_inline_styles'] ) );
+
 		return sprintf(
 			'<button aria-haspopup="dialog" %3$s class="%6$s" %10$s>%8$s</button>
-				<div class="%5$s" style="%7$s" id="%1$s" %11$s>
+				<div class="%5$s" %7$s id="%1$s" %11$s>
 					<div class="wp-block-navigation__responsive-close" tabindex="-1">
 						<div class="wp-block-navigation__responsive-dialog" %12$s>
 							<button %4$s class="wp-block-navigation__responsive-container-close" %13$s>%9$s</button>
@@ -537,7 +539,7 @@ class WP_Navigation_Block_Renderer {
 			$toggle_aria_label_close,
 			esc_attr( implode( ' ', $responsive_container_classes ) ),
 			esc_attr( implode( ' ', $open_button_classes ) ),
-			esc_attr( safecss_filter_attr( $colors['overlay_inline_styles'] ) ),
+			( ! empty( $overlay_inline_styles ) ) ? "style=\"$overlay_inline_styles\"" : '',
 			$toggle_button_content,
 			$toggle_close_button_content,
 			$open_button_directives,
@@ -826,7 +828,7 @@ function block_core_navigation_add_directives_to_submenu( $tags, $block_attribut
 		$tags->set_attribute( 'data-wp-interactive', 'core/navigation' );
 		$tags->set_attribute( 'data-wp-context', '{ "submenuOpenedBy": { "click": false, "hover": false, "focus": false }, "type": "submenu" }' );
 		$tags->set_attribute( 'data-wp-watch', 'callbacks.initMenu' );
-		$tags->set_attribute( 'data-wp-on-async--focusout', 'actions.handleMenuFocusout' );
+		$tags->set_attribute( 'data-wp-on--focusout', 'actions.handleMenuFocusout' );
 		$tags->set_attribute( 'data-wp-on--keydown', 'actions.handleMenuKeydown' );
 
 		// This is a fix for Safari. Without it, Safari doesn't change the active

package/src/navigation/style.scss

@@ -300,6 +300,7 @@ button.wp-block-navigation-item__content {
 	color: currentColor;
 	font-size: inherit;
 	font-family: inherit;
+	letter-spacing: inherit;
 	line-height: inherit;
 	font-style: inherit;
 	font-weight: inherit;

package/src/navigation-submenu/edit.js

@@ -387,7 +387,7 @@ export default function NavigationSubmenuEdit( {
 						title={ __( 'Convert to Link' ) }
 						onClick={ transformToLink }
 						className="wp-block-navigation__submenu__revert"
-						isDisabled={ ! canConvertToLink }
+						disabled={ ! canConvertToLink }
 					/>
 				</ToolbarGroup>
 			</BlockControls>

package/src/page-list/convert-to-links-modal.js

@@ -36,7 +36,7 @@ export function ConvertToLinksModal( { onClick, onClose, disabled } ) {
 				</Button>
 				<Button
 					variant="primary"
-					__experimentalIsFocusable
+					accessibleWhenDisabled
 					disabled={ disabled }
 					onClick={ onClick }
 				>

package/src/page-list/edit.js

@@ -338,7 +338,7 @@ export default function PageListEdit( {
 						<p>{ convertDescription }</p>
 						<Button
 							variant="primary"
-							__experimentalIsFocusable
+							accessibleWhenDisabled
 							disabled={ ! hasResolvedPages }
 							onClick={ convertToNavigationLinks }
 						>

package/src/paragraph/test/__snapshots__/edit.native.js.snap

@@ -1,5 +1,35 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Paragraph block should be able to use a prefix to create a Heading block 1`] = `
+"<!-- wp:heading {"level":1} -->
+<h1 class="wp-block-heading"></h1>
+<!-- /wp:heading -->"
+`;
+
+exports[`Paragraph block should be able to use a prefix to create a List block 1`] = `
+"<!-- wp:list -->
+<ul class="wp-block-list"><!-- wp:list-item -->
+<li></li>
+<!-- /wp:list-item --></ul>
+<!-- /wp:list -->"
+`;
+
+exports[`Paragraph block should be able to use a prefix to create a Quote block 1`] = `
+"<!-- wp:quote -->
+<blockquote class="wp-block-quote"><!-- wp:paragraph -->
+<p></p>
+<!-- /wp:paragraph --></blockquote>
+<!-- /wp:quote -->"
+`;
+
+exports[`Paragraph block should be able to use a prefix to create a numbered List block 1`] = `
+"<!-- wp:list {"ordered":true} -->
+<ol class="wp-block-list"><!-- wp:list-item -->
+<li></li>
+<!-- /wp:list-item --></ol>
+<!-- /wp:list -->"
+`;
+
 exports[`Paragraph block should prevent deleting the first Paragraph block when pressing backspace at the start 1`] = `
 "<!-- wp:paragraph -->
 <p>A quick brown fox jumps over the lazy dog.</p>

package/src/paragraph/test/edit.native.js

@@ -90,6 +90,105 @@ describe( 'Paragraph block', () => {
 		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
 
+	it( 'should be able to use a prefix to create a Heading block', async () => {
+		const screen = await initializeEditor();
+		await addBlock( screen, 'Paragraph' );
+		const text = '# ';
+
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+		const paragraphTextInput =
+			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+		typeInRichText( paragraphTextInput, text, {
+			finalSelectionStart: 1,
+			finalSelectionEnd: 1,
+		} );
+
+		fireEvent( paragraphTextInput, 'onChange', {
+			nativeEvent: { text },
+			preventDefault() {},
+		} );
+
+		const headingBlock = getBlock( screen, 'Heading' );
+		expect( headingBlock ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'should be able to use a prefix to create a Quote block', async () => {
+		const screen = await initializeEditor();
+		await addBlock( screen, 'Paragraph' );
+		const text = '> ';
+
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+		const paragraphTextInput =
+			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+		typeInRichText( paragraphTextInput, text, {
+			finalSelectionStart: 1,
+			finalSelectionEnd: 1,
+		} );
+
+		fireEvent( paragraphTextInput, 'onChange', {
+			nativeEvent: { text },
+			preventDefault() {},
+		} );
+		const quoteBlock = getBlock( screen, 'Quote' );
+		await triggerBlockListLayout( quoteBlock );
+
+		expect( quoteBlock ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'should be able to use a prefix to create a List block', async () => {
+		const screen = await initializeEditor();
+		await addBlock( screen, 'Paragraph' );
+		const text = '- ';
+
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+		const paragraphTextInput =
+			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+		typeInRichText( paragraphTextInput, text, {
+			finalSelectionStart: 1,
+			finalSelectionEnd: 1,
+		} );
+
+		fireEvent( paragraphTextInput, 'onChange', {
+			nativeEvent: { text },
+			preventDefault() {},
+		} );
+		const listBlock = getBlock( screen, 'List' );
+		await triggerBlockListLayout( listBlock );
+
+		expect( listBlock ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'should be able to use a prefix to create a numbered List block', async () => {
+		const screen = await initializeEditor();
+		await addBlock( screen, 'Paragraph' );
+		const text = '1. ';
+
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+		const paragraphTextInput =
+			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+		typeInRichText( paragraphTextInput, text, {
+			finalSelectionStart: 2,
+			finalSelectionEnd: 2,
+		} );
+
+		fireEvent( paragraphTextInput, 'onChange', {
+			nativeEvent: { text },
+			preventDefault() {},
+		} );
+		const listBlock = getBlock( screen, 'List' );
+		await triggerBlockListLayout( listBlock );
+
+		expect( listBlock ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
 	it( 'should bold text', async () => {
 		// Arrange
 		const screen = await initializeEditor();

package/src/post-comments-form/style.scss

@@ -1,3 +1,18 @@
+// Allow these default styles to be overridden by global styles.
+:where(.wp-block-post-comments-form) {
+	textarea,
+	input:not([type="submit"]) {
+		border: 1px solid $gray-600;
+		font-size: 1em;
+		font-family: inherit;
+	}
+
+	textarea,
+	input:where(:not([type="submit"]):not([type="checkbox"])) {
+		padding: calc(0.667em + 2px); // The extra 2px is added to match outline buttons.
+	}
+}
+
 .wp-block-post-comments-form {
 	// This block has customizable padding, border-box makes that more predictable.
 	box-sizing: border-box;
@@ -31,18 +46,6 @@
 		overflow-wrap: break-word;
 	}
 
-	textarea,
-	input:not([type="submit"]) {
-		border: 1px solid $gray-600;
-		font-size: 1em;
-		font-family: inherit;
-	}
-
-	textarea,
-	input:not([type="submit"]):not([type="checkbox"]) {
-		padding: calc(0.667em + 2px); // The extra 2px is added to match outline buttons.
-	}
-
 	.comment-form {
 		textarea,
 		// Make sure to not set display block on hidden input fields, to prevent

package/src/post-content/block.json

@@ -7,6 +7,9 @@
 	"description": "Displays the contents of a post or page.",
 	"textdomain": "default",
 	"usesContext": [ "postId", "postType", "queryId" ],
+	"example": {
+		"viewportWidth": 350
+	},
 	"supports": {
 		"align": [ "wide", "full" ],
 		"html": false,

package/src/post-date/edit.js

@@ -28,7 +28,7 @@ import {
 	ToggleControl,
 	PanelBody,
 } from '@wordpress/components';
-import { __, sprintf } from '@wordpress/i18n';
+import { __, _x, sprintf } from '@wordpress/i18n';
 import { edit } from '@wordpress/icons';
 import { DOWN } from '@wordpress/keycodes';
 import { useSelect } from '@wordpress/data';
@@ -128,6 +128,10 @@ export default function PostDateEdit( {
 											siteTimeFormat
 										) }
 										onClose={ onClose }
+										dateOrder={
+											/* translators: Order of day, month, and year. Available formats are 'dmy', 'mdy', and 'ymd'. */
+											_x( 'dmy', 'date order' )
+										}
 									/>
 								) }
 								renderToggle={ ( { isOpen, onToggle } ) => {

package/src/post-date/index.php

@@ -23,8 +23,14 @@ function render_block_core_post_date( $attributes, $content, $block ) {
 	$post_ID = $block->context['postId'];
 
 	if ( isset( $attributes['format'] ) && 'human-diff' === $attributes['format'] ) {
-		// translators: %s: human-readable time difference.
-		$formatted_date = sprintf( __( '%s ago', 'gutenberg' ), human_time_diff( get_post_timestamp( $post_ID ) ) );
+		$post_timestamp = get_post_timestamp( $post_ID );
+		if ( $post_timestamp > time() ) {
+			// translators: %s: human-readable time difference.
+			$formatted_date = sprintf( __( '%s from now', 'gutenberg' ), human_time_diff( $post_timestamp ) );
+		} else {
+			// translators: %s: human-readable time difference.
+			$formatted_date = sprintf( __( '%s ago', 'gutenberg' ), human_time_diff( $post_timestamp ) );
+		}
 	} else {
 		$formatted_date = get_the_date( empty( $attributes['format'] ) ? '' : $attributes['format'], $post_ID );
 	}
@@ -44,7 +50,7 @@ function render_block_core_post_date( $attributes, $content, $block ) {
 	 */
 	if ( isset( $attributes['displayType'] ) && 'modified' === $attributes['displayType'] ) {
 		if ( get_the_modified_date( 'Ymdhi', $post_ID ) > get_the_date( 'Ymdhi', $post_ID ) ) {
-			if ( 'human-diff' === $attributes['format'] ) {
+			if ( isset( $attributes['format'] ) && 'human-diff' === $attributes['format'] ) {
 				// translators: %s: human-readable time difference.
 				$formatted_date = sprintf( __( '%s ago', 'gutenberg' ), human_time_diff( get_post_timestamp( $post_ID, 'modified' ) ) );
 			} else {

package/src/post-excerpt/block.json

@@ -23,6 +23,9 @@
 		}
 	},
 	"usesContext": [ "postId", "postType", "queryId" ],
+	"example": {
+		"viewportWidth": 350
+	},
 	"supports": {
 		"html": false,
 		"color": {

package/src/post-title/block.json

@@ -29,6 +29,9 @@
 			"default": "_self"
 		}
 	},
+	"example": {
+		"viewportWidth": 350
+	},
 	"supports": {
 		"align": [ "wide", "full" ],
 		"html": false,

package/src/query/edit/inspector-controls/index.js

@@ -34,7 +34,7 @@ import {
 	isControlAllowed,
 	useTaxonomies,
 } from '../../utils';
-import { TOOLSPANEL_DROPDOWNMENU_PROPS } from '../../../utils/constants';
+import { useToolsPanelDropdownMenuProps } from '../../../utils/hooks';
 
 const { BlockInfo } = unlock( blockEditorPrivateApis );
 
@@ -128,6 +128,7 @@ export default function QueryInspectorControls( props ) {
 		showAuthorControl ||
 		showSearchControl ||
 		showParentControl;
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
 	return (
 		<>
@@ -223,7 +224,7 @@ export default function QueryInspectorControls( props ) {
 						} );
 						setQuerySearch( '' );
 					} }
-					dropdownMenuProps={ TOOLSPANEL_DROPDOWNMENU_PROPS }
+					dropdownMenuProps={ dropdownMenuProps }
 				>
 					{ showTaxControl && (
 						<ToolsPanelItem