Spacer block breaks when height is set to "fill"

[hanneslsm]

Description

See title.
Interestingly, it also seems to impact the image block, that looks stretched in the editor. The front-end is fine.

Console log

JQMIGRATE: Migrate is installed, version 3.4.0
logger.js:17 Block validation: Expected attributes Array(3), instead saw Array(2).
(anonymous) @ logger.js:17
logger.js:17 Block validation: Block validation failed for `core/spacer` (Object).

Content generated by `save` function:

<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>

Content retrieved from post body:

<div aria-hidden="true" class="wp-block-spacer"></div>
(anonymous) @ logger.js:17
logger.js:17 Block validation: Expected attributes Array(3), instead saw Array(2).
(anonymous) @ logger.js:17
logger.js:17 Block validation: Block validation failed for `core/spacer` (Object).

Content generated by `save` function:

<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>

Content retrieved from post body:

<div aria-hidden="true" class="wp-block-spacer"></div>
(anonymous) @ logger.js:17
logger.js:17 Block validation: Expected attributes Array(3), instead saw Array(2).
(anonymous) @ logger.js:17
logger.js:17 Block validation: Block validation failed for `core/spacer` (Object).

Content generated by `save` function:

<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>

Content retrieved from post body:

<div aria-hidden="true" class="wp-block-spacer"></div>
(anonymous) @ logger.js:17
logger.js:17 Block validation: Expected attributes Array(3), instead saw Array(2).
(anonymous) @ logger.js:17
logger.js:17 Block validation: Block validation failed for `core/spacer` (Object).

Content generated by `save` function:

<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>

Content retrieved from post body:

<div aria-hidden="true" class="wp-block-spacer"></div>
(anonymous) @ logger.js:17
logger.js:17 Block validation: Expected attributes Array(3), instead saw Array(2).
(anonymous) @ logger.js:17
logger.js:17 Block validation: Block validation failed for `core/spacer` (Object).

Content generated by `save` function:

<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>

Content retrieved from post body:

<div aria-hidden="true" class="wp-block-spacer"></div>
(anonymous) @ logger.js:17

Step-by-step reproduction instructions

1. Set spacer height to "fill"

Screenshots, screen recording, code snippet

Environment info

No response

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

[ndiego]

This issue was reviewed in today's Editor Bug Scrub. We have been unable to replicate using the latest versions of Gutenberg and WordPress. Would you be able to share what versions of WordPress and Gutenberg you are using? Thanks!

[hanneslsm]

• Wordpress 6.2
• Gutenberg 15.9.1
• Custom blank theme by Create Block Theme Plugin

Here is the block markup:

<!-- wp:group {"style":{"color":{"gradient":"linear-gradient(180deg,rgb(253,250,247) 0%,rgba(255,255,255,0) 100%)"},"spacing":{"margin":{"top":"var:preset|spacing|96","bottom":"var:preset|spacing|96"},"padding":{"top":"var:preset|spacing|60"}},"border":{"top":{"color":"#e7d6c7","width":"1px"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group has-background" style="border-top-color:#e7d6c7;border-top-width:1px;background:linear-gradient(180deg,rgb(253,250,247) 0%,rgba(255,255,255,0) 100%);margin-top:var(--wp--preset--spacing--96);margin-bottom:var(--wp--preset--spacing--96);padding-top:var(--wp--preset--spacing--60)"><!-- wp:heading {"textAlign":"center","level":1,"style":{"spacing":{"padding":{"bottom":"var:preset|spacing|36"}}},"fontSize":"48","anchor":"latest-projects"} -->
<h1 class="wp-block-heading has-text-align-center has-48-font-size" id="latest-projects" style="padding-bottom:var(--wp--preset--spacing--36)">Latest Projects</h1>
<!-- /wp:heading -->

<!-- wp:columns {"align":"wide","style":{"spacing":{"blockGap":{"top":"var:preset|spacing|24","left":"var:preset|spacing|24"}}}} -->
<div class="wp-block-columns alignwide"><!-- wp:column {"width":"50%"} -->
<div class="wp-block-column" style="flex-basis:50%"><!-- wp:paragraph {"style":{"typography":{"textTransform":"uppercase","letterSpacing":"1px"}},"fontSize":"12"} -->
<p class="has-12-font-size" style="letter-spacing:1px;text-transform:uppercase">Brand- &amp; Web Design</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3,"style":{"spacing":{"margin":{"top":"0","right":"0","bottom":"var:preset|spacing|16","left":"0"}}},"fontSize":"30","anchor":"anchor"} -->
<h3 class="wp-block-heading has-30-font-size" id="anchor" style="margin-top:0;margin-right:0;margin-bottom:var(--wp--preset--spacing--16);margin-left:0">Project Name</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Lorem Ipsum Sit quia accusantium qui consectetur velit quo ipsa aspernatur sit perspiciatis laboriosam ut numquam numquam et voluptate eveniet aut quaerat facere. Et nobis quam eum voluptate dolore hic fuga maiores rem rerum laborum nam dolore provident a expedita veniam et quos itaque. Quo dicta voluptatem et recusandae voluptatem id maiores repudiandae quo aliquam aspernatur ut dolore nihil.</p>
<!-- /wp:paragraph -->

<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","orientation":"horizontal","verticalAlignment":"stretch","justifyContent":"left"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"layout":{"selfStretch":"fill","flexSize":null}},"fontSize":"14"} -->
<p class="has-14-font-size">✓ Brand Strategy<br>✓ Brand Design<br>✓ Style Guide<br>✓ Logo Design<br>✓ Web Design<br>✓ Design Consulting<br>✓ Social Media Consulting<br>✓ Social Media Posts Design</p>
<!-- /wp:paragraph -->

<!-- wp:group {"layout":{"type":"flex","orientation":"vertical","verticalAlignment":"space-between","justifyContent":"center"}} -->
<div class="wp-block-group"><!-- wp:spacer {"style":{"layout":{"flexSize":null,"selfStretch":"fill"}}} -->
<div aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:image {"id":65,"width":200,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large is-resized"><img src="http://gutenberg.local/wp-content/uploads/2023/06/image-1024x337.png" alt="" class="wp-image-65" width="200"/></figure>
<!-- /wp:image -->

<!-- wp:spacer {"style":{"layout":{"flexSize":null,"selfStretch":"fill"}}} -->
<div aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:paragraph {"align":"center","style":{"layout":{"selfStretch":"fit","flexSize":null}},"fontSize":"14"} -->
<p class="has-text-align-center has-14-font-size">Lorem ipsum</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column {"style":{"spacing":{"padding":{"left":"var:preset|spacing|48"}}}} -->
<div class="wp-block-column" style="padding-left:var(--wp--preset--spacing--48)"><!-- wp:image -->
<figure class="wp-block-image"><img alt=""/></figure>
<!-- /wp:image --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

[tellthemachines]

I can reproduce the issue with the provided block markup. Looking into it!