BlockEditorを使おう！ – Kansai WordPress Meetup @神戸

この記事は、2020年6月13日（土）に開催される、KansaiWordPressMeetup @Kobe（オンライン）で使用する資料です。

テーマ「TwentyTwenty」と、バニラな状態のWordPress（5.4.2）で使えるブロックエディタの主要なブロック全てを実際に使って構成しています。

画面上で変更できるプロパティ変更は最小限にしつつ、CSSクラスの指定や外部CSSの使用、HTML編集モードでの編集は行なっておりません。

以下の内容を参考にしながら、実際にBlockEditorを操作して慣れていきましょう！

公式ドキュメントに、BlockEditorのドキュメントもありますので、ご参考にどうぞ！

一般ブロックを使ってみよう

このページでは、非常によく使う「一般ブロック」を試してみます。

基本的に、「一般ブロック」がもっともよく使われるブロック群と言えるため、まずはここをしっかり押さえておきましょう。

見出しブロック

↑上の赤文字が見出しです。
（あえて色を変えています、初期では黒い太文字です）

見出しブロックはH2〜H4まで選べます。
Hなマークが目印。
ちなみに、段落ブロックの冒頭に「### 」（ハッシュの最後に半角スペース）と入力すると、ハッシュの数に応じた見出しブロックに変換してくれます。（### ではH3となります）

マークダウンってやつですね！

段落ブロック

そしてこの色がついているブロックは、段落ブロック！
（前後にある色がついていない文字だけのものもそう）
おそらくこれから一番多く使うことになるでしょう。

特にブロックを選択せずに文字入力を開始した場合は自動的に段落ブロックが選択されるので、意図的に段落ブロックを選択することはおそらく少なくなると思います。

ちなみに、Shiftを押しながらEnterを入力すると段落ブロック内で改行できますよ！

リンクも張れます。
文字列を選択して、タブの「鎖」マークを選びましょう。
Command+KでもOK！
ショートカットキーなどは画面に表示されますので、覚えていくと楽になっていきます！

URLを直接貼り付けると、まずは外部サイトを埋め込む「埋め込みブロック」への変換を試みます。
URLリンクを貼りたいだけ、あるいはエラーが表示された場合は、「リンクへ変換」を選択してください。

https://wordpress.org/

ところで、ここまでで複数の段落ブロックが入力されたと思います。
複数のブロックをまたぐ形で文章を選択するとブロック単位で選択されますので、グループ化をしてみましょう。

小セクションごとにグループ化しておくと、まとめてブロックの順番を入れ替えられたり、スタイルをあてられたりと色々便利です。

もちろん、グループ内での前後入れ替えも可能。

また、グループ化したブロックを再利用ブロックに変換することで、共通部品として別の投稿に再利用することが可能です。

ぜひ覚えておくとよいでしょう。

インライン画像なども埋め込めますし、
背景色や文字の色だって自由自在です。
でも、部分的な文字サイズやあみかけなどはできません。
その場合は、HTMLを直接編集することになります。
（ブロックの上端に表示される【…】アイコンから、HTMLとして編集　をクリックすれば編集できます。
ただし、ブロックエディタがブロックとして認識するためのタグやクラスなども編集可能なため、最新の注意を払って編集する必要があり、おすすめはできません）
・・・あれ、インライン画像とありますが改行されますね。
よくみたら、TwentyTwentyだと画像にCSSにdisplay:blockが設定されています。