Making WordPress.org

Opened 9 months ago

Last modified 9 months ago

#7040 new defect (bug)

Create and add a plugin for embedding playground iframes in docs

Reported by: jonoaldersonwp's profile jonoaldersonwp Owned by:
Milestone: Priority: high
Component: Handbooks Keywords: has-patch
Cc:

Description (last modified by jonoaldersonwp)

The docs team would like to be able to embed playground instances into content. We should create a simple plugin ("Playground Embedder") to facilitate this.

This should be relatively simple, but has a few moving parts:

  • Someone needs to write a/the plugin
  • The playground should be loaded via a shortcode (as content is managed in GitHub / sync processes, so a block-based approach isn't suitable)
  • Playground content is delivered as an iframe, but we also need to consider;
    • The shortcode should support providing parameters (details at https://wordpress.github.io/wordpress-playground/docs/query-api/) which passes additional parameters to the iframe URL.
    • The iframe should only be loaded on click/interaction; so we need an 'inactive' state (which should presumably come with some form of skeleton view + sizing)
      • This will require some simple JS (which should only be enqueued on pages where the shortcode is present) and CSS (for styling the inactive state, and for managing the h/w/etc of the active state)

The base playground URL is https://playground.wordpress.net/.

Change History (7)

#1 @jonoaldersonwp
9 months ago

  • Description modified (diff)

#2 @jonoaldersonwp
9 months ago

  • Description modified (diff)

#3 @jonoaldersonwp
9 months ago

  • Description modified (diff)

#4 @jonoaldersonwp
9 months ago

  • Description modified (diff)

#5 @jonoaldersonwp
9 months ago

  • Description modified (diff)

#6 @joostdevalk
9 months ago

Created a small plugin for this purpose: https://github.com/jdevalk/playground-embedder

This ticket was mentioned in PR #145 on WordPress/wordpress.org by @joostdevalk.


9 months ago
#7

  • Keywords has-patch added
Note: See TracTickets for help on using tickets.