Blog Posts Block: The page renders duplicate block content on load

[davipontesblog]

Describe the bug The live page renders duplicate content on load coming from the Blog Posts block. See below:

To Reproduce I could not reproduce this on a test site with the same theme, Canard. However, due to the fact that this is happening on every page this user has on their site that uses the Blog Posts Block, and their site is a simple site on the Premium plan (no third-party code from plugins or custom themes) with no extra CSS code other than the code we provided them with to fix this temporarily, I need some eyes on this one as it could be affecting more people.

The steps below are for a simple WordPress.com site as it's the example I have here.

Steps to reproduce the behavior:

1. On the site elemifuentes.com, go to 'Design > Customize'
2. Using the site preview, go to the page "En Espanol" using the site Menu.
3. Go to 'CSS', and temporarily remove the code there.
4. See the duplicated content bug on the page.

Here is a screen recording showing this: https://d.pr/v/QNfvOF/x5WMUW7VHG

This is affecting the following pages on this site: https://elemifuentes.com/en-espanol/ https://elemifuentes.com/fuck-the-system/ https://elemifuentes.com/general-politics-and-current-events/ https://elemifuentes.com/hoaxes-and-conspiracy-theories/ https://elemifuentes.com/pedophiles-and-sexuality/ https://elemifuentes.com/personal-section/ https://elemifuentes.com/the-black-hole/ https://elemifuentes.com/spirit-cooking/

We gave the user CSS to resolve the issue temporarily while we investigate it more:

/ Remove issue with duplicating entry content on this page #18629736-hc DP / .page-id-6045 .entry-header-inner, .page-id-14 .entry-header-inner, .page-id-3874 .entry-header-inner, .page-id-217 .entry-header-inner, .page-id-133 .entry-header-inner, .page-id-1384 .entry-header-inner, .page-id-6197 .entry-header-inner, .page-id-16 .entry-header-inner { display: none; }

Expected behavior We expect to not see the duplicated buggy content on the pages.

[SiobhyB]

The user wrote back to us and let us know that the issue was only apparent when they used a featured image on their pages. I was able to replicate by using the block with a page that has a featured image on the Canard theme.

There's an open report in the Canard theme's repo here: https://github.com/Automattic/themes/issues/1829

It's also an issue for Gazette, a different theme in the WordPress.com repository: https://github.com/Automattic/themes/issues/1780

[laurelfulford]

It looks like it has to do with both themes using JavaScript to copy anything with an .entry-title or .entry-meta class into the featured image area. Unfortunately, the block uses those classes, too, to try to cut down on the amount of individual styling a theme has to do to make them match regular post styles.

I'm closing this in favour of making the JS more specific in the themes -- unfortunately we can't completely remove these classes from the block at this point without causing a bunch of issues elsewhere (including losing a bunch of styles on other WP.com sites! 😬 ). I think I have a more concise CSS fix that can avoid listing IDs, though, now that the issue is narrowed down -- I'll test and add it to the Canard and Gazette issues.

[laurelfulford]

Ahhh crud, they totally remove them from the content area, too 😞 A CSS fix alone isn't going to do it.