WordPress.org

Making WordPress.org

Opened 3 years ago

Last modified 5 months ago

#1396 assigned enhancement

Allow Plugin pages to be oembedded like WP Posts

Reported by: hlashbrooke Owned by:
Milestone: Plugin Directory v3 - Future Priority: normal
Component: Plugin Directory Keywords: good-first-bug needs-design
Cc:

Description

This may not be possible as I'm not 100% sure how the plugin repo is set up in terms of content storage, but it would be really great if we could enable oEmbed for plugins. The oEmbed content could essentially be the same as the plugin card that appears in the search results, which means we wouldn't have to write any additional markup and it would make linking to plugins from another site (say a blog post announcing a plugin release, for example) way more visually interesting and appealing.

Like I said though - I'm not sure if this would even be possible, but if so I think it would make a great enhancement to the repo and it would make sense if the same could be applied to themes as well.

Attachments (4)

embed-starter.php (892 bytes) - added by Otto42 6 months ago.
Starting point
demo.png (22.2 KB) - added by Otto42 6 months ago.
embeds.jpg (127.9 KB) - added by hedgefield 6 months ago.
Designs for plugin oEmbed
plugin embeds.png (63.6 KB) - added by hedgefield 5 months ago.
embed v2

Download all attachments as: .zip

Change History (30)

#1 @ramiy
3 years ago

I like the idea but until it happens you can use the "WP Plugin Info Card":
https://wordpress.org/plugins/wp-plugin-info-card/

#2 @hlashbrooke
3 years ago

Yeah I know about that plugin and it's very useful actually, but was just thinking that a native solution would be cooler if it could be implemented at some point.

#3 @samuelsidler
3 years ago

This isn't really feasible now, but we'll make sure the oEmbed output is good when we redo the plugin directory on WordPress.

#4 @hlashbrooke
3 years ago

Coolio - good to know :)

#5 @SergeyBiryukov
2 years ago

  • Keywords needs-patch removed

Removing 'needs-patch' from components that are not open sourced yet, to help focus on tickets that actually need a patch.

#6 @Otto42
2 years ago

  • Owner set to Otto42
  • Status changed from new to accepted

Related: #1464

This is something I think we can do before updating the plugins directory as a whole, but in a way that will be forward compatible with the soon-to-be-converted directory. The embed logic is not difficult to do.

This ticket was mentioned in Slack in #meta by ocean90. View the logs.


2 years ago

#8 @dd32
2 years ago

#1583 was marked as a duplicate.

#9 @samuelsidler
23 months ago

The new directory does not (yet) have oEmbed output. Should we customize the output a bit?

Probably not work fixing this in the old directory at this point, unless the code is already complete.

#10 @hlashbrooke
23 months ago

I think we should definitely customise the oEmbed output for the new directory - no point in doing it for the old directory now, and this would be the best time to do it for the new one.

Like with the old directory, the easiest option would probably be to use the exact same markup that the plugin listing cards use, so there's no need to rewrite anything and we can just pull from the same templates.

This ticket was mentioned in Slack in #meta by webdevmattcrom. View the logs.


21 months ago

#12 @Otto42
21 months ago

  • Owner Otto42 deleted
  • Status changed from accepted to assigned

I actually started this for the old directory, but never finished it because of problems with the URL routing and bbPress 1.x.

Adding it to the new directory will be as simple as adding some embed.php templates to the theme, for the most part, so yes, I think we should focus on that instead.

#13 @joostdevalk
18 months ago

  • Milestone set to Plugin Directory v3 - Future

So, embed already works on the new plugin directory, it just needs to look a lot better. I don't have a working meta environment right now so I can't really fix that.

#14 @Ipstenu
14 months ago

  • Summary changed from Enable oEmbed for plugins to Allow Plugin pages to be oembedded like WP Posts

#15 @melchoyce
10 months ago

  • Keywords needs-ui added

#16 @melchoyce
10 months ago

I think we can mostly still go with the plugin cards, with some additional tweaks to make them match post embed cards a little more. The current plugin cards don't really look like cards (no border around them or shadow), and I don't think would look like an embed as-is.

