unitone v6.1.0 をリリースしました – WordPress テーマ unitone

unitone v6.1.0 の概要

機能追加

「縦書き」ブロックを追加
レイヤーブロックの子ブロックに「ミックスブレンドモード」を追加

不具合の修正

レスポンシブグリッド（区切りあり）ブロック、クラスター（区切りあり）ブロックで、iframe プレビューで区切り線が正しく表示されないことがある不具合を修正

「縦書き」ブロックを追加

縦書きをするためのブロックを追加しました！

ただ、そもそもの CSS の縦書きの仕様やブラウザサポートが個人的には微妙だったり、ブロックエディターの仕様か何かわかりませんが縦書き状態で文章を入力しようとするとカーソル位置が固定＆背景が動くような状態で入力しなければならず非常に入力しにくいという問題があるので、ベータ版という位置づけにしました。

今後、破壊的な変更があったりブロック自体が廃止される可能性もあるので、その点ご理解の上お使いいただければと思います。

大きなのがいるんだから小さいのもいるんでしょう

ジョバンニは、いつか町はずれのポプラの木が幾本も幾本も四方へ出るのでした。そしてそのこどもの肩のあたりが、どうも済みませんでしたから、とてもみんなは乗り切らないのです。

するとどこかで見たわ姉は細い銀いろの空から、さっきの入口から暗い牛舎の前へまた来ました。そういうふうに、眼の前を通るのですから、この次の理科の時間にお話します。

大きなのがいるんだから小さいのもいるんでしょうか女の子がそっとカムパネルラにたずねました。あら、蠍の火だなカムパネルラがまた何気なくしかるように叫びました。

縦書きができるとデザインの幅が広がるので、後日いくつかパターンもつくって配信しようと思います！

レイヤーブロックの子ブロックに「ミックスブレンドモード」を追加

レイヤーブロックの子ブロックに、ミックスブレンドモードの設定が追加されました。下記は上に重なる画像に multiply を設定したサンプルです。

おまけ： CSS での縦書きについて

CSS で縦書きをがっつりやるのは初めてだったので色々ハマりどころがありました。メモ程度ですが、ここに残しておきたいと思います。

縦書きの場合、文章量が多くても自動で折り返しはされない。画面幅を超えて広がって、画面からはみ出した部分は読めなくなる（overflow: auto 等でスクロールが必要）。
display: flex + flex-direction: column にすると折り返すようになるけど、「ブロック単位」で折り返されるので微妙。
「テキストの途中」で折り返させるためには column-count を使う必要がある。column-count を指定すると、その縦書き要素の高さの中で指定した数値で折り返される。収まらない部分はさらに折り返されるが縦書き要素から「はみ出す」形で表示される。つまり、縦書き要素は2行分の高さしか確保されないけど実際には4行で表示される、ということがありえる（はみ出た部分は後続のコンテンツに潜る）。
つまり高さは JavaScript を駆使して自力で確保しなければならない。column-count: 1 とすると（高さの調整は置いておいて）任意の行高で表示できるので便利。ただし Safari は column-count:1 が効かない。
行高を制限するために縦書き要素の子要素に max-height を指定した場合、文章が少なくても行高は縮まない（max なのに！）。ただし、Safari は縮む（でも文章が少ない行だけではなく全体的に縮む）。なので heght を指定したほうがわかりやすいかも。