Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<?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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment