Assembler: Use variation partials and move styles.blocks.variations to styles.variations

assembler/style.css

@@ -15,6 +15,7 @@ Tags: blog, one-column, three-columns, wide-blocks, block-patterns, custom-color
 */
 
 /* Progresive enhancement to reduce widows and orphans. */
+
 h1,
 h2,
 h3,
@@ -29,12 +30,94 @@ p {
 	text-wrap: pretty;
 }
 
-/* Tiny tweak to make sure footers are properly spaced. */
+/* Set default line height for font size presets. */
+
+.has-xx-large-font-size {
+	line-height: 1;
+}
+
+/* Add space between the header and first element, if its a paragraph. */
+
+.entry-content > p:first-child {
+	margin-top: var(--wp--style--root--padding-left);
+}
+
+/* Fields */
+
+label,
+.jetpack-field-label .rich-text.jetpack-field-label__input,
+.wp-block-jetpack-contact-form-container .wp-block-jetpack-contact-form label {
+    display: inline-block;
+    font-size: var(--wp--preset--font-size--small);
+    margin-bottom: 0.25em;
+    font-weight: inherit;
+}
+
+textarea,
+input:not([type=submit]):not([type=checkbox]),
+.wp-block-post-comments-form textarea,
+.wp-block-post-comments-form input:not([type=submit]):not([type=checkbox]),
+.jetpack-contact-form .jetpack-field .jetpack-field__input,
+.jetpack-contact-form .jetpack-field .jetpack-field__textarea {
+    backdrop-filter: saturate(1.075);
+    background-color: transparent;
+    border-color: currentColor;
+    border-style: solid;
+    border-radius: 6px;
+    border-width: 1px;
+    box-shadow: none;
+    box-sizing: border-box;
+    color: currentColor;
+    filter: brightness(1.05);
+    font-size: var(--wp--preset--font-size--small);
+    font-weight: inherit;
+    line-height: 1.5;
+    min-height: 42px;
+    padding: 0.8rem 1rem;
+    width: 100%;
+}
+
+textarea:focus,
+input:not([type=submit]):focus,
+.wp-block-post-comments-form textarea:focus,
+.wp-block-post-comments-form input:not([type=submit]):not([type=checkbox]):focus {
+    outline: 1px solid currentColor;
+}
+
+/* Jetpack Forms: Clean up errors */
+
+.contact-form__error {
+    font-size: 13px;
+}
+
+.contact-form__input-error {
+	font-size: 13px;
+    gap: 8px;
+}
+
+.contact-form__input-error .contact-form__warning-icon {
+    border-width: 0;
+}
+
+/* Jetpack Forms: Animated block style tweaks */
+
+.contact-form .is-style-animated .grunion-field-wrap.grunion-field-select-wrap .animated-label__label label,
+.contact-form .is-style-animated .grunion-field-wrap .grunion-field.has-placeholder ~ .animated-label__label label,
+.contact-form .is-style-animated .grunion-field-wrap .grunion-field:focus ~ .animated-label__label label,
+.contact-form .is-style-animated .grunion-field-wrap .grunion-field:not(:placeholder-shown) ~ .animated-label__label label {
+	opacity: 0.7;
+    font-size: 11px;
+}
+
+
+/* Make sure footers have no margin. */
+
 footer {
 	margin-top: 0 !important;
 }
 
-/* Provide better default color for social links */
+/* Social Links: Better default color. */
+
 .wp-block-social-links.is-style-logos-only li.wp-social-link {
 	color: currentcolor;
 }
@@ -48,17 +131,8 @@ footer {
 	font-size: 20px;
 }
 
-/* Set default line height for font size presets. */
-.has-xx-large-font-size {
-	line-height: 1;
-}
-
-/* Add space between the header and first element, if its a paragraph. */
-.entry-content > p:first-child {
-	margin-top: var(--wp--style--root--padding-left);
-}
-
 /* Move header core/navigation to the right on mobile. */
+
 .order-0 {
 	order: 0;
 }
