フキダシ用GutenbergBlock

block.js

/**
 * BLOCK: fukidashi-block
 *
 * フキダシ表示ができるブロック
 */

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

const { registerBlockType } = wp.blocks; // Import registerBlockType() from wp.blocks
import { RichText, InnerBlocks } from '@wordpress/block-editor';

const ALLOWED_BLOCKS = [ 'core/image' ];
const TEMPLATE = [
  [ 'core/image' ],
];
registerBlockType( 'cgb/block-fukidashi-block', {
  title: 'フキダシ',
  icon: 'format-chat', // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/.
  category: 'common',
  keywords: [ 'fukidashi', 'comment' ],
  attributes: {
    comment: {
      type: 'string',
      source: 'html',
      selector: '.comment',
    },
  },
  // @link https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/
  edit: ( { attributes, setAttributes, className } ) => {
    const updateComment = ( val ) => {
      setAttributes( { comment: val } );
    };
    return <div className={ className }>
      <div className="image">
        <InnerBlocks allowedBlocks={ ALLOWED_BLOCKS } template={ TEMPLATE } templateLock="all" />
      </div>
      <div className="comment">
        <RichText
          label="発言"
          onChange={ updateComment }
          value={ attributes.comment }
        />
      </div>
    </div>;
  },
  // @link https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/
  save: ( { attributes, className } ) => {
    return (
      <div className={ className }>
        <div className="image"><InnerBlocks.Content /></div>
        <div className="comment">
          <RichText.Content value={ attributes.comment } />
        </div>
      </div>
    );
  },
} );