これからWordPressを導入する人はブロックエディタがおすすめな理由

WordPress

どうも、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の書き方

これらをいっぺんに学習しなくてはいけないわけですから。

そこで考え付いたのが以前、記事にも書いた、ブラックホワイト勉強法。

ブラックホワイト勉強法はこちらの記事に書いてあります。

Gutenbergの勉強法

まずはネットで、動くサンプルを持ってきます。

保存したら自動的にビルドするものがいいでしょう。

「Create Guten Block」がおすすめです。

関連記事

Create Guten BlockでGutenbergのカスタムブロック開発環境を構築する
WordPressの新エディター「Gutenberg」のカスタムブロック開発環境を高速で構築できる、「Create Guten Block」という開発ツールキットのご紹介を致します。

以前説明した「Local by Flywheel」で環境を作り、サンプルを動かしてみる。

サンプルを動かしたら、カスタマイズをする。それで動きを確かめます。

次に、自分で開発ができるようにwebpackでReactをビルドできる環境を作る。

この辺りは検索で出てくると思います。

とりあえず、環境ができたら、独自でカスタムブロックを開発し、

動きを確かめてみる。うまく動かなかったら、原因をつかんでいき調べて理解をしていく。

ちなみにその成果はこちらです。

まだしょぼいものですが・・

GitHub - KeitaOtaru1983/gutensample
Contribute to KeitaOtaru1983/gutensample development by creating an account on GitHub.

それさえ覚えれば、あとはfunctions.phpで動かすか、プラグイン化するやり方を覚えれば、実際の案件に適用できるかと思います。

まとめ

  • Gutenbergは利用者にとっては便利なエディタ
  • ブラックホワイト勉強をすれば、カスタムブロック開発もすんなりできる
  • クラシックエディターはいつサポートが切れるかわからないので、Gutenbergの対応を準備しておく

お知らせ

前のサイトをクローズしてしまったので、改めてお知らせします。

WordPressの新規案件のクラシックエディターの対応は2020年3月を持ちまして停止いたします。ただ、その間であっても、今後のご提案はGutenbergになってくると思います。

私も日々精進努力していく所存ですので、今後ともよろしくお願いいたします。

コメント

タイトルとURLをコピーしました