From 6a8ceb070b3043c0fa8c8f6b686980ad7be9168e Mon Sep 17 00:00:00 2001
From: Kai Hao <kai@kaihao.dev>
Date: Mon, 19 Feb 2024 16:14:43 +0800
Subject: [PATCH] Fix upload button on overriden empty image block in patterns

---
 lib/compat/wordpress-6.5/blocks.php           |  2 +-
 packages/patterns/src/constants.js            |  1 +
 .../editor/various/pattern-overrides.spec.js  | 67 +++++++++++++++++++
 3 files changed, 69 insertions(+), 1 deletion(-)

diff --git a/lib/compat/wordpress-6.5/blocks.php b/lib/compat/wordpress-6.5/blocks.php
index d8c24b3772125..fa81025185b42 100644
--- a/lib/compat/wordpress-6.5/blocks.php
+++ b/lib/compat/wordpress-6.5/blocks.php
@@ -160,7 +160,7 @@ function gutenberg_process_block_bindings( $block_content, $parsed_block, $block
 	$supported_block_attrs = array(
 		'core/paragraph' => array( 'content' ),
 		'core/heading'   => array( 'content' ),
-		'core/image'     => array( 'url', 'title', 'alt' ),
+		'core/image'     => array( 'id', 'url', 'title', 'alt' ),
 		'core/button'    => array( 'url', 'text', 'linkTarget', 'rel' ),
 	);
 
diff --git a/packages/patterns/src/constants.js b/packages/patterns/src/constants.js
index 109044946a3fc..24401e24fdd3b 100644
--- a/packages/patterns/src/constants.js
+++ b/packages/patterns/src/constants.js
@@ -31,6 +31,7 @@ export const PARTIAL_SYNCING_SUPPORTED_BLOCKS = {
 		rel: __( 'Link Relationship' ),
 	},
 	'core/image': {
+		id: __( 'Image ID' ),
 		url: __( 'URL' ),
 		title: __( 'Title' ),
 		alt: __( 'Alt Text' ),
diff --git a/test/e2e/specs/editor/various/pattern-overrides.spec.js b/test/e2e/specs/editor/various/pattern-overrides.spec.js
index 1747b09e63d9f..86d7b9117bef5 100644
--- a/test/e2e/specs/editor/various/pattern-overrides.spec.js
+++ b/test/e2e/specs/editor/various/pattern-overrides.spec.js
@@ -3,6 +3,11 @@
  */
 const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
 
+/**
+ * External dependencies
+ */
+const path = require( 'path' );
+
 test.describe( 'Pattern Overrides', () => {
 	test.beforeAll( async ( { requestUtils } ) => {
 		await Promise.all( [
@@ -584,4 +589,66 @@ test.describe( 'Pattern Overrides', () => {
 		await editor.showBlockToolbar();
 		await expect( resetButton ).toBeDisabled();
 	} );
+
+	// Fix https://github.com/WordPress/gutenberg/issues/58708.
+	test( 'overridden empty images should not have upload button', async ( {
+		page,
+		admin,
+		requestUtils,
+		editor,
+	} ) => {
+		const imageId = 'image-id';
+		const TEST_IMAGE_FILE_PATH = path.resolve(
+			__dirname,
+			'../../../assets/10x10_e2e_test_image_z9T8jK.png'
+		);
+		const { id } = await requestUtils.createBlock( {
+			title: 'Pattern',
+			content: `<!-- wp:image {"metadata":{"id":"${ imageId }","bindings":{"id":{"source":"core/pattern-overrides"},"url":{"source":"core/pattern-overrides"},"title":{"source":"core/pattern-overrides"},"alt":{"source":"core/pattern-overrides"}}}} -->
+<figure class="wp-block-image"><img alt=""/></figure>
+<!-- /wp:image -->`,
+			status: 'publish',
+		} );
+
+		await admin.createNewPost();
+
+		await editor.insertBlock( {
+			name: 'core/block',
+			attributes: { ref: id },
+		} );
+
+		const imageBlock = editor.canvas.getByRole( 'document', {
+			name: 'Block: Image',
+		} );
+		await editor.selectBlocks( imageBlock );
+		await imageBlock
+			.getByTestId( 'form-file-upload-input' )
+			.setInputFiles( TEST_IMAGE_FILE_PATH );
+		await expect( imageBlock.getByRole( 'img' ) ).toHaveCount( 1 );
+		await expect( imageBlock.getByRole( 'img' ) ).toHaveAttribute(
+			'src',
+			/\/wp-content\/uploads\//
+		);
+
+		await editor.publishPost();
+		await page.reload();
+
+		await editor.selectBlocks( imageBlock );
+		await editor.showBlockToolbar();
+		const blockToolbar = page.getByRole( 'toolbar', {
+			name: 'Block tools',
+		} );
+		await expect( imageBlock.getByRole( 'img' ) ).toHaveAttribute(
+			'src',
+			/\/wp-content\/uploads\//
+		);
+		await expect(
+			blockToolbar.getByRole( 'button', { name: 'Replace' } )
+		).toBeEnabled();
+		await expect(
+			blockToolbar.getByRole( 'button', {
+				name: 'Upload to Media Library',
+			} )
+		).toBeHidden();
+	} );
 } );