Separator is not visible when inside row or stack

[carolinan]

Description

If you place a separator block inside a row or stack group block variation, the default and wide styles are not visible. The dotted block style is still visible in both the editor and front.

In 6.1.1. or 6.2. beta, without Gutenberg active, the default separator is visible in the editor only. The wide separator is not visible at all.

In 6.1.1. or 6.2. beta, with Gutenberg trunk active, the default and wide separator is not visible in the editor nor the front.

Step-by-step reproduction instructions

Copy this example code and paste it into the block editor. Check if the separator blocks are visible in the editor and front.

<!-- wp:group {"layout":{"type":"flex","orientation":"vertical"}} -->
<div class="wp-block-group"><!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:paragraph -->
<p>This is a stack. Is there a separator above this text?</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"layout":{"type":"flex","orientation":"vertical"}} -->
<div class="wp-block-group"><!-- wp:separator {"backgroundColor":"vivid-red","className":"is-style-dots"} -->
<hr class="wp-block-separator has-text-color has-vivid-red-color has-alpha-channel-opacity has-vivid-red-background-color has-background is-style-dots"/>
<!-- /wp:separator -->

<!-- wp:paragraph -->
<p>Is there a red dotted separator above?</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

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

<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group"><!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:paragraph -->
<p>Is there a separator to the left?</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group"><!-- wp:separator {"backgroundColor":"vivid-red","className":"is-style-wide"} -->
<hr class="wp-block-separator has-text-color has-vivid-red-color has-alpha-channel-opacity has-vivid-red-background-color has-background is-style-wide"/>
<!-- /wp:separator -->

<!-- wp:paragraph -->
<p>Is there a "wide" red separator to the left?</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group"><!-- wp:separator {"backgroundColor":"vivid-red","className":"is-style-dots"} -->
<hr class="wp-block-separator has-text-color has-vivid-red-color has-alpha-channel-opacity has-vivid-red-background-color has-background is-style-dots"/>
<!-- /wp:separator -->

<!-- wp:paragraph -->
<p>Is there a red dotted separator to the left?</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

Screenshots, screen recording, code snippet

With Gutenberg active:

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

[skorasaurus]

This is also the case query pagination blocks as well https://github.com/WordPress/gutenberg/issues/44587

[carolinan]

I wonder if it would be possible to set Dimensions > Width to fill by default for this block. And disable the fit option. With the fit option enabled, the block is not visible in the editor or front. .This settings is available and set to fit by default when the block is placed inside row.

[carolinan]

When inside a stack, changing the Dimensions > height settings make any difference, the block is never visible in the editor or front.

[jasperf]

Issue is still alive and well. Forced to use HTML Line . And using

<hr style="
display: block;
height: 1px;
border: 0;
border-top: 2px solid #d4b767;
margin: 0;
padding:0;
width:100%;
" />

or a div with html block or in custom block like https://github.com/wpvillain/line-block

inside an html block is far from ideal.