Update block canvas styles (#6640)

* update link styles

* update typography

* update spacing

* add text underline offset and thickness

block-canvas/parts/footer.html

@@ -1,11 +1 @@
-<!-- wp:group {"layout":{"inherit":true}} -->
+<!-- wp:pattern {"slug":"block-canvas/footer"} /-->
-<div class="wp-block-group">
-	<!-- wp:group {"style":{"spacing":{"padding":{"top":"80px","bottom":"30px"}}}} -->
-	<div class="wp-block-group" style="padding-top:80px;padding-bottom:30px">
-		<!-- wp:paragraph {"align":"center"} -->
-		<p class="has-text-align-center">Proudly Powered by <a href="https://wordpress.org" rel="nofollow">WordPress</a></p>
-		<!-- /wp:paragraph -->
-	</div>
-	<!-- /wp:group -->
-</div>
-<!-- /wp:group -->

block-canvas/parts/header.html

@@ -1,29 +1,22 @@
 <!-- wp:group {"layout":{"inherit":"true"}} -->
 <div class="wp-block-group">
-	<!-- wp:group {"align":"full","layout":{"type":"flex","justifyContent":"space-between"},"style":{"spacing":{"padding":{"bottom":"var(--wp--preset--spacing--50)","top":"var(--wp--preset--spacing--50)"}}}} -->
+	<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"bottom":"var:preset|spacing|60","top":"var:preset|spacing|60","right":"var:preset|spacing|40","left":"var:preset|spacing|40"}}},"layout":{"type":"flex","justifyContent":"space-between"}} -->
-	<div class="wp-block-group alignfull" style="padding-bottom:var(--wp--preset--spacing--50);padding-top:var(--wp--preset--spacing--50)">
+	<div class="wp-block-group alignfull" style="padding-top:var(--wp--preset--spacing--60);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--60);padding-left:var(--wp--preset--spacing--40)"><!-- wp:group {"layout":{"type":"flex"}} -->
+	<div class="wp-block-group"><!-- wp:site-logo {"width":64} /-->
 	
-		<!-- wp:group {"layout":{"type":"flex"}} -->
+	<!-- wp:group {"style":{"spacing":{"blockGap":"0px"}}} -->
-		<div class="wp-block-group">
+	<div class="wp-block-group"><!-- wp:site-title /-->
-			<!-- wp:site-logo {"width":64} /-->
 	
-			<!-- wp:group {"style":{"spacing":{"blockGap":"0px"}}} -->
+	<!-- wp:site-tagline /--></div>
-			<div class="wp-block-group">
+	<!-- /wp:group --></div>
-				<!-- wp:site-title /-->
+	<!-- /wp:group -->
-				<!-- wp:site-tagline /-->
-			</div>
-			<!-- /wp:group -->
-		</div>
-		<!-- /wp:group -->
 	
-		<!-- wp:navigation {"__unstableLocation":"primary","layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right","orientation":"horizontal"},"style":{"spacing":{"margin":{"top":"0"}}}} /-->
+	<!-- wp:navigation {"__unstableLocation":"primary","layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right","orientation":"horizontal"},"style":{"spacing":{"margin":{"top":"0"}}}} /--></div>
-	
-	</div>
 	<!-- /wp:group -->
 
 </div>
 <!-- /wp:group -->
 
-<!-- wp:spacer {"height":"var(--wp--preset--spacing--60)"} -->
+<!-- wp:spacer {"height":"var(--wp--preset--spacing--80)"} -->
-<div style="height:var(--wp--preset--spacing--60)" aria-hidden="true" class="wp-block-spacer"></div>
+<div style="height:var(--wp--preset--spacing--80)" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->

block-canvas/parts/post-meta.html

@@ -2,10 +2,10 @@
 <div class="wp-block-group">
 	<!-- wp:group {"layout":{"type":"flex"}} -->
 	<div class="wp-block-group">
-		<!-- wp:post-author {"showAvatar":false,"showBio":false,"style":{"typography":{"fontSize":"14px"}}} /-->
+		<!-- wp:post-author-name {"isLink":true,"fontSize":"small"} /-->
-		<!-- wp:post-date {"isLink":true,"style":{"typography":{"fontSize":"14px"}}} /-->
+		<!-- wp:post-date {"isLink":true,"fontSize":"small"} /-->
-		<!-- wp:post-terms {"term":"category","style":{"typography":{"fontSize":"14px"}}} /-->
+		<!-- wp:post-terms {"term":"category","fontSize":"small"} /-->
-		<!-- wp:post-terms {"term": "post_tag","style":{"typography":{"fontSize":"14px"}}} /-->
+		<!-- wp:post-terms {"term": "post_tag","fontSize":"small"} /-->
 	</div>
 	<!-- /wp:group -->
 </div>

