Skip to content

Instantly share code, notes, and snippets.

Last active January 4, 2022 14:00
Show Gist options
  • Save pento/19b35d621709042fc899e394a9387a54 to your computer and use it in GitHub Desktop.
Save pento/19b35d621709042fc899e394a9387a54 to your computer and use it in GitHub Desktop.
Gutenberg Stars Block
( 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: } );
if ( stars ) {
children.push( Stars( { stars: stars } ) );
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;
} );
} )(
* Plugin Name: Stars Block
* Version: 0.2
* Author: Gary Pendergast
* Author URI:
* License: GPL3+
* Description: Everyone loves stars! Let's add stars (now with more meta)!
function stars_block_enqueue_block_editor_assets() {
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' );
Copy link

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.

Copy link

wpmark commented Oct 3, 2017

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.

Copy link

itibook commented Dec 10, 2017

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"} /-->

Copy link

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

Copy link

salcode commented Jan 25, 2018

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".

Copy link

salcode commented Jan 27, 2018

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

Copy link

Christian-Roth commented Jan 30, 2018

Got the example working with two little adjustments:

The star attribute source just needs to be marked as meta

And the registered meta type needs to be number not integer

Then the value will be stored as post meta.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment