@wordpress/block-library 9.44.0 → 9.45.0

package/src/embed/edit.native.js

@@ -1,21 +1,3 @@
-/**
- * Internal dependencies
- */
-import {
-	createUpgradedEmbedBlock,
-	getClassNames,
-	removeAspectRatioClasses,
-	fallback,
-	getEmbedInfoByProvider,
-	getMergedAttributesWithPreview,
-} from './util';
-import EmbedControls from './embed-controls';
-import { embedContentIcon } from './icons';
-import EmbedLoading from './embed-loading';
-import EmbedPlaceholder from './embed-placeholder';
-import EmbedPreview from './embed-preview';
-import EmbedLinkSettings from './embed-link-settings';
-
 /**
  * External dependencies
  */
@@ -33,7 +15,25 @@ import {
 } from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
 import { View } from '@wordpress/primitives';
-import { getAuthority } from '@wordpress/url';
+/**
+ * Internal dependencies
+ */
+import {
+	createUpgradedEmbedBlock,
+	findMoreSuitableBlock,
+	getClassNames,
+	rewriteXToTwitter,
+	removeAspectRatioClasses,
+	fallback,
+	getEmbedInfoByProvider,
+	getMergedAttributesWithPreview,
+} from './util';
+import EmbedControls from './embed-controls';
+import { embedContentIcon } from './icons';
+import EmbedLoading from './embed-loading';
+import EmbedPlaceholder from './embed-placeholder';
+import EmbedPreview from './embed-preview';
+import EmbedLinkSettings from './embed-link-settings';
 
 // The inline preview feature will be released progressible, for this reason
 // the embed will only be considered previewable for the following providers list.
@@ -77,6 +77,8 @@ const EmbedEdit = ( props ) => {
 	const [ showEmbedBottomSheet, setShowEmbedBottomSheet ] =
 		useState( isEditingURL );
 	const { invalidateResolution } = useDispatch( coreStore );
+	const { __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
 
 	const { preview, fetching, themeSupportsResponsive, cannotEmbed } =
 		useSelect(
@@ -150,50 +152,61 @@ const EmbedEdit = ( props ) => {
 		} );
 	};
 
+	// When the preview can't be embedded, retry without any trailing slash.
 	useEffect( () => {
-		if ( ! preview?.html || ! cannotEmbed || fetching ) {
+		if ( ! cannotEmbed || fetching || ! url ) {
 			return;
 		}
-		// At this stage, we're not fetching the preview and know it can't be embedded,
-		// so try removing any trailing slash, and resubmit.
+
 		const newURL = url.replace( /\/$/, '' );
+		if ( newURL === url ) {
+			return;
+		}
+
 		setIsEditingURL( false );
+		__unstableMarkNextChangeAsNotPersistent();
 		setAttributes( { url: newURL } );
-	}, [ preview?.html, url, cannotEmbed, fetching ] );
+	}, [
+		url,
+		cannotEmbed,
+		fetching,
+		setAttributes,
+		__unstableMarkNextChangeAsNotPersistent,
+	] );
 
