Gutenberg(ブロックエディタ)メモ -Gutenbergの使い方で迷うところ

Cat WEBサイト構築Tag , by cubismer
WordPressのGutenberg
WordPressのGutenberg

独自ブロックの作成やカスタマイズということではなく、運用時の使い方に関してのメモです。

これどうだっけ？となるのはわりとあるので適宜記述を増やすかもしれません。

使い方メモ

思い通りにブロック操作ができない

Gutenbergのブロック操作には以下のような使いにくい場合があります。

  • 最下部のブロックがフォーカスされている(ツールバーが表示されている)状態の場合、改行(Enter)キーを押さないとその下にブロックを追加できない場合がある。
  • ブロックを選ぶポップアップ内の並び順は、使う頻度などで順番が変わる模様。順番を固定する方法はない(と思う)。
AdvancedのAdditional CSS classで複数のクラス名を設定する

例えば.class-base.class-constomのように１つのタグに複数のクラスを同時につける場合には、Additional CSS classの入力欄へ以下のようにスペース区切りで入れるだけで反映されます。


class-base class-constom
ショートコードブロック

ショートコードブロック内ではテキストとショートコードの混在は可能です。囲み型でも自己完結型でも動作します。


<!-- 以下はOK -->
テキスト[gallery]テキスト
<!-- 囲んだ文字列を記事表示時に指定HTMLで囲む -->
[hoge]テキスト[/hoge]
<!-- 囲んだ文字列内の特定の文字列を削除する -->
[hoge2]テキhogeスト[/hoge2]

しかし、HTMLタグを入れると不具合がでます。
具体的には、保存時や記事表示時には正常に表示されるようですが投稿画面を再表示したりリロードするとブロックが壊れます。HTMLを入れたい場合にはショートコード側に含ませておく必要があります。


<!-- 以下はNG -->
<!-- HTMLタグがそのまま入っている -->
<div>テキスト[gallery]テキスト</div>
ショートコードとブロック

ショートコードブロック以外でも以下のブロックなどでショートコードは動きます。
ただし、例えば段落ブロック内にdivなどのブロック要素を出力するようなショートコードはHTMLのルール上やるべきではないので、ブロック要素を出力するタイプはカスタムHTML(またはショートコードブロック)を使うことになるでしょう。

  • 段落ブロック
  • カスタムHTML
再利用ブロック(Reusable block)

ブロックを配置後にブロック上部のツールバー(設定次第ではエディタ画面上部の位置に固定されている)の右端の縦3点リーダーから設定できる。

再利用ブロックに設定した場合、別の投稿にも利用できる。利用する場合はブロック追加用ポップアップの最下部ありにある「再利用ブロック」を選べば、再利用ブロック指定時に設定した名称で並んでいる。

実際に配置すると入力欄に入れた文言がそのまま編集できない状態になっているため、編集したい入力欄にフォーカス後にブロック上部のツールバーの右端の縦3点リーダーから、「通常ブロックに変換(Convert to Regular Block)」を選ぶ必要がある。

結び

今後名称や場所や機能が変わる可能性があるため、当記事の内容がいつまで使えるのかは微妙です。

関連記事

Gutenberg(ブロックエディタ)に関連する記事一覧。

1人がこの記事を評価

役に立ったよという方は上の「記事を評価する」ボタンをクリックしてもらえると嬉しいです。

連投防止のためにCookie使用。SNSへの投稿など他サービスとの連動は一切ありません。

コメント欄