JSXでGutenbergブロック開発

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

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

続きを読む