Fix upload button on overriden empty image block in patterns

WordPress · Feb 19, 2024 · 6a8ceb0 · 6a8ceb0
1 parent 99bbbe5
commit 6a8ceb0
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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();
+	} );
 } );