Gutenberg Stars Block

stars-block.js

( function( blocks, element ) {
	var el = element.createElement;

	function Stars( { stars } ) {
		return el( 'div', { key: 'stars' },
			'★'.repeat( stars ),
			( ( stars * 2 ) % 2 ) ? '½' : '' );
	}

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

		icon: 'format-image',

		category: 'common',

		attributes: {
			stars: {
				type: 'int',
				meta: 'stars', // Store the value in postmeta
			}
		},

		edit: function( props ) {
			var stars = props.attributes.stars,
				children = [];

			function setStars( event ) {
				props.setAttributes( { stars: event.target.value } );
				event.preventDefault();
			}

			if ( stars ) {
				children.push( Stars( { stars: stars } ) );
			}

			children.push(
				el( 'input', {
					key: 'stars-input',
					type: 'number',
					min: 0,
					max: 5,
					step: 0.5,
					value: stars,
					onChange: setStars } )
			);

			return el( 'form', { onSubmit: setStars }, children );
		},

		save: function() {
			// We don't want to save any HTML in post_content, as the value will be in postmeta
			return null;
		}
	} );
} )(
	window.wp.blocks,
	window.wp.element
);

stars-block.php

<?php
/*
 * Plugin Name: Stars Block
 * Version: 0.2
 * Author: Gary Pendergast
 * Author URI: https://pento.net/
 * License: GPL3+
 *
 * Description: Everyone loves stars! Let's add stars (now with more meta)!
 */

function stars_block_enqueue_block_editor_assets() {
	wp_enqueue_script(
		'stars-block',
		plugins_url( 'stars-block.js', __FILE__ ),
		array( 'wp-blocks' )
	);
}
add_action( 'enqueue_block_editor_assets', 'stars_block_enqueue_block_editor_assets' );

function stars_block_init() {
	// Register the postmeta key that we'll store our data in
	register_meta( 'post', 'stars', array(
		'show_in_rest' => true,
		'single'       => true,
		'type'         => 'integer',
	) );
}
add_action( 'init', 'stars_block_init' );

Thanks for that!

One question, if I may; How would I have multiple instances of this block that have different values? Right now, if I add two stars blocks, and adjust the number of stars in one, the other changes too.

Many thanks for making this available. A big ask I know, but would you be able to comment that Javascript (which I must admit is entirely new to me) with what it is all doing please? Many thanks in advance.

first of all, thanks for sharing, really interesting...

btw, when I tried it (Dec 2017), it did not save the rating into the postmeta table, it simply saved the value in the post_content field of the post table.

<!-- wp:stars/stars-block {"stars":"4.5"} /-->

Same here. I'm not seeing this being saved as post meta.

I agree with @itibook and @justintadlock, I'm seeing the data stored in the post_content column in the wp_posts table, not in the wp_postmeta table. I would refer to this as "block meta" rather than "post meta".

For anyone else looking for it, this code by @tharsheblows is a working example of storing Gutenberg block attribute data in post meta.

https://github.com/tharsheblows/grueziblock/blob/master/blocks/postmeta-block.js

Got the example working with two little adjustments:

The star attribute source just needs to be marked as meta
https://gist.github.com/Christian-Roth/0b0d6ee50893ce40fd1fd575103b40bd#file-stars-block-js-L20

And the registered meta type needs to be number not integer
https://gist.github.com/Christian-Roth/0b0d6ee50893ce40fd1fd575103b40bd#file-stars-block-php-L26

Then the value will be stored as post meta.