[wp-trac] [WordPress Trac] #59204: Twenty Nineteen: Separator block does not center as expected (was: Twenty Nineteen - Separator block is having issue when wide-line is used with Align-Center.)

[WordPress Trac]

#59204: Twenty Nineteen: Separator block does not center as expected
-------------------------------------------------+-------------------------
 Reporter:  nidhidhandhukiya                     |       Owner:  (none)
     Type:  defect (bug)                         |      Status:  new
 Priority:  normal                               |   Milestone:  6.4
Component:  Bundled Theme                        |     Version:
 Severity:  normal                               |  Resolution:
 Keywords:  has-patch needs-testing changes-     |     Focuses:
  requested                                      |
-------------------------------------------------+-------------------------

Comment (by sabernhardt):

 PR 5097 changes placement for some blocks/elements that already are
 aligned properly. If you want a Separator block to center according to the
 entire page, the "Wide width" alignment option would do that.

 With the Wide Line style option, the Separator covers the full width of
 post content, so "Align center" correctly matches the "No alignment"
 setting. The Dots style option is also correct for center and Wide width
 alignments.

 The //Default// style has issues with the center alignment, though, and
 the stylesheet probably should target only that style option.

 {{{
         // Separator block: honor center alignment for the Default style.
         .wp-block-separator.aligncenter:not(.is-style-wide):not(.is-style-
 dots) {
                 margin-left: auto;
                 margin-right: auto;

                 @include media(tablet) {
                         // Subtract the Separator width from the post
 content width, then divide that by two.
                         margin-left: calc((8 * (100vw / 12) - 28px -
 2.25em) / 2);
                 }

                 @include media(desktop) {
                         margin-left: calc((6 * (100vw / 12) - 28px -
 2.25em) / 2);
                 }
         }
 }}}

 The editor styles may only need the auto margins for Center and Wide width
 alignment options, but a `max-width` could make it more accurate on larger
 screens.
 {{{
 .wp-block[data-align="center"] .wp-block-separator,
 .wp-block[data-align="wide"] .wp-block-separator {
         margin-left: auto;
         margin-right: auto;
 }

 .wp-block[data-align="wide"] .wp-block-separator {

         @include media(tablet) {
                 max-width: calc(8 * (100vw / 12));
         }

         @include media(desktop) {
                 max-width: calc(6 * (100vw / 12 ));
         }
 }
 }}}

 When compiling the stylesheets, check the CSS files to make sure the
 changes were made to all of them. You may need to use the `run build`
 command more than once before `style-rtl.css` updates.

 The editor has additional problems in RTL languages because Twenty
 Nineteen does not have an alternative editor stylesheet, but those
 problems are not exclusive to the Separator block.

 #59203 can fix the Full width Separator issues, unless combining these
 tickets would be better.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/59204#comment:12>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform