CSS、デザイン、プログラミング等などWebに関する事を更新しています。

custom-block/package.json例

{
    "name": "custom-block",
    "version": "1.0.0",
    "description": "Gutenberg custom block templates",
    "main": "build/index.js",
    "scripts": {
        "test": "wp-scripts test-unit-js",
        "start": "wp-scripts start",
        "build": "wp-scripts build"
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "@wordpress/components": "^8.3.1",
        "@wordpress/scripts": "5.0.1",
        "webpack": "^4.41.0"
    }
}

custom-block/src/index.js例

結合用ファイル

/**
* Load WPeact(Custom Block)
*/
import './user-block01.js'
import './user-block02.js'
import './user-block03.js'

custom-block/src/user-block01.js例

カスタムブロックを登録する。下記コードはエラーが出るかもしれないが参考例。

import { registerBlockType } from '@wordpress/blocks';
import { RichText, MediaUpload, MediaUploadCheck } from '@wordpress/block-editor';
import { Button } from '@wordpress/components';
import { Fragment } from '@wordpress/element';

registerBlockType( '独自名/カスタムブロック名', {
  title: '見出し',
  icon: 'flag', //https://developer.wordpress.org/resource/dashicons/#flag
  category: 'category',
  attributes: {
    pText: {
      type: 'array',
      source: 'children',
      selector: 'p.txt',
    },
    mediaId: {
      type: 'number'
    },
    mediaUrl: {
      type: 'string',
      source: 'attribute',
      selector: 'img',
      attribute: 'src'
    },
    mediaAlt: {
      type: 'string',
      source: 'attribute',
      selector: 'img',
      attribute: 'alt',
    },
  },
  edit: ( props ) => {
    return (
      // 画像アップロード
      <MediaUploadCheck>
        <MediaUpload
          onSelect={ ( data ) => {
            props.setAttributes( {
                mediaId: data.id,
                mediaUrl: data.url,
                mediaAlt: data.uploadedToTitle,
            } );
          } }
          type="image"
          value={ props.attributes.mediaId }
          render={ ( { open } ) => {
            return props.attributes.mediaId ?
              ( [
                <img src={ props.attributes.mediaUrl } alt={ props.attributes.mediaAlt } />
                <Button className='button button-large' onClick={ open }>写真の変更</Button>
              ] ):
              ( <Button className='button button-large' onClick={ open }>写真をアップロードする</Button> );
          } }
        />
      </MediaUploadCheck>
      // テキスト
      <RichText
        tagName="p"
        className="txt"
        onChange={ ( data ) => { props.setAttributes( { pText: data } ); } }
        value={ props.attributes.pText }
      />
    );
  },
  save: ( props ) => {
    return (
      // `()`内に二つ以上のコンポーネントを並列させる時は`Fragment`で囲うか、`[]`で囲う。
      <Fragment>
        <img src={ props.attributes.mediaUrl } srcset={ props.attributes.mediaSrcset } alt={ props.attributes.mediaAlt } />
        <RichText.Content
          tagName="p"
          className="txt"
          value={ props.attributes.pText }
        />
      </Fragment>
    );
  }
});

functions.php例

/**
  * Gutenberg custom blocks
  */
require get_template_directory() . '/custom-block/custom-block.php';

custom-block/custom-block.php例

/**
* Add custom block categories.
*/
add_filter( 'block_categories', function ( $categories, $post ) {
    return array_merge(
        $categories,
        array(
            array(
                'slug' => 'user-category'',   //ブロックカテゴリーのスラッグ
                'title' => '独自カテゴリー',  //ブロックカテゴリーの表示名
                'icon'  => 'calendar-alt',    //アイコンの指定（Dashicons名）
            ),
        )
    );
}, 10, 2 );

/**
* Enqueue editor scripts and styles
*/
add_action( 'enqueue_block_editor_assets', function () {
  $asset_file = include( __DIR__ . '/build/index.asset.php'); // Nodeが勝手に作ってくれる依存関係のファイル
  wp_enqueue_script(
        'user-custom-block',
        get_theme_file_uri( '/custom-block/build/index.js' ),
        $asset_file['dependencies'],
        $asset_file['version']
  );
});