Flex layout classes added incorrectly in deprecated gallery blocks.

[peterwilsoncc]

Description

The layout parser is incorrectly adding the is-layout-flex classes to the deprecated gallery block formats.

I have not tested other blocks (current or deprecated) but I suspect it's happening elsewhere.

A post generated from the file /test/integration/fixtures/blocks/core__gallery__deprecated-2.html generates markup placing the is-layout-flex on the final image:

<ul class="wp-block-gallery columns-2 is-cropped alignwide wp-block-gallery-6">
	<li class="blocks-gallery-item">
		<figure>
			<img decoding="async" src="<!--snip-->" data-id="1" alt="title" class="wp-image-1" />
		</figure>
	</li>
	<li class="blocks-gallery-item">
		<figure>
			<img decoding="async" src="<!--snip-->" data-id="2" alt="title" class="wp-image-2 is-layout-flex" />
		</figure>
	</li>
</ul>

A similar issue occurs for posts containing deprecated versions 4 and 5 of the gallery block. As above, the class is added to the final image.

As the block editor will migrate deprecated versions of the HTML when you open it, you'll need to use WP-CLI to create any posts. See the reproduction steps.

I discovered this working on adding tests for the deprecated gallery formats in WP#55571. See the PR WordPress/wordpress-develop#4140

cc @tellthemachines as discussed.

Step-by-step reproduction instructions

1. Create a post using WP-CLI from the root directory of this repo: wp post create ./test/integration/fixtures/blocks/core__gallery__deprecated-2.html --post_title="Deprecated Gallery Format: V2" --post_status=publish
2. Do not open this post in the block editor.
3. Visit the the post in your browser
4. View source
5. Observe the markup above with the incorrect class on the image.

Screenshots, screen recording, code snippet

Deprecated Gallery V4

Source: ./test/integration/fixtures/blocks/core__gallery__deprecated-4.html
Result:

<figure class="wp-block-gallery columns-3 is-cropped alignwide wp-block-gallery-6">
	<ul class="blocks-gallery-grid">
		<li class="blocks-gallery-item">
			<figure>
				<img decoding="async" src="https://sergioestevaofolio.files.wordpress.com/2016/09/cropped-img_9054-1.jpg?w=190" alt="" data-id="1421" class="wp-image-1421"/>
			</figure>
		</li>
		<li class="blocks-gallery-item">
			<figure>
				<img decoding="async" src="https://sergioestevaofolio.files.wordpress.com/2017/09/cropped-l1001498-1.jpg?w=580" alt="" data-id="1440" class="wp-image-1440"/>
			</figure>
		</li>
		<li class="blocks-gallery-item">
			<figure>
				<img decoding="async" src="https://sergioestevaofolio.files.wordpress.com/2017/05/cropped-l1005945-2-2.jpg?w=580" alt="" data-id="1362" class="wp-image-1362 is-layout-flex"/>
			</figure>
		</li>
	</ul>
</figure>

Deprecated Gallery V5

Source: ./test/integration/fixtures/blocks/core__gallery__deprecated-5.html
Result:

<figure class="wp-block-gallery columns-3 is-cropped wp-block-gallery-6">
	<ul class="blocks-gallery-grid">
		<li class="blocks-gallery-item">
			<figure>
				<a href="http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1-scaled.jpg" >
					<img
						src="http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1-682x1024.jpg"
						alt=""
						data-id="705"
						data-full-url="http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1-scaled.jpg"
						data-link="http://wptest.local/classic/test-image-3/"
						class="wp-image-705"
					/>
				</a>
			</figure>
		</li>
		<li class="blocks-gallery-item">
			<figure>
				<a href="http://wptest.local/wp-content/uploads/2020/09/test-image-edited-scaled.jpg" >
					<img
						src="http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1024x682.jpg"
						alt=""
						data-id="704"
						data-full-url="http://wptest.local/wp-content/uploads/2020/09/test-image-edited-scaled.jpg"
						data-link="http://wptest.local/test-image-2/"
						class="wp-image-704"
					/>
				</a>
			</figure>
		</li>
		<li class="blocks-gallery-item">
			<figure>
				<a href="http://wptest.local/wp-content/uploads/2020/04/test-image-scaled.jpg" >
					<img
						src="http://wptest.local/wp-content/uploads/2020/04/test-image-1024x683.jpg"
						alt=""
						data-id="703"
						data-full-url="http://wptest.local/wp-content/uploads/2020/04/test-image-scaled.jpg"
						data-link="http://wptest.local/test-image/"
						class="wp-image-703 is-layout-flex"
					/>
				</a>
			</figure>
		</li>
	</ul>
</figure>

Environment info

• WordPress Trunk: WordPress/WordPress@5d05653
• Gutenberg Trunk: 82cb2fe

Note: This is reproducible in WordPress Trunk both with and without the Gutenberg plugin active.

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[tellthemachines]

I can reproduce this with Gallery block deprecations 2, 4, 5 and 6. It happens because in these older Gallery versions, the block didn't have inner blocks. The layout logic is looking for the inner block wrapper, which should be the innermost block with a classname attached, and it finds the last img instead.

This means it's unlikely the issue will happen with other deprecations, as afaik Gallery is the only layout-using core block that didn't start out as an inner block container.