stars-block.php

## stars-block.php
<?php

// NOTE: It would normally be recommended to split a block's JavaScript
// implementation to a separate file, but is authored here in a single
// file for convenience's sake.
//
// See: https://github.com/WordPress/gutenberg/pull/2791

/**
 * Plugin Name: Stars Block
 */

function stars_enqueue_block_editor_assets() {
	wp_register_script(
		'vue',
		'https://vuejs.org/js/vue.js'
	);
	wp_register_script(
		'vue-custom-element',
		'https://unpkg.com/vue-custom-element@1.3.0/dist/vue-custom-element.js',
		array( 'vue' )
	);
	wp_register_script(
		'stars-block',
		null,
		array( 'wp-blocks', 'vue', 'vue-custom-element' )
	);
	wp_enqueue_script( 'stars-block' );

	$script = <<<HTML
Vue.use( VueCustomElement );

Vue.customElement( 'stars-block-edit', {
	props: [
		'stars',
		'setAttributes',
	],

	template: `
		<div>
			<span v-for="n in 5">
				<span
					@click="setAttributes( { stars: n } )"
					:class="[
						'dashicons',
						n > stars ? 'dashicons-star-empty' : 'dashicons-star-filled'
					]"
				/>
			</span>
		</div>
	`
} );

wp.blocks.registerBlockType( 'stars-block/stars', {
	title: 'Stars',

	icon: 'star-filled',

	category: 'layout',

	attributes: {
		stars: {
			type: 'number',
			default: 1
		}
	},

	edit: 'stars-block-edit',

	save: function() {}
} );
HTML;

	wp_script_add_data( 'stars-block', 'data', $script );
}
add_action( 'enqueue_block_editor_assets', 'stars_enqueue_block_editor_assets' );