Gutenberg giphy live demo plugin

live-coding-example.php

<?php

// mu-plugin for stepping through https://github.com/obenland/giphy-block/
// has some dynamic modifications to avoid JS errors / use a better gif

class LiveDemo {

	static $steps = array(
		'425c485' => '0: Boilerplate',
		'c98c358' => '1: Register a block',
		'78f28d0' => '2: Return a gif on save!',
		'b56471b' => '3: Give us a real icon',
		'9122205' => '4: Add keywords to improve block search',
		'8fda2df' => '5: Define attribute to extract url **',
		'670fc3c' => '6: Add an edit function **',
		'188435b' => '7: Make gif src dynamic **',
		'a5d5df1' => '8: Add a placeholder',
		'124ca58' => '9: Add a search form to search Gifs',
		'0838838' => '10: Add container to list fetch results',
		'c4ba500' => '11: Create result thumbnails',
		'160d693' => '12: Show a spinner during search requests',
	);
	static $path = WP_CONTENT_DIR . '/plugins/giphy-block/';

	static function admin_init() {
		add_action( 'admin_bar_menu', [ __CLASS__, 'admin_bar_menu' ] );
		add_action( 'admin_head', function() {
			echo '<style>.strongred a { color: red !important; font-weight: bold !important; }</style>'; // Sorry not sorry
			echo '<script>var results=false;</script>';
		} );

		if ( isset( $_GET['change_rev'] ) && isset( self::$steps[ $_GET['change_rev'] ] ) ) {
			self::git_checkout( $_GET['change_rev'] );
		}
	}

	static function admin_bar_menu() {
		global $wp_admin_bar;
		$rev = self::get_current_rev();

		$revs = count( self::$steps );
		$this_rev = array_search( $rev, array_keys( self::$steps ) ) + 1;

		$wp_admin_bar->add_node( array(
			'id'    => 'git_checkout',
			'title' => 'Giphy Live Demo - ' . $this_rev . '/' . $revs,
			'href'  => '#',
			'meta'  => array( 'class' => 'git-checkout' )
		) );
		foreach ( self::$steps as $commit => $desc ) {
			$wp_admin_bar->add_node( array(
				'id'    => 'git_checkout_' . $commit,
				'title' => strtoupper( $commit ) . ' ' . $desc,
				'href'  => add_query_arg( 'change_rev', $commit ),
				'parent' => 'git_checkout',
				'meta'  => array( 'class' => $rev == $commit ? 'strongred' : '' )
			) );
		}

	}

	static function get_current_rev() {
		$path = self::$path;
		return trim( `cd $path; git log -1 --oneline | cut -d' ' -f1` );
	}
	static function git_checkout( $rev ) {
		$path = self::$path;
		`cd $path; git checkout $rev -f`;

		$content = file_get_contents( "$path/block.js" );

		// Use a better gif placeholder - there's not many WordPress giphys :(
		$content = str_replace( "https://media.giphy.com/media/l46C8VoCqphm8QPOU/giphy.gif", "https://media.giphy.com/media/l4EoYJ0w7O59m8CFW/giphy.gif", $content );

		// Fix the JS error.
		if ( ! strpos( $content, "var results =" ) ) {
			$content = str_replace( "var __ = wp.i18n.__;", "var __ = wp.i18n.__;\n\tvar results = [];", $content );
		}
		file_put_contents( "$path/block.js", $content );
	}

}
add_action( 'admin_init', array( 'LiveDemo', 'admin_init' ) );