@@ -98,70 +172,3 @@ footer {
 .overflow-hidden {
 	overflow: hidden;
 }
-
-/* Style Jetpack forms */
-.wp-block-jetpack-contact-form-container {
-	--jetpack--contact-form--input-padding-left: 16px !important;
-}
-
-.wp-block-jetpack-contact-form input,
-.wp-block-jetpack-contact-form textarea {
-	backdrop-filter: saturate(1.1);
-	background-color: transparent;
-	border-color: var(--wp--custom--input--border--color);
-	border-radius: var(--wp--custom--input--border--radius) !important; /* Requires !important to override local variables with theme variables. */
-	border-width: var(--wp--custom--input--border--width) !important;  /* Requires !important to override local variables with theme variables. */
-	filter: brightness(0.975);
-	font-size: inherit;
-	color: inherit;
-	transition: border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.jetpack-contact-form .jetpack-field .jetpack-field__input,
-.jetpack-contact-form .jetpack-field .jetpack-field__textarea {
-	border-color: var(--wp--custom--input--border--color);
-}
-
-.wp-block-jetpack-contact-form input:not(:placeholder-shown),
-.wp-block-jetpack-contact-form textarea:not(:placeholder-shown),
-.wp-block-jetpack-contact-form input:focus,
-.wp-block-jetpack-contact-form textarea:focus {
-	filter: brightness(1);
-	backdrop-filter: saturate(1);
-}
-
-.wp-block-jetpack-contact-form input:focus,
-.wp-block-jetpack-contact-form textarea:focus {
-	border-color: var(--wp--custom--input--focus--border--color);
-}
-
-.contact-form .is-style-animated .grunion-field-wrap:not(.no-label) select,
-.contact-form .is-style-animated .grunion-field-wrap:not(.no-label) > input,
-.contact-form .is-style-animated .grunion-field-wrap:not(.no-label) > textarea {
-	padding-top: var(--field-padding); /* Remove unnecessary padding adjustment from Jetpack. */
-}
-
-.contact-form .is-style-animated .grunion-field-wrap .animated-label__label {
-	font-size: inherit;
-	width: auto;
-	padding: 0 4px;
-	transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), top 0.15s cubic-bezier(0.4, 0, 0.2, 1), font-size 0.15s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.contact-form .is-style-animated .grunion-field-wrap.grunion-field-select-wrap .animated-label__label,
-.contact-form .is-style-animated .grunion-field-wrap .grunion-field.has-placeholder ~ .animated-label__label,
-.contact-form .is-style-animated .grunion-field-wrap .grunion-field:focus ~ .animated-label__label,
-.contact-form .is-style-animated .grunion-field-wrap .grunion-field:not(:placeholder-shown) ~ .animated-label__label {
-	background-color: var(--wp--custom--input--color--background) !important;
-	transform: translateY(-11px) translateX(-4px); /* Moves the label out of the field. */
-}
-
-.contact-form label,
-.wp-block-jetpack-contact-form label,
-.jetpack-field-label .rich-text.jetpack-field-label__input {
-	font-weight: 500;
-}
-
-.contact-form__input-error {
-	font-size: var(--wp--preset--font-size--small);
-}

assembler/styles/block/section-1.json

@@ -0,0 +1,58 @@
+{
+    "$schema": "https://schemas.wp.org/trunk/theme.json",
+    "version": 3,
+    "slug": "section-1",
+    "title": "Style 1",
+    "blockTypes": [
+        "core/group",
+        "core/columns",
+        "core/column"
+    ],
+    "styles": {
+        "color": {
+            "background": "var(--wp--preset--color--theme-2)",
+            "text": "var(--wp--preset--color--theme-5)"
+        },
+        "blocks": {
+            "core/paragraph": {
+                "elements": {
+                    "link": {
+                        "color": {
+                            "text": "var(--wp--preset--color--theme-5)"
+                        }
+                    }
+                }
+            },
+            "core/separator": {
+                "color": {
+                    "background": "var(--wp--preset--color--theme-5)",
+                    "text": "var(--wp--preset--color--theme-5)"
+                }
+            }
+        },
+        "elements": {
+            "button": {
+                "color": {
+                    "background": "var(--wp--preset--color--theme-4)",
+                    "text": "var(--wp--preset--color--theme-1)"
+                },
+                ":hover": {
+                    "color": {
+                        "background": "var(--wp--preset--color--theme-5)",
+                        "text": "var(--wp--preset--color--theme-1)"
+                    }
+                }
+            },
+            "heading": {
+                "color": {
+                    "text": "var(--wp--preset--color--theme-5)"
+                }
+            },
+            "link": {
+                "color": {
+                    "text": "var(--wp--preset--color--theme-5)"
+                }
+            }
+        }
+    }
+}

assembler/styles/block/section-2.json

@@ -0,0 +1,58 @@
+{
+    "$schema": "https://schemas.wp.org/trunk/theme.json",
+    "version": 3,
+    "slug": "section-2",
+    "title": "Style 2",
+    "blockTypes": [
+        "core/group",
+        "core/columns",
+        "core/column"
+    ],
+    "styles": {
+        "color": {
+            "background": "var(--wp--preset--color--theme-4)",
+            "text": "var(--wp--preset--color--theme-3)"
+        },
+        "blocks": {
+            "core/paragraph": {
+                "elements": {
+                    "link": {
+                        "color": {
+                            "text": "var(--wp--preset--color--theme-3)"
+                        }
+                    }
+                }
+            },
+            "core/separator": {
+                "color": {
+                    "background": "var(--wp--preset--color--theme-3)",
+                    "text": "var(--wp--preset--color--theme-3)"
+                }
+            }
+        },
+        "elements": {
+            "button": {
+                "color": {
+                    "background": "var(--wp--preset--color--theme-1)",
+                    "text": "var(--wp--preset--color--theme-5)"
+                },
+                ":hover": {
+                    "color": {
+                        "background": "var(--wp--preset--color--theme-2)",
+                        "text": "var(--wp--preset--color--theme-5)"
+                    }
+                }
+            },
+            "heading": {
+                "color": {
+                    "text": "var(--wp--preset--color--theme-1)"
+                }
+            },
+            "link": {
+                "color": {
+                    "text": "var(--wp--preset--color--theme-3)"
+                }
+            }
+        }
+    }
+}

assembler/styles/block/section-3.json

@@ -0,0 +1,58 @@
+{
+    "$schema": "https://schemas.wp.org/trunk/theme.json",
+    "version": 3,
+    "slug": "section-3",
+    "title": "Style 3",
+    "blockTypes": [
+        "core/group",
+        "core/columns",
+        "core/column"
+    ],
+    "styles": {
+        "color": {
+            "background": "var(--wp--preset--color--theme-5)",
+            "text": "var(--wp--preset--color--theme-3)"
+        },
+        "blocks": {
+            "core/paragraph": {
+                "elements": {
+                    "link": {
+                        "color": {
+                            "text": "var(--wp--preset--color--theme-3)"
+                        }
+                    }
+                }
+            },
+            "core/separator": {
+                "color": {
+                    "background": "var(--wp--preset--color--theme-3)",
+                    "text": "var(--wp--preset--color--theme-3)"
+                }
+            }
+        },
+        "elements": {
+            "button": {
+                "color": {
+                    "background": "var(--wp--preset--color--theme-1)",
+                    "text": "var(--wp--preset--color--theme-5)"
+                },
+                ":hover": {
+                    "color": {
+                        "background": "var(--wp--preset--color--theme-2)",
+                        "text": "var(--wp--preset--color--theme-5)"
+                    }
+                }
+            },
+            "heading": {
+                "color": {
+                    "text": "var(--wp--preset--color--theme-1)"
+                }
+            },
+            "link": {
+                "color": {
+                    "text": "var(--wp--preset--color--theme-3)"
+                }
+            }
+        }
+    }
+}