emulsion Today

tenman

,

emulsion 2.7.7に向けて

テーマのバグ

emulsion 2.7.6でのCSS変更で、ウィジェットページのレイアウトが崩れるバグが発生しました。

body > div{
    // .wp-site-blocks
    & > *{
        width: var(--wp--custom--width--content);
        max-width: 100%;
        margin-right: auto;
        margin-left: auto;
    }

Fixed

body > div{
    // .wp-site-blocks
    & > *{
        width: var(--wp--custom--width--content);
        max-width: 100%;
        margin-right: auto;
        margin-left: auto;

    }
    & > #adminmenumain{
        width:auto;
    }

Quick Fix

emulsion/css/fse.css を開いて、#adminmenumain{width:auto;}を追加していただくことで、修正できます。（minifiedファイルなので、最初か最後に追加してください

追加CSS、サイトエディタの追加CSSでは、変更できません

ソース：emulsion/fse.scss at master · tenman/emulsion · GitHub　

wp-block-social-links のレイアウトクラスが追加漏れしていました。

ソーシャルリンクを縦に並べたり、均等割り付けしたりする部分が動作していませんでした。

emulsion 2.7.7 で修正します。

PHPテンプレートを使用した場合に、投稿、固定ページでテンプレートが適用できなくなる問題がありました

emulsion 2.7.7 で修正します。

templates/single-with-toc.html テンプレートを修正

ヘッダー幅の調整、ページ内リンクの位置調整を行います。

新たに直面した問題

サイトエディタでテンプレート編集画面とテンプレートパーツ編集画面でスタイルが一致しない問題

なぜ、テンプレートで正常に動作しているのに、テンプレートパーツでは、正常に表示ができなくなるか調べてみると

テンプレートエディタでのブロックのコードは以下の通り

<!-- wp:template-part {"slug":"header-singular","theme":"emulsion","tagName":"header","align":"full","className":"fse-header header-layer banner wp-block-template-part-header-singular"} /-->

テンプレートパーツエディタでのブロックのコードは以下の通りになります。

<!-- wp:group {"align":"","className":"fse-header-content","layout":{"type":"flex"}} -->
<div class="wp-block-group fse-header-content"><!-- wp:site-logo {"width":48} /-->

<!-- wp:group {"className":"fse-header-text","layout":{"type":"flex"}} -->
<div class="wp-block-group fse-header-text"><!-- wp:site-title /-->

<!-- wp:site-tagline /--></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

上記のように、全く異なる。

テンプレートパーツには、”slug”:”header-singular”　つまり、parts/header-singular.htmlが記述されるのに対して

テンプレートでは、wp:template-partから作られるラッパーHTMLが追加されるため、ヘッダーを起点として、スタイルを記述していると適用されない

<header class="alignfull fse-header header-layer banner wp-block-template-part-header-singular wp-block-template-part">
テンプレートパーツparts/header-singular.htmlから生成するHTML
</header>

少し、考え中 …

横になったり、空を見たり、風呂に入ったりして、考えてみた。
「なるほどと思えることはなかった」
個人的にはクラッシクテーマのテンプレートパーツのように動くことが正しいように思うけれど、同時に「近々のGitenbergのアップデートで僕の望みがかなえられるようなことはない。」とも思った。

当面は、エディタ用のCSSを工夫することにした。

サイトエディタのグリッドレイアウトが、gutenberg 16.0.0 で正常な表示ができなくなる

従来は一段上のクエリーループで、グリッドかリストを選択Post Templateでは幅を設定することでレイアウトを操作していましたが、メニューがPost Templeteに移動して、Post Templeteのメニューだけでレイアウトと幅を設定できるようになりました。

emulsionテーマの場合、is-layout-flex等のクラスの追加はテーマ側で設定することにしているので、wp-block-post-template にレイアウトクラスを追加して、is-flex-container を追加し、（内部的には、layoutは、gridのようなので、将来的に使われるであろう、is-layout-gridも追加しました）正常な表示に戻すことができました。

個人的には、グリッドレイアウト用のクラスが、is-grid, is-flex-container, is-layout-flex が混在しているため、どれかに早く統一していただくと嬉しいところですが、早くその日がくればいいと思っています。

emulsion 2.7.7で修正予定です。

Note: 左のサムネールをクリックして表示していただくと

Dimensions に　Block Spacingが追加されたようです。

emulsion 2.7.7では、この機能をサポートします。

GUTENBERG 16.0.0 新機能　サイトエディタの固定ページ管理機能について

Gutenberg 16.0 Introduces Page Management in the Site Editor – WP Tavern

サイトエディタで、「固定ページの作成」「 投稿 、固定ページの編集」　ができるようになりました。

ブロックエディタで、カスタムテンプレートを指定した場合にどのような見え方の違いが起きるか、以下のスクリーンショットで理解できるはずです。

上の画像でカスタムテンプレート single-with-toc を選択しても、編集画面では、テンプレートが適用されたスタイルを見ることはできません。

投稿を開いた時に初めて、以下のようにテンプレートが適用されたページが確認できます。

エディタのページマネージメント機能を使った場合はどうなるでしょうか？

上記のように、カスタムテンプレートの結果を含めて編集ができるようになります。

これは、素晴らしい機能のように見えますが、emulsion テーマでは問題が発生することがあります。

php template ,php形式の固定ページテンプレートを使用した場合には、サイトエディタでは編集することができませんが、それらを使用したページは、home テンプレートを使用したページとして表示(または、スピナーが表示され続けていつまでもプリビューが表示されない）されてしまうという問題です。

このテーマには、このような問題があるという事を覚えておいてください。

emulsion 2.7.7では、修正されません。

emulsion 2.7.7で予定している変更

テーマ内のスタイルバリエーション、デフォルト外部パターンを刷新します。

emulsion テーマのstyle variation は、フォントファミリー毎のスタイルと、白系の背景、暗い背景を、単純に並べただけのもので、実験的なものでした。

既にそれらの機能はグローバルスタイルで変更可能になっており、設定も簡単になってきています。

少し整理をする必要を感じ始めたためです。

新しいスタイルバリエーションは、以下の5種10バリエーションに整理することにしました。

  • デフォルトのフォントファミリーと、白背景　黒背景
  • 日本語環境用のフォントファミリー（twiggy)と、白背景　黒背景
  • グリッドレイアウト　日本語フォントファミリー（grid) 白背景　黒背景
  • pack という名前の　新しいスタイルバリエーション　明るい背景と、黒背景
  • platen という名前の　白背景、黒背景

グリッドレイアウトは、少し改良しました。グリッドバリエーションを設定した状態で、テンプレートで幅や列数を編集できるようになります。

デフォルトでインポートしていたパターンを削除します。

　Our Team, client, member, author section desing with name, designation, image, details and social media – ブロックパターン | WordPress.org 日本語

stylesディレクトリ内の以下のjson ファイルを削除します。

daybreak.jsonemulsion/daybreak.json at 9e6b0ca1a30075b9708b50521528afd23c12756b · tenman/emulsion · GitHub
hands-jp.json

Changes to be committed: · tenman/emulsion@b77355b

hands.jsonemulsion/hands.json at b77355b56124ac38dbb42d672e0621312b7a6c5c · tenman/emulsion · GitHub
thin.jsonnew file: styles/thin.json · tenman/emulsion@30426fb
centered.jsonemulsion/centered.json at b77355b56124ac38dbb42d672e0621312b7a6c5c · tenman/emulsion · GitHub

削除したjsonファイルは、リンク先から取得できますので、必要な場合はstylesディレクトリに追加してください。

[emulsion_relate_posts]