JSXでGutenbergブロック開発

Gutenbergブロックの editedit 関数や savesave 関数は返り値として React要素を返すため、その部分をJSXで記述することが可能です。JSXを導入することにより記述が容易になり、可読性の向上も見込めます。

// JSXなし
return wp.element.createElement(
  "h1",
  { className: "heading" },
  "Hello, World"
);
  • // JSXなし
  • return wp.element.createElement(
  • "h1",
  • { className: "heading" },
  • "Hello, World"
  • );
// JSXなし
return wp.element.createElement(
  "h1",
  { className: "heading" },
  "Hello, World"
);
// JSXあり
return (
  <h1 className="heading">
    Hello, World
  </h1>
);
  • // JSXあり
  • return (
  • <h1 className="heading">
  • Hello, World
  • </h1>
  • );
// JSXあり
return (
  <h1 className="heading">
    Hello, World
  </h1>
);

続きを読む

Gutenberg用備考ブロックを作る

前回に引き続き Gutenberg のブロックサンプルを作っていきたいと思います。今回は編集可能な備考ブロックを作ります。前回作ったただ文字を表示するブロックに比べれば多少使い道はあるでしょう。

前回は WP-CLI を使ってひな形を作りましたが、今回はスクラッチで作っていきます。ソースコードをGitLabにまとめてあるのでよかったらご覧ください。

続きを読む