gutenberg-block-1st.jsx

// 入力と出力でマークアップを変えたりするサンプル
import classnames from 'classnames';

const { __, sprintf } = wp.i18n;
const { registerBlockType } = wp.blocks;
const { Fragment } = wp.element;
const {
	PanelBody,
	Button
} = wp.components;
const {
	MediaUpload,
	InspectorControls,
	RichText,
} = wp.editor;


const custom = {
	title: sprintf(
		/* translators: Block title modifier */
		__( '%1$s (%2$s)' ),
		__( '教室情報' ),
		__( 'Experimental' )
	),

	icon: 'columns',

	category: 'layout',

	attributes: {
		name: {
			type: 'array',
			source: 'children',
		},
		date: {
			type: 'array',
			source: 'children',
		},
		desc:  {
			type: 'array',
			source: 'children',
			selector: '.steps',
		},

		mediaID: {
			type: 'number',
		},
		mediaURL: {
			type: 'string',
			source: 'attribute',
			selector: 'img',
			attribute: 'src',
		}
	},

	description: __( '開催中の教室情報を入力できます。' ),

	supports: {
		align: [ 'wide', 'full' ],
	},

	edit( { attributes, setAttributes, className } ) {
		const classes = classnames( className, 'lead-row' );
		const onSelectImage = media => {
			setAttributes( {
				mediaURL: media.url,
				mediaID: media.id,
			} );
		};
		return (
			<Fragment>
				<InspectorControls>
					<PanelBody>
						@TODO: vartical-alginくらいは揃えたい。
					</PanelBody>
				</InspectorControls>
				<div className={ classes }>
					<table className="table">
						<thead>
							<tr><th>名前</th><th>値</th></tr>
						</thead>
						<tbody>
							<tr>
								<th>教室名</th>
								<td>
									<RichText
										tagName="p"
										placeholder={ __( '教室名をここに記入してください。' ) }
										value={ attributes.name }
										onChange={name => setAttributes({ name })}
									/>
								</td>
							</tr>
							<tr>
								<th>開催日時</th>
								<td>
									<RichText
										tagName="p"
										placeholder={ __( '例：毎週火曜日' ) }
										value={ attributes.date }
										onChange={date => setAttributes({ date })}
									/>
								</td>
							</tr>
							<tr>
								<th>教室紹介文</th>
								<td>
									<RichText
										tagName="div"
										multiline="p"
										placeholder={ __( '例：毎週火曜日' ) }
										value={ attributes.desc }
										onChange={desc => setAttributes({ desc })}
									/>
								</td>
							</tr>
							<tr>
								<th>紹介画像</th>
								<td>
									<MediaUpload
										onSelect={ onSelectImage }
										type="image"
										value={ attributes.mediaID }
										render={ ( { open } ) => (
											<Button className={ attributes.mediaID ? 'image-button' : 'button button-large' } onClick={ open }>
												{ ! attributes.mediaID ? __( 'Upload Image' ) : <img src={ attributes.mediaURL } /> }
											</Button>
										) }
									/>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
			</Fragment>
		);
	},

	save( { attributes, className } ) {
		const classes = classnames( className, 'lead-row' );
		const { name, date, desc, mediaURL } = attributes
		return (
			<dl className={ classes }>
			<dt>教室名</dt>
			<dd>{ name }</dd>
				<dt>開催日時</dt>
				<dd>{ date }</dd>
				<dt>教室紹介文</dt>
				<dd>
					{
						mediaURL && (
							<img className="recipe-image" src={ mediaURL } />
						)
					}
					{ desc }
				</dd>
			</dl>
		);
	},
}

registerBlockType( 'guten-blocks/first-block', custom );

gutenberg-block-2nd.jsx

// コントロールパネルを使って、出力マークアップをかえるサンプル
import classnames from 'classnames';

const { __, sprintf } = wp.i18n;
const { registerBlockType } = wp.blocks;
const { Fragment } = wp.element;
const {
	PanelBody,
	Button,
	SelectControl
} = wp.components;
const {
	MediaUpload,
	InspectorControls,
	RichText,
} = wp.editor;


