Gutenberg：ブロックエディターでの記事作成が楽しくてたまらない今日この頃…
こんなに楽しみながら記事を書くのめっちゃ久しぶりな気がします。(^^)
さて、今日はブロックエディターの快適さがわかるおすすめ機能「再利用可能ブロック」について記事です。
再利用可能ブロックとは？
Gutenbergでは、ブロック（いわゆる段落？）を組み合わせて記事を構成していきます。
ブロックごとにカスタマイズが可能になっていて、デフォルトだと背景色や文字色の設定が簡単にできます。また、カスタマイズしたブロックをテンプレートのように「再利用可能ブロック」として登録ができるようになっています。
テンプレートとの違い
テンプレートは、いつも同じ内容を入れる時に重宝するものですが…
再利用可能ブロックは、ブロックを挿入後、内容を書き換えるとこれまで記事に入れたそのブロックの内容も変更されることです。
例えば、「こんにちは、けろら～です。」と入力したブロックを再利用可能ブロックに登録し、記事の冒頭に毎回挿入して記事を書くことにしたとします。
で…途中でHNを「けろ子」に変えたとします。
その場合、今までだと記事を一つ一つ修正するしかないですよね。
それが、ブロックエディターだと…
どの記事でもいいので、該当の再利用可能ブロックを呼び出して、「こんにちは、けろ子です。」に修正するだけでいいんです。
これまで書いた記事をいちいち修正するなんてことしなくていいんです！！
これってすごくないですか？
テンプレートのような使い方
再利用可能ブロックを挿入後、通常ブロックへ変換すると、内容を変えても元の再利用可能ブロックは書き換えられません。
通常ブロックへ変更することで、テンプレートのような使い方ができます。
再利用可能ブロックの設定
ブロックエディターは、日本語翻訳済みという記事を先日チラッと読んだ気がするんですが…ワタシの環境では英語なんです。（なぜでしょうか…(T-T) ウルウル）
再利用可能ブロックの設定は、ブロックを選択している時、ブロック上部に表示される3点アイコンのメニューから設定します。
※Google翻訳で訳しています。（）内は、ワタシの補足
| Hide Block Settings | ブロック設定を非表示 |
| Duplicate | 重複（コピー） |
| Insert Before | 前に挿入 |
| Insert After | 後に挿入 |
| Edit as HTML | HTMLとして編集 |
| Add to Reusable Blocks | 再利用可能なブロックを追加する |
| Convert to Regular Blocks | 正規ブロックに変換する（正規→通常） |
| Remove from Reusable Blocks | 再利用可能なブロックから削除 |
| Remove Block | ブロックを削除 |
まず、再登録したいブロックの3点アイコンをクリックし、「Add to Reusable Blocks」をクリックします。
任意の名前を入力し、Saveボタンを押せば、「再利用可能ブロック」としての登録が完了♪
再利用したいブロックの挿入するには、「+」マークをクリックします。検索窓にブロック名の入力すると候補が出てくるのでその中から、追加したいブロックをクリックすると挿入されます。
検索窓に入力すると候補出てきます。候補のブロック名にマウスを置くと右側にプレビューが出ます。
直感的に選べるので、わかりやすくていいですね～♪
再利用可能ブロックの注意点
先にも述べましたが、再利用可能ブロックを挿入後、内容を変えるとこれまで記事に挿入してきた同ブロックの内容も変更されてしまいます。
ただ単にdiv装飾のテンプレートとして利用するなら、通常ブロックに変換してから内容を入力します。
使い回しするブロックは、必ず通常ブロックに変換する
再利用可能ブロックかそうでないかは、以下の表示があるかないかで見分けられます。
使い回しする時には、以下の操作を忘れないようにしましょう。
通常ブロックに変換すると、再利用可能ブロック名の表示が消えます。以下は、段落ブロックの通常モードです。
Classicブロックは、再利用の登録はできない
Classicブロックは、再利用可能ブロックとして登録できません。
ワタシの場合、ブロックエディターで記事を書くようになってから、CocoonのCSS拡張機能を利用する事が減ったので、Classicブロックの利用も少なくなりました。
でも、やっぱり参考記事、関連記事のリンクはCocoonのブログカードの表示が好きなのでClassicブロックを利用しています。
ブロックは基本「div」要素らしいので、ブロックのAdvanced設定でCocoonのCSSを入れたら大丈夫かと思っていたのですが、他のボックス等はOKなんですけど、ブログカードは表示がおかしくなりました。
Classicブロックは、再利用できませんけど、以下の方法で手間が省けます。
- ClassicブロックでブログカードのみCSSのみでリンクを作成
- 3点アイコンメニュー「Duplicate」をクリック
- コピーが作成されるので、リンクを修正して再利用
あとがき
超便利な「再利用可能ブロック」の記事はいかがでしたでしょうか。
「Gutenberg」の使い勝手の良さが伝われば幸いです。
冒頭でも述べましたが、ブロックエディターで記事を書くことは本当に楽しいです。
使えば使うほど、「これって、こうなんだ」と使い方もどんどん理解できてくるし、そうなってくると更に記事作成は捗るし…。
Gutenbergの凄さに驚きと感動を覚える毎日です。
まだ、完全に旧エディターに移行はしてないんですけど、既存の記事を全てブロックエディターで修正し終わったら、完全にGutenbergへ移行しようと思ってます。
まだGutenbergを試していない方は、ぜひ、一度試してみることをおすすめいたします♪
それでは、また！！けろら～でした♪＼(^▽^)／
コメント欄