Gutenberg のブロックエディターと旧エディターとの大きな違いの 1 つは、投稿や固定ページに「ブロック」を追加してページを作成していくスタイルになる、ということかなぁと思います。

「ブロックの使い分け」を意識しよう

例えば、ブロックエディターを使って文字や画像などを追加する場合は、それぞれ「段落」や「画像」ブロックを使う必要があります。

しかし、「段落」ブロック内に画像を入れることはできません（インライン画像として入れることはできます）し、「画像」ブロック内には決められたエリアにのみキャプションとして文字を追加することしかできません（本記事公開時点での情報です）。

つまり、ブロックエディターは、旧エディターではあまり意識する必要がなかった「ブロックの使い分け」が必要になってきます。

JavaScript のコードを入れたいんだけど？

僕が Gutenberg のブロックエディターを使い始めたばかり頃に、こんなことを思いました。

・・・特定の投稿や固定ページ内に JavaScript のコードを入れたい場面って結構あります。例えば、文章の区切りのいいところでツイートボタンを入れたり、広告を入れたり、ブログパーツなどを入れたり。

というわけで、JavaScript のコードを追加する場合は「カスタム HTML 」ブロックを使えば OK です。解説動画を作りましたのでご参考ください（動画作成に慣れていないので、今回もまた声が裏返っています）。

動画内では YouTube チャンネル登録ボタンを入れる方法を例に挙げて解説しています。「カスタム HTML」ブロックはプレビュー機能もついているので、正しく動いているかどうかも確認することができます。

ブロック単位で管理しやすくなるメリットもある

これまで旧エディターで JavaScript のコードを追加するには、テキストエディターに切り替えてコードを直接書いていた方もいると思いますが、ブロックエディターでは「JavaScript のコードが入ったブロック単位で管理ができる」ので、操作に慣れさえすれば視認性も良くなるのではないかと思います。パッと見で「ああ、これは JavaScript のコードが追加されている箇所だな」とわかることは大事なことだと思います。

Gutenberg のブロックエディターを使い始めたばかりの方は「ブロックが多くて何を使っていいかわからない」なんてこともあると思います。

「Gutenberg のブロックエディターに JavaScript のコードが追加できない！どうやればいいんだ・・・」という方にとってご参考となりましたら幸いです。