const custom = {
	title: sprintf(
		/* translators: Block title modifier */
		__( '%1$s (%2$s)' ),
		__( 'LP的なあれブロック' ),
		__( 'Experimental' )
	),

	icon: 'columns',

	category: 'layout',

	attributes: {
		name: {
			type: 'array',
			source: 'children',
		},
		date: {
			type: 'array',
			source: 'children',
		},
		desc:  {
			type: 'array',
			source: 'children',
			selector: '.steps',
		},

		mediaID: {
			type: 'number',
		},
		mediaURL: {
			type: 'string',
			source: 'attribute',
			selector: 'img',
			attribute: 'src',
		},
		type: {
			type: 'string'
		}
	},

	description: __( 'Add a block that displays content in multiple columns, then add whatever content blocks you\'d like.' ),

	supports: {
		align: [ 'wide', 'full' ],
	},

	edit( { attributes, setAttributes, className } ) {
		const classes = classnames( className, 'lead-row' );
		const onSelectImage = media => {
			setAttributes( {
				mediaURL: media.url,
				mediaID: media.id,
			} );
		};
		const updateSelection = type => setAttributes( { type } )
		return (
			<Fragment>
				<InspectorControls>
					<PanelBody title="追加設定">
						<SelectControl
							label="マークアップ"
							value={attributes.type || 'dl'}
							options={[
								{
									value: 'table',
									label: 'Tableタグ'
								},{
									value: 'dl',
									label: 'dlタグ'
								}
							]}
							onChange={updateSelection}
						/>
					</PanelBody>
				</InspectorControls>
				<div className={ classes }>
					<table className="table">
						<thead>
							<tr><th>名前</th><th>値</th></tr>
						</thead>
						<tbody>
							<tr>
								<th>教室名</th>
								<td>
									<RichText
										tagName="p"
										placeholder={ __( '教室名をここに記入してください。' ) }
										value={ attributes.name }
										onChange={name => setAttributes({ name })}
									/>
								</td>
							</tr>
							<tr>
								<th>開催日時</th>
								<td>
									<RichText
										tagName="p"
										placeholder={ __( '例：毎週火曜日' ) }
										value={ attributes.date }
										onChange={date => setAttributes({ date })}
									/>
								</td>
							</tr>
							<tr>
								<th>教室紹介文</th>
								<td>
									<RichText
										tagName="div"
										multiline="p"
										placeholder={ __( '例：毎週火曜日' ) }
										value={ attributes.desc }
										onChange={desc => setAttributes({ desc })}
									/>
								</td>
							</tr>
							<tr>
								<th>紹介画像</th>
								<td>
									<MediaUpload
										onSelect={ onSelectImage }
										type="image"
										value={ attributes.mediaID }
										render={ ( { open } ) => (
											<Button className={ attributes.mediaID ? 'image-button' : 'button button-large' } onClick={ open }>
												{ ! attributes.mediaID ? __( 'Upload Image' ) : <img src={ attributes.mediaURL } /> }
											</Button>
										) }
									/>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
			</Fragment>
		);
	},

	save( { attributes, className } ) {
		const classes = classnames( className, 'lead-row' );
		const { name, date, desc, mediaURL, type } = attributes
		if (type === 'table') return <TableView {...attributes} />;
		return <DlView {...attributes} />;
	},
}

const TableView = ({classes, name, date, mediaURL, desc}) => (
	<table className={ classes }>
		<tr>
			<td>教室名</td>
			<td>{ name }</td>
		</tr>
		<tr>
			<td>開催日時</td>
			<td>{ date }</td>
		</tr>
		<tr>
			<td>教室紹介文</td>
			<td>
				{
					mediaURL && (
						<img className="recipe-image" src={ mediaURL } />
					)
				}
				{ desc }
			</td>
		</tr>
	</table>
)
const DlView = ({classes, name, date, mediaURL, desc}) => (
	<dl className={ classes }>
		<dt>教室名</dt>
		<dd>{ name }</dd>
		<dt>開催日時</dt>
		<dd>{ date }</dd>
		<dt>教室紹介文</dt>
		<dd>
			{
				mediaURL && (
					<img className="recipe-image" src={ mediaURL } />
				)
			}
			{ desc }
		</dd>
	</dl>
)

registerBlockType( 'guten-blocks/first-block', custom );

gutenberg-block-3rd.jsx

// step by step形式
import classnames from 'classnames';

const { __, sprintf } = wp.i18n;
const { registerBlockType } = wp.blocks;
const { Fragment } = wp.element;
const {
	PanelBody,
	Button,
	SelectControl
} = wp.components;
const {
	MediaUpload,
	InspectorControls,
	RichText,
} = wp.editor;

