Automattic / wp-calypso

The JavaScript and API powered WordPress.com
https://developer.wordpress.com
GNU General Public License v2.0
12.41k stars 1.99k forks source link

Bark theme: when creating a new site, preview of theme doesn't show images and shows a random blank space #95165

Open annezazu opened 4 days ago

annezazu commented 4 days ago

When going through creating a new site, I noticed that the bark theme is missing an image on the homepage in the preview and, when clicking into the theme, the preview shows a large blank space at the top that breaks the design.

https://github.com/user-attachments/assets/295ef560-1f92-48d3-bf37-f279dc2d7878

This has since been fixed for Bark, but the underlying limitation still exists. The theme demo site's frontpage wrapped the contents in a group block and than added some css to hide the ensuing gap

The theme preview comes from https://public-api.wordpress.com/wpcom/v2/block-previews/site?stylesheet=pub%2Fbark&langu[…]_height=1040&viewport_unit_to_px=true&calypso_token=bark (the onboarding design picker uses a cached screenshot of this output).

This endpoint disassembles the homepage of the theme's demo site into header, content & footer. You can see in the video above that the header and footer exist, but not the content. @dsas thinks this is because the theme preview code tries to identify one "main" block to use as the content, but the Bark theme's frontpage has several blocks without a wrapping block to use as "main".

See get_patterns_from_demo_site_homepage (fbhepr%2Skers%2Sjcpbz%2Sjc%2Qpbagrag%2Serfg%2Qncv%2Qcyhtvaf%2Sraqcbvagf%2Soybpx%2Qcerivrjf%2Soybpx%2Qcerivrjf%2Qfvgr.cuc%3Se%3Q03ss38pn%23153-og) which calls get_homepage (fbhepr%2Skers%2Sjcpbz%2Sjc%2Qpbagrag%2Syvo%2Scnggreaf%2Scnggrea%2Qfgberf.cuc%3Se%3Q07024q59%23196-og)

iamabhiCH commented 1 day ago

@annezazu kindly allot this bug to me, i am looking into this bug

dsas commented 1 day ago

@iamabhiCH I believe you'll need access to modify the API powering this feature to fix this issue. I'm afraid that the API currently isn't available for open source contributions.

You might find that the issues under https://github.com/Automattic/wp-calypso/labels/Good%20First%20Issue would be a better starting point.

Thank you for your offer to help!