Add WordPress.org Live Preview support

[bgrgicak]

Imagify Image Optimization currently doesn't support Live Previews on its WordPress.org plugin page.

I started working on a Live Preview Blueprint, but realized that Imagify requires a API Key to work.
While users could land on the Your Account page and setup a API key (try it in Playground), it would be a better user experience if there was a existing API Key they could use during the Live Preview.

Please let me know if I can help you get started with Playground or using Live Previews on WordPress.org,

Blueprint examples

Open Your Account

{
  "landingPage": "/wp-admin/admin.php?page=imagify",
  "steps": [
    {
      "step": "installPlugin",
      "pluginData": {
        "resource": "wordpress.org/plugins",
        "slug": "imagify"
      },
      "options": {
        "activate": true
      }
    }
  ]
}

Open General Settings with a working API Key

{
  "landingPage": "/wp-admin/admin.php?page=imagify",
  "steps": [
    {
      "step": "installPlugin",
      "pluginData": {
        "resource": "wordpress.org/plugins",
        "slug": "imagify"
      },
      "options": {
        "activate": true
      }
    },
    {
      "step": "defineWpConfigConsts",
      "consts": {
        "IMAGIFY_API_KEY": "<WORKING-API-KEY>"
      }
    }
  ]
}

Open General Settings by overriding the licence transient

This is probably the worst option. It would load your plugin, but every optimization attempt would file due to a missing API key.

{
  "landingPage": "/wp-admin/admin.php?page=imagify",
  "steps": [
    {
      "step": "installPlugin",
      "pluginData": {
        "resource": "wordpress.org/plugins",
        "slug": "imagify"
      },
      "options": {
        "activate": true
      }
    },
    {
      "step": "mkdir",
      "path": "/wordpress/wp-content/mu-plugins"
    },
    {
      "step": "writeFile",
      "path": "/wordpress/wp-content/mu-plugins/my-plugin-2.php",
      "data": "<?php add_filter( 'pre_transient_imagify_check_licence_1', '__return_true' );"
    }
  ]
}

[remyperona]

We can define the API key using a constant, but how do we ensure it doesn't end up being misused, as it would be publicly available in the blueprint json?

[bgrgicak]

We can define the API key using a constant, but how do we ensure it doesn't end up being misused, as it would be publicly available in the blueprint json?

Playground doesn't offer any way of securely storing secrets like API keys. Because the web version runs in a browser, all the code and data are available to the browser user just like any other frontend JavaScript code.

I've seen demos where plugin authors add a real API key, but limit its usage on the server. It's not ideal and requires extra maintenance, but that's the only option that comes to my mind.