Layout panel options cannot be edited across multiple blocks without data loss

[cbirdsong]

Description

When editing multiple layout-enabled blocks, the layout panel applies the first block's layout settings to all subsequent blocks once any layout setting is changed.

Step-by-step reproduction instructions

1. Add multiple buttons or row/stack group blocks to a page, and set them to have different justifications in the Layout panel of the sidebar.
2. Select them all, and change the wrap or orientation setting.
3. Note how your previous justification settings have now all been removed and replaced with the settings from the first block.

Screenshots, screen recording, code snippet

Videos

CleanShot.2022-05-23.at.10.13.51.mp4

CleanShot.2022-05-23.at.12.12.33.mp4

Sample code

Buttons blocks:

<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"right"}} -->
<div class="wp-block-buttons"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link">1</a></div>
<!-- /wp:button -->

<!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link">2</a></div>
<!-- /wp:button -->

<!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link">3</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link">1</a></div>
<!-- /wp:button -->

<!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link">2</a></div>
<!-- /wp:button -->

<!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link">3</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"left"}} -->
<div class="wp-block-buttons"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link">1</a></div>
<!-- /wp:button -->

<!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link">2</a></div>
<!-- /wp:button -->

<!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link">3</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

Group/row blocks:

<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"right"}} -->
<div class="wp-block-group"><!-- wp:paragraph -->
<p>Lorem</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>ipsum</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>dolor</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>sit</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>amet</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"center"}} -->
<div class="wp-block-group"><!-- wp:paragraph -->
<p>Lorem</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>ipsum</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>dolor</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>sit</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>amet</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"left"}} -->
<div class="wp-block-group"><!-- wp:paragraph -->
<p>Lorem</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>ipsum</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>dolor</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>sit</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>amet</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

Environment info

Wordpress 5.9.3, both with Gutenberg 13.2.2 activated and without it.

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

[cbirdsong]

Can confirm this is still an issue in the 6.2 beta.

[c24b]

Up! Same problem with 6.2 and 16.1.0

[cbirdsong]

Still an issue in 6.4 and the 6.5 beta.