Block attributes

attributes: {
	url: {
		type: 'string',
		source: 'attribute',
		selector: 'img',
		attribute: 'src'
	},
	title: {
		type: 'string'
	},
	size: {
		enum: [ 'large', 'small' ]
	}
}

{
	count: {
		type: 'number'
	},
	enabled: {
		type: 'boolean'
	},
	metadata: {
		type: 'object'
	}
}

size: {
	enum: [ 'large', 'small', 'tiny' ]
}

title: {
	type: 'string'
}

<!-- wp:my-block {"title":"hello world"} -->

url: {
	type: 'string',
	source: 'attribute',
	selector: 'img',
	attribute: 'src'
}

<div>
	<img src="https://example.com/image.jpg" />
</div>

{ "url": "https://example.com/image.jpg" }

disabled: {
	type: 'boolean',
	source: 'attribute',
	selector: 'button',
	attribute: 'disabled'
}

content: {
	type: 'string',
	source: 'text',
	selector: 'figcaption'
}

<figure>
	<figcaption>The caption text</figcaption>
</figure>

{ "content": "The caption text" }

content: {
	type: 'string',
	source: 'html',
	selector: 'figcaption'
}

<figcaption>Text with <strong>formatting</strong></figcaption>

{ "content": "Text with <strong>formatting</strong>" }

images: {
	type: 'array',
	source: 'query',
	selector: 'img',
	query: {
		url: {
			type: 'string',
			source: 'attribute',
			attribute: 'src'
		},
		alt: {
			type: 'string',
			source: 'attribute',
			attribute: 'alt'
		}
	}
}

<div>
	<img src="large.jpg" alt="large image" />
	<img src="small.jpg" alt="small image" />
</div>

{
	"images": [
		{ "url": "large.jpg", "alt": "large image" },
		{ "url": "small.jpg", "alt": "small image" }
	]
}

author: {
	type: 'string',
	source: 'meta',
	meta: 'author'
}

register_post_meta( 'post', 'author', array(
	'show_in_rest' => true,
	'single' => true,
	'type' => 'string'
) );

// Tag selector
selector: 'img'

// Class selector
selector: '.book-author'

// ID selector
selector: '#main-title'

// Descendant selector
selector: '.card > h3'

// String default
{
	type: 'string',
	default: 'hello world'
}

// Array default
{
	type: 'array',
	default: [
		{ "url": "image1.jpg", "alt": "image" }
	]
}

// Object default
{
	type: 'object',
	default: {
		width: 100,
		title: 'title'
	}
}

content: {
	type: 'string',
	source: 'html',
	selector: 'p',
	role: 'content'
}

blob: {
	type: 'string',
	role: 'local'
}

edit: function( { attributes } ) {
	return (
		<p>
			URL: { attributes.url }<br />
			Title: { attributes.title }<br />
			Size: { attributes.size }
		</p>
	);
}

save: function( { attributes } ) {
	return (
		<div>
			<img src={ attributes.url } />
			<span>{ attributes.title }</span>
		</div>
	);
}

import { registerBlockType } from '@wordpress/blocks';
import { useBlockProps } from '@wordpress/block-editor';

registerBlockType( 'my-plugin/book', {
	attributes: {
		title: {
			type: 'string',
			source: 'html',
			selector: 'h3',
			role: 'content'
		},
		cover: {
			type: 'string',
			source: 'attribute',
			selector: 'img',
			attribute: 'src'
		},
		pages: {
			type: 'number',
			default: 0
		},
		size: {
			enum: [ 'small', 'medium', 'large' ],
			default: 'medium'
		}
	},
	edit: ( { attributes, setAttributes } ) => {
		const blockProps = useBlockProps();
		return (
			<div { ...blockProps }>
				<input
					value={ attributes.title }
					onChange={ ( e ) => setAttributes( { title: e.target.value } ) }
				/>
			</div>
		);
	},
	save: ( { attributes } ) => {
		const blockProps = useBlockProps.save();
		return (
			<div { ...blockProps }>
				<img src={ attributes.cover } />
				<h3>{ attributes.title }</h3>
			</div>
		);
	}
} );