Example Gutenberg Block with array attribute

block-string-list-block.js

/**
 * BLOCK: string-list-block
 *
 * Registering a basic block with Gutenberg.
 * Simple block, renders and saves the same content without any interactivity.
 */

//  Import CSS.
import './style.scss';
import './editor.scss';

const { __ } = wp.i18n; // Import __() from wp.i18n
const { registerBlockType } = wp.blocks; // Import registerBlockType() from wp.blocks
import { TextControl } from '@wordpress/components';


const attributes = {
	links: {
        type: 'array',
        source: 'attribute',
        selector: 'li a',
		attribute: 'href',
		default: [
			'http://google.com',
			'http://facebook.com'
		]
	},
	newLink:{
		type: 'string'
	}
}



/**
 * Register: aa Gutenberg Block.
 *
 * Registers a new block provided a unique name and an object defining its
 * behavior. Once registered, the block is made editor as an option to any
 * editor interface where blocks are implemented.
 *
 * @link https://wordpress.org/gutenberg/handbook/block-api/
 * @param  {string}   name     Block name.
 * @param  {Object}   settings Block settings.
 * @return {?WPBlock}          The block, if it has been successfully
 *                             registered; otherwise `undefined`.
 */
registerBlockType( 'cgb/block-string-list-block', {
	// Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
	title: __( 'string-list-block ' ), // Block title.
	icon: 'shield', // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/.
	category: 'common', // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.
	keywords: [
		__( 'string-list-block' ),
		__( 'CGB Example' ),
		__( 'create-guten-block' ),
	],

	attributes,

	/**
	 * The edit function describes the structure of your block in the context of the editor.
	 * This represents what the editor will render when the block is used.
	 *
	 * The "edit" property must be a valid function.
	 *
	 * @link https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/
	 */
	edit: function( props ) {

		
		const { setAttributes } = props;

		const {links, newLink} = props.attributes;


		// Creates a <p class='wp-block-cgb-block-string-list-block'></p>.
		return (
			<div className={ props.className }>
				<h2>Link list</h2>
				{
					links.length > 0 && (
						<ul>
							{
								links.map( (link, index) => {
									return (
										<li key={index}>
											<a href={link} >{link}</a> <button onClick={() => { const spliceReturn = links.splice( index, 1 ); setAttributes( { links: links.slice() } ); }} >Delete</button>
										</li>
									)
								})
							}
							<TextControl
								onChange={(newLink) => setAttributes({newLink})}
								value={newLink}
								onKeyUp={(event) => { if( 'Enter' === event.key ) { links.push(newLink); setAttributes({ links:links.slice(), newLink: '' } ) } }}
								/>
						</ul>
					)

				}
			</div>
		);
	},

	/**
	 * The save function defines the way in which the different attributes should be combined
	 * into the final markup, which is then serialized by Gutenberg into post_content.
	 *
	 * The "save" property must be specified and must be a valid function.
	 *
	 * @link https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/
	 */
	save: function( props ) {
		const {links} = props.attributes;

		return (
			<div>
				<h2>Link list</h2>
				{
					links.length > 0 && (
						<ul>
							{
								links.map( (link, index) => {
									return (
										<li key={index}>
											<a href={link} >{link}</a>
										</li>
									)
								})
							}
						</ul>
					)

				}
			</div>
		);
	},
} );