Merge branch 'master' into enhancement/add-wc-support

alves/sass/style-child-theme.scss

@@ -10,7 +10,7 @@ License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
 Text Domain: alves
-Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, a8c-global-styles
+Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, jetpack-global-styles
 
 This theme, like WordPress, is licensed under the GPL.
 Use it to make something cool, have fun, and share what you've learned with others.

balasana/sass/style-child-theme.scss

@@ -10,7 +10,7 @@ License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
 Text Domain: balasana
-Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, a8c-global-styles
+Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, jetpack-global-styles
 
 This theme, like WordPress, is licensed under the GPL.
 Use it to make something cool, have fun, and share what you've learned with others.

barnsbury/sass/style-child-theme.scss

@@ -10,7 +10,7 @@ License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
 Text Domain: barnsbury
-Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, a8c-global-styles
+Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, jetpack-global-styles
 
 This theme, like WordPress, is licensed under the GPL.
 Use it to make something cool, have fun, and share what you've learned with others.

brompton/sass/style-child-theme.scss

@@ -10,7 +10,7 @@ License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
 Text Domain: brompton
-Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, a8c-global-styles
+Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, jetpack-global-styles
 
 This theme, like WordPress, is licensed under the GPL.
 Use it to make something cool, have fun, and share what you've learned with others.

coutoire/sass/style-child-theme.scss

@@ -10,7 +10,7 @@ License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
 Text Domain: coutoire
-Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, a8c-global-styles
+Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, jetpack-global-styles
 
 This theme, like WordPress, is licensed under the GPL.
 Use it to make something cool, have fun, and share what you've learned with others.

dalston/sass/style-child-theme.scss

@@ -10,7 +10,7 @@ License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
 Text Domain: dalston
-Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, a8c-global-styles
+Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, jetpack-global-styles
 
 This theme, like WordPress, is licensed under the GPL.
 Use it to make something cool, have fun, and share what you've learned with others.

exford/sass/style-child-theme.scss

@@ -10,7 +10,7 @@ License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
 Text Domain: exford
-Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, a8c-global-styles
+Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, jetpack-global-styles
 
 This theme, like WordPress, is licensed under the GPL.
 Use it to make something cool, have fun, and share what you've learned with others.

hever/sass/style-child-theme.scss

@@ -10,7 +10,7 @@ License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
 Text Domain: hever
-Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, a8c-global-styles
+Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, jetpack-global-styles
 
 This theme, like WordPress, is licensed under the GPL.
 Use it to make something cool, have fun, and share what you've learned with others.

leven/sass/style-child-theme.scss

@@ -10,7 +10,7 @@ License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
 Text Domain: leven
-Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, a8c-global-styles
+Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, jetpack-global-styles
 
 This theme, like WordPress, is licensed under the GPL.
 Use it to make something cool, have fun, and share what you've learned with others.

mayland/sass/style-child-theme.scss

@@ -10,7 +10,7 @@ License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
 Text Domain: mayland
-Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, a8c-global-styles
+Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, jetpack-global-styles
 
 This theme, like WordPress, is licensed under the GPL.
 Use it to make something cool, have fun, and share what you've learned with others.

maywood/sass/style-child-theme.scss

@@ -10,7 +10,7 @@ License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
 Text Domain: maywood
-Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, full-site-editing, a8c-global-styles
+Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, full-site-editing, jetpack-global-styles
 
 This theme, like WordPress, is licensed under the GPL.
 Use it to make something cool, have fun, and share what you've learned with others.

morden/sass/style-child-theme.scss

@@ -10,7 +10,7 @@ License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
 Text Domain: morden
-Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, a8c-global-styles
+Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, jetpack-global-styles
 
 This theme, like WordPress, is licensed under the GPL.
 Use it to make something cool, have fun, and share what you've learned with others.

rivington/sass/style-child-theme.scss

@@ -10,7 +10,7 @@ License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
 Text Domain: rivington
-Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, a8c-global-styles
+Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, jetpack-global-styles
 
 This theme, like WordPress, is licensed under the GPL.
 Use it to make something cool, have fun, and share what you've learned with others.

