Gutenberg 3.9 を使用します。
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