Web Design Leaves

wp-content
└── plugins
    └── my-first-block //新規に作成するプラグインのディレクトリ
        ├── my-first-block.php  //プラグインファイル
        └── block.js  //ブロック用のスクリプト

<?php
/*
Plugin Name: My First Block
*/

<?php
/*
Plugin Name: My First Block
*/

defined( 'ABSPATH' ) || exit;
//または if ( ! defined( 'ABSPATH' ) ) exit; 

console.log('Hello from my first block!');

<?php
/*
Plugin Name: My First Block
*/

defined( 'ABSPATH' ) || exit; //外部からのアクセスを防止

//ブロック用のスクリプトの読み込み
function my_first_block_enqueue() {
  //ブロック用のスクリプトを登録し、出力用のキューに入れる
  wp_enqueue_script(
    'my-first-block-script', //スクリプトを識別するためのハンドル名
    plugins_url( 'block.js', __FILE__ )  //スクリプトの URL
  );
}
add_action( 'enqueue_block_editor_assets', 'my_first_block_enqueue' );

function my_first_block_enqueue() {
  wp_enqueue_script(
    'my-first-block-script',
    plugins_url( 'block.js', __FILE__ ),
    array( 'wp-blocks', 'wp-element' ) //依存するスクリプト（追加）
  );
}
add_action( 'enqueue_block_editor_assets', 'my_first_block_enqueue' );

<?php
/*
Plugin Name: My First Block
*/

defined( 'ABSPATH' ) || exit;

//ブロック用スクリプトの読み込み
function my_first_block_enqueue() {
  //ブロック用のスクリプトを登録し出力用のキューに入れる
  wp_enqueue_script(
    'my-first-block-script', //スクリプトのハンドル名
    plugins_url( 'block.js', __FILE__ ), //スクリプトの URL
    array( 'wp-blocks', 'wp-element' )  //依存スクリプト
  );
}
//エディターでのみブロックのアセットをエンキューするためのフック
add_action( 'enqueue_block_editor_assets', 'my_first_block_enqueue' );    

<?php
/*
Plugin Name: My First Block
*/

defined( 'ABSPATH' ) || exit;

//ブロック用スクリプトの読み込み
function my_first_block_enqueue() {
  //ブロック用のスクリプトを登録し出力用のキューに入れる
  wp_enqueue_script(
    'my-first-block-script', //スクリプトのハンドル名
    plugins_url( 'block.js', __FILE__ ), //スクリプトの URL
    array( 'wp-blocks', 'wp-element' )  //依存スクリプト
  );
}
//エディターでのみブロックのアセットをエンキューするためのフック
add_action( 'enqueue_block_editor_assets', 'my_first_block_enqueue' );

<?php
/*
Plugin Name: My First Block
*/

defined( 'ABSPATH' ) || exit;

//ブロック用スクリプトの読み込み
function my_first_block_enqueue() {
  wp_register_script(
    'my-first-block-script',
    plugins_url( 'block.js', __FILE__ ),
    array( 'wp-blocks', 'wp-element' )
  );

  //ブロックタイプを登録
  register_block_type(
    //namespace/block name（名前空間/ブロック名）
    //ブロック用スクリプト registerBlockType の第1パラメータ Block Name と同じ
    'my-blocks/my-first-block',
    array(
      //エディタ用スクリプトとしてブロックのスクリプトを関連付け（ハンドル名を指定）
      'editor_script' => 'my-first-block-script',
    )
  );
}
add_action( 'init', 'my_first_block_enqueue' );

