[wp-trac] [WordPress Trac] #54076: Twenty Twenty: image not centered

[WordPress Trac]

#54076: Twenty Twenty: image not centered
----------------------------------------+----------------------------
 Reporter:  damienaa                    |       Owner:  (none)
     Type:  defect (bug)                |      Status:  new
 Priority:  normal                      |   Milestone:  5.8.2
Component:  Bundled Theme               |     Version:  5.8
 Severity:  normal                      |  Resolution:
 Keywords:  needs-patch good-first-bug  |     Focuses:  css, template
----------------------------------------+----------------------------
Changes (by sabernhardt):

 * keywords:   => needs-patch good-first-bug
 * component:  Themes => Bundled Theme
 * milestone:  Awaiting Review => 5.8.2


Comment:

 @hage reported this on #53111 while the problem was still in the Gutenberg
 plugin, and the margin seemed to be fixed in the editor.

 Twenty Twenty already has auto margins on the left and right for `entry-
 content` elements:
 {{{
 .entry-content > * {
         margin-left: auto;
         margin-right: auto;
         margin-bottom: 1.25em;
 }
 }}}

 However, the block editor (block-library styles) overrides that for image
 blocks:
 {{{
 .wp-block-image {
     margin: 0 0 1em;
 }
 }}}

 [https://themes.trac.wordpress.org/browser/twentytwentyone/1.4/style.css#L763
 Twenty Twenty-One's selector] avoids changing separators and WooCommerce
 content, so perhaps editing the margin on `.wp-block-image` would be safer
 than `.entry-content >
 *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not
 (.is-style-wide)`.

 In Twenty Twenty, the side margins are currently auto if the image is
 resized, and the selector could be adjusted to fit all image blocks:
 {{{
 .wp-block-image.is-resized {
         margin-left: auto;
         margin-right: auto;
 }
 }}}

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