Title: Gutenberg custom block with array
Last modified: April 3, 2020

---

# Gutenberg custom block with array

 *  [Mikhail](https://wordpress.org/support/users/minus20/)
 * (@minus20)
 * [6 years, 2 months ago](https://wordpress.org/support/topic/gutenberg-custom-block/)
 * I have a task to make user able to enter bunch of dates with the post meta so
   i can query them in my theme later. I found a great example to create single 
   text metabox in the gutenberg but as far as I know WordPress allows to store 
   multiple values in a one meta field (I’d use get_post_meta() with parameter $
   single = false to get it with PHP). Now I wasted a half of the day and stuck 
   on this step, when my code doesn’t work and I lack an expirience with React, 
   so I wish anyone will put me on the right way.
 * When button clicked array actually increased but the fields not always rendered
   plus i cannot really edit the text. Here is my code:
 *     ```
       registerBlockType( 'sonnet/sn-spectacle--datetime', {
       	title: 'Meta Block',
       	icon: 'smiley',
       	category: 'common',
   
       	attributes: {
       		dates: {
       			type: 'array',
       			source: 'meta',
       			meta: 'sn-spectacle__datetime',
       		},
       	},
   
       	edit( { className, setAttributes, attributes } ) {
       		function handleChange( value, index ) {
       			const { dates } = attributes;
       			dates[index] = value;
       			setAttributes({dates});
       		}
       		function addDate() {
       			const { dates } = attributes;
       			dates.push('');
       			setAttributes({dates});
       		}
   
       		return (
       			<div className={ className }>
       				{ attributes.dates.map((date, index) => {
       					return <TextControl
       						key={index}
       						label="Test"
       						value={ attributes.dates[index] }
       						onChange={ value => handleChange(value, index) }
       					/> })}
       				<Button onClick={ addDate }>+</Button>
       			</div>
       		);
       	}
       } );
       ```
   
 * Maybe anyone already made such thing, I didn’t found any examples.
    -  This topic was modified 6 years, 2 months ago by [Mikhail](https://wordpress.org/support/users/minus20/).

Viewing 3 replies - 1 through 3 (of 3 total)

 *  [Matt Robinson](https://wordpress.org/support/users/mattyrob/)
 * (@mattyrob)
 * [6 years, 2 months ago](https://wordpress.org/support/topic/gutenberg-custom-block/#post-12627008)
 * [@minus20](https://wordpress.org/support/users/minus20/)
 * There is a good tutorial on writing blocks here:
 * [https://developer.wordpress.org/block-editor/tutorials/block-tutorial/writing-your-first-block-type/](https://developer.wordpress.org/block-editor/tutorials/block-tutorial/writing-your-first-block-type/)
 * But the first thing that strike me about your code above is that you don’t have
   a `save` segment to your code to handle pushing the data to the database. Perhaps
   look at that.
 *  Thread Starter [Mikhail](https://wordpress.org/support/users/minus20/)
 * (@minus20)
 * [6 years, 2 months ago](https://wordpress.org/support/topic/gutenberg-custom-block/#post-12628253)
 * [@mattyrob](https://wordpress.org/support/users/mattyrob/)
 * Based on [this post](https://developer.wordpress.org/block-editor/tutorials/metabox/meta-block-3-add/)“
   By specifying the source of the attributes as meta, the block editor automatically
   handles the loading and storing of the data; no REST API or data functions are
   needed.”
 *  [Matt Robinson](https://wordpress.org/support/users/mattyrob/)
 * (@mattyrob)
 * [6 years, 2 months ago](https://wordpress.org/support/topic/gutenberg-custom-block/#post-12629571)
 * [@minus20](https://wordpress.org/support/users/minus20/)
 * That looks like it might help but you do need to surface your meta data in the
   TEST API as detailed in the previous step in the tutorial. Also note that the
   attribute type is a string when the source is meta so you may need to consider`
   serialize` and `unserialize` steps when handling your data.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Gutenberg custom block with array’ is closed to new replies.

## Tags

 * [block](https://wordpress.org/support/topic-tag/block/)

 * In: [Developing with WordPress](https://wordpress.org/support/forum/wp-advanced/)
 * 3 replies
 * 2 participants
 * Last reply from: [Matt Robinson](https://wordpress.org/support/users/mattyrob/)
 * Last activity: [6 years, 2 months ago](https://wordpress.org/support/topic/gutenberg-custom-block/#post-12629571)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics