template-preview-poc.php

<?php
/*
Plugin Name: Template preview proof of concept
Description: Template preview proof of concept.
Author: Mikael Korpela
Version: 2020-02-21
*/

/*

Drop this PHP file in your `wp-content/mu-plugins/` folder and...

1. Create a page or post
2. ...with blocks that have p tag and `template-content` CSS selector
3. ...with blocks that have img tags and `template-images` CSS selector
4. Open the page in the browser
5. Add URL params to modify the content:
 - `_content`: Some text to replace `p.template-content`
 - `_image`: URL to an image to replcae `.template-images img`
 - `_title`: Some text to replace page/post title

Example query:
```
&_content=Custom%20Hello%20World%20Content!&_title=Custom%20title&_image=https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Monasterio_Khor_Virap%2C_Armenia%2C_2016-10-01%2C_DD_25.jpg/1024px-Monasterio_Khor_Virap%2C_Armenia%2C_2016-10-01%2C_DD_25.jpg
```

- Load the URL via MShots API, examples:
  - https://s.wordpress.com/mshots/v1/http%3A%2F%2F80eca702.eu.ngrok.io%2F%3Fpage_id%3D189?w=1200
  - https://s.wordpress.com/mshots/v1/http%3A%2F%2F80eca702.eu.ngrok.io%2F%3Fpage_id%3D189%26_content%3DCustom%2520Hello%2520World%2520Content%21%26_title%3DCustom%2520title%26_image%3Dhttps%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fcommons%2Fthumb%2F6%2F6e%2FMonasterio_Khor_Virap%252C_Armenia%252C_2016-10-01%252C_DD_25.jpg%2F1024px-Monasterio_Khor_Virap%252C_Armenia%252C_2016-10-01%252C_DD_25.jpg?w=1200

*/

add_filter( 'render_block', 'modify_template_preview_blocks', 10, 2 );
add_filter( 'the_title', 'modify_template_preview_title', 10, 2 );
add_action( 'plugins_loaded', 'modify_template_preview_init' );

// Hide stuff when previewing
function modify_template_preview_init( $content ) {
  if ( ! empty( $_GET['_title'] ) || ! empty( $_GET['_content'] ) || ! empty( $_GET['_image'] ) ) {
    add_filter( 'show_admin_bar', '__return_false' );
    // @TODO: Hide cookie banners
  }
}

// Modify title
function modify_template_preview_title( $title, $id = null ) {
  return ! empty( $_GET['_title'] ) ? sanitize_title( strip_tags( $_GET['_title'] ) ) : $title;
}

// Modify content
function modify_template_preview_blocks( $block_content, $block ) {
  // Replace text content
  if ( isset($block['attrs']['className']) && $block['attrs']['className'] === 'template-content' ) {
    if ( ! empty( $_GET['_content'] ) ) {
      // @TODO: use HTML DOM instead of `preg_replace`?
      return preg_replace( '/(<p[^>]*>)(.*?)(<\/p>)/i', '$1' . strip_tags( $_GET['_content'] ) . '$3', $block_content );
    }

    return $block_content;
  }

  // Replace image
  if ( isset( $block['attrs']['className'] ) && $block['attrs']['className'] === 'template-images' ) {
    if ( !empty( $_GET['_image'] ) && wp_http_validate_url( $_GET['_image'] ) ) {
       $doc = new DOMDocument();
       libxml_use_internal_errors( true );
       $doc->loadHTML( $block_content );
       libxml_clear_errors();
       $tags = $doc->getElementsByTagName( 'img' );

       $new_img_src = esc_attr( esc_url( $_GET['_image'] ) );

       foreach ( $tags as $tag ) {
        $old_src = $tag->getAttribute( 'src' );
        $tag->setAttribute( 'src', $new_img_src );
       }

       return $doc->saveHTML();
    }

    return $block_content;
  }

  return $block_content;
}