rockfield/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "rockfield",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

rockfield/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rockfield",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "Rockfield",
   "bugs": {
     "url": "https://github.com/Automattic/themes/issues"

rockfield/sass/style-child-theme.scss

@@ -5,12 +5,12 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: Rockfield is a refined theme designed for restaurants and food-related businesses seeking a classic, elegant look.
 Requires at least: WordPress 4.9.6
-Version: 1.2.1
+Version: 1.2.2
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
 Text Domain: rockfield
-Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, a8c-global-styles
+Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, jetpack-global-styles
 
 This theme, like WordPress, is licensed under the GPL.
 Use it to make something cool, have fun, and share what you've learned with others.

rockfield/style-rtl.css

@@ -6,7 +6,7 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: Rockfield is a refined theme designed for restaurants and food-related businesses seeking a classic, elegant look.
 Requires at least: WordPress 4.9.6
-Version: 1.2.1
+Version: 1.2.2
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
@@ -2058,7 +2058,10 @@ table th,
  */
 .aligncenter {
 	clear: both;
+	display: block;
 	float: none;
+	margin-left: auto;
+	margin-right: auto;
 	text-align: center;
 }
 
@@ -3004,36 +3007,43 @@ body:not(.fse-enabled) .footer-menu a {
 	margin-left: calc( $avatar-size + (0.5 * 16px));
 }
 
-@media only screen and (min-width: 560px) {
-	.comment-meta {
-		margin-left: inherit;
-	}
+.comment-meta .comment-author {
+	line-height: 1.125;
+	margin-bottom: 4px;
+	padding-left: 40px;
+  max-width: calc(100% - 48px);
 }
 
 @media only screen and (min-width: 560px) {
 	.comment-meta .comment-author {
 		display: flex;
 		align-items: center;
+		margin-bottom: 0;
+		padding-left: 0;
 	}
 }
 
+.comment-meta .comment-author .fn {
+	word-wrap: break-word;
+	word-break: break-word;
+	hyphens: auto;
+}
+
 .comment-meta .comment-author .avatar {
 	display: block;
 	position: absolute;
 	left: 0;
 }
 
-@media only screen and (min-width: 560px) {
-	.comment-meta .comment-author .avatar {
-		margin-left: 16px;
-		display: inherit;
-		position: inherit;
-		left: inherit;
-	}
-}
-
 .comment-meta .comment-metadata {
 	color: #444444;
+	padding-left: 40px;
+}
+
+@media only screen and (min-width: 560px) {
+	.comment-meta .comment-metadata {
+		padding-left: 0;
+	}
 }
 
 .comment-meta .comment-metadata a {
@@ -3046,10 +3056,29 @@ body:not(.fse-enabled) .footer-menu a {
 
 @media only screen and (min-width: 560px) {
 	.comment-meta {
+		margin-left: inherit;
 		align-items: center;
 		display: flex;
 		justify-content: space-between;
 	}
+	.comment-meta .comment-author {
+		display: flex;
+		align-items: center;
+		max-width: inherit;
+		flex: 0 1 auto;
+	}
+	.comment-meta .comment-author .fn {
+		padding-left: 16px;
+	}
+	.comment-meta .comment-author .avatar {
+		margin-left: 16px;
+		display: inherit;
+		position: inherit;
+		left: inherit;
+	}
+	.comment-meta .comment-metadata {
+		flex: 0 1 auto;
+	}
 }
 
 .comment-metadata,

rockfield/style.css

@@ -6,7 +6,7 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: Rockfield is a refined theme designed for restaurants and food-related businesses seeking a classic, elegant look.
 Requires at least: WordPress 4.9.6
-Version: 1.2.1
+Version: 1.2.2
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
@@ -2061,7 +2061,10 @@ table th,
  */
 .aligncenter {
 	clear: both;
+	display: block;
 	float: none;
+	margin-right: auto;
+	margin-left: auto;
 	text-align: center;
 }
 
@@ -3021,36 +3024,43 @@ body:not(.fse-enabled) .footer-menu a {
 	margin-right: calc( $avatar-size + (0.5 * 16px));
 }
 
-@media only screen and (min-width: 560px) {
-	.comment-meta {
-		margin-right: inherit;
-	}
+.comment-meta .comment-author {
+	line-height: 1.125;
+	margin-bottom: 4px;
+	padding-right: 40px;
+  max-width: calc(100% - 48px);
 }
 
 @media only screen and (min-width: 560px) {
 	.comment-meta .comment-author {
 		display: flex;
 		align-items: center;
+		margin-bottom: 0;
+		padding-right: 0;
 	}
 }
 
+.comment-meta .comment-author .fn {
+	word-wrap: break-word;
+	word-break: break-word;
+	hyphens: auto;
+}
+
 .comment-meta .comment-author .avatar {
 	display: block;
 	position: absolute;
 	right: 0;
 }
 
-@media only screen and (min-width: 560px) {
-	.comment-meta .comment-author .avatar {
-		margin-right: 16px;
-		display: inherit;
-		position: inherit;
-		right: inherit;
-	}
-}
-
 .comment-meta .comment-metadata {
 	color: #444444;
+	padding-right: 40px;
+}
+
+@media only screen and (min-width: 560px) {
+	.comment-meta .comment-metadata {
+		padding-right: 0;
+	}
 }
 
 .comment-meta .comment-metadata a {
@@ -3063,10 +3073,29 @@ body:not(.fse-enabled) .footer-menu a {
 
 @media only screen and (min-width: 560px) {
 	.comment-meta {
+		margin-right: inherit;
 		align-items: center;
 		display: flex;
 		justify-content: space-between;
 	}
+	.comment-meta .comment-author {
+		display: flex;
+		align-items: center;
+		max-width: inherit;
+		flex: 0 1 auto;
+	}
+	.comment-meta .comment-author .fn {
+		padding-right: 16px;
+	}
+	.comment-meta .comment-author .avatar {
+		margin-right: 16px;
+		display: inherit;
+		position: inherit;
+		right: inherit;
+	}
+	.comment-meta .comment-metadata {
+		flex: 0 1 auto;
+	}
 }
 
 .comment-metadata,

shawburn/sass/style-child-theme.scss

@@ -10,7 +10,7 @@ License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
 Text Domain: shawburn
-Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, a8c-global-styles
+Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, jetpack-global-styles
 
 This theme, like WordPress, is licensed under the GPL.
 Use it to make something cool, have fun, and share what you've learned with others.

stow/sass/style-child-theme.scss

@@ -10,7 +10,7 @@ License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
 Text Domain: stow
-Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, a8c-global-styles
+Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, jetpack-global-styles
 
 This theme, like WordPress, is licensed under the GPL.
 Use it to make something cool, have fun, and share what you've learned with others.

stratford/sass/style-child-theme.scss

@@ -10,7 +10,7 @@ License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
 Text Domain: stratford
-Tags: one-column, fixed-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, a8c-global-styles
+Tags: one-column, fixed-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, jetpack-global-styles
 
 This theme, like WordPress, is licensed under the GPL.
 Use it to make something cool, have fun, and share what you've learned with others.

varia/functions.php

@@ -195,9 +195,9 @@ if ( ! function_exists( 'varia_setup' ) ) :
 		// Add support for responsive embedded content.
 		add_theme_support( 'responsive-embeds' );
 
-		// Add support for Global Styles as defined by the a8c plugin.
+		// Add support for Global Styles.
 		add_theme_support(
-			'a8c-global-styles',
+			'jetpack-global-styles',
 			[
 				'enable_theme_default' => true,
 			]

varia/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "varia",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

varia/package.json

@@ -1,6 +1,6 @@
 {
   "name": "varia",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "A variable-based design system for WordPress sites built with Gutenberg.",
   "bugs": {
     "url": "https://github.com/Automattic/themes/issues?q=is%3Aopen+is%3Aissue+label%3Avaria"

varia/readme.txt

@@ -1,6 +1,6 @@
 === Varia ===
 Contributors: the WordPress team
-Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, a8c-global-styles
+Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, jetpack-global-styles
 Requires at least: 4.9.6
 Tested up to: WordPress 5.0
 Stable tag: 1.1.0

varia/sass/child-theme/style-child-theme.scss

@@ -10,7 +10,7 @@ License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
 Text Domain: varia-child-theme
-Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, full-site-editing, a8c-global-styles
+Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, full-site-editing, jetpack-global-styles
 
 This theme, like WordPress, is licensed under the GPL.
 Use it to make something cool, have fun, and share what you've learned with others.

varia/sass/components/comments/_comments.scss

@@ -81,14 +81,11 @@
 
 	margin-right: calc( $avatar-size + (0.5 * #{map-deep-get($config-global, "spacing", "horizontal")}) );
 
-	@include media(mobile) {
-		margin-right: inherit;
-	}
-
 	.comment-author {
 		line-height: #{map-deep-get($config-global, "font", "line-height", "heading")};
 		margin-bottom: #{.25 * map-deep-get($config-global, "spacing", "unit")};
 		padding-right: #{2.5 * map-deep-get($config-global, "spacing", "horizontal")};
+		max-width: calc(100% - #{3 * map-deep-get($config-global, "spacing", "horizontal")});
 
 		@include media(mobile) {
 			display: flex;
@@ -97,17 +94,16 @@
 			padding-right: 0;
 		}
 
+		.fn {
+			word-wrap: break-word;
+			word-break: break-word;
+			hyphens: auto;
+		}
+
 		.avatar {
 			display: block;
 			position: absolute;
 			right: 0;
-
-			@include media(mobile) {
-				margin-right: #{map-deep-get($config-global, "spacing", "horizontal")};
-				display: inherit;
-				position: inherit;
-				right: inherit;
-			}
 		}
 	}
 
@@ -130,9 +126,32 @@
 	}
 
 	@include media(mobile) {
+		margin-right: inherit;
 		align-items: center;
 		display: flex;
 		justify-content: space-between;
+
+		.comment-author {
+			display: flex;
+			align-items: center;
+			max-width: inherit;
+			flex: 0 1 auto;
+
+			.fn {
+				padding-right: #{map-deep-get($config-global, "spacing", "horizontal")};
+			}
+
+			.avatar {
+				margin-right: #{map-deep-get($config-global, "spacing", "horizontal")};
+				display: inherit;
+				position: inherit;
+				right: inherit;
+			}
+		}
+
+		.comment-metadata {
+			flex: 0 1 auto;
+		}
 	}
 }
 

varia/style-rtl.css

@@ -6,11 +6,11 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: A variable-based design system for WordPress sites built with Gutenberg.
 Requires at least: WordPress 4.9.6
-Version: 1.3.0
+Version: 1.3.1
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Text Domain: varia
-Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, full-site-editing, a8c-global-styles
+Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, full-site-editing, jetpack-global-styles
 
 This theme, like WordPress, is licensed under the GPL.
 Use it to make something cool, have fun, and share what you've learned with others.
@@ -3059,16 +3059,11 @@ body:not(.fse-enabled) .footer-menu a {
 	margin-left: calc( $avatar-size + (0.5 * 16px));
 }
 
-@media only screen and (min-width: 560px) {
-	.comment-meta {
-		margin-left: inherit;
-	}
-}
-
 .comment-meta .comment-author {
 	line-height: 1.125;
 	margin-bottom: 4px;
 	padding-left: 40px;
+	max-width: calc(100% - 48px);
 }
 
 @media only screen and (min-width: 560px) {
@@ -3080,21 +3075,18 @@ body:not(.fse-enabled) .footer-menu a {
 	}
 }
 
+.comment-meta .comment-author .fn {
+	word-wrap: break-word;
+	word-break: break-word;
+	hyphens: auto;
+}
+
 .comment-meta .comment-author .avatar {
 	display: block;
 	position: absolute;
 	left: 0;
 }
 
-@media only screen and (min-width: 560px) {
-	.comment-meta .comment-author .avatar {
-		margin-left: 16px;
-		display: inherit;
-		position: inherit;
-		left: inherit;
-	}
-}
-
 .comment-meta .comment-metadata {
 	color: #444444;
 	padding-left: 40px;
@@ -3116,10 +3108,29 @@ body:not(.fse-enabled) .footer-menu a {
 
 @media only screen and (min-width: 560px) {
 	.comment-meta {
+		margin-left: inherit;
 		align-items: center;
 		display: flex;
 		justify-content: space-between;
 	}
+	.comment-meta .comment-author {
+		display: flex;
+		align-items: center;
+		max-width: inherit;
+		flex: 0 1 auto;
+	}
+	.comment-meta .comment-author .fn {
+		padding-left: 16px;
+	}
+	.comment-meta .comment-author .avatar {
+		margin-left: 16px;
+		display: inherit;
+		position: inherit;
+		left: inherit;
+	}
+	.comment-meta .comment-metadata {
+		flex: 0 1 auto;
+	}
 }
 
 .comment-metadata,

varia/style.css

@@ -6,11 +6,11 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: A variable-based design system for WordPress sites built with Gutenberg.
 Requires at least: WordPress 4.9.6
-Version: 1.3.0
+Version: 1.3.1
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Text Domain: varia
-Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, full-site-editing, a8c-global-styles
+Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, full-site-editing, jetpack-global-styles
 
 This theme, like WordPress, is licensed under the GPL.
 Use it to make something cool, have fun, and share what you've learned with others.
@@ -3076,16 +3076,11 @@ body:not(.fse-enabled) .footer-menu a {
 	margin-right: calc( $avatar-size + (0.5 * 16px));
 }
 
-@media only screen and (min-width: 560px) {
-	.comment-meta {
-		margin-right: inherit;
-	}
-}
-
 .comment-meta .comment-author {
 	line-height: 1.125;
 	margin-bottom: 4px;
 	padding-right: 40px;
+	max-width: calc(100% - 48px);
 }
 
 @media only screen and (min-width: 560px) {
@@ -3097,21 +3092,18 @@ body:not(.fse-enabled) .footer-menu a {
 	}
 }
 
+.comment-meta .comment-author .fn {
+	word-wrap: break-word;
+	word-break: break-word;
+	hyphens: auto;
+}
+
 .comment-meta .comment-author .avatar {
 	display: block;
 	position: absolute;
 	right: 0;
 }
 
-@media only screen and (min-width: 560px) {
-	.comment-meta .comment-author .avatar {
-		margin-right: 16px;
-		display: inherit;
-		position: inherit;
-		right: inherit;
-	}
-}
-
 .comment-meta .comment-metadata {
 	color: #444444;
 	padding-right: 40px;
@@ -3133,10 +3125,29 @@ body:not(.fse-enabled) .footer-menu a {
 
 @media only screen and (min-width: 560px) {
 	.comment-meta {
+		margin-right: inherit;
 		align-items: center;
 		display: flex;
 		justify-content: space-between;
 	}
+	.comment-meta .comment-author {
+		display: flex;
+		align-items: center;
+		max-width: inherit;
+		flex: 0 1 auto;
+	}
+	.comment-meta .comment-author .fn {
+		padding-right: 16px;
+	}
+	.comment-meta .comment-author .avatar {
+		margin-right: 16px;
+		display: inherit;
+		position: inherit;
+		right: inherit;
+	}
+	.comment-meta .comment-metadata {
+		flex: 0 1 auto;
+	}
 }
 
 .comment-metadata,

varia/style.scss

@@ -5,11 +5,11 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: A variable-based design system for WordPress sites built with Gutenberg.
 Requires at least: WordPress 4.9.6
-Version: 1.3.0
+Version: 1.3.1
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Text Domain: varia
-Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, full-site-editing, a8c-global-styles
+Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, full-site-editing, jetpack-global-styles
 
 This theme, like WordPress, is licensed under the GPL.
 Use it to make something cool, have fun, and share what you've learned with others.