Make WordPress Core

Opened 4 years ago

Last modified 20 months ago

#56143 new defect (bug)

Twenty Nineteen: Separator block alignment issue

Reported by: umesh84 Owned by:
Priority: normal Milestone: Awaiting Review
Component: Bundled Theme Version: 5.0
Severity: normal Keywords: needs-design-feedback
Cc: Focuses: ui, css

Description (last modified by sabernhardt)

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

Attachments (1)

#56143.patch (443 bytes ) - added by kajalgohel 4 years ago.
patch added

Download all attachments as: .zip

Change History (10)

@kajalgohel
4 years ago

patch added

#1 @kajalgohel
4 years ago

  • Keywords has-patch added; needs-patch removed

#2 @SergeyBiryukov
4 years ago

  • Summary Themes Twenty Nineteen separator block alignment issueTwenty Nineteen: Separator block alignment issue

#3 @sabernhardt
4 years ago

  • Description modified (diff)
  • Keywords needs-patch added; has-patch removed
  • Version 6.05.0

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.

#4 @karmatosed
2 years ago

  • Keywords has-patch added; needs-patch removed

#5 @poena
20 months ago

  • Severity minornormal

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.

#6 @poena
20 months ago

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

#8 @poena
20 months ago

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;
}
Version 1, edited 20 months ago by poena (previous) (next) (diff)

#9 @poena
20 months ago

  • Keywords has-patch removed
Note: See TracTickets for help on using tickets.