block-canvas/patterns/footer.php

@@ -0,0 +1,33 @@
+<?php
+/**
+ * Title: Default footer
+ * Slug: block-canvas/footer
+ * Categories: footer
+ * Block Types: core/template-part/footer
+ */
+?>
+
+<!-- wp:spacer {"height":"var(--wp--preset--spacing--80)"} -->
+<div style="height:var(--wp--preset--spacing--80)" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:group {"layout":{"inherit":true}} -->
+<div class="wp-block-group">
+	<!-- wp:group {"style":{"spacing":{"padding":{"top":"var(--wp--preset--spacing--60)","bottom":"var(--wp--preset--spacing--60)"}}}} -->
+	<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60)">
+		<!-- wp:paragraph {"align":"center"} -->
+		<p class="has-text-align-center">
+            <?php
+                /* Translators: WordPress link. */
+                $wordpress_link = '<a href="' . esc_url( __( 'https://wordpress.org', 'block-canvas' ) ) . '" rel="nofollow">WordPress</a>';
+                echo sprintf(
+                    esc_html__( 'Proudly Powered by %1$s', 'block-canvas' ),
+                    $wordpress_link
+                );
+            ?>
+        </p>
+		<!-- /wp:paragraph -->
+	</div>
+	<!-- /wp:group -->
+</div>
+<!-- /wp:group -->

block-canvas/readme.txt

@@ -1,6 +1,6 @@
 === Block Canvas ===
 Contributors: Automattic
-Requires at least: 5.8
+Requires at least: 6.0
 Tested up to: 6.0
 Requires PHP: 5.7
 License: GPLv2 or later

block-canvas/style.css

@@ -4,7 +4,7 @@ Theme URI: https://github.com/Automattic/themes/tree/trunk/block-canvas
 Author: Automattic
 Author URI: https://automattic.com/
 Description: Block Canvas is a simple theme that supports full-site editing. It comes with a set of minimal templates and design settings that can be manipulated through Global Styles. Use it to build something beautiful.
-Requires at least: 5.7
+Requires at least: 6.0
 Tested up to: 6.0
 Requires PHP: 5.7
 Version: 0.0.17
@@ -80,4 +80,12 @@ GNU General Public License for more details.
 .wp-block-table figcaption {
 	font-size: var(--wp--preset--font-size--small);
 	text-align: center;
-}
+}
+
+/*
+ * Link styles
+ */
+a {
+	text-decoration-thickness: .0625em !important;
+	text-underline-offset: .15em
+}

block-canvas/theme.json

