Twenty Nineteen: Latest Posts block top/bottom spacing is not same on editor side and front-end side when we change its background.

[viralsampat]

Hello,

I have reviewed "Latest Post" block and found that when we are trying to change it background color, Its text color and top/bottom space are not same on editor side & front-end side.

I think that it should be same on both sides(Editor & Front-end)

Here, I have attached its screenshots:

Thanks,

[viralsampat]

Back-end

[viralsampat]

Front-end

[viralsampat]

I have checked above mentioned issue and I have resolved it and added patch. Also, I have attached screenshot after resolved this issue.

[viralsampat]

After resolved issue Back-end:

[viralsampat]

After resolved issue front-end:

[karmatosed]

I can confirm this is an issue. However, I think we need a different approach to the patch. First up there seem to be other things in this patch we might not need. Secondly, I think just leveling up the spacing is a gentler approach. We need to think that others might find any change a little unexpected so how can we do this as small as possible.

[sabernhardt]

Let's keep the discussion about automatic contrast text colors with background on #49931.

For the padding, WordPress 6.6 fixed the discrepancy between the editor and front. The lower :root :where() specificity stopped overriding the theme's setting of zero padding for the Latest Posts block in the editor. On the front, the theme's specificity already was higher.

Editor:

/* Twenty Nineteen style-editor.css */
.wp-block-latest-posts {
  padding: 0;
}

/* block-library/style.css */
:root :where(ul.has-background, ol.has-background) {
  padding: 1.25em 2.375em;
}

/* block-library/editor.css */
:root :where(.wp-block-latest-posts) {
  padding-left: 2.5em;
}
:root :where(.wp-block-latest-posts.is-grid), :root :where(.wp-block-latest-posts__list) {
  padding-left: 0;
}

Front:

/* Twenty Nineteen style.css */
.entry .entry-content .wp-block-latest-posts {
  padding: 0;
}

/* block-library/style.css */
:root :where(.wp-block-latest-posts.wp-block-latest-posts__list) {
  padding-left: 0;
}
:root :where(ul.has-background, ol.has-background) {
  padding: 1.25em 2.375em;
}

The block might look better with a small amount of padding on all sides whenever it has a background color, but that would be an enhancement. *If* this is a good idea, I would suggest 0.5rem on the front and 11px (0.5 * $font__size_base) in the editor.