Emulsion Theme

block editor ( gutenberg ) 対応した新しいコンセプトのテーマ

WordPress 6.0 と emulsion Theme

Emulsion Theme

block editor ( gutenberg ) 対応した新しいコンセプトのテーマ

WordPress 6.0 と emulsion Theme

WordPress 6.0では、サイトエディタで、配色を選択できる機能が追加されました。

emulsion テーマは、5.9の時点で、先んじてこの機能を実装済みでしたが、概ね期待通りに動作しています。

サイト内リンクを簡単に入力できる記法も追加されました

段落の先頭で以下のように入力すると、投稿リンクを検索できます。

[[検索文字

グループブロックに、Stackが追加されました。

Stackとは、子ブロックを「横並べ」、「縦積み」する機能です。

横並べは、カラムブロックによく似ていますが、それぞれの幅を調整したりすることはできませんが、ブロックのクラス名で切り替えることが可能なため、javascriptなどで条件によりクラス名を入れ替えるなどで、レイアウト変更が可能になります。(is-flex-container, is-verticalクラス)

emulsionテーマでは、現在のところ、「縦積み」機能は、コアの標準動作とは、異なっていますので注意してください。

emulsionテーマでの縦積みは、位置制御用に機能を流用しています。

フルサイト編集テーマの多くは、現在のところデフォルトテーマも含めて、上記のようにグループブロックが横ずれする現象が見られます。

このため、縦積みを設定した場合には、以下のように表示できる機能として使っています。

今後変更になるかもしれませんが、弊害として、縦積みのレイアウト機能は動作しません。ご了承ください。

横並べした場合の、レスポンシブ設定については、グループのスタイル レスポンシブを選択していただくと、ブラウザ幅に応じて、横並びが解除されます。

テーマ独自の変更

段落で、何も入力しない場合は一行分のスペースを空ける設定を行いました。個人的には、スペーサーを入力する手間を軽減できるので便利です。

デフォルトテーマとの違い

デフォルトのテーマとエマルジョンテーマには、テーマの基本設計でいくつかの違いがあります。

異なる点が明確な方が、テーマの選択の助けになると思い以下説明をしていきます。

コンテンツ幅

段落等、すべてのブロックでデフォルト設定の幅が、コンテンツ幅です。

違いが発生するのは、ブロックが グループブロックでラップされたときに発生します。

グループブロックで、全幅が設定された時の、段落要素を見てみましょう。

emulsion theme

Twenty Twenty Two

emulsion テーマでは、全幅や幅広ブロック内の子ブロックは、常にデフォルトのコンテンツ幅で維持されますが、デフォルトテーマでは、幅が広がります。

グループ要素内の、子ブロックは全幅、幅広メニューがなかったり、右寄せ、左寄せメニューが表示されなくなったりしますが、ブロックグループのレイアウト機能で幅を変更したりすることができます。(または、追加CSSクラスに直接(alignwide,alignfull,alignleft,alignright)クラスを入力することも出来ます)

alignleft,alignright (フロートコンテンツの扱いについて)

emulsion テーマの alignleft幅、alignright幅は、基本的には、メインエリアの半分のサイズです。

これは、alignleftとalignrightが両方作用する場所で、ぴったり半分にすることで、流れ込みを防ぐために行っています

しかし、それほど幅を必要としないブロック(検索や、ソーシャルリンク、ボタン等)もあり、狭い幅の設定も追加しました。

  • wp-block-social-links
  • wp-block-file
  • wp-block-search
  • wp-block-latest-comments
  • wp-block-archives
  • wp-block-categories

後続するブロックが、隙間部分に回り込む問題を個別に解消するためのクラスを追加しました。

  • clear-float
  • clear-left
  • clear-right
  • clear-none

alignleftに設定したブロックに後続する段落などの流れ込みを防ぐには、流れ込んでほしくないブロックに、clear-leftクラスを追加していただいてユーザーに何とかしてもらおうという、ちょっと卑怯な方法かもしれませんが、最悪これで何とかしてー、という思いを込めています。

alignleft,alignrightは、いずれにしろ最小限にとどめるのがよいと思います。

emulsionと、twenty twenty twoのalignleft, alignrightの違いは、以下のようになります。

Copyright © 2022 Site proudly powered by WordPress