Twenty Nineteen: Separator block alignment issue

[umesh84]

Twenty Nineteen Themes Separator Block select Default style not center aligned in editor and Front side

Steps to replicate:
1: Activate the Twenty Nineteen Theme
2: add Separator block
3: Select Default style

I have given the video link of the issue below.
​https://www.loom.com/share/7f80bd907043491fbe8c28d30dd4cc1a

[kajalgohel]

patch added

[sabernhardt]

I think aligning the separator line to the side by default is appropriate in Twenty Nineteen because headings have a similar line on the side.

However, if you purposely set it to align center, that does not work at 768 pixels and wider:

@media only screen and (min-width: 768px) {
  .entry .entry-content > *.aligncenter,
  .entry .entry-summary > *.aligncenter,
  .entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.aligncenter,
  .entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.aligncenter {
    margin-left: 0;
    margin-right: 0;
  }
}

The ​side margins were set to zero before the theme was widely available.

[poena]

The CSS above affects more blocks than the separator.

The image block is not affected because it has CSS to counter it.
The text blocks are not affected because they use has-text-align-center not aligncenter.

Weighing "unexpected changes on live websites" against "keeping broken settings", I think it would be better if the center alignment option worked.

[poena]

I agree that by default the separator can remain on the side.

[poena]

Should we combine these 3 tickets?
https://core.trac.wordpress.org/ticket/46215 -table
https://core.trac.wordpress.org/ticket/59263 -file

[poena]

There are some other blocks that also have additional CSS to counter this style:

.wp-block[data-align="center"] > .wp-block-archives,
.wp-block[data-align="center"] > .wp-block-categories {
	text-align: center;
}

And the site logo is positioned by the default WP block style

.wp-block-site-logo.aligncenter {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

Example blocks for testing:

<!-- wp:table {"align":"center"} -->
<figure class="wp-block-table aligncenter"><table class="has-fixed-layout"><tbody><tr><td>ghfghfg</td><td>sdgsdgs</td></tr><tr><td>gsdgsdg</td><td>sdgsd</td></tr></tbody></table></figure>
<!-- /wp:table -->

<!-- wp:gallery {"linkTo":"none","align":"center"} -->
<figure class="wp-block-gallery aligncenter has-nested-images columns-default is-cropped"><!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img/></figure>
<!-- /wp:image -->

<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img/></figure>
<!-- /wp:image -->

<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img/></figure>
<!-- /wp:image --></figure>
<!-- /wp:gallery -->

<!-- wp:post-featured-image {"align":"center"} /-->

<!-- wp:audio {"id":70,"align":"center"} -->
<figure class="wp-block-audio aligncenter"><audio controls src=""></audio></figure>
<!-- /wp:audio -->

<!-- wp:cover {"dimRatio":50,"isUserOverlayColor":false,"isDark":false,"sizeSlug":"full","align":"center","layout":{"type":"constrained"}} -->
<div class="wp-block-cover aligncenter is-light"><span aria-hidden="true" class="wp-block-cover__background has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size"></p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->

<!-- wp:video {"align":"center"} -->
<figure class="wp-block-video aligncenter"></figure>
<!-- /wp:video -->

<!-- wp:separator {"align":"center"} -->
<hr class="wp-block-separator aligncenter has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:archives {"displayAsDropdown":true,"showPostCounts":true,"align":"center"} /-->

<!-- wp:archives {"showLabel":false,"align":"center"} /-->

<!-- wp:calendar {"align":"center"} /-->

<!-- wp:categories {"taxonomy":"post_tag","align":"center"} /-->

<!-- wp:categories {"align":"center"} /-->

<!-- wp:latest-comments {"align":"center"} /-->

<!-- wp:latest-posts {"align":"center"} /-->

<!-- wp:search {"label":"Search","buttonText":"Search","align":"center"} /-->

<!-- wp:site-logo {"align":"center"} /-->

<!-- wp:avatar {"align":"center"} /-->