どうも、WordPress技術者の端くれのkeitaです。
最近WordPressのエディタがブロックエディタに変わりつつありますが、中々敬遠している人も多いはずで、今回はそういう方のためにブロックエディタの魅力について、利用者と開発者の目線両方で、見ていきたいと思います。
ブロックエディタとは？
従来の1枚の編集画面ではなく、その名の通りブロックで段落等を構成している、エディタの事です。noteの編集画面をイメージすると分かりやすいと思います。
Gutenbergとは？
WordPressではこのエディタのことをGutenbergと呼んでいます。WordPressのバージョン5.0から本格導入しています。ちなみにこのブログもGutenbergで書かれています。
ちなみに従来のエディタはクラシックエディタと呼ばれています。
Gutenbergを勉強するきっかけ
今までWordPressの案件ではクラシックエディタプラグインで対応してきました。
ヘッダー、フッター、固定ページにそのままHTMLを埋めるようなフローでやっていきましたが、ある勉強会で、それは将来生き残るのが難しいと厳しい言葉をいただいたので、
作業フローから見直そうと決意したわけです。
Gutenbergを利用者として使うとき必要な知識
正直、ありません。これが一番のメリットではないのでしょうか。しかもnoteを使っている方なら、すんなり入れるのではないでしょうか。
Wordの原稿をコピペして、段落調整をして、見出しや画像のブロックを入れる作業をするだけで、一発できれいなブログ（テーマが対応しているのが前提）ができます。
Gutenbergを開発者として使うとき必要な知識
これが一番のネックではないでしょうか。
Gutenbergはブロックを開発するのが中心となってくるため、私も最初は「うげえ・・」と思っていました。なぜなら、
- HTML
- Scss
- Reactというjavascriptフレームワーク
- webpack
- ES6といった新しいjavascriptの書き方
これらをいっぺんに学習しなくてはいけないわけですから。
そこで考え付いたのが以前、記事にも書いた、ブラックホワイト勉強法。
まずはネットで、動くサンプルを持ってきます。
保存したら自動的にビルドするものがいいでしょう。
「Create Guten Block」がおすすめです。
関連記事
以前説明した「Local by Flywheel」で環境を作り、サンプルを動かしてみる。
サンプルを動かしたら、カスタマイズをする。それで動きを確かめます。
次に、自分で開発ができるようにwebpackでReactをビルドできる環境を作る。
この辺りは検索で出てくると思います。
とりあえず、環境ができたら、独自でカスタムブロックを開発し、
動きを確かめてみる。うまく動かなかったら、原因をつかんでいき調べて理解をしていく。
ちなみにその成果はこちらです。
まだしょぼいものですが・・
それさえ覚えれば、あとはfunctions.phpで動かすか、プラグイン化するやり方を覚えれば、実際の案件に適用できるかと思います。
まとめ
- Gutenbergは利用者にとっては便利なエディタ
- ブラックホワイト勉強をすれば、カスタムブロック開発もすんなりできる
- クラシックエディターはいつサポートが切れるかわからないので、Gutenbergの対応を準備しておく
お知らせ
前のサイトをクローズしてしまったので、改めてお知らせします。
WordPressの新規案件のクラシックエディターの対応は2020年3月を持ちまして停止いたします。ただ、その間であっても、今後のご提案はGutenbergになってくると思います。
私も日々精進努力していく所存ですので、今後ともよろしくお願いいたします。
コメント