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

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
Copy link

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
Copy link

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
Copy link

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

@salcode
Copy link

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
Copy link

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