Posted: 2018.09.28 / Category: WordPress / Tag: Gutenberg

Gutenbergでブロックにメディアアップローダで画像を挿入できるようにしてみます

Gutenbergブロックの開発環境の構築

開発環境はCreate Guten Blockで構築されたものを使用します。
よかったらこちらの記事もご覧ください。

Create Guten BlockでGutenbergのカスタムブロック開発環境を構築する

準備

src/block.jsにこれから作成するファイルをインポートします。
block-imageというディレクトリ名にしてこの中に作成します。

src/block.js

import './block-image/block.js'

新たに作成したブロックを追加してみてください。
編集できるようになっていますね。

ソースコード

src/block-image/block.js

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

const { registerBlockType } = wp.blocks;
const { MediaUpload } = wp.editor;
const { Button } = wp.components;

registerBlockType( 'myblock/block-image', {
	title: '画像ブロック',
	icon: 'index-card',
	category: 'common',
	attributes: {
		mediaID: {
			type: 'number'
		},
		mediaURL: {
			type: 'string',
			source: 'attribute',
			selector: 'img',
			attribute: 'src'
		}
	},
	edit ( props ) {
		const {
			className,
			attributes: {
				mediaID,
				mediaURL
			},
			setAttributes,
		} = props;

		const onSelectImage = ( media ) => {
			setAttributes( {
				mediaURL: media.url,
				mediaID: media.id,
			} );
		};

		return (
			<div className={ className }>
				<div className="image">
					<MediaUpload
						onSelect={ onSelectImage }
						type="image"
						value={ mediaID }
						render={ ( { open } ) => (
							<Button className={ mediaID ? 'image-button' : 'button button-large' } onClick={ open }>
								{ ! mediaID ? '画像アップロード': <img src={ mediaURL } /> }
							</Button>
						) }
					/>
				</div>
			</div>
		);
	},
	save ( props ) {
		const {
			attributes: { mediaURL }
		} = props;
		return (
			<div>
				{
					mediaURL && (
						<img className="upload-image" src={ mediaURL } alt="アップロードした画像" />
					)
				}
			</div>
		);
	},
} );

4〜6行目

画像をアップロードするために「MediaUpload」と「Button」を使います。

23〜56行目

編集画面では、画像が選択されている状態では画像が表示されて、それ以外ではボタンが表示され、クリックするとメディア選択ポップアップが立ち上がるという処理になっています。

57〜70行目

表示画面では「mediaURL 」がある場合は画像を表示するという処理をしています。

以上で完了です。これだけだとむしろ通常の画像ブロックよりしょぼいんですが、前回の記事のテキスト入力とスタイルを組み合わせることで、色々と表現できる範囲が増広がりそうです。

下記のコードを参考にさせて頂きました。

gutenberg-examples/05-recipe-card-esnext/block.js