( function( blocks, element ) {
  var el = element.createElement;

  //インラインスタイル
  var blockStyle = {
    backgroundColor: '#900',
    color: '#fff',
    padding: '20px',
  };

  //registerBlockType でブロックを登録
  blocks.registerBlockType(
    //ブロックの名前 （名前空間/ブロック名）
    'my-blocks/my-first-block',
    //ブロックのプロパティ（動作を定義するオブジェクト）
    {
      title: 'My First Block Sample',
      icon: 'universal-access-alt',
      category: 'layout',
      //エディター内でのブロックの構造を記述する関数
      edit: function() {
        return el(
          'p',
          { style: blockStyle },
          'Hello World, sample 01 (edit/エディタ用).'
        );
      },
      //ブロックがフロントエンドでどのように表示されるかを記述する関数
      save: function() {
        return el(
          'p',
          { style: blockStyle },
          'Hello World, sample 01 (save/フロントエンド用).'
        );
      },
    }
  );
}(
  window.wp.blocks,
  window.wp.element
) );

└── wp-content
    └── themes
        └── my-theme //使用するテーマのディレクトリ
            ├── category.php
            ├── front-page.php
            ├── functions.php
            ├── index.php
            │    ...
            └── my-first-block //ブロック用のディレクトリ
                └── block.js  //ブロック用スクリプト

function my_first_block_enqueue() {
  wp_enqueue_script(
    'my-first-block-script',
    //ブロック用スクリプトの URL は get_theme_file_uri() などを使用
    get_theme_file_uri('/my-first-block/block.js'),
    array( 'wp-blocks', 'wp-element' ),
    filemtime(get_theme_file_path('/my-first-block/block.js'))
  );
}
add_action( 'enqueue_block_editor_assets', 'my_first_block_enqueue' );

└── wp-content
    └── themes
        └── my-theme //使用するテーマのディレクトリ
            ├── category.php
            ├── front-page.php
            ├── functions.php
            ├── index.php
            │    ...
            └── my-first-block //ブロック用のディレクトリ
                ├── register_block.php  //★ブロック用スクリプトを読み込むファイル
                └── block.js  //ブロック用スクリプト

require get_template_directory() . '/my-first-block/register_block.php';    

function my_first_block_enqueue() {
  wp_enqueue_script(
    'my-first-block-script',
    get_theme_file_uri('/my-first-block/block.js'),
    array( 'wp-blocks', 'wp-element' ),
    filemtime(get_theme_file_path('/my-first-block/block.js'))
  );
}
add_action( 'enqueue_block_editor_assets', 'my_first_block_enqueue' );

function my_first_block_enqueue() {
  wp_register_script(
    'my-first-block-script',
    get_theme_file_uri('/my-first-block/block.js'),
    array( 'wp-blocks', 'wp-element' ),
    filemtime(get_theme_file_path('/my-first-block/block.js'))
  );

  register_block_type(
    'my-blocks/my-first-block',
    array(
      'editor_script' => 'my-first-block-script',
    )
  );
}
add_action( 'init', 'my_first_block_enqueue' );

edit: function( props ) {
  //return の前で props を出力
  console.log(props);
  return el(
    'p',
    { className: props.className },
    'Hello World, sample 02 (エディタ用 in green).'
  );
},

//コンソールへの出力結果の例
{name: "my-blocks/my-first-block2", isSelected: false, attributes: {…}, setAttributes: ƒ, insertBlocksAfter: ƒ, …}

.wp-block-my-blocks-my-first-block2 {
  color: green;
  background: #cfc;
  border: 2px solid #9c9;
  padding: 20px;
}

.wp-block-my-blocks-my-first-block2 {
  color: darkred;
  background: #fcc;
  border: 2px solid #c99;
  padding: 20px;
}

<?php
/*
Plugin Name: My First Block 2
*/
defined( 'ABSPATH' ) || exit;

function my_first_block2_enqueue() {
  //ブロック用のスクリプトをエンキュー
  wp_enqueue_script(
    'my-first-block2-script',
    plugins_url( 'block2.js', __FILE__ ),
    array( 'wp-blocks', 'wp-element' )
  );

  //ブロックのエディター用のスタイルシートをエンキュー
  wp_enqueue_style(
    'my-first-block2-editor',
    plugins_url( 'editor-02.css', __FILE__ ),
    //エディター用 CSS を含めるための依存関係として wp-edit-blocks を指定
    array( 'wp-edit-blocks' ),
    filemtime( plugin_dir_path( __FILE__ ) . 'editor-02.css' )
  );
}
//ブロックのアセットをエディターでのみエンキューするためのフック
add_action( 'enqueue_block_editor_assets', 'my_first_block2_enqueue' );