@@ -17,7 +17,7 @@
         "color": {
             "palette": [
                 {
-                    "color": "#007cba",
+                    "color": "#000000",
                     "name": "Primary",
                     "slug": "primary"
                 },
@@ -68,8 +68,12 @@
            ],
             "fontSizes": [
                 {
+                    "fluid": {
+                        "min": "0.825rem",
+                        "max": "1.0625rem"
+                    },
                     "name": "Small",
-                    "size": "0.825rem",
+                    "size": "1rem",
                     "slug": "small"
                 },
                 {   
@@ -82,14 +86,18 @@
                     "slug": "medium"
                 },
                 {
-                    "fluid": false,
+                    "fluid": {
+                        "min": "1.75rem",
+                        "max": "2rem"
+                    },
                     "name": "Large",
                     "size": "1.75rem",
                     "slug": "large"
                 },
                 {
                     "fluid": {
-                        "max": "4rem"
+                        "min": "2.5rem",
+                        "max": "3rem"
                     },
                     "name": "Extra Large",
                     "size": "3rem",
@@ -102,8 +110,8 @@
         "blocks": {
             "core/code": {
                 "border": {
-                    "color": "#CCCCCC",
+                    "color": "var(--wp--preset--color--foreground)",
-                    "radius": "0px",
+                    "radius": "0.25rem",
                     "style": "solid",
                     "width": "2px"
                 },
@@ -136,13 +144,7 @@
 			},
 			"core/comment-reply-link": {
 				"typography": {
-					"fontSize": "var(--wp--preset--font-size--small)",
+					"fontSize": "var(--wp--preset--font-size--small)"
-					"textDecoration": "underline"
-				}
-			},
-			"core/comments-title": {
-				"typography": {
-					"fontSize": "var(--wp--preset--font-size--large)"
 				}
 			},
             "core/gallery": {
@@ -159,12 +161,52 @@
                     }
                 }
             },
+            "core/navigation": {
+                "elements": {
+                    "link": {
+                        "typography": {
+                            "textDecoration": "none"
+                        },
+                        ":hover": {
+                            "typography": {
+                                "textDecoration": "underline"
+                            }
+                        }
+                    }
+                }
+            },
+            "core/post-author-name": {
+                "elements": {
+                    "link": {
+                        "typography": {
+                            "textDecoration": "none"
+                        },
+                        ":hover": {
+                            "typography": {
+                                "textDecoration": "underline"
+                            }
+                        }
+                    }
+                }
+            },
             "core/post-date": {
                 "color": {
                     "text": "var(--wp--preset--color--foreground)"
                 },
                 "typography": {
                     "fontSize": "var(--wp--preset--font-size--small)"
+                },
+                "elements": {
+                    "link": {
+                        "typography": {
+                            "textDecoration": "none"
+                        },
+                        ":hover": {
+                            "typography": {
+                                "textDecoration": "underline"
+                            }
+                        }
+                    }
                 }
             },
             "core/post-title": {
@@ -172,10 +214,23 @@
                     "margin": {
                         "bottom": "0"
                     }
+                },
+                "elements": {
+                    "link": {
+                        "typography": {
+                            "textDecoration": "none"
+                        },
+                        ":hover": {
+                            "typography": {
+                                "textDecoration": "underline"
+                            }
+                        }
+                    }
                 }
             },
             "core/pullquote": {
                 "border": {
+                    "color": "var(--wp--preset--color--foreground)",
                     "style": "solid",
                     "width": "1px 0"
                 },
@@ -231,8 +286,19 @@
             "core/site-title": {
                 "typography": {
                     "fontSize": "var(--wp--preset--font-size--medium)",
-                    "fontWeight": "700",
+                    "fontWeight": "700"
-                    "textDecoration": "none"
+                },
+                "elements": {
+                    "link": {
+                        "typography": {
+                            "textDecoration": "none"
+                        },
+                        ":hover": {
+                            "typography": {
+                                "textDecoration": "underline"
+                            }
+                        }
+                    }
                 }
             }
         },
@@ -242,51 +308,68 @@
         },
         "elements": {
             "button": {
-				":hover": {
+				"border": {
+					"radius": "0.25rem"
+				},
+				"color": {
+                    "background": "var(--wp--preset--color--primary)",
+                    "text": "var(--wp--preset--color--background)"
+				},
+                ":hover": {
 					"color": {
 						"background": "var(--wp--preset--color--secondary)",
 						"text": "var(--wp--preset--color--background)"
 					}
 				},
-				"border": {
+                ":active": {
-					"radius": "0"
+                    "color": {
-				},
+                        "background": "var(--wp--preset--color--primary)",
-				"color": {
+                        "text": "var(--wp--preset--color--background)"
-                    "background": "var(--wp--preset--color--primary)",
+                    }
-                    "text": "var(--wp--preset--color--background)"
+                },
-				}
+                ":focus": {
+                    "color": {
+                        "background": "var(--wp--preset--color--primary)",
+                        "text": "var(--wp--preset--color--background)"
+                    },
+                    "outline": {
+						"color": "var(--wp--preset--color--primary)",
+						"offset": "2px",
+						"style": "dotted",
+						"width": "1px"
+					}
+                }
 			},
 			"heading": {
 				"typography": {
 					"fontFamily": "var(--wp--preset--font-family--rubik)",
-					"textTransform": "uppercase",
                     "fontWeight": "400",
                     "lineHeight": "1.125"
 				}
 			},
             "h1": {
                 "typography": {
-                    "fontSize": "3rem"
+                    "fontSize": "var(--wp--preset--font-size--x-large)"
                 }
             },
             "h2": {
                 "typography": {
-                    "fontSize": "var(--wp--preset--font-size--x-large)"
+                    "fontSize": "var(--wp--preset--font-size--large)"
                 }
             },
             "h3": {
                 "typography": {
-                    "fontSize": "var(--wp--preset--font-size--large)"
+                    "fontSize": "clamp(1.5rem, calc(1.5rem + ((1vw - 0.48rem) * 0.4808)), 1.75rem)"
                 }
             },
             "h4": {
                 "typography": {
-                    "fontSize": "var(--wp--preset--font-size--medium)"
+                    "fontSize": "clamp(1.25rem, calc(1.25rem + ((1vw - 0.48rem) * 0.4808)), 1.5rem)"
                 }
             },
             "h5": {
                 "typography": {
-                    "fontSize": "1.125rem"
+                    "fontSize": "var(--wp--preset--font-size--medium)"
                 }
             },
             "h6": {
@@ -297,6 +380,11 @@
             "link": {
                 "color": {
                     "text": "var(--wp--preset--color--primary)"
+                },
+                ":hover": {
+                    "typography": {
+                        "textDecoration": "none"
+                    }
                 }
             }
         },