WACK Preview

WACK Preview is a WordPress plugin that helps you to implement a preview system for unpublished drafts on your frontend application.

How it works

Originally designed for use with the WACK Stack, this plugin can also be used with other decoupled, headless WordPress setups that use separate frontend applications, such as those utilizing the REST API or WPGraphQL.

This plugin replaces the default permalinks and preview links for posts (and other custom post types) generated by WordPress.

Preview links are generated with a JWT token as a parameter. By verifying this JWT using the same secret key on your frontend application, you can ensure the token was legitimately generated by WordPress. This lets you securely fetch data before it is published.

Installation

• Requires PHP 8.1 or later
• Requires WordPress 6.7 or later
• Requires Composer

Using Composer

composer require kodansha/wack-preview

Note

This plugin is not available on the WordPress.org plugin repository. The only installation method currently available is through Composer.

Configuration

To use WACK Preview, you need to configure URL mappings for displaying pages on the frontend. Additionally, you must set up a secret token for preview URLs.

You can configure these settings using one of the following methods:

• Define settings with the WACK_PREVIEW_SETTINGS constant
• Configure settings through the WordPress admin menu

Setting via WACK_PREVIEW_SETTINGS constant

Define WACK_PREVIEW_SETTINGS in functions.php or similar:

define('WACK_PREVIEW_SETTINGS', [
    // URL of frontend
    'frontend_base_url' => 'https://frontend.example.com',
    // Preview token settings
    'preview_token' => [
        // Secret key for Token generation
        'secret_key' => 'THIS_IS_A_SECRET_KEY',
        // Expiry time of token (seconds)
        'expiry_time' => 60 * 60 * 24
    ],
    // Path mappings for publish and preview links
    // %id% will be replaced with the actual post id when generating links
    // e.g. /post/%id% -> /post/123
    // The generated links will replace the original links
    'path_mappings' => [
        // Mapping for each post types
        // This example is for the default "post" type
        'post' => [
            'publish' => '/posts/%id%',
            'preview' => '/posts/preview/%id%'
        ],
        // Another custom post type you would like to rewrite permalinks
        // %slug% will be replaced with the actual post slug (name) when generating links
        // e.g. /news/%slug% -> /news/an-awesome-news
        // Note that the post slug may not be set in some cases. In such cases, the post ID will be automatically used as a fallback.
        'news' => [
            'publish' => '/news/%slug%',
            // You can set a preview path including query string
            // query strings will be merged with "preview_token" and "preview"
            'preview' => '/news/preview?slug=%slug%'
        ],
    ],
]);

Note

On multisite WordPress installations, the WACK_PREVIEW_SETTINGS constant does not function as expected. In such cases, configure settings individually for each site using the admin menu.

Setting via WordPress admin menu

Navigate to the WACK Preview settings screen in the WordPress admin menu and follow the on-screen instructions.

Tip

If settings are defined in both the WACK_PREVIEW_SETTINGS constant and the admin menu, the constant's settings will take precedence. This allows flexible configuration - for example, you could define only the secret_key as a constant (keeping it out of the database) while managing other settings through the admin screen.

Preview token payload

The preview token is a JWT token that contains the following payload:

{
  // Post ID (or post slug if "%slug%" template is set in the path mappings)
  // Note: If the post does not have the slug, it will fallback to the post ID even if the "%slug%" template is set.
  "sub": 123,
  // Issuer (always set to `wack-preview`)
  "iss": "wack-preview",
  // Issued at (UNIX timestamp)
  "iat": 1630000000,
  // Expiry time (UNIX timestamp)
  "exp": 1630003600
}

This means that the frontend application can verify the token is valid for the specified post by checking the sub field.

API

wack_preview_verify_token

function wack_preview_verify_token(string $preview_token): bool

This is a utility function provided as a convenient API. It can be used in WordPress themes to verify preview tokens and control access to unpublished posts.

It returns true if the token is valid, false otherwise.