Gazette: Post Carousel block content picked up by entry-header on posts, archives

[jp-imagines]

Quick summary

Slack with more context: p1685736711812349-slack-C03TY6J1A

I was completely unable to replicate this, but it definitely feels like a bug with this theme. Switching themes fixed the issue.

On this user's site, there are horizontal lines that appear on top of all featured images. The lines correspond to top borders on a series of duplicate .entry-meta elements:

Specifically from this CSS:

.entry-meta+.entry-meta {
    border-top: 2px solid #eee;
    margin-top: 9px;
    padding-top: 14px
}

Steps to reproduce

update 2023-06-07

1. Activate Gazette theme on simple site
2. Publish a post with a featured image & View
3. Return to the Post and add a Post Carousel block
4. Update and view post again

see triage notes below for more details

What you expected to happen

There shouldn't be duplicate .entry-meta elements, and no horizontal lines.

What actually happened

Random horizontal lines.

Impact

One

Available workarounds?

No but the platform is still usable

Platform (Simple and/or Atomic)

Simple

Logs or notes

User reported in 6361628-zd-woothemes

[github-actions[bot]]

Support References

This comment is automatically generated. Please do not edit it.

• [ ] 6361628-zen

[worldomonation]

📌 REPRODUCTION RESULTS

Tested on Simple – not reproducible
Tested on Atomic – not reproducible
Replicable outside of Dotcom – n/a

📌 FINDINGS/SCREENSHOTS/VIDEO

Simple

AT

📌 ACTIONS

• set priority to Low.
• move issue to Automattic/themes repo.

[cuemarie]

📌 SCRUBBING : RESULT - Replicated / Could Not Replicate / Uncertain

• Tested on Simple – Replicated

📌 FINDINGS/SCREENSHOTS/VIDEO

• Took a while, but I was able to replicate this! The issue is stemming from 4 Post Carousel blocks in the user's footer - removing those in a test environment made to replicate their site resolved the lines.
• I can't get exactly their result, but the underlying issue of .entry-meta content appearing in the post's header hero area is consistently reproducible now, using the steps below:

Steps to replicate

1. Activate Gazette theme on simple site
2. Publish a post with a featured image & View
3. Return to the Post and add a Post Carousel block
4. Update and view post again

The entry-header picks up content from the wp-block-newspack-blocks-carousel block. It happens whether the post carousel is added to the post itself or to a widget area; however the widget area will impact more parts of the site.

Screenshots/Recordings

Added the post carousel to the footer in this example

https://github.com/Automattic/themes/assets/27249804/db34ba37-4cf8-42c0-882c-3dc9d3cbb271

Tested switching to other themes that support Custom Headers/Featured Image Headers (Karuna, Lyretail, Resonar, and Twenty Seventeen), and couldn't repro anywhere other than Gazette.

Update

If you enable Show Category in the Article Meta Settings, this seems to be where that line & specific css comes from:

.entry-meta + .entry-meta {
  border-top: 2px solid #eee;
  margin-top: 9px;
  padding-top: 14px;
}

📌 ACTIONS

• Keeping in Themes