Skip to content

Instantly share code, notes, and snippets.

@pento
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: 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' );
@Christian-Roth
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
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.

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