unitone v17.0.0 の概要
機能追加
- タブブロックを追加
- アブストラクト背景ブロックを追加
- フレームブロックにドロップシャドウのサポートを追加
- シャドウプリセットに少し濃い目のプリセット（[unitone] Dark）を追加
変更
- コアブロックへの「テキストで背景を切り取る（
background-clip: text）」の設定の追加を廃止 - アコーディオンブロックはテキストブロックを内包する形で挿入されるように変更
不具合の修正
- 背景フィルターの色相回転（
hue-rotate()）が効かない不具合を修正 - グラデーション背景、背景色が設定されたブロックで「テキストで背景を切り取る（
background-clip: text）」を有効化すると何も表示されなくなってしまう不具合を修正 - キャプションの文字サイズが正しくない不具合を修正
- 動画ブロックを全幅にしたとき、意図したレイアウトにならない不具合を修正
ResizeObserverの無限ループが発生することがある不具合を修正allowedBlocksをblock.jsonで指定するように変更
タブブロックを追加
Snow Monkey Blocks にもタブブロックはあるからな〜と思って unitone ではタブブロックを用意していなかったのですが、Snow Monkey Blocks は古いのもあってコードがスパゲティ気味になっていて、もうあんまり触りたくない感じになっているので、今ゼロから作り直したらどうなるかな？というのが気にになってつくっちゃいました。
今は Intaractivity API もあるし、僕の知識も増えたのもあって、思った以上にシンプルなコードでつくれました。なのでメンテナンスもしやすくできたし、Snow Monkey Blocks 版と比べると動きも軽快だと思います。サンプルは以下。
アブストラクト背景ブロックを追加
X を見ていると、よく Screen Studio で画面録画された動画を見かけます。動画に MacOS の壁紙みたいなきれいな背景が入っていて、「僕の画面録画（ただ撮っただけ）と全然違うやん…」といつも思っていました。
まぁそういう動画を撮りたいなら Screen Studio を買えば良いですが、こういう Abstract な背景が画像や動画の背景に入っているという見た目自体がきれいで良いなと思ったので、ページ上に画像や動画を載せるときに同じような表現ができるように、ブロックを追加しました。実際の表示はこんな感じ。
「背景フィルター」のサポートもつけているので、ぼかし具合や色相等も変更可能です。
コアブロックへの「テキストで背景を切り取る（background-clip: text）」の設定の追加を廃止
背景画像、あるいは背景グラデーションが設定可能なコアブロックに自動的に設定が追加されるようにしていましたが、全く必要ではないであろうブロックにも追加されてしまうということに気づいたので、今回のアップデートで自動追加は取り消しました（すみません）。
すでにコアブロックでも使用されている場合は、下記のコードを追加することで復活できます。
/**
* Add support "backgroundclip" to core blocks with color.gradients and background.backgroundImage.
*
* @param array $metadata Metadata for registering a block type.
* @return array
*/
function add_background_clip_support( $metadata ) {
if ( false === strpos( $metadata['name'], 'core/' ) ) {
return $metadata;
}
if (
empty( $metadata['supports']['color']['gradients'] ) &&
empty( $metadata['supports']['background']['backgroundImage'] )
) {
return $metadata;
}
$metadata['supports'] = array_merge(
$metadata['supports'],
array(
'unitone' => array_merge(
$metadata['supports']['unitone'] ?? array(),
array(
'backgroundClip' => true,
)
),
)
);
return $metadata;
}
add_filter( 'block_type_metadata', 'add_background_clip_support' );
コメントを残す