Element styles are missing in the post template + post content preview

[carolinan]

Description

When a query loop is added in the Site Editor, and the post template block contains a post content block,
the so called "element styles" are missing from the blocks inside the post content.

Step-by-step reproduction instructions

I tested this with a blank theme created with "Create block theme" that has no extra theme styles.

1. Create a new post.
2. Add a paragraph with a link and set the link color.
3. Add a heading block with a link and set the link color.
4. Add a group block. Enable the color settings and change the color for heading, link, and button.
5. Inside the group, add a heading with a link, a paragraph with a link and a buttons block.
6. Confirm that the colors are working in the block editor and when viewing the post on the front.
7. View the index on the front. Confirm that the colors are correct.
8. Open the index template in the Site Editor. The main query loop contains a post content block.
9. Confirm that the element colors are missing.

Screenshots, screen recording, code snippet

No response

Environment info

WordPress 6.6-RC4-58723 with and without Gutenberg trunk active.

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

[Rishit30G]

Selected the 'EmptyTheme' and reproduced the issue
Sharing the screenshots of the above issue for better understanding:

Would appreciate if someone can elaborate more on this issue
Thanks

[carolinan]

Today, using WP 6.6.0, I registered style variations for the button block using the partial JSON variation in the styles/buttons/ folder of my block theme.
-Note the subfolder. Moving the files directly under styles made no difference.
I created a new post and added the buttons, activated the custom styles (which looked correct), and saved.
Then when I went to the Site Editor and opened the index template where the post content is used inside the query loop, my buttons were not correctly styled. They are using the style that I added to theme.json styles.elements.button.
The CSS for wp-block-button is-style-button-2 is-style-button-2--452c97558fe1cd4d67861597abc0290c was missing.

[aaronrobertshaw]

I can replicate this issue.

Within the Post Template block, any block instance based styles that rely on enqueuing a custom generated stylesheet are missing. This includes both element styles and those for block style variations.

From what I can ascertain so far, the issue seems to be that the posts to be displayed within a Query Loop block, and therefore the Post Template block, are retrieved via a REST API call. The response for that API request includes rendered content that has already had filters for the_content, render_block etc applied.

Due to these filters having been run, the markup does contain custom element or block style variation class names e.g. wp-elements-6b89d116102efff79c3f3c77b71a44f5. The hooks that generate and apply these class names also enqueue custom stylesheets. Unfortunately, those styles are not returned in the API request and never loaded on the editor page.

I've run out of time to dig further today but I suspect that the current approach to rendering a preview of the post in the PostTemplate block prevents the useBlockProps hooks that handle these styles from running, so the editor never generates them on the client side.

I'm not very familiar with the PostTemplate block so any suggestions on how best we might fix this are very welcome 🙏

[aaronrobertshaw]

With #66003 landing, element styles should now be rendered for the vast majority of cases.

There's a contrived edge case where a user may have permissions to edit a given post but somehow not have privileges to see some private content within the post they are editing. In that scenario, the user would still get the old result without styles.

That use case is so unlikely, I think we can close this issue out. Eventually we might be able to include style assets along with server side rendered content via the REST API but that is easier said than done.

Would you be on board with closing this issue @carolinan?

[carolinan]

Yes, if the problem arises again new issues can be created.