The frontend and editor views of the Latest Comments block are not matching.

[pitamdey]

In theme Twenty Twenty-Five,
The frontend and editor views of the Latest Comments block are not matching.
Points :

• It is not aligned with title as extra padding is added
• On Adding background color we can see the padding difference

I have added an patch to solve this issue

[pitamdey]

Editor View

[pitamdey]

Frontend View

[pitamdey]

Patch for this issue

[im3dabasia1]

Reproduction Report

Description

This report validates whether the issue can be reproduced.

Environment

• WordPress: 6.8-alpha-59274-src
• PHP: 8.2.25
• Server: nginx/1.27.2
• Database: mysqli (Server: 8.0.40 / Client: mysqlnd 8.2.25)
• Browser: Chrome 129.0.0.0
• OS: macOS
• Theme: Twenty Twenty-Five 1.0
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.0

Actual Results

1. ✅ Error condition occurs (reproduced). There is extra padding that is applied in the frontend by the user agent stylesheet.

Supplemental Artifacts

[im3dabasia1]

Test Report

Description

This report validates whether the indicated patch works as expected.

Patch tested: https://core.trac.wordpress.org/attachment/ticket/62615/62615.patch

Environment

• WordPress: 6.8-alpha-59274-src
• PHP: 8.2.25
• Server: nginx/1.27.2
• Database: mysqli (Server: 8.0.40 / Client: mysqlnd 8.2.25)
• Browser: Chrome 129.0.0.0
• OS: macOS
• Theme: Twenty Twenty-Five 1.0
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.0

Actual Results

1. ✅ Issue resolved with patch.

Supplemental Artifacts

[sainathpoojary]

Test Report

Description

This report validates whether the indicated patch works as expected.

Patch tested: https://core.trac.wordpress.org/attachment/ticket/62615/62615.patch

Environment

• WordPress: 6.8-alpha-59274-src
• PHP: 8.2.26
• Server: nginx/1.27.3
• Database: mysqli (Server: 8.0.40 / Client: mysqlnd 8.2.26)
• Browser: Chrome 131.0.0.0
• OS: macOS
• Theme: Twenty Twenty-Five 1.0
• MU Plugins: None activated
• Plugins: None activated

Actual Results

✅ Issue resolved with patch.

Supplemental Artifacts

Before Patch

After Patch

[poena]

Hi @pitamdey

Please include information about the underlying issue, why the spacing is different.
Without first investigating the cause, it is not possible to know if the problem is in the theme or the block.
Does this happen with other themes?

Because this is a block theme, CSS should be added sparingly, only when there is no other way to solve it.

[pitamdey]

Hi @poena,
I have reviewed the issue across various themes and found that it occurs in Twenty Sixteen, Twenty Nineteen, Twenty Twenty-Two, Twenty Twenty-Three, Twenty Twenty-Four, and Twenty Twenty-Five. However, it works as expected in Twenty Fifteen, Twenty Seventeen, Twenty Twenty, and Twenty Twenty-One themes.

[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, ​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

[poena]

Also, This may already be solved by ​https://github.com/WordPress/gutenberg/pull/66020

[Joen]

Thanks for the effort, thanks for the investigative work, both. I'd agree this is important to fix to ensure consistency between front and backend, and the padding fix in the editor seems like the way to do it.

[amdphreak]

Oh boy, is this bug finally going to get fixed? It's been in the editor for like 10 YEARS. At least since 2018. I can't recall further back but it has been there for as long as I've been using WordPress. This bug has affected not only the comments block, but image blocks, and every other block as well. I can never get a proper idea of what the page will look like from the editor.