-
-
Save pento/19b35d621709042fc899e394a9387a54 to your computer and use it in GitHub Desktop.
( 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' ); |
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.
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"} /-->
Same here. I'm not seeing this being saved as post meta.
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".
For anyone else looking for it, this code by @tharsheblows is a working example of storing Gutenberg block attribute data in post meta.
https://github.com/tharsheblows/grueziblock/blob/master/blocks/postmeta-block.js
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.
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.