Preview your block patterns on the frontend of your website

block-pattern-preview.php

<?php
/**
 * Plugin Name: Block Pattern Preview
 * Description: Allows you to preview block patterns on the frontend of your website.
 * Author:      Brian Coords
 * Author URI:  https://www.briancoords.com
 * Version:     0.0.1
 * License:     GPL v2 or later
 * License URI: https://www.gnu.org/licenses/gpl-2.0.html
 *
 * @package BlockPatternPreview
 */

namespace BlockPatternPreview;

/**
 * Hook into the template redirect to render the pattern preview.
 */
function render_pattern_preview() {

	if ( ! is_user_logged_in() || ! isset( $_GET['block_pattern_preview'] ) ) { // phpcs:ignore WordPress.Security.NonceVerification.Recommended
		return;
	}

	// If there's no pattern specified, load the table of contents.
	if ( '' === $_GET['block_pattern_preview'] ) { // phpcs:ignore WordPress.Security.NonceVerification.Recommended
		get_header();
		ob_start();
		?>
		<div id="primary">
			<div class="entry-content">
				<div style="height:100px;" aria-hidden="true" class="wp-block-spacer"></div>
				<h1 class="entry-title alignwide">Block Patterns</h1>
				<div style="height:100px;" aria-hidden="true" class="wp-block-spacer"></div>
				<div class="wp-block-columns alignwide is-layout-flex" style="flex-wrap:wrap!important">
					<?php foreach ( glob( get_stylesheet_directory() . '/patterns/*.php' ) as $path ) : ?>
						<?php
						$data = get_file_data(
							$path,
							array(
								'title'      => 'Title',
								'slug'       => 'Slug',
								'categories' => 'Categories',
							)
						);
						?>
						<div class="wp-block-column" style="flex-basis:30%;"><a href="<?php echo esc_attr( add_query_arg( 'block_pattern_preview', $data['slug'], home_url() ) ); ?>"><?php echo esc_html( $data['title'] ); ?></a> <?php echo esc_html( $data['categories'] ); ?></div>
					<?php endforeach; ?>
				</ul>
				<div style="height:100px;" aria-hidden="true" class="wp-block-spacer"></div>
			</div>
		</div>
		<?php
		$the_content = ob_get_clean();

		echo apply_filters( 'the_content', $the_content ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped

		get_footer();

		exit;
	}

	$path = get_stylesheet_directory() . '/patterns/' . sanitize_text_field( wp_unslash( $_GET['block_pattern_preview'] ) ) . '.php';

	// Confirm pattern exists.
	if ( ! file_exists( $path ) ) {
		return;
	}

	$data = get_file_data(
		$path,
		array(
			'title' => 'Title',
		)
	);

	get_header();
	ob_start();
	?>
	<div id="primary">
		<div class="entry-content">

			<?php if ( $data['title'] ) : ?>
				<div style="height:100px;" aria-hidden="true" class="wp-block-spacer"></div>
				<h1 class="entry-title alignwide"><?php echo esc_html( $data['title'] ); ?></h1>
			<?php endif; ?>
			<div style="height:100px;" aria-hidden="true" class="wp-block-spacer"></div>
			<?php include $path; // phpcs:ignore WordPress.Security.NonceVerification.Recommended ?>
			<div style="height:100px;" aria-hidden="true" class="wp-block-spacer"></div>
		</div>
	</div>
	<?php
	$the_content = ob_get_clean();

	echo apply_filters( 'the_content', $the_content ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped

	get_footer();

	exit;
}
add_action( 'template_redirect', 'BlockPatternPreview\render_pattern_preview' );


/**
 * Register the admin bar menu if Pattern Manager is enabled.
 *
 * @param WP_Admin_Bar $wp_admin_bar WP_Admin_Bar instance, passed by reference.
 */
function register_admin_bar_menu( $wp_admin_bar ) {

	// Confirm Pattern Manager is active.
	if ( ! in_array( 'pattern-manager/pattern-manager.php', apply_filters( 'active_plugins', get_option( 'active_plugins' ) ), true ) ) {
		return;
	}

	// Register link to edit the pattern.
	if ( isset( $_GET['block_pattern_preview'] ) && '' !== $_GET['block_pattern_preview'] ) { // phpcs:ignore WordPress.Security.NonceVerification.Recommended
		$pattern_post = get_page_by_path( sanitize_text_field( wp_unslash( $_GET['block_pattern_preview'] ) ), OBJECT, 'pm_pattern' ); // phpcs:ignore WordPress.Security.NonceVerification.Recommended
		if ( $pattern_post ) {
			$args = array(
				'id'    => 'pattern-preview',
				'title' => __( 'Edit Pattern' ),
				'href'  => get_edit_post_link( $pattern_post ),
			);
			$wp_admin_bar->add_node( $args );
		}
	}

	// Register link to preview the pattern.
	global $post;
	if ( isset( $post->post_name ) && '' !== $post->post_name && function_exists( 'get_current_screen' ) && 'pm_pattern' === get_current_screen()->id ) {
		$args = array(
			'id'    => 'pattern-preview',
			'title' => __( 'Preview Pattern' ),
			'href'  => home_url( '?block_pattern_preview=' . $post->post_name ),
		);
		$wp_admin_bar->add_node( $args );
	}
}
add_action( 'admin_bar_menu', 'BlockPatternPreview\register_admin_bar_menu', 999 );