Automattic/wp-calypso

Social Previews should show WP oEmbed design as a 5th preview option

Open

#53845 opened on Jun 19, 2021

View on GitHub
 (2 comments) (0 reactions) (0 assignees)JavaScript (12,277 stars) (2,034 forks)batch import
Feature RequestGood First IssueSocial Previews[Size] XS

Description

Expected

We currently show previews for WP.com Reader, Google Search, Facebook, and Twitter. We should add a preview for the WordPress.com oEmbed card that is inserted whenever you paste a link to a published WP.com page or post.

Actual

We don't show the WP oEmbed card design within social previews yet.

How to preview a WP.com oEmbed?

  1. Copy the URL of a published WP.com post
  2. Create a new post
  3. Paste the URL of the other post
  4. Link will transform into an oEmbed card which will look like this:

How do I get to Social Previews?

  1. You'll need a Business or eCommerce plan
  2. Create a new post
  3. Click the "Preview" button in the top toolbar
  4. Select "Search & Social" from the preview dropdown

Then you should see Social Previews:

Related issue

https://github.com/Automattic/wp-calypso/issues/53844

Contributor guide

Tech stack
javascriptreact
Domain
frontend
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
ReactJavaScriptSocial Preview component understanding
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
85
Research direction
The issue suggests adding a fifth preview option for WordPress.com oEmbed cards. To implement, explore the existing social preview components in the repository, likely in a directory like client/blocks/social previews. Refer to the related issue #53844 for context. Look for how the current four previews are rendered (WP.com Reader, Google Search, Facebook, Twitter) and replicate the pattern for the oEmbed card. The oEmbed card design can be previewed by pasting a WP.com post URL in the editor, as described in the issue.