@wordpress/block-library 9.45.0 → 9.45.1-next.v.202605131032.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "9.45.0",
+	"version": "9.45.1-next.v.202605131032.0+f6d6e7149",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -95,43 +95,44 @@
 	],
 	"dependencies": {
 		"@arraypress/waveform-player": "1.2.1",
-		"@wordpress/a11y": "^4.45.0",
-		"@wordpress/api-fetch": "^7.45.0",
-		"@wordpress/autop": "^4.45.0",
-		"@wordpress/base-styles": "^7.0.0",
-		"@wordpress/blob": "^4.45.0",
-		"@wordpress/block-editor": "^15.18.0",
-		"@wordpress/blocks": "^15.18.0",
-		"@wordpress/components": "^33.0.0",
-		"@wordpress/compose": "^7.45.0",
-		"@wordpress/core-data": "^7.45.0",
-		"@wordpress/data": "^10.45.0",
-		"@wordpress/date": "^5.45.0",
-		"@wordpress/deprecated": "^4.45.0",
-		"@wordpress/dom": "^4.45.0",
-		"@wordpress/element": "^6.45.0",
-		"@wordpress/escape-html": "^3.45.0",
-		"@wordpress/hooks": "^4.45.0",
-		"@wordpress/html-entities": "^4.45.0",
-		"@wordpress/i18n": "^6.18.0",
-		"@wordpress/icons": "^13.0.0",
-		"@wordpress/interactivity": "^6.45.0",
-		"@wordpress/interactivity-router": "^2.45.0",
-		"@wordpress/keyboard-shortcuts": "^5.45.0",
-		"@wordpress/keycodes": "^4.45.0",
-		"@wordpress/latex-to-mathml": "^1.13.0",
-		"@wordpress/notices": "^5.45.0",
-		"@wordpress/patterns": "^2.45.0",
-		"@wordpress/primitives": "^4.45.0",
-		"@wordpress/private-apis": "^1.45.0",
-		"@wordpress/reusable-blocks": "^5.45.0",
-		"@wordpress/rich-text": "^7.45.0",
-		"@wordpress/server-side-render": "^6.21.0",
-		"@wordpress/ui": "^0.12.0",
-		"@wordpress/upload-media": "^0.30.0",
-		"@wordpress/url": "^4.45.0",
-		"@wordpress/viewport": "^6.45.0",
-		"@wordpress/wordcount": "^4.45.0",
+		"@wordpress/a11y": "^4.45.1-next.v.202605131032.0+f6d6e7149",
+		"@wordpress/api-fetch": "^7.45.1-next.v.202605131032.0+f6d6e7149",
+		"@wordpress/autop": "^4.45.1-next.v.202605131032.0+f6d6e7149",
+		"@wordpress/base-styles": "^8.0.1-next.v.202605131032.0+f6d6e7149",
+		"@wordpress/blob": "^4.45.1-next.v.202605131032.0+f6d6e7149",
+		"@wordpress/block-editor": "^15.19.1-next.v.202605131032.0+f6d6e7149",
+		"@wordpress/blocks": "^15.18.1-next.v.202605131032.0+f6d6e7149",
+		"@wordpress/components": "^33.1.1-next.v.202605131032.0+f6d6e7149",
+		"@wordpress/compose": "^7.45.1-next.v.202605131032.0+f6d6e7149",
+		"@wordpress/core-data": "^7.45.1-next.v.202605131032.0+f6d6e7149",
+		"@wordpress/data": "^10.45.1-next.v.202605131032.0+f6d6e7149",
+		"@wordpress/date": "^5.45.1-next.v.202605131032.0+f6d6e7149",
+		"@wordpress/deprecated": "^4.45.1-next.v.202605131032.0+f6d6e7149",
+		"@wordpress/dom": "^4.45.1-next.v.202605131032.0+f6d6e7149",
+		"@wordpress/element": "^6.45.1-next.v.202605131032.0+f6d6e7149",
+		"@wordpress/escape-html": "^3.45.1-next.v.202605131032.0+f6d6e7149",
+		"@wordpress/hooks": "^4.45.1-next.v.202605131032.0+f6d6e7149",
+		"@wordpress/html-entities": "^4.45.1-next.v.202605131032.0+f6d6e7149",
+		"@wordpress/i18n": "^6.18.1-next.v.202605131032.0+f6d6e7149",
+		"@wordpress/icons": "^13.0.1-next.v.202605131032.0+f6d6e7149",
+		"@wordpress/interactivity": "^6.45.1-next.v.202605131032.0+f6d6e7149",
+		"@wordpress/interactivity-router": "^2.45.1-next.v.202605131032.0+f6d6e7149",
+		"@wordpress/keyboard-shortcuts": "^5.45.1-next.v.202605131032.0+f6d6e7149",
+		"@wordpress/keycodes": "^4.45.1-next.v.202605131032.0+f6d6e7149",
+		"@wordpress/latex-to-mathml": "^1.13.1-next.v.202605131032.0+f6d6e7149",
+		"@wordpress/notices": "^5.45.1-next.v.202605131032.0+f6d6e7149",
+		"@wordpress/patterns": "^2.45.1-next.v.202605131032.0+f6d6e7149",
+		"@wordpress/primitives": "^4.45.1-next.v.202605131032.0+f6d6e7149",
+		"@wordpress/private-apis": "^1.45.1-next.v.202605131032.0+f6d6e7149",
+		"@wordpress/reusable-blocks": "^5.45.1-next.v.202605131032.0+f6d6e7149",
+		"@wordpress/rich-text": "^7.45.1-next.v.202605131032.0+f6d6e7149",
+		"@wordpress/server-side-render": "^6.21.1-next.v.202605131032.0+f6d6e7149",
+		"@wordpress/shortcode": "^4.45.1-next.v.202605131032.0+f6d6e7149",
+		"@wordpress/ui": "^0.13.1-next.v.202605131032.0+f6d6e7149",
+		"@wordpress/upload-media": "^0.30.1-next.v.202605131032.0+f6d6e7149",
+		"@wordpress/url": "^4.45.1-next.v.202605131032.0+f6d6e7149",
+		"@wordpress/viewport": "^6.45.1-next.v.202605131032.0+f6d6e7149",
+		"@wordpress/wordcount": "^4.45.1-next.v.202605131032.0+f6d6e7149",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -140,7 +141,7 @@
 		"html-react-parser": "5.2.11",
 		"memize": "^2.1.0",
 		"remove-accents": "^0.5.0",
-		"uuid": "^9.0.1"
+		"uuid": "^14.0.0"
 	},
 	"devDependencies": {
 		"deep-freeze": "0.0.1"
@@ -152,5 +153,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "8c229eaed0e88c9827e2da3d73a78f9ddd77714b"
+	"gitHead": "0e198c7ac7ca634e73ded9220ce048c0302174dd"
 }

