Image block: Set image display to grid when no alignment set to prope…

…rly align caption on resize (#35787)

Co-authored-by: Glen Davies <[email protected]>

packages/block-library/src/image/editor.scss

@@ -70,6 +70,24 @@ figure.wp-block-image:not(.wp-block) {
 	}
 }
 
+*:not([data-align]) {
+	> .wp-block-image {
+		display: grid;
+		grid-template-columns: [image] minmax(0, max-content) [placeholder] auto;
+		.components-placeholder {
+			grid-column: placeholder;
+		}
+		> div:not(.components-placeholder) {
+			grid-column: image;
+		}
+		> figcaption {
+			grid-column: image;
+			display: table-caption;
+			caption-side: bottom;
+		}
+	}
+}
+
 .wp-block[data-align="left"] > .wp-block-image {
 	margin-right: 1em;
 	margin-left: 0;

packages/e2e-tests/specs/editor/blocks/cover.test.js

@@ -197,6 +197,9 @@ describe( 'Cover', () => {
 		await insertBlock( 'Image' );
 		// Upload image and transform to the Cover block
 		await upload( '.wp-block-image' );
+		// Click the block wrapper before trying to convert to make sure figcaption toolbar is not obscuring
+		// the block toolbar.
+		await page.click( '.wp-block-image' );
 		await transformBlockTo( 'Cover' );
 
 		// Get the block's background dim color and its opacity

packages/e2e-tests/specs/editor/blocks/image.test.js

@@ -103,8 +103,9 @@ describe( 'Image', () => {
 			`<!-- wp:image {"id":\\d+,"sizeSlug":"full","linkDestination":"none"} -->\\s*<figure class="wp-block-image size-full"><img src="[^"]+\\/${ filename2 }\\.png" alt="" class="wp-image-\\d+"/></figure>\\s*<!-- \\/wp:image -->`
 		);
 		expect( await getEditedPostContent() ).toMatch( regex3 );
-
-		await page.click( '.wp-block-image' );
+		// For some reason just clicking the block wrapper causes figcaption to get focus
+		// in puppeteer but not in live browser, so clicking on the image wrapper div here instead.
+		await page.click( '.wp-block-image > div' );
 		await page.keyboard.press( 'Backspace' );
 
 		expect( await getEditedPostContent() ).toBe( '' );