#17 @Otto42
6 months ago

  • Keywords good-first-bug needs-design added; needs-ui removed

This should be as simple as making an embed.php file in this theme:
https://meta.trac.wordpress.org/browser/sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins

Starting with the base card view that WordPress has and perhaps adding the icon would be a good place to start.

@Otto42
6 months ago

Starting point

@Otto42
6 months ago

#18 @Otto42
6 months ago

embed-starter.php is terrible proof-of-concept code that will show the existing plugin card as an embed, at the cost of tons of extra styling added for no reason. Also attached an example image.

This ticket was mentioned in Slack in #design by melchoyce. View the logs.


6 months ago

#20 @melchoyce
6 months ago

If there's a designer interested in working on this, there's more background here: https://wordpress.slack.com/archives/C02S78ZAL/p1512498921000055 (bseekins is going to pass on this one, so it's open for any interested designer)

#21 @Otto42
6 months ago

Okay, I see that there was some confusion about this over in Slack, so I'll explain the concept a bit better.

Ever since 4.4, WordPress has had "Embeds" as a feature: https://wordpress.org/news/2015/12/clifford/

Basically, when you link to a WordPress post, instead of it just showing a link, it shows that neat little embedded box with more info and share buttons and the like.

The way this works internally is a bit irrelevant, but the short of it is that the box is an iframe to the post with /embed/ after it. Like this: https://wordpress.org/news/2015/12/clifford/embed/

The Plugins directory now runs WordPress, so it has embeds too: https://wordpress.org/plugins/akismet/embed/

The design for this box is adjustable. Easily so, because all you have to do is to make an embed.php in the theme and that gets used for that box instead.

Now, you can design that box any way you like. Has to be a box because it goes into an iframe on sites, but still, no real limits.

So, the idea is to design a box that looks better than the default box. One which has useful information about the plugin, which links to it, and so on. Doesn't have to have a Share button, as such, but that would be nice.

The design I show above I stole straight from the existing "cards" in the plugin directory. Doesn't have to look like that, necessarily. That was just already there and thus easy to do.

So, that's the goal. Design a box that has useful information about a single plugin. It should fit into a reasonably small space. The default space for the iframe is 600x338, but that's adjustable if needed.

Don't worry too much about the code, that's the easiest part of the problem to do for us. :)

#22 @joostdevalk
6 months ago

@hedgefield could you look at this?

#23 @hedgefield
6 months ago

For sure, I've attached a stab at it below.

The card view from WordPress was an okay place to start, but there's a lot of grey in it, and arguably some stats there are less relevant when showing the embed on a site. Version and compatibility may be more relevant if the card offers a direct download link, but I'm going to assume we'd want to direct people to the plugin directory listing first? They'll have a chance to look at the version and ratings etc more in-depth there if they want, that frees up some room to keep the embed card clean.

I started with a very minimal one, similar to how it is now, and also made a version that has a bit more WP feeling in it. 600x338 is a bit of an awkward size, so I used 1024x356 for this example, though it has enough leeway to be responsive.

Last edited 6 months ago by hedgefield (previous) (diff)

@hedgefield
6 months ago

Designs for plugin oEmbed

#24 @melchoyce
6 months ago

Thanks @hedgefield, that top option feels right. We'll want to match the border and box-shadow styles from the post embeds:

border: 1px solid #e5e5e5;
box-shadow: 0 1px 1px rgba(0,0,0,.05);

And probably the description text color, though in this case I actually think we need to adjust the post embed styles — the current color (#82878c) doesn't pass contrast. Thinking we should go with #606A73 or #555D66 for both embed's paragraph color.

@hedgefield
5 months ago

embed v2

#25 @hedgefield
5 months ago

Good points @melchoyce, thanks. Perhaps in abundance, but I updated the mockup with those suggestions. The shadow values don't exactly map to photoshop 1-to-1, but I got them as close as possible. I think 555D66 is the best color out of the two for the description.

#26 @melchoyce
5 months ago

Thanks @hedgefield, that looks really great. I think it's ready to use.

Note: See TracTickets for help on using tickets.