function my_first_block_enqueue2_2() {
  //フロントのみに適用するので、!is_admin() の場合のみ読み込む（エンキュー）
  if(! is_admin()) {
    //ブロックのフロント用のスタイルシートをエンキュー
    wp_enqueue_style(
      'my-first-block2-front',
      plugins_url( 'style-02.css', __FILE__ ),
      array(),
      filemtime( plugin_dir_path( __FILE__ ) . 'style-02.css' )
    );
  }
}
//エディターとフロントエンドの両方でブロックのアセットをエンキューするフック
add_action( 'enqueue_block_assets', 'my_first_block_enqueue2_2');

<?php
/*
Plugin Name: My First Block 2
*/
defined( 'ABSPATH' ) || exit;

function my_first_block2_enqueue() {
  //ブロック用のスクリプトを登録
  wp_register_script(
    'my-first-block2-script',
    plugins_url( 'block2.js', __FILE__ ),
    array( 'wp-blocks', 'wp-element' )
  );

  //ブロックのエディター用のスタイルシートの登録
  wp_register_style(
    'my-first-block2-editor',
    plugins_url( 'editor-02.css', __FILE__ ),
    //エディター用 CSS を含めるための依存関係として wp-edit-blocks を指定
    array( 'wp-edit-blocks' ),
    filemtime( plugin_dir_path( __FILE__ ) . 'editor-02.css' )
  );

  //ブロックのフロント用のスタイルシートの登録
  wp_register_style(
    'my-first-block2-front',
    plugins_url( 'style-02.css', __FILE__ ),
    array(),
    filemtime( plugin_dir_path( __FILE__ ) . 'style-02.css' )
  );

  register_block_type(
    'my-blocks/my-first-block2',
    array(
      //エディター用スクリプトとしてブロックのスクリプト（block2.js）を関連付け
      'editor_script' => 'my-first-block2-script',
      //エディター用スタイルとしてスタイルシート（editor-02.css）を関連付け
      'editor_style' => 'my-first-block2-editor',
      //フロント用スタイルとしてスタイルシート（style-02.cs）を関連付け
      'style' => 'my-first-block2-front',
    )
  );
}
add_action( 'init', 'my_first_block2_enqueue' );

blocks.registerBlockType( 'my-blocks/sample-0x', {
    title: 'My First Block',
    icon: 'smiley',
    category: 'layout',
    //exampleText という属性を定義
    attributes: {
      exampleText: {
        type: 'string',
        default: '初期値の文字列'
      }
    },
    // 引数に props を受け取る
    edit: function( props ) {
      return el(
        'p',
        { className: props.className },
        // props 経由で属性を取得
        props.attributes.exampleText // '初期値の文字列'と出力される
      );
    },
    ・・・
  }
);

edit: function( props ) {
  //分割代入
  const { attributes } = props;
  return el(
    'p',
    { className: props.className },
    attributes.exampleText
  );
},

attributes: {
  exampleText: {
    type: 'string',
    default: '初期値の文字列'
  }
},

edit: function( props ) {
  //exampleText の値を更新
  props.setAttributes({ exampleText: 'Updated!' });
  return el(
    'p',
    { className: props.className },
    props.attributes.exampleText
  );
},

edit: function( props ) {
  //props から分割代入
  const { attributes, setAttributes } = props;
  setAttributes({ exampleText: 'Updated!' });
  return el(
    'p',
    { className: props.className },
    attributes.exampleText
  );
},

<?php
/*
Plugin Name: My First Block TextControl
*/
defined( 'ABSPATH' ) || exit;

