Vetro: more design adjustments and fixes (#6848)

* Make align wide the pattern.

* Fix comments section top border width.

* Add button states.

* Fix border color.

* Fix spacing on post excerpt.

vetro/patterns/about.php

@@ -6,17 +6,17 @@
  */
 ?>
 
-<!-- wp:group {"align":"full","layout":{"type":"constrained"}} -->
-<div class="wp-block-group alignfull"><!-- wp:heading {"textAlign":"left","level":1,"style":{"typography":{"lineHeight":"1.1","fontStyle":"normal","fontWeight":"600","letterSpacing":"-3px","fontSize":"4rem"},"spacing":{"padding":{"top":"0px","bottom":"0px"},"margin":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}}} -->
-<h1 class="wp-block-heading has-text-align-left" style="margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;padding-top:0px;padding-bottom:0px;font-size:4rem;font-style:normal;font-weight:600;letter-spacing:-3px;line-height:1.1"><?php echo esc_html__( 'United Architects Collab is a studio focused on sustainable design, interiors and landscapes.', 'vetro' ); ?></h1>
+<!-- wp:group {"align":"wide","layout":{"type":"constrained"}} -->
+<div class="wp-block-group alignwide"><!-- wp:heading {"textAlign":"left","level":1,"style":{"typography":{"lineHeight":"1.1","fontStyle":"normal","fontWeight":"600","letterSpacing":"-3px","fontSize":"4rem"},"spacing":{"padding":{"top":"0px","bottom":"0px"},"margin":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}}} -->
+<h1 class="wp-block-heading has-text-align-left alignwide" style="margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;padding-top:0px;padding-bottom:0px;font-size:4rem;font-style:normal;font-weight:600;letter-spacing:-3px;line-height:1.1"><?php echo esc_html__( 'United Architects Collab is a studio focused on sustainable design, interiors and landscapes.', 'vetro' ); ?></h1>
 <!-- /wp:heading -->
 
 <!-- wp:spacer {"height":"32px"} -->
 <div style="height:32px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->
 
-<!-- wp:columns -->
-<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
+<!-- wp:columns {"align":"wide"} -->
+<div class="wp-block-columns alignwide"><!-- wp:column {"width":"100%"} -->
 <div class="wp-block-column" style="flex-basis:100%"><!-- wp:group {"align":"full","layout":{"type":"constrained"}} -->
 <div class="wp-block-group alignfull"><!-- wp:paragraph {"style":{"typography":{"fontStyle":"normal","fontWeight":"500","lineHeight":"1.4"}},"fontSize":"small"} -->
 <p class="has-small-font-size" style="font-style:normal;font-weight:500;line-height:1.4"><?php echo esc_html__( 'Working as a full-service firm, UA — C delivers contemporary projects, from our client-oriented creative process to the latest building methodologies and construction techniques applied to building sites. And we are proud to achieve that through close collaboration within team members, consultants, contractors and trades.', 'vetro' ); ?></p>

vetro/style.css

@@ -47,5 +47,17 @@ a:active {
 .wp-block-navigation .wp-block-navigation-item a:hover,
 .wp-block-navigation .wp-block-navigation-item a:focus {
 	text-decoration: underline;
-	text-decoration-style: solid;
+	text-decoration-style: dashed;
+}
+
+/*
+ * Control the hover stylings of outline block style.
+ * Unnecessary once block styles are configurable via theme.json
+ * https://github.com/WordPress/gutenberg/issues/42794
+ */
+.wp-block-button.is-style-outline
+	> .wp-block-button__link:not(.has-background):hover {
+	background-color: var(--wp--preset--color--foreground);
+	color: var(--wp--preset--color--background);
+	border-color: var(--wp--preset--color--foreground);
 }

vetro/styles/neutral.json

@@ -132,7 +132,7 @@
 		"blocks": {
 			"core/button": {
 				"border": {
-					"color": "var(--wp--preset--color--background)",
+					"color": "var(--wp--preset--color--foreground)",
 					"radius": "0",
 					"width": "2px"
 				},

vetro/templates/single.html

@@ -1,9 +1,9 @@
 <!-- wp:template-part {"slug":"header","tagName":"header"} /-->
 
 <!-- wp:group {"tagName":"main","style":{"spacing":{"blockGap":"0px","margin":{"top":"0px","bottom":"0px"}}},"layout":{"type":"constrained"}} -->
-<main class="wp-block-group" style="margin-top:0px;margin-bottom:0px"><!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"},"margin":{"top":"0%","bottom":"0%"},"blockGap":"10px"}},"layout":{"type":"default"}} -->
-<div class="wp-block-group alignwide" style="margin-top:0%;margin-bottom:0%;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px"><!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"0px","right":"25%","bottom":"0px","left":"0px"},"blockGap":"0px","margin":{"top":"0px","bottom":"0px"}}},"layout":{"type":"default"}} -->
-<div class="wp-block-group alignwide" style="margin-top:0px;margin-bottom:0px;padding-top:0px;padding-right:25%;padding-bottom:0px;padding-left:0px"><!-- wp:post-excerpt {"style":{"typography":{"lineHeight":1.4,"fontStyle":"normal","fontWeight":"600"},"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"},"margin":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}},"fontSize":"small"} /--></div>
+<main class="wp-block-group" style="margin-top:0px;margin-bottom:0px"><!-- wp:group {"align":"wide","style":{"spacing":{"blockGap":"10px","margin":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30"}}},"layout":{"type":"default"}} -->
+<div class="wp-block-group alignwide" style="margin-top:var(--wp--preset--spacing--30);margin-bottom:var(--wp--preset--spacing--30)"><!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"right":"25%"},"blockGap":"1rem"}},"layout":{"type":"default"}} -->
+<div class="wp-block-group alignwide" style="padding-right:25%"><!-- wp:post-excerpt {"style":{"typography":{"lineHeight":1.4,"fontStyle":"normal","fontWeight":"600"}},"fontSize":"small"} /--></div>
 <!-- /wp:group -->
 
 <!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"},"blockGap":"10px"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
