search

Automattic / jetpack

Security, performance, marketing, and design tools — Jetpack is made by WordPress experts to make WP sites safer and faster, and help you grow your traffic.
https://jetpack.com/
Other
1.59k stars 798 forks source link

Newsletter: improve rendering of embed blocks #39541

Open simison opened 2 months ago

simison commented 2 months ago

Embeds from Twitter, TikTok, etc are currently rendered as text-only:

Screenshot 2024-09-26 at 11 49 19

We'd like to be able to render something more visual in emails;

Exploration using images with our mShots API, which already has good dedicated support for Twitter embeds:

Screenshot 2024-09-25 at 19 06 07 Screenshot 2024-09-25 at 19 06 14

Slack convo p1726144959645139-slack-C052XEUUBL4

Came up with Team 51 customer p9MPsk-5nT-p2

Exploration in D162345-code

dhanson-wp commented 2 months ago

A couple more examples of wanting better email rendering.

WordPress Embed

The WordPress Embed block for internal/external site links is a nice card:

image

In email, the WordPress embed just looks like a Quote block:

image

Leveled headings in Group blocks

Designing creative patterns look great in the block editor and the frontend of posts:

image

In emails, while it is fine that a lot of the styles are absent (background gradient, border, etc.), the sizing and spacing of headings and text all feel off.

image

simison commented 1 month ago

I've been doing research on different options across automated screenshots, looking into some that code we already have in Jetpack social for social previews, and some solutions already implemented for Matt's site to improve performance as CSS/HTML facades of real embeds.

Currently, I'm leaning towards "almost real-looking" facades (so just CSS and HTML) that we could use on the blog's front page to improve the site's performance.