解 説

CSS Gridの導入

「ブロックをインタラクションのパラダイム (枠組み) として受け入れる」と本家がいうようにブロックでレイアウトしていくことができます。その辺の仕組みは多くのライターの人が書くでしょうからそちらを見ていただくとして、気になるコードとしては画像とテキストを横並びにする場合にはかつてはfloatが使われていましたが、Gutenbergでは「Media & Text」から画像とテキストを導入するとCSS gridが使われています。

display:grid本格的に使われはじめましたね。

ただし、画像挿入の際に「Media & Text」を使わずに「Image」メニューから挿入した場合画像の配置を決めるメニューが出てきます。これで左揃えや右揃えを選択するとfloatが使われます。以前のバージョンまではこの機能はクラス名が付けられるだけでCSSは自分で記述する必要がありましたが、グーテンベルグではCSSの設定が付けられています。ただし、clearの処理は自分で行う必要がありますのでfloatが苦手な人は困るかもしれません。

また、「Cover」を使うとCSSのbackground-imageで画像が挿入されます。

Stick to the Front Pageとは?

ちょっと気になったのは編集画面で右側のメニューに「Stick to the Front Page」というチェックメニューがあります。

これにチェックを入れると「投稿一覧」の記事タイトルに「先頭に固定表示」と表示されます。これはブログタイプの記事一覧をTOPページなどに表示する場合に常に先頭に表示するという機能のようです。複数の記事に設定した場合には新しい記事が一番上で優先的に上に表示されるようになります。