package/src/breadcrumbs/edit.js

@@ -290,7 +290,7 @@ export default function BreadcrumbEdit( {
 						setAttributes( { showOnHomePage: value } )
 					}
 					help={ __(
-						'If this breadcrumbs block appears in a template or template part that’s shown on the homepage, enable this option to display the breadcrumb trail. Otherwise, this setting has no effect.'
+						'If this Breadcrumbs block appears in a template or template part that’s shown on the homepage, enable this option to display the breadcrumb trail. Otherwise, this setting has no effect.'
 					) }
 				/>
 				<CheckboxControl

package/src/buttons/edit.js

@@ -7,8 +7,6 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
-import { useSelect } from '@wordpress/data';
-import { store as blocksStore } from '@wordpress/blocks';
 
 const DEFAULT_BLOCK = {
 	name: 'core/button',
@@ -32,20 +30,9 @@ function ButtonsEdit( { attributes, className } ) {
 			'has-custom-font-size': fontSize || style?.typography?.fontSize,
 		} ),
 	} );
-	const { hasButtonVariations } = useSelect( ( select ) => {
-		const buttonVariations = select( blocksStore ).getBlockVariations(
-			'core/button',
-			'inserter'
-		);
-		return {
-			hasButtonVariations: buttonVariations.length > 0,
-		};
-	}, [] );
 
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		defaultBlock: DEFAULT_BLOCK,
-		// This check should be handled by the `Inserter` internally to be consistent across all blocks that use it.
-		directInsert: ! hasButtonVariations,
 		template: [ [ 'core/button' ] ],
 		templateInsertUpdatesSelection: true,
 		orientation: layout?.orientation ?? 'horizontal',