const FirstAction = (props) => {
	return (
		<Fragment>
			<h2>教室名</h2>
			<RichText
				tagName="p"
				placeholder={ __( '教室名をここに記入してください。' ) }
				value={ props.name }
				onChange={name => props.setAttributes({ name })}
			/>
		</Fragment>
	)
}

const NextAction = (props) => (
	<Fragment>
		<h2>日時</h2>
		{props.name ? (
			<RichText
				tagName="p"
				placeholder={ __( '日時をここに記入してください。' ) }
				value={ props.date }
				onChange={date => props.setAttributes({ date })}
			/>
		) : (
			<p style={{color: '#666'}}>教室名を入力してください</p>
		)}
	</Fragment>
)

const FinalAction = (props) => {
	const content = (() => {
		if (!props.name) return <p style={{color: '#666'}}>教室名を入力してください。</p>
		if (!props.date) return <p style={{color: '#666'}}>日時を入力してください。</p>
		return (
			<RichText
				tagName="div"
				multiline="p"
				placeholder={ __( '例：毎週火曜日' ) }
				value={ props.desc }
				onChange={desc => setAttributes({ desc })}
			/>
		)
	})()
	return (
		<Fragment>
			<h2>説明文</h2>
			{content}
		</Fragment>
	)
}


const custom = {
	title: sprintf(
		/* translators: Block title modifier */
		__( '%1$s (%2$s)' ),
		__( '教室情報' ),
		__( 'Experimental' )
	),

	icon: 'columns',

	category: 'layout',

	attributes: {
		name: {
			type: 'array',
			source: 'children',
		},
		date: {
			type: 'array',
			source: 'children',
		},
		desc:  {
			type: 'array',
			source: 'children',
			selector: '.steps',
		},

		mediaID: {
			type: 'number',
		},
		mediaURL: {
			type: 'string',
			source: 'attribute',
			selector: 'img',
			attribute: 'src',
		},
		type: {
			type: 'string'
		}
	},

	description: __( '紹介したい教室情報をここに入力してください。' ),

	supports: {
		align: [ 'wide', 'full' ],
	},

	edit( { attributes, setAttributes, className } ) {
		const classes = classnames( className, 'lead-row' );
		const onSelectImage = media => {
			setAttributes( {
				mediaURL: media.url,
				mediaID: media.id,
			} );
		};
		const updateSelection = type => setAttributes( { type } )
		return (
			<Fragment>
				<InspectorControls>
					<PanelBody title="追加設定">
						<SelectControl
							label="マークアップ"
							value={attributes.type || 'dl'}
							options={[
								{
									value: 'table',
									label: 'Tableタグ'
								},{
									value: 'dl',
									label: 'dlタグ'
								}
							]}
							onChange={updateSelection}
						/>
					</PanelBody>
				</InspectorControls>
				<div className={ classes }>
					<FirstAction
						name={attributes.name}
						setAttributes={setAttributes}
					/>
					<NextAction
						name={attributes.name}
						date={attributes.date}
						setAttributes={setAttributes}
					/>
					<FinalAction
						name={attributes.name}
						date={attributes.date}
						desc={attributes.desc}
						setAttributes={setAttributes}
					/>
					<h2>プレビュー</h2>
					{attributes.type === 'table' ? <TableView {...attributes} />: <DlView {...attributes} />}
				</div>
			</Fragment>
		);
	},

	save( { attributes, className } ) {
		const classes = classnames( className, 'lead-row' );
		const { name, date, desc, mediaURL, type } = attributes
		if (type === 'table') return <TableView {...attributes} />;
		return <DlView {...attributes} />;
	},
}

const TableView = ({classes, name, date, mediaURL, desc}) => (
	<table className={ classes }>
		<tr>
			<td>教室名</td>
			<td>{ name }</td>
		</tr>
		<tr>
			<td>開催日時</td>
			<td>{ date }</td>
		</tr>
		<tr>
			<td>教室紹介文</td>
			<td>{ desc }</td>
		</tr>
	</table>
)
const DlView = ({classes, name, date, mediaURL, desc}) => (
	<dl className={ classes }>
		<dt>教室名</dt>
		<dd>{ name }</dd>
		<dt>開催日時</dt>
		<dd>{ date }</dd>
		<dt>教室紹介文</dt>
		<dd>{ desc }</dd>
	</dl>
)

registerBlockType( 'guten-blocks/first-block', custom );