Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
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: 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
);
<?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.

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.

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