package/src/comment-reply-link/edit.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { _x } from '@wordpress/i18n';
 import { useBlockProps } from '@wordpress/block-editor';
 
 /**
@@ -20,7 +20,10 @@ function Edit( props ) {
 					href="#comment-reply-pseudo-link"
 					onClick={ ( event ) => event.preventDefault() }
 				>
-					{ __( 'Reply' ) }
+					{
+						/* translators: Comment reply button text. */
+						_x( 'Reply', 'verb' )
+					}
 				</a>
 			</div>
 		</>

package/src/comments/edit/placeholder.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { store as blockEditorStore } from '@wordpress/block-editor';
-import { __, sprintf } from '@wordpress/i18n';
+import { __, _x, sprintf } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { useEntityProp } from '@wordpress/core-data';
 import { createInterpolateElement } from '@wordpress/element';
@@ -109,7 +109,10 @@ export default function PostCommentsPlaceholder( { postType, postId } ) {
 									'Reply to A WordPress Commenter'
 								) }
 							>
-								{ __( 'Reply' ) }
+								{
+									/* translators: Comment reply button text. */
+									_x( 'Reply', 'verb' )
+								}
 							</a>
 						</div>
 					</article>

package/src/cover/editor.scss

@@ -1,5 +1,4 @@
 @use "@wordpress/base-styles/variables" as *;
