Last active
January 4, 2022 14:00
-
-
Save pento/19b35d621709042fc899e394a9387a54 to your computer and use it in GitHub Desktop.
Gutenberg Stars Block
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
( 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 | |
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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' ); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.