Shadow styles in theme.json, Block styles for Group/Image/Quote.

wpengine · May 19, 2023 · 881c696 · 881c696
1 parent e5c8a22
commit 881c696
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 0 deletions.
diff --git a/functions.php b/functions.php
@@ -59,12 +59,24 @@ function frost_register_block_styles() {
 		'core/columns' => array(
 			'columns-reverse' => __( 'Reverse', 'frost' ),
 		),
+		'core/group' => array(
+			'shadow-light' => __( 'Shadow', 'frost' ),
+			'shadow-solid' => __( 'Solid', 'frost' ),
+		),
+		'core/image' => array(
+			'shadow-light' => __( 'Shadow', 'frost' ),
+			'shadow-solid' => __( 'Solid', 'frost' ),
+		),
 		'core/list' => array(
 			'no-disc' => __( 'No Disc', 'frost' ),
 		),
 		'core/navigation-link' => array(
 			'outline' => __( 'Outline', 'frost' ),
 		),
+		'core/quote' => array(
+			'shadow-light' => __( 'Shadow', 'frost' ),
+			'shadow-solid' => __( 'Solid', 'frost' ),
+		),
 		'core/social-links' => array(
 			'outline' => __( 'Outline', 'frost' ),
 		),

diff --git a/style.css b/style.css
@@ -118,6 +118,28 @@ textarea {
 	padding: 5px 8px;
 }
 
+/* Group
+--------------------------------------------- */
+
+.wp-block-group.is-style-shadow-light {
+	box-shadow: var(--wp--preset--shadow--light);
+}
+
+.wp-block-group.is-style-shadow-solid {
+	box-shadow: var(--wp--preset--shadow--shadow);
+}
+
+/* Image
+--------------------------------------------- */
+
+.wp-block-image.is-style-shadow-light img {
+	box-shadow: var(--wp--preset--shadow--light);
+}
+
+.wp-block-image.is-style-shadow-solid img {
+	box-shadow: var(--wp--preset--shadow--solid);
+}
+
 /* List
 --------------------------------------------- */
 
@@ -158,3 +180,14 @@ textarea {
 .wp-block-navigation :where(.wp-block-navigation__submenu-container) a {
 	padding: 2px 10px;
 }
+
+/* Quote
+--------------------------------------------- */
+
+.wp-block-quote.is-style-shadow-light {
+	box-shadow: var(--wp--preset--shadow--light);
+}
+
+.wp-block-quote.is-style-shadow-solid {
+	box-shadow: var(--wp--preset--shadow--solid);
+}
diff --git a/theme.json b/theme.json
@@ -126,6 +126,21 @@
 			"contentSize": "640px",
 			"wideSize": "1200px"
 		},
+		"shadow": {
+			"defaultPresets": false,
+			"presets": [
+				{
+					"name": "Light",
+					"slug": "light",
+					"shadow": "0 0 50px rgb(0 0 0 / 10%);"
+				},
+				{
+					"name": "Solid",
+					"slug": "solid",
+					"shadow": "5px 5px currentColor"
+				}
+			]
+		},
 		"spacing": {
 			"spacingSizes": [
 				{