function my_first_block_tc_enqueue() {
  //ブロック用のスクリプトを登録
  wp_register_script(
    'my-first-block-tc-script',
    plugins_url( 'block_tc.js', __FILE__ ),
    //依存スクリプト（TextControl には wp-components が必要）
    array( 'wp-blocks', 'wp-element', 'wp-components')
  );

  register_block_type(
    'my-blocks/my-first-block-textcontrol',
    array(
      //エディター用スクリプトにブロックのスクリプトを関連付け
      'editor_script' => 'my-first-block-tc-script',
    )
  );
}
add_action( 'init', 'my_first_block_tc_enqueue' );   

( function( blocks, element, components ) {
  var el = element.createElement;
  //TextControl コンポーネントは wp.components パッケージにあります
  var TextControl = components.TextControl;

  blocks.registerBlockType(
    'my-blocks/my-first-block-textcontrol',
    {
      title: 'My First Block TextControl',
      icon: 'smiley',
      category: 'layout',
      example: {},
      //exampleText 属性を定義（入力された値を保存）
      attributes: {
        exampleText: {
          type: 'string',
          default: ''
        }
      },
      edit: function( props ) {
        //onChange ハンドラ（コールバック関数）の定義
        function onChangeContent( newText ) {
          //exampleText の値を更新
          props.setAttributes( { exampleText: newText } );
        }
        return el(
          TextControl,
          {
            //onChange ハンドラ（コールバック関数）の指定
            onChange: onChangeContent,
            //exampleText 属性の値を value プロパティに設定
            value: props.attributes.exampleText
          }
        );
      },
      save: function() {
        // div 要素で Hello と表示（後で修正）
        return el(
          'div',
          {},
          'Hello!'
        );
      },
    }
  );
}(
  window.wp.blocks,
  window.wp.element,
  //テキスト入力のコンポーネント（TextControl）を使うので wp.components を追加
  window.wp.components
) );

<!-- wp:my-blocks/my-first-block-textcontrol {"exampleText":"sample text"} -->
<div class="wp-block-my-blocks-my-first-block-textcontrol">Hello!</div>
<!-- /wp:my-blocks/my-first-block-textcontrol --> 

save: function( props ) {
  return el(
    'div',
    {},
    //子要素（テキスト）に入力されて値を設定
    props.attributes.exampleText
  );
},

<?php
/*
Plugin Name: My First Block RichText
*/
defined( 'ABSPATH' ) || exit;

function my_first_block_rt_enqueue() {
  //ブロック用のスクリプトを登録
  wp_register_script(
    'my-first-block-rt-script',
    plugins_url( 'block_rt.js', __FILE__ ),
    //依存に wp-editor を追加（v5.3 からは wp-block-editor の方が良さそう？）
    array( 'wp-blocks', 'wp-element', 'wp-editor')
  );

  register_block_type(
    'my-blocks/my-first-block-richtext',
    array(
      //エディター用スクリプトにブロックのスクリプトを関連付け
      'editor_script' => 'my-first-block-rt-script',
    )
  );
}
add_action( 'init', 'my_first_block_rt_enqueue' );

( function( blocks, element, blockEditor ) {
  var el = element.createElement;
  //RickTest コンポーネントは wp.blockEditor パッケージにあります
  var RichText = blockEditor.RichText ;

  blocks.registerBlockType(
    'my-blocks/my-first-block-richtext',
    {
      title: 'My First Block RichText',
      icon: 'smiley',
      category: 'layout',
      example: {},
      attributes: {
        //入力された値を保存する属性を設定
        myRichText: {
          type: 'string',
          default: ''
        }
      },

      edit: function( props ) {
        //onChange ハンドラ
        function onChangeContent( newText ) {
          //myRichText の値を更新
          props.setAttributes( { myRichText: newText } );
        }
        return el(
          RichText,
          {
            //イベントハンドラを設定
            onChange: onChangeContent,
            //value プロパティ（値）
            value: props.attributes.myRichText
          }
        );
      },
      save: function( props ) {
        return el(
          //RichText のコンテンツを正しく保存するには RichText.Content を使用
          RichText.Content,
          {
            //value プロパティに値を設定
            value: props.attributes.myRichText,
          }
        );
      },
    }
  );
}(
  window.wp.blocks,
  window.wp.element,
  //RichText コンポーネントを使うので wp.blockEditor パッケージを追加
  window.wp.blockEditor
) );

