Merge pull request #2573 from Automattic/update/seedlet-file-block

Update/seedlet file block

seedlet/assets/css/style-editor.css

@@ -317,6 +317,45 @@ a {
 	cursor: pointer;
 }
 
+.wp-block-search .wp-block-search__button, .wp-block-a8c-blog-posts + .button {
+	line-height: var(--button--line-height);
+	color: var(--button--color-text);
+	cursor: pointer;
+	font-weight: var(--button--font-weight);
+	font-family: var(--button--font-family);
+	font-size: var(--button--font-size);
+	background-color: var(--button--color-background);
+	border-radius: var(--button--border-radius);
+	border-width: 0;
+	text-decoration: none;
+	padding: var(--button--padding-vertical) var(--button--padding-horizontal);
+}
+
+.wp-block-search .wp-block-search__button:before, .wp-block-a8c-blog-posts + .button:before, .wp-block-search .wp-block-search__button:after, .wp-block-a8c-blog-posts + .button:after {
+	content: '';
+	display: block;
+	height: 0;
+	width: 0;
+}
+
+.wp-block-search .wp-block-search__button:before, .wp-block-a8c-blog-posts + .button:before {
+	margin-bottom: -calc(.5em * var(--button--line-height) + -.38);
+}
+
+.wp-block-search .wp-block-search__button:after, .wp-block-a8c-blog-posts + .button:after {
+	margin-top: -calc(.5em * var(--button--line-height) + -.39);
+}
+
+.wp-block-search .wp-block-search__button:active, .wp-block-a8c-blog-posts + .button:active {
+	color: var(--button--color-text-active);
+	background-color: var(--button--color-background-active);
+}
+
+.wp-block-search .wp-block-search__button:hover, .wp-block-a8c-blog-posts + .button:hover, .wp-block-search .wp-block-search__button:focus, .wp-block-a8c-blog-posts + .button:focus, .wp-block-search .has-focus.wp-block-search__button, .wp-block-a8c-blog-posts + .has-focus.button {
+	color: var(--button--color-text-hover);
+	background-color: var(--button--color-background-hover);
+}
+
 body {
 	--wp--typography--line-height: var(--global--line-height-body);
 	color: var(--global--color-foreground);
@@ -546,22 +585,55 @@ div[data-type="core/button"] {
 }
 
 .wp-block-file .wp-block-file__textlink {
-	border-bottom: 1px solid var(--global--color-secondary);
 	color: var(--global--color-primary);
-	text-decoration: none;
+	text-decoration: underline;
+	text-decoration-thickness: 1px;
+	text-underline-offset: 3px;
+	text-decoration-color: var(--global--color-secondary);
+}
+
+.wp-block-file .wp-block-file__button-richtext-wrapper {
+	display: block;
+	margin-left: 0;
 }
 
 .wp-block-file .wp-block-file__button {
+	line-height: var(--button--line-height);
 	color: var(--button--color-text);
+	cursor: pointer;
 	font-weight: var(--button--font-weight);
 	font-family: var(--button--font-family);
 	font-size: var(--button--font-size);
-	line-height: var(--button--line-height);
 	background-color: var(--button--color-background);
 	border-radius: var(--button--border-radius);
+	border-width: 0;
+	text-decoration: none;
+	padding: var(--button--padding-vertical) var(--button--padding-horizontal);
+	display: inline-block;
+	margin: calc( 0.5 * var(--global--spacing-unit)) 0 0 0;
 	padding: calc(0.5 * var(--button--padding-vertical)) calc(0.5 * var(--button--padding-horizontal));
 }
 
+.wp-block-file .wp-block-file__button:before, .wp-block-file .wp-block-file__button:after {
+	content: '';
+	display: block;
+	height: 0;
+	width: 0;
+}
+
+.wp-block-file .wp-block-file__button:before {
+	margin-bottom: -calc(.5em * var(--button--line-height) + -.38);
+}
+
+.wp-block-file .wp-block-file__button:after {
+	margin-top: -calc(.5em * var(--button--line-height) + -.39);
+}
+
+.wp-block-file .wp-block-file__button:active {
+	color: var(--button--color-text-active);
+	background-color: var(--button--color-background-active);
+}
+
 .wp-block-file .wp-block-file__button:hover, .wp-block-file .wp-block-file__button:focus, .wp-block-file .wp-block-file__button.has-focus {
 	color: var(--button--color-text-hover);
 	background-color: var(--button--color-background-hover);

seedlet/assets/sass/base/_editor.scss

@@ -1,5 +1,6 @@
 @import '../structure/responsive-logic';
-@import '../base/base';
+@import 'base';
+@import 'extends';
 
 body {
 	--wp--typography--line-height: var(--global--line-height-body);

seedlet/assets/sass/base/_extends.scss

@@ -1,8 +1,4 @@
-// Button Placeholder style
-// - Since buttons appear in various blocks,
-//   let’s use a placeholder to keep them all
-//   in-sync
-%button-style {
+@mixin button-style {
 	@include crop-text(var(--button--line-height));
 	color: var(--button--color-text);
 	cursor: pointer;
@@ -28,6 +24,14 @@
 	}
 }
 
+// Button Placeholder style
+// - Since buttons appear in various blocks,
+//   let’s use a placeholder to keep them all
+//   in-sync
+%button-style {
+	@include button-style;
+}
+
 // Onsale Placeholder style
 // - Since buttons appear in various blocks,
 //   let’s use a placeholder to keep them all

seedlet/assets/sass/blocks/file/_editor.scss

@@ -1,26 +1,23 @@
 .wp-block-file {
-
 	.wp-block-file__textlink {
-		border-bottom: 1px solid var(--global--color-secondary);
 		color: var(--global--color-primary);
-		text-decoration: none;
+		text-decoration: underline; 
+		text-decoration-thickness: 1px; // Not yet supported in Chrome
+		text-underline-offset: 3px;  // Not yet supported in Chrome
+		text-decoration-color: var(--global--color-secondary);
+	}
+
+	.wp-block-file__button-richtext-wrapper {
+		display: block;
+		margin-left: 0;
 	}
 
 	.wp-block-file__button {
-		color: var(--button--color-text);
-		font-weight: var(--button--font-weight);
-		font-family: var(--button--font-family);
-		font-size: var(--button--font-size);
-		line-height: var(--button--line-height);
-		background-color: var(--button--color-background);
-		border-radius: var(--button--border-radius);
-		padding: calc(0.5 * var(--button--padding-vertical)) calc(0.5 * var(--button--padding-horizontal));
+		// Extend button style
+		@include button-style;
 
-		&:hover,
-		&:focus,
-		&.has-focus {
-			color: var(--button--color-text-hover);
-			background-color: var(--button--color-background-hover);
-		}
+		display: inline-block;
+		margin: calc( 0.5 * var(--global--spacing-unit) ) 0 0 0;
+		padding: calc(0.5 * var(--button--padding-vertical)) calc(0.5 * var(--button--padding-horizontal));
 	}
 }

seedlet/assets/sass/blocks/file/_style.scss

@@ -1,5 +1,4 @@
 .wp-block-file {
-
 	// Undo Gutenberg hover defaults
 	a.wp-block-file__button:active,
 	a.wp-block-file__button:focus,
@@ -9,10 +8,17 @@
 		opacity: inherit;
 	}
 
+	a:after {
+		content: '';
+		display: block;
+	}
+
 	.wp-block-file__button {
 		// Extend button style
-		@extend %button-style;
+		@include button-style;
+
 		display: inline-block;
+		margin: calc( 0.5 * var(--global--spacing-unit) ) 0 0 0;
 		padding: calc(0.5 * var(--button--padding-vertical)) calc(0.5 * var(--button--padding-horizontal));
 	}
 }

seedlet/style-rtl.css

@@ -569,7 +569,7 @@ body {
 button,
 .button,
 input[type="submit"],
-.wp-block-button__link, .wp-block-file .wp-block-file__button, .a8c-posts-list__view-all, button[data-load-more-btn] {
+.wp-block-button__link, .a8c-posts-list__view-all, button[data-load-more-btn] {
 	line-height: var(--button--line-height);
 	color: var(--button--color-text);
 	cursor: pointer;
@@ -586,10 +586,10 @@ input[type="submit"],
 button:before,
 .button:before,
 input[type="submit"]:before,
-.wp-block-button__link:before, .wp-block-file .wp-block-file__button:before, .a8c-posts-list__view-all:before, button[data-load-more-btn]:before, button:after,
+.wp-block-button__link:before, .a8c-posts-list__view-all:before, button[data-load-more-btn]:before, button:after,
 .button:after,
 input[type="submit"]:after,
-.wp-block-button__link:after, .wp-block-file .wp-block-file__button:after, .a8c-posts-list__view-all:after, button[data-load-more-btn]:after {
+.wp-block-button__link:after, .a8c-posts-list__view-all:after, button[data-load-more-btn]:after {
 	content: '';
 	display: block;
 	height: 0;
@@ -599,21 +599,21 @@ input[type="submit"]:after,
 button:before,
 .button:before,
 input[type="submit"]:before,
-.wp-block-button__link:before, .wp-block-file .wp-block-file__button:before, .a8c-posts-list__view-all:before, button[data-load-more-btn]:before {
+.wp-block-button__link:before, .a8c-posts-list__view-all:before, button[data-load-more-btn]:before {
 	margin-bottom: -calc(.5em * var(--button--line-height) + -.38);
 }
 
 button:after,
 .button:after,
 input[type="submit"]:after,
-.wp-block-button__link:after, .wp-block-file .wp-block-file__button:after, .a8c-posts-list__view-all:after, button[data-load-more-btn]:after {
+.wp-block-button__link:after, .a8c-posts-list__view-all:after, button[data-load-more-btn]:after {
 	margin-top: -calc(.5em * var(--button--line-height) + -.39);
 }
 
 button:active,
 .button:active,
 input:active[type="submit"],
-.wp-block-button__link:active, .wp-block-file .wp-block-file__button:active, .a8c-posts-list__view-all:active {
+.wp-block-button__link:active, .a8c-posts-list__view-all:active {
 	color: var(--button--color-text-active);
 	background-color: var(--button--color-background-active);
 }
@@ -621,13 +621,13 @@ input:active[type="submit"],
 button:hover,
 .button:hover,
 input:hover[type="submit"],
-.wp-block-button__link:hover, .wp-block-file .wp-block-file__button:hover, .a8c-posts-list__view-all:hover, button:focus,
+.wp-block-button__link:hover, .a8c-posts-list__view-all:hover, button:focus,
 .button:focus,
 input:focus[type="submit"],
-.wp-block-button__link:focus, .wp-block-file .wp-block-file__button:focus, .a8c-posts-list__view-all:focus, button.has-focus,
+.wp-block-button__link:focus, .a8c-posts-list__view-all:focus, button.has-focus,
 .has-focus.button,
 input.has-focus[type="submit"],
-.has-focus.wp-block-button__link, .wp-block-file .has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all {
+.has-focus.wp-block-button__link, .has-focus.a8c-posts-list__view-all {
 	color: var(--button--color-text-hover);
 	background-color: var(--button--color-background-hover);
 }
@@ -1465,11 +1465,53 @@ object {
 	opacity: inherit;
 }
 
+.wp-block-file a:after {
+	content: '';
+	display: block;
+}
+
 .wp-block-file .wp-block-file__button {
+	line-height: var(--button--line-height);
+	color: var(--button--color-text);
+	cursor: pointer;
+	font-weight: var(--button--font-weight);
+	font-family: var(--button--font-family);
+	font-size: var(--button--font-size);
+	background-color: var(--button--color-background);
+	border-radius: var(--button--border-radius);
+	border-width: 0;
+	text-decoration: none;
+	padding: var(--button--padding-vertical) var(--button--padding-horizontal);
 	display: inline-block;
+	margin: calc( 0.5 * var(--global--spacing-unit)) 0 0 0;
 	padding: calc(0.5 * var(--button--padding-vertical)) calc(0.5 * var(--button--padding-horizontal));
 }
 
+.wp-block-file .wp-block-file__button:before, .wp-block-file .wp-block-file__button:after {
+	content: '';
+	display: block;
+	height: 0;
+	width: 0;
+}
+
+.wp-block-file .wp-block-file__button:before {
+	margin-bottom: -calc(.5em * var(--button--line-height) + -.38);
+}
+
+.wp-block-file .wp-block-file__button:after {
+	margin-top: -calc(.5em * var(--button--line-height) + -.39);
+}
+
+.wp-block-file .wp-block-file__button:active {
+	color: var(--button--color-text-active);
+	background-color: var(--button--color-background-active);
+}
+
+.wp-block-file .wp-block-file__button:hover, .wp-block-file .wp-block-file__button:focus, .wp-block-file .wp-block-file__button.has-focus {
+	color: var(--button--color-text-hover);
+	background-color: var(--button--color-background-hover);
+}
+
 .wp-block-gallery {
 	margin: 0 auto;
 }
@@ -3951,7 +3993,7 @@ img#wpstats {
 button,
 .button,
 input[type="submit"],
-.wp-block-button__link, .wp-block-file .wp-block-file__button, .a8c-posts-list__view-all, button[data-load-more-btn] {
+.wp-block-button__link, .a8c-posts-list__view-all, button[data-load-more-btn] {
 	line-height: var(--button--line-height);
 	color: var(--button--color-text);
 	cursor: pointer;
@@ -3968,10 +4010,10 @@ input[type="submit"],
 button:before,
 .button:before,
 input[type="submit"]:before,
-.wp-block-button__link:before, .wp-block-file .wp-block-file__button:before, .a8c-posts-list__view-all:before, button[data-load-more-btn]:before, button:after,
+.wp-block-button__link:before, .a8c-posts-list__view-all:before, button[data-load-more-btn]:before, button:after,
 .button:after,
 input[type="submit"]:after,
-.wp-block-button__link:after, .wp-block-file .wp-block-file__button:after, .a8c-posts-list__view-all:after, button[data-load-more-btn]:after {
+.wp-block-button__link:after, .a8c-posts-list__view-all:after, button[data-load-more-btn]:after {
 	content: '';
 	display: block;
 	height: 0;
@@ -3981,21 +4023,21 @@ input[type="submit"]:after,
 button:before,
 .button:before,
 input[type="submit"]:before,
-.wp-block-button__link:before, .wp-block-file .wp-block-file__button:before, .a8c-posts-list__view-all:before, button[data-load-more-btn]:before {
+.wp-block-button__link:before, .a8c-posts-list__view-all:before, button[data-load-more-btn]:before {
 	margin-bottom: -calc(.5em * var(--button--line-height) + -.38);
 }
 
 button:after,
 .button:after,
 input[type="submit"]:after,
-.wp-block-button__link:after, .wp-block-file .wp-block-file__button:after, .a8c-posts-list__view-all:after, button[data-load-more-btn]:after {
+.wp-block-button__link:after, .a8c-posts-list__view-all:after, button[data-load-more-btn]:after {
 	margin-top: -calc(.5em * var(--button--line-height) + -.39);
 }
 
 button:active,
 .button:active,
 input:active[type="submit"],
-.wp-block-button__link:active, .wp-block-file .wp-block-file__button:active, .a8c-posts-list__view-all:active {
+.wp-block-button__link:active, .a8c-posts-list__view-all:active {
 	color: var(--button--color-text-active);
 	background-color: var(--button--color-background-active);
 }
@@ -4003,13 +4045,13 @@ input:active[type="submit"],
 button:hover,
 .button:hover,
 input:hover[type="submit"],
-.wp-block-button__link:hover, .wp-block-file .wp-block-file__button:hover, .a8c-posts-list__view-all:hover, button:focus,
+.wp-block-button__link:hover, .a8c-posts-list__view-all:hover, button:focus,
 .button:focus,
 input:focus[type="submit"],
-.wp-block-button__link:focus, .wp-block-file .wp-block-file__button:focus, .a8c-posts-list__view-all:focus, button.has-focus,
+.wp-block-button__link:focus, .a8c-posts-list__view-all:focus, button.has-focus,
 .has-focus.button,
 input.has-focus[type="submit"],
-.has-focus.wp-block-button__link, .wp-block-file .has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all {
+.has-focus.wp-block-button__link, .has-focus.a8c-posts-list__view-all {
 	color: var(--button--color-text-hover);
 	background-color: var(--button--color-background-hover);
 }

seedlet/style.css

@@ -569,7 +569,7 @@ body {
 button,
 .button,
 input[type="submit"],
-.wp-block-button__link, .wp-block-file .wp-block-file__button, .a8c-posts-list__view-all, button[data-load-more-btn] {
+.wp-block-button__link, .a8c-posts-list__view-all, button[data-load-more-btn] {
 	line-height: var(--button--line-height);
 	color: var(--button--color-text);
 	cursor: pointer;
@@ -586,10 +586,10 @@ input[type="submit"],
 button:before,
 .button:before,
 input[type="submit"]:before,
-.wp-block-button__link:before, .wp-block-file .wp-block-file__button:before, .a8c-posts-list__view-all:before, button[data-load-more-btn]:before, button:after,
+.wp-block-button__link:before, .a8c-posts-list__view-all:before, button[data-load-more-btn]:before, button:after,
 .button:after,
 input[type="submit"]:after,
-.wp-block-button__link:after, .wp-block-file .wp-block-file__button:after, .a8c-posts-list__view-all:after, button[data-load-more-btn]:after {
+.wp-block-button__link:after, .a8c-posts-list__view-all:after, button[data-load-more-btn]:after {
 	content: '';
 	display: block;
 	height: 0;
@@ -599,21 +599,21 @@ input[type="submit"]:after,
 button:before,
 .button:before,
 input[type="submit"]:before,
-.wp-block-button__link:before, .wp-block-file .wp-block-file__button:before, .a8c-posts-list__view-all:before, button[data-load-more-btn]:before {
+.wp-block-button__link:before, .a8c-posts-list__view-all:before, button[data-load-more-btn]:before {
 	margin-bottom: -calc(.5em * var(--button--line-height) + -.38);
 }
 
 button:after,
 .button:after,
 input[type="submit"]:after,
-.wp-block-button__link:after, .wp-block-file .wp-block-file__button:after, .a8c-posts-list__view-all:after, button[data-load-more-btn]:after {
+.wp-block-button__link:after, .a8c-posts-list__view-all:after, button[data-load-more-btn]:after {
 	margin-top: -calc(.5em * var(--button--line-height) + -.39);
 }
 
 button:active,
 .button:active,
 input:active[type="submit"],
-.wp-block-button__link:active, .wp-block-file .wp-block-file__button:active, .a8c-posts-list__view-all:active {
+.wp-block-button__link:active, .a8c-posts-list__view-all:active {
 	color: var(--button--color-text-active);
 	background-color: var(--button--color-background-active);
 }
@@ -621,13 +621,13 @@ input:active[type="submit"],
 button:hover,
 .button:hover,
 input:hover[type="submit"],
-.wp-block-button__link:hover, .wp-block-file .wp-block-file__button:hover, .a8c-posts-list__view-all:hover, button:focus,
+.wp-block-button__link:hover, .a8c-posts-list__view-all:hover, button:focus,
 .button:focus,
 input:focus[type="submit"],
-.wp-block-button__link:focus, .wp-block-file .wp-block-file__button:focus, .a8c-posts-list__view-all:focus, button.has-focus,
+.wp-block-button__link:focus, .a8c-posts-list__view-all:focus, button.has-focus,
 .has-focus.button,
 input.has-focus[type="submit"],
-.has-focus.wp-block-button__link, .wp-block-file .has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all {
+.has-focus.wp-block-button__link, .has-focus.a8c-posts-list__view-all {
 	color: var(--button--color-text-hover);
 	background-color: var(--button--color-background-hover);
 }
@@ -1465,11 +1465,53 @@ object {
 	opacity: inherit;
 }
 
+.wp-block-file a:after {
+	content: '';
+	display: block;
+}
+
 .wp-block-file .wp-block-file__button {
+	line-height: var(--button--line-height);
+	color: var(--button--color-text);
+	cursor: pointer;
+	font-weight: var(--button--font-weight);
+	font-family: var(--button--font-family);
+	font-size: var(--button--font-size);
+	background-color: var(--button--color-background);
+	border-radius: var(--button--border-radius);
+	border-width: 0;
+	text-decoration: none;
+	padding: var(--button--padding-vertical) var(--button--padding-horizontal);
 	display: inline-block;
+	margin: calc( 0.5 * var(--global--spacing-unit)) 0 0 0;
 	padding: calc(0.5 * var(--button--padding-vertical)) calc(0.5 * var(--button--padding-horizontal));
 }
 
+.wp-block-file .wp-block-file__button:before, .wp-block-file .wp-block-file__button:after {
+	content: '';
+	display: block;
+	height: 0;
+	width: 0;
+}
+
+.wp-block-file .wp-block-file__button:before {
+	margin-bottom: -calc(.5em * var(--button--line-height) + -.38);
+}
+
+.wp-block-file .wp-block-file__button:after {
+	margin-top: -calc(.5em * var(--button--line-height) + -.39);
+}
+
+.wp-block-file .wp-block-file__button:active {
+	color: var(--button--color-text-active);
+	background-color: var(--button--color-background-active);
+}
+
+.wp-block-file .wp-block-file__button:hover, .wp-block-file .wp-block-file__button:focus, .wp-block-file .wp-block-file__button.has-focus {
+	color: var(--button--color-text-hover);
+	background-color: var(--button--color-background-hover);
+}
+
 .wp-block-gallery {
 	margin: 0 auto;
 }
@@ -3972,7 +4014,7 @@ img#wpstats {
 button,
 .button,
 input[type="submit"],
-.wp-block-button__link, .wp-block-file .wp-block-file__button, .a8c-posts-list__view-all, button[data-load-more-btn] {
+.wp-block-button__link, .a8c-posts-list__view-all, button[data-load-more-btn] {
 	line-height: var(--button--line-height);
 	color: var(--button--color-text);
 	cursor: pointer;
@@ -3989,10 +4031,10 @@ input[type="submit"],
 button:before,
 .button:before,
 input[type="submit"]:before,
-.wp-block-button__link:before, .wp-block-file .wp-block-file__button:before, .a8c-posts-list__view-all:before, button[data-load-more-btn]:before, button:after,
+.wp-block-button__link:before, .a8c-posts-list__view-all:before, button[data-load-more-btn]:before, button:after,
 .button:after,
 input[type="submit"]:after,
-.wp-block-button__link:after, .wp-block-file .wp-block-file__button:after, .a8c-posts-list__view-all:after, button[data-load-more-btn]:after {
+.wp-block-button__link:after, .a8c-posts-list__view-all:after, button[data-load-more-btn]:after {
 	content: '';
 	display: block;
 	height: 0;
@@ -4002,21 +4044,21 @@ input[type="submit"]:after,
 button:before,
 .button:before,
 input[type="submit"]:before,
-.wp-block-button__link:before, .wp-block-file .wp-block-file__button:before, .a8c-posts-list__view-all:before, button[data-load-more-btn]:before {
+.wp-block-button__link:before, .a8c-posts-list__view-all:before, button[data-load-more-btn]:before {
 	margin-bottom: -calc(.5em * var(--button--line-height) + -.38);
 }
 
 button:after,
 .button:after,
 input[type="submit"]:after,
-.wp-block-button__link:after, .wp-block-file .wp-block-file__button:after, .a8c-posts-list__view-all:after, button[data-load-more-btn]:after {
+.wp-block-button__link:after, .a8c-posts-list__view-all:after, button[data-load-more-btn]:after {
 	margin-top: -calc(.5em * var(--button--line-height) + -.39);
 }
 
 button:active,
 .button:active,
 input:active[type="submit"],
-.wp-block-button__link:active, .wp-block-file .wp-block-file__button:active, .a8c-posts-list__view-all:active {
+.wp-block-button__link:active, .a8c-posts-list__view-all:active {
 	color: var(--button--color-text-active);
 	background-color: var(--button--color-background-active);
 }
@@ -4024,13 +4066,13 @@ input:active[type="submit"],
 button:hover,
 .button:hover,
 input:hover[type="submit"],
-.wp-block-button__link:hover, .wp-block-file .wp-block-file__button:hover, .a8c-posts-list__view-all:hover, button:focus,
+.wp-block-button__link:hover, .a8c-posts-list__view-all:hover, button:focus,
 .button:focus,
 input:focus[type="submit"],
-.wp-block-button__link:focus, .wp-block-file .wp-block-file__button:focus, .a8c-posts-list__view-all:focus, button.has-focus,
+.wp-block-button__link:focus, .a8c-posts-list__view-all:focus, button.has-focus,
 .has-focus.button,
 input.has-focus[type="submit"],
-.has-focus.wp-block-button__link, .wp-block-file .has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all {
+.has-focus.wp-block-button__link, .has-focus.a8c-posts-list__view-all {
 	color: var(--button--color-text-hover);
 	background-color: var(--button--color-background-hover);
 }