-@use "@wordpress/base-styles/z-index" as *;
 
 .wp-block-cover {
 	// Override default cover styles
@@ -13,7 +12,8 @@
 		.components-placeholder {
 			&.is-large {
 				justify-content: flex-start;
-				z-index: z-index(".wp-block-cover.is-placeholder .components-placeholder.is-large");
+				// Lift the resizer UI above the surrounding placeholder content.
+				z-index: 1;
 			}
 		}
 

package/src/cover/style.scss

@@ -1,6 +1,5 @@
 @use "@wordpress/base-styles/colors" as *;
 @use "@wordpress/base-styles/variables" as *;
-@use "@wordpress/base-styles/z-index" as *;
 
 .wp-block-cover-image,
 .wp-block-cover {
@@ -348,15 +347,18 @@ body:not(.editor-styles-wrapper) .wp-block-cover:not(
 )
 ) {
 	.wp-block-cover__video-background {
-		z-index: z-index(".wp-block-cover__video-background");
+		// Background media sits at the base of the stack.
+		z-index: 0;
 	}
 
 	.wp-block-cover__embed-background {
-		z-index: z-index(".wp-block-cover__video-background");
+		// Shares the same base layer as the video background.
+		z-index: 0;
 	}
 
 	.wp-block-cover__image-background {
-		z-index: z-index(".wp-block-cover__image-background");
+		// Background media sits at the base of the stack.
+		z-index: 0;
 	}
 
 	// The first selector is required for old Cover markup/
@@ -364,11 +366,13 @@ body:not(.editor-styles-wrapper) .wp-block-cover:not(
 	&.has-background-dim:not(.has-background-gradient)::before,
 	.wp-block-cover__background,
 	.wp-block-cover__gradient-background {
-		z-index: z-index(".wp-block-cover.has-background-dim::before");
+		// Sit above the video/image/embed background media.
+		z-index: 1;
 	}
 
 	.wp-block-cover__inner-container {
-		z-index: z-index(".wp-block-cover__inner-container");
+		// Lift the inner blocks above the background media and overlay.
+		z-index: 1;
 
 		// Reset the z-index to auto when the body has a modal open. So when the
 		// modal is inside the cover, it doesn't create a stacking context.

package/src/embed/transforms.js

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { createBlock } from '@wordpress/blocks';
+import { isURL, getFilename } from '@wordpress/url';
 
 /**
  * Internal dependencies
@@ -22,10 +23,24 @@ const transforms = {
 	from: [
 		{
 			type: 'raw',
-			isMatch: ( node ) =>
-				node.nodeName === 'P' &&
-				/^\s*(https?:\/\/\S+)\s*$/i.test( node.textContent ) &&
-				node.textContent?.match( /https/gi )?.length === 1,
+			isMatch: ( node ) => {
+				if ( node.nodeName !== 'P' ) {
+					return false;
+				}
+				const trimmed = node.textContent.trim();
+				if (
+					! isURL( trimmed ) ||
+					! /^https:\/\//i.test( trimmed ) ||
+					trimmed.match( /https:\/\//gi )?.length !== 1
+				) {
+					return false;
+				}
+				// Reject URLs whose filename ends in a file extension,
+				// except common page extensions used by permalinks.
+				return ! /\.(?!(html?|php)$)[a-z0-9]+$/i.test(
+					getFilename( trimmed ) || ''
+				);
+			},
 			transform: ( node ) => {
 				const url = rewriteXToTwitter( node.textContent.trim() );
 				return createBlock( EMBED_BLOCK, {
@@ -34,6 +49,17 @@ const transforms = {
 				} );
 			},
 		},
+		{
+			type: 'shortcode',
+			tag: 'embed',
+			transform: ( _attrs, { shortcode } ) => {
+				const url = rewriteXToTwitter( shortcode.content?.trim() );
+				return createBlock( EMBED_BLOCK, {
+					url,
+					...findMoreSuitableBlock( url )?.attributes,
+				} );
+			},
+		},
 	],
 	to: [
 		{

package/src/freeform/convert-to-blocks-button.js

@@ -3,27 +3,12 @@
  */
 import { __ } from '@wordpress/i18n';
 import { ToolbarButton } from '@wordpress/components';
-import { useDispatch, useSelect } from '@wordpress/data';
-import { rawHandler, serialize } from '@wordpress/blocks';
-import { store as blockEditorStore } from '@wordpress/block-editor';
-
-const ConvertToBlocksButton = ( { clientId } ) => {
-	const { replaceBlocks } = useDispatch( blockEditorStore );
-	const block = useSelect(
-		( select ) => {
-			return select( blockEditorStore ).getBlock( clientId );
-		},
-		[ clientId ]
-	);
+import { rawHandler } from '@wordpress/blocks';
 
+const ConvertToBlocksButton = ( { content, onReplace } ) => {
 	return (
 		<ToolbarButton
-			onClick={ () =>
-				replaceBlocks(
-					block.clientId,
-					rawHandler( { HTML: serialize( block ) } )
-				)
-			}
+			onClick={ () => onReplace( rawHandler( { HTML: content } ) ) }
 		>
 			{ __( 'Convert to blocks' ) }
 		</ToolbarButton>

package/src/freeform/edit.js

@@ -7,7 +7,7 @@ import {
 	useBlockProps,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { useSelect } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import {
 	Button,
 	Placeholder,
@@ -22,12 +22,14 @@ import { classic } from '@wordpress/icons';
  * Internal dependencies
  */
 import ConvertToBlocksButton from './convert-to-blocks-button';
+import MigrationNotice from './migration-notice';
 import ModalEdit from './modal';
 
 export default function FreeformEdit( {
 	attributes,
 	setAttributes,
 	clientId,
+	onReplace,
 } ) {
 	const { content } = attributes;
 	const [ isOpen, setOpen ] = useState( false );
@@ -37,13 +39,21 @@ export default function FreeformEdit( {
 		( select ) => select( blockEditorStore ).canRemoveBlock( clientId ),
 		[ clientId ]
 	);
+	const { removeBlock } = useDispatch( blockEditorStore );
+
+	// Gated by an experiment so authors can opt into a stronger nudge to
+	// migrate Classic block content ahead of its planned deprecation.
+	const isDeprecationMode = window.__experimentalClassicBlockDeprecation;
 
 	return (
 		<>
-			{ canRemove && (
+			{ canRemove && ! isDeprecationMode && (
 				<BlockControls>
 					<ToolbarGroup>
-						<ConvertToBlocksButton clientId={ clientId } />
+						<ConvertToBlocksButton
+							content={ content }
+							onReplace={ onReplace }
+						/>
 					</ToolbarGroup>
 				</BlockControls>
 			) }
@@ -58,19 +68,42 @@ export default function FreeformEdit( {
 				</ToolbarGroup>
 			</BlockControls>
 			<div { ...useBlockProps() }>
+				{ isDeprecationMode && canRemove && content && (
+					<MigrationNotice
+						content={ content }
+						onReplace={ onReplace }
+					/>
+				) }
 				{ content ? (
 					<RawHTML>{ content }</RawHTML>
 				) : (
 					<Placeholder
 						icon={ <BlockIcon icon={ classic } /> }
 						label={ __( 'Classic' ) }
-						instructions={ __(
-							'Use the classic editor to add content.'
-						) }
+						instructions={
+							isDeprecationMode
+								? __(
+										'The Classic block is being phased out. It’s recommended to use other blocks for the best editing experience.'
+								  )
+								: __( 'Use the classic editor to add content.' )
+						}
 					>
+						{ isDeprecationMode && canRemove && (
+							<Button
+								__next40pxDefaultSize
+								variant="primary"
+								onClick={ () => removeBlock( clientId ) }
+							>
+								{ __( 'Remove block' ) }
+							</Button>
+						) }
 						<Button
 							__next40pxDefaultSize
-							variant="primary"
+							variant={
+								isDeprecationMode && canRemove
+									? 'secondary'
+									: 'primary'
+							}
 							onClick={ () => setOpen( true ) }
 						>
 							{ __( 'Edit contents' ) }

package/src/freeform/index.js

@@ -21,4 +21,12 @@ export const settings = {
 	save,
 };
 
-export const init = () => initBlock( { name, metadata, settings } );
+export const init = () => {
+	// Only expose the block in the inserter if the current post actually needs
+	// a classic block.
+	const supports = {
+		...metadata.supports,
+		inserter: !! window?.__needsClassicBlock,
+	};
+	return initBlock( { name, metadata, settings: { ...settings, supports } } );
+};

package/src/freeform/migration-notice.js

@@ -0,0 +1,51 @@
+/**
+ * WordPress dependencies
+ */
+import { Warning } from '@wordpress/block-editor';
+import { Button } from '@wordpress/components';
+import { createBlock, rawHandler } from '@wordpress/blocks';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Block-level deprecation warning rendered when the
+ * `gutenberg-classic-block-deprecation` experiment is enabled.
+ *
+ * Uses the same `Warning` primitive as `core/missing` so the experience is
+ * visually consistent with how the editor already surfaces deprecated blocks,
+ * and offers two migration actions - a primary "Convert to blocks", and a
+ * secondary "Convert to Custom HTML".
+ *
+ * @param {Object}   props
+ * @param {string}   props.content   Raw HTML content of the Classic block.
+ * @param {Function} props.onReplace Replace the current block with the given blocks.
+ */
+export default function MigrationNotice( { content, onReplace } ) {
+	const actions = [
+		<Button
+			__next40pxDefaultSize
+			key="convert-to-blocks"
+			variant="primary"
+			onClick={ () => onReplace( rawHandler( { HTML: content } ) ) }
+		>
+			{ __( 'Convert to blocks' ) }
+		</Button>,
+		<Button
+			__next40pxDefaultSize
+			key="convert-to-html"
+			variant="secondary"
+			onClick={ () =>
+				onReplace( createBlock( 'core/html', { content } ) )
+			}
+		>
+			{ __( 'Convert to HTML' ) }
+		</Button>,
+	];
+
+	return (
+		<Warning actions={ actions }>
+			{ __(
+				'The Classic block is being phased out. Convert this content to blocks for the best editing experience, or move it to a Custom HTML block to preserve the markup as-is.'
+			) }
+		</Warning>
+	);
+}

package/src/image/image.js

@@ -62,6 +62,7 @@ import { isExternalImage } from './edit';
 import { Caption } from '../utils/caption';
 import { MediaControl } from '../utils/media-control';
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
+import { useOpenImageMediaEditorModal } from './use-open-image-media-editor-modal';
 import {
 	MIN_SIZE,
 	ALLOWED_MEDIA_TYPES,
@@ -70,12 +71,9 @@ import {
 } from './constants';
 import { evalAspectRatio, mediaPosition } from './utils';
 
-const {
-	DimensionsTool,
-	ResolutionTool,
-	mediaEditKey,
-	openMediaEditorModalKey,
-} = unlock( blockEditorPrivateApis );
+const { DimensionsTool, ResolutionTool, mediaEditKey } = unlock(
+	blockEditorPrivateApis
+);
 
 const scaleOptions = [
 	{
@@ -316,7 +314,7 @@ export default function Image( {
 	const setRefs = useMergeRefs( [ setImageElement, setResizeObserved ] );
 	const { allowResize = true } = context;
 
-	const { image, canUserEdit, attachmentResolutionError } = useSelect(
+	const { image, attachmentResolutionError } = useSelect(
 		( select ) => {
 			const imageRecord =
 				id && isSingleSelected
@@ -345,20 +343,8 @@ export default function Image( {
 					  )
 					: null;
 
-			// Check edit permissions when the media editor experiment is enabled.
-			// Only check when imageRecord is available to avoid unnecessary API requests.
-			let canEdit = false;
-			if ( imageRecord && window?.__experimentalMediaEditor ) {
-				canEdit = !! select( coreStore ).canUser( 'update', {
-					kind: 'postType',
-					name: 'attachment',
-					id,
-				} );
-			}
-
 			return {
 				image: imageRecord,
-				canUserEdit: canEdit,
 				attachmentResolutionError: resolutionError,
 			};
 		},
@@ -393,21 +379,10 @@ export default function Image( {
 		[ clientId ]
 	);
 	const { getBlock, getSettings } = useSelect( blockEditorStore );
-	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 openImageMediaEditorModal = useOpenImageMediaEditorModal( {
+		attributes,
+		setAttributes,
+	} );
 
 	const {
 		replaceBlocks,
@@ -848,28 +823,6 @@ export default function Image( {
 	const hasDataFormBlockFields =
 		window?.__experimentalContentOnlyInspectorFields;
 
-	const editMediaButton = window?.__experimentalMediaEditor &&
-		id &&
-		isSingleSelected &&
-		canUserEdit &&
-		!! editMediaEntity &&
-		! isExternalImage( id, url ) &&
-		! isEditingImage &&
-		onNavigateToEntityRecord && (
-			<BlockControls group="other">
-				<ToolbarButton
-					onClick={ () => {
-						onNavigateToEntityRecord( {
-							postId: id,
-							postType: 'attachment',
-						} );
-					} }
-				>
-					{ __( 'Edit media' ) }
-				</ToolbarButton>
-			</BlockControls>
-		);
-
 	const controls = (
 		<>
 			{ showBlockControls && (
@@ -893,14 +846,13 @@ export default function Image( {
 					{ allowCrop && (
 						<ToolbarButton
 							onClick={
-								openMediaEditorModal && id
-									? () =>
-											openMediaEditorModal( {
-												id,
-												onUpdate: handleMediaUpdate,
-											} )
+								openImageMediaEditorModal
+									? openImageMediaEditorModal
 									: () => setIsEditingImage( true )
 							}
+							aria-haspopup={
+								openImageMediaEditorModal ? 'dialog' : undefined
+							}
 							icon={ crop }
 							label={ __( 'Crop' ) }
 						/>
@@ -1351,7 +1303,6 @@ export default function Image( {
 
 	return (
 		<>
-			{ editMediaButton }
 			{ mediaReplaceFlow }
 			{ controls }
 			{ featuredImageControl }