emulsion today

tenman

,

emulsion 2.7.6に向けて 試行錯誤のメモ

エディタ（サイトエディタ）に取り組んでいます。

ブロックエディタでは、ブロック幅がコンテンツ幅、広幅、全幅、センター幅、回り込み等たくさんの設定があります。

例えば、「投稿と固定ページでコンテンツ幅を変更したい」という課題があったとします。

サイトエディタのテンプレートの編集機能を使って、それを実現しようとすると、ブロックによっては、groupブロックでラップして、カスタム幅を指定してやるといった手間のかかる作業になります。

確かに、ノーコードで編集は可能になりますが、テンプレートで収まる修正になるかといえば、テンプレートパーツの変更として記録され、他のテンプレートに影響が及ぶといった事も容易に予想されます。

場合によっては、追加CSS等でCSS変数の書き換えを行った方がシンプルにかな、とも思いました。

以下の設定を行えば、投稿ではコンテンツ幅が600px　固定ページでは、900pxになるはずです。

.single{
--wp--custom--width--content:600px;
}
.page{
--wp--custom--width--content:900px;
}

現実には、この設定でうまく動作しない部分が出てきたりします。そのため、このような変更で安定して編集できるようにテーマの不具合を調整しています。

❗ 実使用の場合は、サイトエディタの追加CSSはスタイルバリエーションを変更するとリセットされるので、リセットされないカスタマイザーの追加CSSを使うといいかもしれません。

新たに直面した事柄

サイトエディタでは、ブロックごとの追加CSSクラスを変更した場合、テンプレートの変更が反映しない事がありました。

この場合、テーマのテンプレートを使用しているように見えますが、変更されたテンプレートが実は保存されていて、テーマのテンプレートが反映しなくなるという問題です。

今のところ、何かしらのブロックを追加してやると、カスタマイズされたテンプレートとして表示されるので、そのテンプレートを削除して対応中。

サイトエディタ直下にブロックを記述したときに、幅などが適用されない

以下はTwenty Twenty Three の例

修正中　はて、wp-site-blocksは、is-layout-default か　is-layout-constrained か？

投稿ブロックエディタで、パターンプリビューが表示されなくなった。

これ、ちょっとびっくり　いつからこうなってしまったのかわかりません。

原因は

iframe{
    display:block;
    max-width:100%;
    margin-right:auto;
    margin-left:auto;
    border:none;
    aspect-ratio: 16 / 9;
}

max-width プロパティを除去することで表示できるようになりました。

iframeのスタイルは、style属性を使って、ガッシガシのスタイルがあたっているんですが、彼らが予想していないスタイルが、テーマの要素スタイルにあたっているだけで、終わる。　こういうパターンが実は多くて人様の書いたスタイルに影響を与えない補助的なスタイルを書くというのは難しいですね

テーマのバグ

クエリーブロックで”pages”:100 としていて、このサイトもカテゴリーが、無限ループのようにどこまでも、次のページが表示されていた。

<!-- wp:query {"queryId":1,"query":{"perPage":10,"pages":0,"offset":0,

note:この修正を行ったところ、Sticky Postが消える問題に遭遇しました。emulsion 2.7.6にアップデート後は、Sticky Postを使用している場合は、点検してみてください。

テストを行って分かったこと

現在のエディタ（サイトエディタ）の編集画面では、以下のスタイルは反映しませんが、フロントエンドではうまく動作しそうです。

エディタ側で動作しない原因は、サイトエディタのiframeのbodyには、body classが適用されてないために発生します。

ノーコードではありませんが、コンテンツ幅を変更する作業の場合CSSを変更した方がシンプルで管理がしやすい印象でした。

このテーマでは、グループブロックのほとんどはテンプレートパートブロックの下層に配置されていますので、変更はテンプレートパートブロックの変更として保存されるので、ほとんどの場合他のテンプレートでの表示に影響します。

教訓：サイトエディタでテンプレートの編集を行う場合は、テンプレートパートファイルの子ブロックには手を付けない方が無難そうです。

.single{
--wp--custom--width--content:600px;
}
/* List of posts　*/
.home,
/* Category Archives */
.category,
/* Archives */
.archive,
/* File Not Found */
.error404,
/* Page */
.page{
--wp--custom--width--content:900px;
--wp--custom--width--wide:1200px;
}

試行錯誤のまとめ

サイトエディタのテンプレート編集を行う場合、テンプレート内には、共有のためのテンプレートパートファイルも含まれていて、変更はこれらについても実行することができます。

しかし、テンプレートパートファイル内の変更を行った場合、それらは現在編集中のテンプレートだけの変更にとどまらず。テンプレートパートファイルを共有するすべてのテンプレートに及んでしまうので、そのテンプレートファイル内だけの変更にとどめたい場合には、テンプレートパートファイルを切り離して、現在のテンプレートだけで動作するように、手順を踏む必要があります。

テンプレートパートファイルを切り離して、現在のテンプレートの変更として作業する方法については、別途まとめたいと思います。

あらかじめテーマで定義されている値（幅、文字サイズ等）を変更する場合は、bodyクラスと組み合わせて、CSS変数を上書きするほうほうも検討する価値があるでしょう。

このような見通しで、emulsion 2.7.6の更新の準備を進めていきたいと思います。

emulsion 2.7.6では、CSSのリファクタリングをさらに進めます。

従来は、フォントサイズや、幅ではpx単位、マージンやパディングにはrem単位を使用していましたが、borderなど一部を除いて、単位をrem に統一します。

今回の変更で、以下のようにルートフォントサイズを変更することで全体の文字サイズ、幅を相対的に変更できるようになります。

例

:root{
    font-size:20px;
}

ブロックテーマ用のCSS（fse.css)より、theme.jsonへのスタイルの移行を進めます。

wp-block-group, wp-block-template-part,wp-block-video,wp-block-table-of-contents,wp-block-columns,wp-block-post-template,wp-block-post-featured-image,wp-block-query,wp-block-term-description,wp-block-coverのパディング設定、マージン設定をtheme.jsonに移行します。

Gutenberg Version 15.8.1 WordPress 6.2.2

[emulsion_relate_posts]