この記事はブロックエディタがどんなものか簡単に解説したものです。ブロックエディタを初めて触る人に向けて書いています。この記事を最初に読んでおけば爆速でブロックエディタをマスターできるはずです！ぜひ参考にしてください！
はじめまして。ワプロスといいます。ブロックエディタを使い始めて2年(もう6年)経ちました。操作が難しいといわれるブロックエディタですが僕も最初は苦労しました。それでも使い続けていると あるコツを掴んだのです！そのコツを掴んでからというものブロックエディタをスラスラ使えるようになりました。
今回 お伝えするのはそのコツについてです。
ブロックエディタとは！
本題に入る前にブロックエディタとは何か説明をしておきます。
「ブロックエディタ」とはエディタ(ブログ編集ツール)のことです。WordPress(世界シェアNo.1のブログ作成ツール)が独自に開発したものになります(2018年リリース)。特徴はHTMLやCSSのような知識がない人でも手軽に使えるようにWordPressが考案したある工夫がされていること。
その工夫というのが名前にもなっている「ブロック」という考えです。どういうことか？次でこの考えについて詳しく見ていきます！
ブロックエディタにはGutenberg(グーテンベルク)という愛称があります。活版印刷を発明したグーテンベルクにあやかってのことです。ブロックエディタとグーテンベルクは同じものを指します。
「ブロックエディタ」の前は「クラシックエディタ」というエディタが使われていました。クラシックエディタはある程度 HTMLやCSSのような知識がないと使いこなせないレベルでした。(もうこの頃には戻りたくない)。
ブロックとはノートに付箋を貼るイメージ！
ここからが本題
旧エディタ(クラシックエディタ)のイメージ
イメージしやすいように現実世界のノートを使って説明します。
こちらは昔のエディタ(クラシックエディタ)のイメージです。
昔のエディタはこのようにノートに直接書き込んでいく感じでした。
ブロックエディタ(グーテンベルク)のイメージ
そしてこちらがブロックエディタ。ブロックエディタを現実世界でやってみるとるとこんな感じになります。
ご覧のように付箋に文章や画像を書いてそれをノートに貼り付けていく感じです。
このときの付箋にあたるものがブロックになります。「ブロック＝付箋」とお考えください。
編集スタイルが「直接書き込むスタイル」から「付箋を貼るスタイル」に変わりました。こうすることでいろんなメリットがあります。次でこのメリットについてお伝えします。
ブロックエディタのメリット
ブロック(付箋)を使うとこんなメリットがあります。
作業が単純明解！
ブロック(付箋)方式は一つ一つのブロック(付箋)が独立しています。そのためやることはとてもシンプル！一個一個の付箋を作って並べていくだけです。
一方 旧エディタでは他のパーツとの兼ね合いも意識しないといけませんでした。
入れ替えが楽！
ブロック(付箋)だと順番を入れ替えるのが楽です。
それぞれブロック(付箋)は独立しているため上ボタンや下ボタンを押すだけでスルスルと順番を入れ替えることができます。まるで付箋を並び替えるように。
一方 旧エディタで要素の順番を入れ替えるにはコードをコピペする必要がありました。コピペする個所を間違えれば一瞬で画面が真っ白に。
エラーが起きにくい！
ブロックエディタはクラシックエディタに比べ エラーが起こりにくい仕組みです。ブロック一つ一つが独立しているのでもしエラーがあってもそこだけエラー扱いになります。エラー個所の特定が簡単。しかも自動で修正してくれる機能付き。
一方、旧エディタ(クラシックエディタ)では一つエラーがあればドミノ倒しで破綻。画面が真っ白になってました。エラー個所の特定が難しく特定するのに苦労していました。
ブロックエディタにしてから画面が真っ白になるというエラーを見なくて済むようになりました
ブロックエディタのデメリット
ここは読み飛ばしてOK。
ブロックエディタはいいとこばかりかというとそうでもありません。使いやすさを追求したあまり不便になった部分もあります。
例えば、自動修正。ブロックに独自のカスタムをしようとすると【例えばstyle(style=".....")を追加】、間違った文法と判断され自動修正されてしまいます。本来はエラーを起こさないためのいい機能なんですがこういう場合に不便です。
HTMLコードがわかる人にとっては細かいカスタマイズができずストレスを感じるでしょう。
まとめ
以上、ブロックエディタのかんたんなイメージをお伝えしました。
ここでお伝えしたいのは「ブロックエディタを使うときは付箋をイメージする」ということ！
これを頭に入れておけばきっと爆速でブロックエディタをマスターできることでしょう！