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', | |
source: 'meta', | |
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' => 'number', | |
) ); | |
} | |
add_action( 'init', 'stars_block_init' ); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment