グーテンベルグブロックとテーマ

この記事は、gutenberg2.7の時点で書いています。今後変更になる可能性大です


WordPress5.0を目途に、Gutenbergは、着々と準備が進んでいるようです。(Milestones - WordPress/gutenberg)

日本語での表示にも対応したようです。

移行が行われた場合、エディター用にブロック毎に、様々なCSSクラスが追加されます。

コアのCSSは、テーマが何もしなくても、それにふさわしいスタイルを提供する事になっていますが、gutenbergでは、2カラムや3カラムのテーマとコンフリクトしそうな表現については、オプトインで、テーマがサポートするかどうかを選択できる機能もあります。

以下の、コードをテーマに記述する事で、全幅画像や、ユーチューブなどの全幅表示が出来るようになります。

CSSの追加は、以下のアクションを使う事で行う事が可能です。

プラグインは、これまでクラス名やhtml構造が頻繁に書き換えられ、エディターのボタン機能なども書き換えられてきました。

テーマは、コアのCSSと、それぞれのテーマの関係性で、不足する部分に対して、CSS等何らかの対応を行わなければならなくなることが予想されます。

エディターの各ブロックと、エディターの機能について一覧表を作ってみました。

以下の表では、ブロック毎に設定可能なフォントサイズや色の設定などは、省いてあります。

グリーンのボックスは、Raindropsテーマで、alignleft等クラスを指定する事で、ブロックの位置を変更できるようにした、独自拡張です。

    

    

type block alignleft aligncenter alignright bold italic strike link block alignleft block aligncenter block alignright block alignwide block alignfull Additional Class
common blocks paragraph x x x x x
common blocks image
common blocks heading x x x x x x x x
common blocks gallery x x x x x x
common blocks list x x x x x x x x
common blocks quote x x x x x
common blocks audio x x x x x x x
common blocks cover image
common blocks sub head x x x x x
common blocks video x x x x x x x
formatting code x x x x x x x x x x x x
formatting classic x x x x x x x x x x x x x
formatting custom HTML x x x x x x x x x x x x x
formatting preformatted x x x x x x x x
formatting pullquote x x x x x x x x
formatting table x x x
formatting verse x x x x x x x x x
Layout Elements button x x x
Layout Elements columns(experimental)
Layout Elements more x x x x x x x x x x x x x
Layout Elements page break x x x x x x x x x x x x x
Layout Elements separator x x x x x x x x x x x x x
Layout Elements text columns x x x x x x
Layout Elements text columns x x x x x x
Layout Elements spacer(ver2.8) x x x x x x x x x x x x
widgets categories x x x x x x x x x
widgets latest posts x x x x x x x x x x
widgets shortcode x x x x x x x x x x x x x

ver2.9 段落要素のブロック右寄せ、左寄せ、等のブロック位置調整機能削除されました。
ver2.9 サブヘッド(副見出しブロック)のテキストの左寄せ、右寄せ、中央配置が有効になりました。


新着記事

コメントは受け付けていません