how to add shadow

This block has encountered an error and cannot be previewed.

Version 17.9.0 

このブロックはエラーが発生したため、プレビューできません。

---

How to add box-shadows with theme.json – Full Site Editing

本来、カバーブロック等には、シャドーは付きませんが　クラスを追加することで好きなブロックに影を追加できます。

シャドーが有効で、デフォルトの配色の場合、以下の5種類のCSS変数を自動生成します

--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);

この変数を利用して、クラスをスタイルシートに記述しておくと、シャドーの設定ボタンは表示こそされませんが、好きなブロックに影を入れることができます。

.is-style-shadow-natural{
    filter: drop-shadow(var(--wp--preset--shadow--natural));
}
.is-style-shadow-deep{
    filter: drop-shadow(var(--wp--preset--shadow--deep));
}
.is-style-shadow-sharp{
    filter: drop-shadow(var(--wp--preset--shadow--sharp));
}
.is-style-shadow-outlined{
    filter: drop-shadow(var(--wp--preset--shadow--outlined));
}
.is-style-shadow-crisp{
    filter: drop-shadow(var(--wp--preset--shadow--crisp));
}

theme.json

{
	"version": 2,
	"settings": {
		"shadow": {
			"presets": [
				{
					"name": "Small",
					"slug": "sm",
					"shadow": "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)"
				},
				{
					"name": "Medium",
					"slug": "md",
					"shadow": "0 4px  10px 0 rgba( 0, 0, 0, 0.3 )"
				},
				{
					"name": "Large",
					"slug": "lg",
					"shadow": "0 8px  15px 0 rgba( 0, 0, 0, 0.3 )"
				}
			]
		}
	}
}

{
    "version": 2,
    "styles": {
        "blocks": {
            "core/image": {
                "shadow": "var( --wp--preset--shadow--lg )"
            }
        }
    }
}