box shadow

WordPress 6.5 ブロックエディタで、一部のブロックでシャドーのサポートが始まりました。

シャドーをサポートするブロック

• ボタンブロック　wp-block-button
• カラムブロック　wp-block-columns, wp-block-column
• 画像ブロック　　wp-block-image
• アイキャッチ画像ブロック　wp-block-post-featured-image

emulsion テーマでの注意点

スタイルバリエーションで黒背景のデザインを使用している場合、まだ、styles/****.jsonに黒系用の preset値を上書きすることができないため、ご自身で、CSS変数の上書きを行っていただく必要があります。

設定例

サイトエディタの追加CSSに以下を追加すると、影が赤く表示されます。

body{
--wp--preset--shadow--natural: 6px 6px 9px rgba(255, 0, 0, 0.8);
}

関連ページ：block image

例

--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);

--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);

--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);

--wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);

--wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);

emulsin 3.1.3 でモバイルでの表示は、以下のように修正予定です。