Instantly share code, notes, and snippets.

Embed
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' );
@richardtape

This comment has been minimized.

Show comment
Hide comment
@richardtape

richardtape Sep 29, 2017

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.

richardtape commented Sep 29, 2017

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

This comment has been minimized.

Show comment
Hide comment
@wpmark

wpmark 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.

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.

@itibook

This comment has been minimized.

Show comment
Hide comment
@itibook

itibook Dec 10, 2017

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"} /-->

itibook commented Dec 10, 2017

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"} /-->

@justintadlock

This comment has been minimized.

Show comment
Hide comment
@justintadlock

justintadlock Dec 14, 2017

Same here. I'm not seeing this being saved as post meta.

justintadlock commented Dec 14, 2017

Same here. I'm not seeing this being saved as post meta.

@salcode

This comment has been minimized.

Show comment
Hide comment
@salcode

salcode Jan 25, 2018

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".

salcode commented Jan 25, 2018

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".

@salcode

This comment has been minimized.

Show comment
Hide comment
@salcode

salcode Jan 27, 2018

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

salcode commented Jan 27, 2018

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

@Christian-Roth

This comment has been minimized.

Show comment
Hide comment
@Christian-Roth

Christian-Roth 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.

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