Block registration

function registerBlockType(
	blockNameOrMetadata: string | object,
	settings?: object
): WPBlockType | undefined

registerBlockType( 'my-plugin/book', {} );

// Good examples
registerBlockType( 'my-company-blocks/hero', {} );
registerBlockType( 'awesome-gallery-plugin/slideshow', {} );

// Avoid these
registerBlockType( 'create-block/example', {} ); // Too generic
registerBlockType( 'block/content', {} ); // Too generic

title: __( 'Book' )

description: __( 'Block showing a Book card.' )

category: 'widgets'

// Dashicon
icon: 'book-alt'

// SVG
icon: <svg viewBox="0 0 24 24"><path d="M19 13H5v-2h14v2z" /></svg>

// With colors
icon: {
	background: '#7e70af',
	foreground: '#fff',
	src: <svg>...</svg>
}

keywords: [ __( 'image' ), __( 'photo' ), __( 'pics' ) ]

styles: [
	{
		name: 'default',
		label: __( 'Rounded' ),
		isDefault: true
	},
	{
		name: 'outline',
		label: __( 'Outline' )
	}
]

attributes: {
	cover: {
		type: 'string',
		source: 'attribute',
		selector: 'img',
		attribute: 'src'
	},
	author: {
		type: 'string',
		source: 'html',
		selector: '.book-author'
	}
}

example: {
	attributes: {
		cover: 'https://example.com/image.jpg',
		author: 'William Shakespeare',
		pages: 500
	},
	innerBlocks: [
		{
			name: 'core/paragraph',
			attributes: {
				content: __( 'Lorem ipsum...' )
			}
		}
	],
	viewportWidth: 800
}

variations: [
	{
		name: 'example',
		title: __( 'Example' ),
		attributes: { level: 2 },
		scope: [ 'block' ],
		isActive: [ 'level' ]
	}
]

supports: {
	align: true,
	color: {
		background: true,
		text: true
	}
}

parent: [ 'core/columns' ]

ancestor: [ 'core/columns' ]

allowedBlocks: [ 'core/columns' ]

blockHooks: {
	'core/verse': 'before',
	'core/spacer': 'after',
	'core/column': 'firstChild',
	'core/group': 'lastChild'
}

import { registerBlockType } from '@wordpress/blocks';
import Edit from './edit';
import save from './save';
import metadata from './block.json';

registerBlockType( metadata, {
	edit: Edit,
	save
} );

import { registerBlockType } from '@wordpress/blocks';

registerBlockType( 'my-plugin/book', {
	title: __( 'Book' ),
	description: __( 'Block showing a Book card.' ),
	category: 'widgets',
	icon: 'book-alt',
	attributes: {
		title: {
			type: 'string',
			source: 'html',
			selector: 'h3'
		}
	},
	edit: ( { attributes, setAttributes } ) => {
		return (
			<div>
				<input
					value={ attributes.title }
					onChange={ ( e ) => setAttributes( { title: e.target.value } ) }
				/>
			</div>
		);
	},
	save: ( { attributes } ) => {
		return <h3>{ attributes.title }</h3>;
	}
} );

import { registerBlockCollection } from '@wordpress/blocks';

registerBlockCollection( 'my-plugin', {
	title: __( 'My Plugin' ),
	icon: <svg>...</svg>
} );

registerBlockType( 'my-plugin/block', {
	edit: function( { attributes, setAttributes } ) {
		// Edit implementation
	},
	save: function( { attributes } ) {
		// Save implementation
	},
	getEditWrapperProps: function( attributes ) {
		// Return additional props
	}
} );