-	// Try a different provider in case the embed url is not supported.
+	// Apply preview-derived attributes once the preview resolves.
 	useEffect( () => {
-		if ( ! cannotEmbed || fetching || ! url ) {
+		if ( ! preview || isEditingURL ) {
 			return;
 		}
 
-		// Until X provider is supported in WordPress, as a workaround we use Twitter provider.
-		if ( getAuthority( url ) === 'x.com' ) {
-			const newURL = new URL( url );
-			newURL.host = 'twitter.com';
-			setAttributes( { url: newURL.toString() } );
-		}
-	}, [ url, cannotEmbed, fetching, setAttributes ] );
+		const mergedAttributes = getMergedAttributes();
 
-	// Handle incoming preview.
-	useEffect( () => {
-		if ( preview && ! isEditingURL ) {
-			// When obtaining an incoming preview,
-			// we set the attributes derived from the preview data.
-			const mergedAttributes = getMergedAttributes();
-			setAttributes( mergedAttributes );
+		if ( onReplace ) {
+			const upgradedBlock = createUpgradedEmbedBlock(
+				props,
+				mergedAttributes
+			);
 
-			if ( onReplace ) {
-				const upgradedBlock = createUpgradedEmbedBlock(
-					props,
-					mergedAttributes
-				);
-
-				if ( upgradedBlock ) {
-					onReplace( upgradedBlock );
-				}
+			if ( upgradedBlock ) {
+				// Mutate via setAttributes; onReplace would remount the
+				// block and clear the URL textbox on undo.
+				__unstableMarkNextChangeAsNotPersistent();
+				setAttributes( upgradedBlock.attributes );
+				return;
 			}
 		}
+
+		const hasChanges = Object.keys( mergedAttributes ).some(
+			( key ) => mergedAttributes[ key ] !== attributes[ key ]
+		);
+
+		if ( hasChanges ) {
+			// Merge into the URL-submit undo level so a single undo
+			// reverts both the submit and the preview-driven attributes.
+			__unstableMarkNextChangeAsNotPersistent();
+			setAttributes( mergedAttributes );
+		}
 	}, [ preview, isEditingURL ] );
 
 	useEffect(
@@ -203,19 +216,20 @@ const EmbedEdit = ( props ) => {
 
 	const onEditURL = useCallback(
 		( value ) => {
-			// If the embed URL was changed, we need to reset the aspect ratio class.
-			// To do this we have to remove the existing ratio class so it can be recalculated.
-			if ( attributes.url !== value ) {
-				const blockClass = removeAspectRatioClasses(
-					attributes.className
-				);
-				setAttributes( { className: blockClass } );
-			}
+			const rewrittenURL = rewriteXToTwitter( value );
+			const urlChanged = attributes.url !== rewrittenURL;
 
 			// The order of the following calls is important, we need to update the URL attribute before changing `isEditingURL`,
 			// otherwise the side-effect that potentially replaces the block when updating the local state won't use the new URL
 			// for creating the new block.
-			setAttributes( { url: value } );
+			setAttributes( {
+				url: rewrittenURL,
+				...findMoreSuitableBlock( rewrittenURL )?.attributes,
+				// If the embed URL was changed, reset the aspect ratio class so it can be recalculated.
+				...( urlChanged && {
+					className: removeAspectRatioClasses( attributes.className ),
+				} ),
+			} );
 			setIsEditingURL( false );
 		},
 		[ attributes, setAttributes ]

package/src/embed/transforms.js

@@ -7,7 +7,11 @@ import { createBlock } from '@wordpress/blocks';
  * Internal dependencies
  */
 import metadata from './block.json';
-import { removeAspectRatioClasses } from './util';
+import {
+	findMoreSuitableBlock,
+	rewriteXToTwitter,
+	removeAspectRatioClasses,
+} from './util';
 
 const { name: EMBED_BLOCK } = metadata;
 
@@ -23,8 +27,10 @@ const transforms = {
 				/^\s*(https?:\/\/\S+)\s*$/i.test( node.textContent ) &&
 				node.textContent?.match( /https/gi )?.length === 1,
 			transform: ( node ) => {
+				const url = rewriteXToTwitter( node.textContent.trim() );
 				return createBlock( EMBED_BLOCK, {
-					url: node.textContent.trim(),
+					url,
+					...findMoreSuitableBlock( url )?.attributes,
 				} );
 			},
 		},

package/src/embed/util.js

@@ -14,6 +14,7 @@ import {
 	getBlockType,
 	getBlockVariations,
 } from '@wordpress/blocks';
+import { getAuthority } from '@wordpress/url';
 
 /**
  * Internal dependencies
@@ -60,6 +61,22 @@ export const findMoreSuitableBlock = ( url ) =>
 		matchesPatterns( url, patterns )
 	);
 
+/**
+ * Rewrites `x.com` URLs to `twitter.com` as a workaround while the
+ * WordPress oEmbed registry lacks an X provider. See: https://core.trac.wordpress.org/ticket/59142.
+ *
+ * @param {string} url The URL to rewrite.
+ * @return {string} The (possibly) rewritten URL.
+ */
+export function rewriteXToTwitter( url ) {
+	if ( ! url || getAuthority( url ) !== 'x.com' ) {
+		return url;
+	}
+	const rewritten = new URL( url );
+	rewritten.host = 'twitter.com';
+	return rewritten.toString();
+}
+
 export const isFromWordPress = ( html ) =>
 	html && html.includes( 'class="wp-embedded-content"' );
 

package/src/form/block.json

@@ -4,7 +4,7 @@
 	"__experimental": true,
 	"name": "core/form",
 	"title": "Form",
-	"category": "common",
+	"category": "widgets",
 	"allowedBlocks": [
 		"core/paragraph",
 		"core/heading",

package/src/form-input/block.json

@@ -4,7 +4,7 @@
 	"__experimental": true,
 	"name": "core/form-input",
 	"title": "Input Field",
-	"category": "common",
+	"category": "widgets",
 	"ancestor": [ "core/form" ],
 	"description": "The basic building block for forms.",
 	"keywords": [ "input", "form" ],

package/src/form-submission-notification/block.json

@@ -4,7 +4,7 @@
 	"__experimental": true,
 	"name": "core/form-submission-notification",
 	"title": "Form Submission Notification",
-	"category": "common",
+	"category": "widgets",
 	"ancestor": [ "core/form" ],
 	"description": "Provide a notification message after the form has been submitted.",
 	"keywords": [ "form", "feedback", "notification", "message" ],

package/src/form-submit-button/block.json

@@ -4,7 +4,7 @@
 	"__experimental": true,
 	"name": "core/form-submit-button",
 	"title": "Form Submit Button",
-	"category": "common",
+	"category": "widgets",
 	"icon": "button",
 	"ancestor": [ "core/form" ],
 	"allowedBlocks": [ "core/buttons", "core/button" ],

package/src/group/block.json

@@ -55,7 +55,8 @@
 			}
 		},
 		"dimensions": {
-			"minHeight": true
+			"minHeight": true,
+			"minWidth": true
 		},
 		"__experimentalBorder": {
 			"color": true,

package/src/image/constants.js

@@ -3,7 +3,7 @@ export const LINK_DESTINATION_NONE = 'none';
 export const LINK_DESTINATION_MEDIA = 'media';
 export const LINK_DESTINATION_ATTACHMENT = 'attachment';
 export const LINK_DESTINATION_CUSTOM = 'custom';
-export const NEW_TAB_REL = [ 'noreferrer', 'noopener' ];
+export const NEW_TAB_REL = [ 'noopener' ];
 export const ALLOWED_MEDIA_TYPES = [ 'image' ];
 export const MEDIA_ID_NO_FEATURED_IMAGE_SET = 0;
 export const SIZED_LAYOUTS = [ 'flex', 'grid' ];

package/src/image/edit.js

@@ -142,8 +142,6 @@ export function ImageEdit( {
 			setAttributes( {
 				width: undefined,
 				height: undefined,
-				aspectRatio: undefined,
-				scale: undefined,
 			} );
 		}
 	}, [ __unstableMarkNextChangeAsNotPersistent, align, setAttributes ] );
@@ -355,7 +353,11 @@ export function ImageEdit( {
 
 	const isSideloading = useSelect(
 		( select ) => {
-			if ( ! window.__clientSideMediaProcessing || ! id ) {
+			if (
+				( ! window.__clientSideMediaProcessing &&
+					! window.__heicUploadSupport ) ||
+				! id
+			) {
 				return false;
 			}
 			return select( uploadStore ).isUploadingById( id );

package/src/image/edit.native.js

@@ -34,7 +34,7 @@ import {
 	BottomSheetSelectControl,
 	FooterMessageControl,
 	FooterMessageLink,
-	Badge,
+	WCBadge,
 } from '@wordpress/components';
 import {
 	BlockCaption,
@@ -803,7 +803,7 @@ export class ImageEdit extends Component {
 		}
 
 		const getImageComponent = ( openMediaOptions, getMediaOptions ) => (
-			<Badge label={ badgeLabelText } show={ badgeLabelShown }>
+			<WCBadge label={ badgeLabelText } show={ badgeLabelShown }>
 				<TouchableWithoutFeedback
 					accessible={ ! isSelected }
 					onPress={ this.onImagePressed }
@@ -886,7 +886,7 @@ export class ImageEdit extends Component {
 					onBlur={ this.props.onBlur } // Always assign onBlur as props.
 					insertBlocksAfter={ this.props.insertBlocksAfter }
 				/>
-			</Badge>
+			</WCBadge>
 		);
 
 		return (

package/src/image/image.js

@@ -70,9 +70,12 @@ import {
 } from './constants';
 import { evalAspectRatio, mediaPosition } from './utils';
 
-const { DimensionsTool, ResolutionTool, mediaEditKey } = unlock(
-	blockEditorPrivateApis
-);
+const {
+	DimensionsTool,
+	ResolutionTool,
+	mediaEditKey,
+	openMediaEditorModalKey,
+} = unlock( blockEditorPrivateApis );
 
 const scaleOptions = [
 	{
@@ -362,27 +365,6 @@ export default function Image( {
 		[ id, isSingleSelected ]
 	);
 
-	// If the image has an id but the attachment doesn't exist on this site,
-	// clear the id so Gutenberg treats the image as external.
-	// This handles content copied between WordPress sites.
-	//
-	// Known limitation: if a different attachment with the same id happens to
-	// exist on the destination site, the lookup will succeed and the wrong
-	// local image will be used. URL matching could address this in a follow-up.
-	// See: https://github.com/WordPress/gutenberg/issues/74156
-	useEffect( () => {
-		if ( ! id || ! isSingleSelected ) {
-			return;
-		}
-		// Only clear for confirmed 404s. apiFetch throws the Response object
-		// for HTTP errors, so checking .status === 404 avoids incorrectly
-		// clearing the id on 403, 500, or network failures, which would
-		// cause data loss for valid local attachments.
-		if ( attachmentResolutionError?.status === 404 ) {
-			setAttributes( { id: undefined } );
-		}
-	}, [ id, isSingleSelected, attachmentResolutionError, setAttributes ] );
-
 	const {
 		canInsertCover,
 		imageEditing,
@@ -411,9 +393,27 @@ export default function Image( {
 		[ clientId ]
 	);
 	const { getBlock, getSettings } = useSelect( blockEditorStore );
-	const onNavigateToEntityRecord = getSettings().onNavigateToEntityRecord;
+	const settings = getSettings();
+	const { onNavigateToEntityRecord } = settings;
+	const openMediaEditorModal = settings[ openMediaEditorModalKey ];
+
+	const handleMediaUpdate = useCallback(
+		( { id: newId, url: newUrl } ) => {
+			if ( typeof newId === 'number' && newId !== id ) {
+				setAttributes( {
+					id: newId,
+					url: newUrl ?? url,
+				} );
+			}
+		},
+		[ id, url, setAttributes ]
+	);
 
-	const { replaceBlocks, toggleSelection } = useDispatch( blockEditorStore );
+	const {
+		replaceBlocks,
+		toggleSelection,
+		__unstableMarkNextChangeAsNotPersistent,
+	} = useDispatch( blockEditorStore );
 	const { createErrorNotice, createSuccessNotice } =
 		useDispatch( noticesStore );
 	const { editEntityRecord } = useDispatch( coreStore );
@@ -444,6 +444,34 @@ export default function Image( {
 		)
 		.map( ( { name, slug } ) => ( { value: slug, label: name } ) );
 
+	// If the image has an id but the attachment doesn't exist on this site,
+	// clear the id so Gutenberg treats the image as external.
+	// This handles content copied between WordPress sites.
+	//
+	// Known limitation: if a different attachment with the same id happens to
+	// exist on the destination site, the lookup will succeed and the wrong
+	// local image will be used. URL matching could address this in a follow-up.
+	// See: https://github.com/WordPress/gutenberg/issues/74156
+	useEffect( () => {
+		if ( ! id || ! isSingleSelected ) {
+			return;
+		}
+		// Only clear for confirmed 404s. apiFetch throws the Response object
+		// for HTTP errors, so checking .status === 404 avoids incorrectly
+		// clearing the id on 403, 500, or network failures, which would
+		// cause data loss for valid local attachments.
+		if ( attachmentResolutionError?.status === 404 ) {
+			__unstableMarkNextChangeAsNotPersistent();
+			setAttributes( { id: undefined } );
+		}
+	}, [
+		id,
+		isSingleSelected,
+		attachmentResolutionError,
+		setAttributes,
+		__unstableMarkNextChangeAsNotPersistent,
+	] );
+
 	// If an image is externally hosted, try to fetch the image data. This may
 	// fail if the image host doesn't allow CORS with the domain. If it works,
 	// we can enable a button in the toolbar to upload the image.
@@ -864,7 +892,15 @@ export default function Image( {
 					) }
 					{ allowCrop && (
 						<ToolbarButton
-							onClick={ () => setIsEditingImage( true ) }
+							onClick={
+								openMediaEditorModal && id
+									? () =>
+											openMediaEditorModal( {
+												id,
+												onUpdate: handleMediaUpdate,
+											} )
+									: () => setIsEditingImage( true )
+							}
 							icon={ crop }
 							label={ __( 'Crop' ) }
 						/>

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

@@ -269,7 +269,7 @@ describe( 'Image Block', () => {
 		fireEvent.press( linkTargetButton );
 
 		const expectedHtml = `<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"custom","className":"is-style-default"} -->
-<figure class="wp-block-image size-large is-style-default"><a href="https://wordpress.org" target="_blank" rel="noreferrer noopener"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1"/></a><figcaption class="wp-element-caption">Mountain</figcaption></figure>
+<figure class="wp-block-image size-large is-style-default"><a href="https://wordpress.org" target="_blank" rel="noopener"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1"/></a><figcaption class="wp-element-caption">Mountain</figcaption></figure>
 <!-- /wp:image -->`;
 		expect( getEditorHtml() ).toBe( expectedHtml );
 	} );
@@ -278,7 +278,7 @@ describe( 'Image Block', () => {
 		const initialHtml = `
 		<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"custom","className":"is-style-default"} -->
 		<figure class="wp-block-image size-large is-style-default">
-			<a href="https://wordpress.org" target="_blank" rel="noreferrer noopener">
+			<a href="https://wordpress.org" target="_blank" rel="noopener">
 				<img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1"/>
 			</a>
 			<figcaption class="wp-element-caption">Mountain</figcaption>

package/src/index.js

@@ -137,11 +137,11 @@ import * as socialLinks from './social-links';
 import * as spacer from './spacer';
 import * as tab from './tab';
 import * as tabPanel from './tab-panel';
+import * as tabPanels from './tab-panels';
 import * as table from './table';
 import * as tableOfContents from './table-of-contents';
+import * as tabList from './tab-list';
 import * as tabs from './tabs';
-import * as tabsMenu from './tabs-menu';
-import * as tabsMenuItem from './tabs-menu-item';
 import * as tagCloud from './tag-cloud';
 import * as templatePart from './template-part';
 import * as termCount from './term-count';
@@ -288,10 +288,10 @@ const getAllBlocks = () => {
 
 	if ( window?.__experimentalEnableBlockExperiments ) {
 		blocks.push( tab );
+		blocks.push( tabList );
 		blocks.push( tabs );
-		blocks.push( tabsMenu );
-		blocks.push( tabsMenuItem );
 		blocks.push( tabPanel );
+		blocks.push( tabPanels );
 		blocks.push( playlist );
 		blocks.push( playlistTrack );
 	}

package/src/latest-comments/style.scss

@@ -1,3 +1,10 @@
+// Reset the browser's default `padding-inline-start: 40px` on `<ol>`.
+// Using `:where` keeps specificity at 0 so global styles, theme.json,
+// and inspector controls can override it without difficulty.
+:where(.wp-block-latest-comments) {
+	padding-left: 0;
+}
+
 // Lower specificity - target list element.
 ol.wp-block-latest-comments {
 	// Removes left spacing in Customizer Widgets screen.
@@ -26,13 +33,6 @@ ol.wp-block-latest-comments {
 	}
 }
 
-// Higher specificity - target list via wrapper.
-.wp-block-latest-comments .wp-block-latest-comments {
-	// Remove left spacing. Higher specificity required to
-	// override default wp-block layout styles in the Post/Site editor.
-	padding-left: 0;
-}
-
 .wp-block-latest-comments__comment {
 	list-style: none;
 	margin-bottom: 1em;

package/src/latest-posts/edit.js

@@ -743,7 +743,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 										<a
 											className="wp-block-latest-posts__read-more"
 											href={ post.link }
-											rel="noopener noreferrer"
+											rel="noopener"
 											onClick={
 												showRedirectionPreventedNotice
 											}

package/src/latest-posts/index.php

@@ -163,7 +163,7 @@ function render_block_core_latest_posts( $attributes ) {
 					$trimmed_excerpt  = substr( $trimmed_excerpt, 0, -11 );
 					$trimmed_excerpt .= sprintf(
 						/* translators: 1: A URL to a post, 2: Hidden accessibility text: Post title */
-						__( '… <a class="wp-block-latest-posts__read-more" href="%1$s" rel="noopener noreferrer">Read more<span class="screen-reader-text">: %2$s</span></a>' ),
+						__( '… <a class="wp-block-latest-posts__read-more" href="%1$s" rel="noopener">Read more<span class="screen-reader-text">: %2$s</span></a>' ),
 						esc_url( $post_link ),
 						esc_html( $title )
 					);

package/src/math/edit.js

@@ -21,7 +21,7 @@ import { speak } from '@wordpress/a11y';
  */
 import { unlock } from '../lock-unlock';
 
-const { Badge } = unlock( componentsPrivateApis );
+const { Badge: WCBadge } = unlock( componentsPrivateApis );
 
 export default function MathEdit( { attributes, setAttributes, isSelected } ) {
 	const { latex, mathML } = attributes;
@@ -116,7 +116,7 @@ export default function MathEdit( { attributes, setAttributes, isSelected } ) {
 							/>
 							{ error && (
 								<>
-									<Badge
+									<WCBadge
 										intent="error"
 										className="wp-block-math__error"
 									>
@@ -125,7 +125,7 @@ export default function MathEdit( { attributes, setAttributes, isSelected } ) {
 											__( 'Error: %s' ),
 											error
 										) }
-									</Badge>
+									</WCBadge>
 									<style children=".wp-block-math__error .components-badge__content{white-space:normal}" />
 								</>
 							) }

package/src/navigation/edit/accessible-description.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { VisuallyHidden } from '@wordpress/components';
+import { VisuallyHidden } from '@wordpress/ui';
 
 export default function AccessibleDescription( { id, children } ) {
 	return (

package/src/navigation/edit/overlay-template-part-selector.js

@@ -11,7 +11,7 @@ import {
 	FlexBlock,
 	FlexItem,
 	__experimentalHStack as HStack,
-	__experimentalText as Text,
+	__experimentalText as WCText,
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { decodeEntities } from '@wordpress/html-entities';
@@ -351,7 +351,7 @@ export default function OverlayTemplatePartSelector( {
 				alignment="flex-start"
 				className="wp-block-navigation__overlay-help-text-wrapper"
 			>
-				<Text
+				<WCText
 					variant="muted"
 					isBlock
 					className="wp-block-navigation__overlay-help-text"
@@ -359,7 +359,7 @@ export default function OverlayTemplatePartSelector( {
 					{ __(
 						'An overlay template allows you to customize the appearance of the dialog that opens when the menu button is pressed.'
 					) }
-				</Text>
+				</WCText>
 			</HStack>
 		</div>
 	);

package/src/navigation/edit/test/overlay-template-part-selector.js

@@ -43,6 +43,7 @@ jest.mock( '@wordpress/data', () => ( {
 		return newState;
 	} ),
 	register: jest.fn(),
+	keyedReducer: jest.fn( () => ( reducer ) => reducer ),
 } ) );
 
 const mockSetAttributes = jest.fn();

package/src/navigation-link/edit.js

@@ -8,11 +8,7 @@ import clsx from 'clsx';
  */
 import { createBlock } from '@wordpress/blocks';
 import { useSelect, useDispatch } from '@wordpress/data';
-import {
-	ToolbarButton,
-	ToolbarGroup,
-	VisuallyHidden,
-} from '@wordpress/components';
+import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
 import { displayShortcut, isKeyboardEvent } from '@wordpress/keycodes';
 import { __, sprintf } from '@wordpress/i18n';
 import {
@@ -26,6 +22,7 @@ import {
 } from '@wordpress/block-editor';
 import { isURL, prependHTTP } from '@wordpress/url';
 import { useState, useEffect, useRef, useCallback } from '@wordpress/element';
+import { VisuallyHidden } from '@wordpress/ui';
 import { link as linkIcon, addSubmenu } from '@wordpress/icons';
 import { useMergeRefs, useInstanceId } from '@wordpress/compose';