飴屋

Gutenberg / 日記001

はじめに

Wordpressの記事編集画面では予めよく利用されるであろうブロックがプリセットされていますので、それらを駆使して記事を組み立てていくこともできなくはないのですが、段落タグを一つ書くのにブロックを一つ用意するのも煩わしいものです。「ブロック」という概念が導入されたことで、クリックが必要な回数が増えるのも面倒くさいですし、そもそも複雑なレイアウトを組んだり、既存のコードを記事に落とし込んだりすることが、標準のブロックだけでは大変です。(クラシックモードのブロックやカスタムHTMLブロックもありますが、そんなに親切ではないと感じています。)

それを受けて、自分で思い通りのブロックを新規に作成できるのであれば、それに越したことはないなと思って、作成方法を調べてみたところ、node.jsを使ってWordpressのプラグインという形式で新しいブロックを準備する方法が見つかりました。とりあえず、やってみることにします。

開発環境の準備

node.jsは既に準備されているものとして、プラグインの雛形を準備してみます。ターミナルでpluginsフォルダの開いて次のコマンドを入力します。

$ npx create-guten-block amy-block

amy-blockはプラグインのフォルダ名です。コマンドが完了すると、もうそれだけでプラグインの雛形ができあがりとのことです。どうやら一つのブロックを作るのに一つのプラグインを用意する必要はなく、今回作成したプラグインで複数のブロックを生成することもできるようです。

$ cd amy-block
$ npm start

作成したプラグインのフォルダの中に移動して、作業開始のコマンドを叩くと、今後編集したコードが自動的にプラグインの形になってリアルタイムに更新されるようになるそうです。

日記一覧

Last-Modified