記事を検索

(function (blocks, element) {
  var el = element.createElement; // React要素を作成するためのヘルパー関数

  blocks.registerBlockType(
    "my-blocks/sample-block", // 任意の名前空間 / ブロック名
    {
      title: "サンプルブロック", // タイトル（エディタ上で表示される）
      icon: "heart", // アイコン（https://developer.wordpress.org/resource/dashicons/#heart から選べる）
      description: "これはテスト用のブロックです", // 説明
      category: "common", // カテゴリ（ブロックを選択するときの分類）
      example: {}, // プレビューを表示する設定

      edit: () =>
        el(
          // h2タグで囲む
          "h2",

          // h2タグの属性
          {
						// ✅CSSを設定
            style: {
              backgroundColor: "#ff83003b",
              color: "black",
              lineHeight: "200px",
              textAlign: "center",
              fontSize: "20px",
              margin: "100px 0 100px 0",
              position: "relative",
            },
          },

          // h2タグの中身
          [
            "これはサンプルブロックです。（edit）",
          ]
        ),

      save: () =>
        el(
          // divタグで囲む
          "div",

          // divタグの属性
          {
						// ✅CSSを設定
            style: { margin: "100px 0 100px 0" },
          },

          // divタグの中身
          [
            "これはサンプルブロックです。（save）",
          ]
        ),
    }
  );
})(window.wp.blocks, window.wp.element);

import { registerBlockType } from '@wordpress/blocks';

// ✅CSSの内容を事前に定義
const editorStyle = {
  backgroundColor: "#ff83003b",
  color: "black",
  lineHeight: "200px",
  textAlign: "center",
  fontSize: "20px",
  margin: "100px 0 100px 0",
  position: "relative",
};
const frontStyle = { margin: "100px 0 100px 0" };

registerBlockType(
  "my-blocks/sample-block-jsx", // 任意の名前空間 / ブロック名
  {
      title: "サンプルブロック", // タイトル（エディタ上で表示される）
      icon: "heart", // アイコン（https://developer.wordpress.org/resource/dashicons/#heart から選べる）
      description: "これはテスト用のブロックです", // 説明
      category: "common", // カテゴリ（ブロックを選択するときの分類）
      example: {}, // プレビューを表示する設定

			// ✅style属性にCSSを設定
	    edit: () => <h2 style={ editorStyle }>これはサンプルブロックです。（edit）</h2>,
	    save: () => <div style={ frontStyle }>これはサンプルブロックです。（save）</div>
	  }
);

( function( blocks, element, blockEditor ) {
    var el = element.createElement;
    var RichText = blockEditor.RichText ;
    
    blocks.registerBlockType( 
      'my-blocks/my-first-block-richtext', 
      {
        title: 'リッチテキストのサンプルブロック',
        icon: 'smiley',
        category: 'layout',
        example: {},

        attributes: {
          // ✅入力された値を保存するプロパティ「myText」を設定
          myText: {
            type: 'string',
            default: ''
          }
        },
   
        edit: function( props ) {
          //プロパティ「myText」に値をセット
          function onChangeContent( newText ) {
            //myText の値を更新
            props.setAttributes( { myText: newText } );
          }

          return el(
            RichText,
            {
              //✅イベントハンドラを設定（入力値が変更されたとき、プロパティ「myText」にも値をセットする）
              onChange: onChangeContent,
              //投稿編集ページに再アクセスしたときに myText の値が表示されるようにする
              value: props.attributes.myText
            }
          );
        },
        save: function( props ) {
          return el( 
            //RichText のコンテンツを保存するために RichText.Content が必要
            RichText.Content, 
            {
              //子要素に myText の値を保存する
              value: props.attributes.myText,
            } 
          );
        },
      }
    );
  }(
    window.wp.blocks,
    window.wp.element,
    window.wp.blockEditor
  ) );