@@ -55,8 +55,8 @@
 
 <!-- wp:post-featured-image {"align":"full","style":{"spacing":{"margin":{"bottom":"0px","top":"0px"},"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}},"color":{"duotone":["#063559","#dadada"]}}} /-->
 
-<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"0px","right":"25%","bottom":"0px","left":"0px"},"blockGap":"0px","margin":{"top":"0px","bottom":"0px"}},"border":{"top":{"color":"var:preset|color|foreground","width":"1px"}}},"layout":{"type":"default"}} -->
-<div class="wp-block-group alignwide" style="border-top-color:var(--wp--preset--color--foreground);border-top-width:1px;margin-top:0px;margin-bottom:0px;padding-top:0px;padding-right:25%;padding-bottom:0px;padding-left:0px"></div>
+<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"0px","right":"25%","bottom":"0px","left":"0px"},"blockGap":"0px","margin":{"top":"0px","bottom":"0px"}},"border":{"top":{"color":"var:preset|color|foreground","width":"1px"}}},"layout":{"type":"default"}} -->
+<div class="wp-block-group alignfull" style="border-top-color:var(--wp--preset--color--foreground);border-top-width:1px;margin-top:0px;margin-bottom:0px;padding-top:0px;padding-right:25%;padding-bottom:0px;padding-left:0px"></div>
 <!-- /wp:group -->
 
 <!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"60px","right":"25%","bottom":"60px","left":"0px"},"blockGap":"0px","margin":{"top":"0px","bottom":"0px"}}},"layout":{"type":"default"}} -->

vetro/theme.json

@@ -217,6 +217,27 @@
 					"background": "var(--wp--preset--color--background)",
 					"text": "var(--wp--preset--color--foreground)"
 				},
+				":active": {
+					"color": {
+						"background": "var(--wp--preset--color--background)",
+						"text": "var(--wp--preset--color--foreground)"
+					}
+				},
+				":focus": {
+					"color": {
+						"background": "var(--wp--preset--color--background)",
+						"text": "var(--wp--preset--color--foreground)"
+					},
+					"typography": {
+						"textDecoration": "underline"
+					}
+				},
+				":hover": {
+					"color": {
+						"background": "var(--wp--preset--color--background)",
+						"text": "var(--wp--preset--color--foreground)"
+					}
+				},
 				"typography": {
 					"fontFamily": "Inter",
 					"fontSize": "1rem",