[wp-trac] [WordPress Trac] #62615: Twenty Twenty-Five : The frontend and editor views of the Latest Comments block are not matching.

[WordPress Trac]

#62615: Twenty Twenty-Five : The frontend and editor views of the Latest Comments
block are not matching.
-------------------------------------------------+-------------------------
 Reporter:  pitamdey                             |       Owner:  (none)
     Type:  defect (bug)                         |      Status:  new
 Priority:  normal                               |   Milestone:  Awaiting
                                                 |  Review
Component:  Bundled Theme                        |     Version:
 Severity:  normal                               |  Resolution:
 Keywords:  has-screenshots has-patch has-       |     Focuses:  css
  testing-info reporter-feedback                 |
-------------------------------------------------+-------------------------

Comment (by poena):

 But to resolve it, it is important to first research and understand why it
 is happening.

 Like @im3dabasia1 wrote, there is extra padding that is applied in the
 frontend by the user agent stylesheet.

 By comparing the source code for the block in the editor and front I can
 see that the padding is reset in the editor with the help of this style:
 {{{
 .wp-block-latest-comments .wp-block-latest-comments {
     padding-left: 0;
 }
 }}}
 I can also tell that this CSS is added by this source, and not from the
 theme: {{{wp-includes/css/dist/block-library/style.min.css}}}

 And by looking at the block library source, I can see that this block only
 has one stylesheet:
 https://github.com/WordPress/gutenberg/tree/trunk/packages/block-
 library/src/latest-comments
 Meaning, it loads the same stylesheet in the editor and the front.

 This is the CSS that sets the padding to 0 in the editor:
 {{{
 // Higher specificity - target list via wrapper.
 .wp-block-latest-comments .wp-block-latest-comments {
         // Remove left spacing. Higher specificity required to
         // override default wp-block layout styles in the Post/Site
 editor.
         padding-left: 0;
 }
 }}}

 The comment explains why this style was added, but there is more
 information.

 By looking at the history on GitHub, and see the changes for these
 specific lines in the stylesheet,
 I can find and read the original issue:
 https://github.com/WordPress/gutenberg/issues/32718
 And the pull request:
 https://github.com/WordPress/gutenberg/pull/32983

 In this pull request,
 [https://github.com/WordPress/gutenberg/pull/32983#pullrequestreview-692655528
 it is already mentioned that the padding is visible on the front.]

 There is also a discussion about where this should be solved:

 >If the Theme doesn't have any styles at all and just uses browser
 defaults presumably you'd expect to use >browser default styles for lists.

 >Editor and front-end would both still see block styles, the two should be
 in sync with block styles, regardless of theme styles.

 Therefor it is my opinion that the padding should be removed by the block,
 by default, in both the editor and front. Not by the themes.
 Because as this ticket shows, the block is miss-aligned, it does not align
 with other content, including the post or page title.

 I believe this is a duplicate of
 https://github.com/WordPress/gutenberg/issues/66043

 What do you think? @viralsampat @get_dave @joen

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