[Wordpress] Gutenbergのカスタムブロック作成で始めるReactプログラミング

TOP
Web Wordpress
[Wordpress] Gutenbergのカスタムブロック作成で始めるReactプログラミング

[Wordpress] Gutenbergのカスタムブロック作成で始めるReactプログラミング

カテゴリ:: Web; Wordpress

10/18, 2019 | トラックバック(0)

投稿者：yo

流れ（Windows 10 VScodeを想定）

Nodeをインストールする。
テーマフォルダなどへ移動して`custom-block`とか解り易い名前のフォルダを作る。
作った`custom-block`フォルダへ移動して`npm init`して`package.json`を作る。entry pointは`build/index.js`とかにしておく。
`Run npm install --save-dev --save-exact @wordpress/scripts`でWordpressのパッケージをインストールする。
package.jsonを開いてビルドコマンドを追記する。
``` "scripts": { "start": "wp-scripts start", "build": "wp-scripts build" }, ```
シェル・コマンドプロンプトを開いて開発時は`npm start`を、本番用ファイルは`npm build`でファイルが作成される。
`custom-block`フォルダ内に`src`フォルダを作成し、index.jsを作成する。
`custom-block/src/index.js`に独自ブロックjsをインポートさせるjsを書く。
`custom-block/src/user-block01.js`を作成して、独自ブロックのjsを書く。
テーマフォルダ内の`functions.php`へ、カスタムブロックをWordpressへ読み込むPHPを書く。`custom-block/custom-block.php`とかで別ファイルにして読み込ませても良い。公式ではプラグインとして登録させるようになっているがどっちでもよい。
コンポーネントのGithubやコンポーネントリファレンスを見て使いたいタグを使う。Reactのコンポーネントも使える。Wordpress Gutenberg よく使いそうなコンポーネントまとめも解り易いのでみる。

続きに、ファイルの例を記載する。

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']
  );
});

« [Wordpress] Windowsのローカル環境でPHPUnitが動かない時の対処法 | ホーム | [Wordpress] Shibbolethプラグインを入れて有効にすると.htaccessが書き換わる »