myRichText: {
  type: 'string',  //属性値のデータの型
  default: '',
  source: 'html',  //どのように属性値を取り出すか
  selector: 'div'  //対象の要素
}

( function( blocks, element, blockEditor ) {
  var el = element.createElement;
  //RickTest コンポーネントは wp.blockEditor パッケージにあります
  var RichText = blockEditor.RichText ;

  blocks.registerBlockType(
    'my-blocks/my-first-block-richtextt',
    {
      title: 'My First Block RichText',
      icon: 'smiley',
      category: 'layout',
      example: {},
      attributes: {
        //見出し用の属性
        myRichHeading: {
          //.myRichHeading クラスの h3 要素の HTML から string を抽出
          type: 'string',
          default: '',
          //内部の HTML
          source: 'html',
          //クラスを使ったセレクタを指定
          selector:'h3.myRichHeading'  //または '.myRichHeading'
        },
        //段落用の属性
        myRichText: {
          //.myRichText クラスの div 要素の子ノードから array を抽出
          type: 'array',
          default: '',
          //子ノード
          source: 'children',
          //クラスを使ったセレクタを指定
          selector:'div.myRichText' //または '.myRichText'
        }
      },

      edit: function( props ) {
        return el(
          'div',
          {}, //空のプロパティ
          [
            el(
              RichText,
              {
                tagName: 'h3',
                placeholder: 'タイトル（h3）を入力',
                //クラスを追加
                className: 'myRichHeading',
                value: props.attributes.myRichHeading,
                onChange: function( newHeading ) {
                  props.setAttributes( { myRichHeading: newHeading } );
                }
              }
            ),
            el(
              RichText,
              {
                tagName: 'div',
                placeholder: '文章（段落）を入力',
                //クラスを追加
                className: 'myRichText',
                value: props.attributes.myRichText,
                multiline: 'p',
                onChange: function( newText ) {
                  props.setAttributes( { myRichText: newText } );
                }
              }
            )
          ]
        );
      },

      save: function( props ) {
        return el(
          'div',
          {}, //空のプロパティ
          [
            el(
              RichText.Content,
              {
                tagName: 'h3',
                //クラスを追加
                className: 'myRichHeading',
                value: props.attributes.myRichHeading
              }
            ),
            el(
              RichText.Content,
              {
                tagName: 'div',
                //クラスを追加
                className: 'myRichText',
                value: props.attributes.myRichText
              }
            )
          ]
        );
      },
    }
  );
}(
  window.wp.blocks,
  window.wp.element,
  window.wp.blockEditor
) );

//ネストなし
element.createElement(
  'p',  //タグ名やコンポーネント型（名）
  { style: blockStyle },  //プロパティ
  'Hello World!'  //子要素（この場合はテキスト）
);

//div 要素の子要素に p 要素
element.createElement(
  'div',
  {},    //プロパティ（空の場合、null でも可）
  element.createElement(   //子要素
    'p',
    { style: blockStyle },
    'Hello World!'
  )
);

//div 要素の子要素に2つの p 要素（配列）
element.createElement(
  'div',
  {},
  [ //子要素（配列）
    element.createElement(
      'p',
      { style: blockStyle },
      'Hello World!'
    ),
    element.createElement(
      'p',
      { style: blockStyle },
      'Hello World!'
    )
  ]
);

<div class="wp-block-my-blocks-my-first-block-richtext">
  <h3 class="myRichHeading">Sample Title</h3>
  <div class="myRichText">
    <p>sample text1</p>
    <p>sample text2</p>
  </div>
</div>