[wp-trac] [WordPress Trac] #63593: Center Mode doesnt work in Guttenberg editor

[WordPress Trac]

#63593: Center Mode doesnt work in Guttenberg editor
--------------------------+--------------------------------
 Reporter:  eeprom_one    |       Owner:  (none)
     Type:  defect (bug)  |      Status:  closed
 Priority:  normal        |   Milestone:
Component:  Editor        |     Version:
 Severity:  normal        |  Resolution:  reported-upstream
 Keywords:                |     Focuses:  css
--------------------------+--------------------------------
Changes (by sabernhardt):

 * status:  new => closed
 * resolution:   => reported-upstream
 * version:  6.8 =>
 * component:  Formatting => Editor
 * milestone:  Awaiting Review =>


Comment:

 [https://github.com/WordPress/gutenberg/issues/15130 Centering Embed
 blocks] is a known issue, and I'll close as 'reported-upstream' because of
 that.

 The rule `.post-content-wrap h2 { text-align: inherit; }` in your site's
 CSS overrides the alignment for the `.has-text-align-center` class. The
 `inherit` rule (for all heading levels) likely comes from the Houzez
 premium theme, but it //might// come from one of the plugins.

 ==== Custom CSS to add

 The Customizer (under Appearance) has an Additional CSS panel, and maybe
 your theme has another place to assign special styles.

 I tried changing the width of the `figure` element, and it worked with the
 WordPress post embeds (on the front end):
 {{{
 .wp-block-embed.aligncenter {
         width: fit-content;
 }
 }}}

 GB41011 proposed this instead, and it worked for me too:
 {{{
 .wp-block-embed.aligncenter .wp-block-embed__wrapper {
         display: flex;
         justify-content: center;
 }
 }}}

 For the heading(s), you could increase the specificity. Adding an element
 selector seems sufficient:
 {{{
 html .has-text-align-center {
         text-align: center;
 }
 }}}

 Or you might like to raise the specificity level higher with something
 like `:root` or class names:
 {{{
 :root .has-text-align-center {
         text-align: center;
 }
 }}}

 If you need help with other aspects of your site, please use the support
 forums.
 https://wordpress.org/support/forums/

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