Merge pull request #1123 from Automattic/varia_add_posts_list_block_support

Varia: Add posts list block support

varia/sass/blocks/_editor.scss

@@ -14,6 +14,7 @@
 @import "gallery/editor";
 @import "latest-posts/editor";
 @import "media-text/editor";
+@import "posts-list/editor";
 @import "paragraph/editor";
 @import "pullquote/editor";
 @import "quote/editor";

varia/sass/blocks/_imports.scss

@@ -22,6 +22,7 @@
 @import "list/style";
 @import "media-text/style";
 @import "paragraph/style";
+@import "posts-list/style";
 @import "pullquote/style";
 @import "quote/style";
 @import "separator/style";

varia/sass/blocks/button/_style.scss

@@ -1,9 +1,10 @@
-button,
-.button,
-input[type="submit"],
-.wp-block-button__link,
-.wp-block-file__button {
-
+/**
+ * Placeholder button style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+%button-style {
 	@include crop-text(map-deep-get($config-button, "font", "line-height"));
 	color: #{map-deep-get($config-button, "color", "text")};
 	cursor: pointer;
@@ -23,6 +24,15 @@ input[type="submit"],
 	}
 }
 
+button,
+.button,
+input[type="submit"],
+.wp-block-button__link,
+.wp-block-file__button {
+	// Extend button style
+	@extend %button-style;
+}
+
 /**
  * Block Options
  */

varia/sass/blocks/posts-list/_editor.scss

@@ -0,0 +1,3 @@
+.a8c-posts-list {
+	padding-left: 0;
+}

varia/sass/blocks/posts-list/_style.scss

@@ -0,0 +1,73 @@
+.a8c-posts-list__listing {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+
+	&:not(:last-child) {
+		margin-bottom: calc(3 * #{map-deep-get($config-global, "spacing", "vertical")});
+	}
+}
+
+.a8c-posts-list-item__featured span {
+	color: #{map-deep-get($config-global, "color", "background")};
+	background-color: #{map-deep-get($config-global, "color", "primary", "default")};
+	font-family: #{map-deep-get($config-global, "font", "family", "primary")};
+	font-weight: bold;
+	font-size: #{map-deep-get($config-global, "font", "size", "sm")};
+	line-height: 1;
+	padding: calc(0.5 * #{map-deep-get($config-global, "spacing", "unit")}) calc(0.66 * #{map-deep-get($config-global, "spacing", "unit")} );
+}
+
+.a8c-posts-list__item {
+	display: block;
+
+	/* Vertical margins logic between posts */
+	margin-top: calc(3 * #{map-deep-get($config-global, "spacing", "vertical")});
+	margin-bottom: calc(3 * #{map-deep-get($config-global, "spacing", "vertical")});
+
+	&:first-child {
+		margin-top: 0;
+	}
+
+	&:last-child {
+		margin-bottom: 0;
+	}
+
+	.entry > * {
+		/* Vertical margins logic between post details */
+		margin-top: #{map-deep-get($config-global, "spacing", "unit")};
+		margin-bottom: #{map-deep-get($config-global, "spacing", "unit")};
+
+		&:first-child {
+			margin-top: 0;
+		}
+
+		&:last-child {
+			margin-bottom: 0;
+		}
+	}
+
+	.a8c-posts-list-item__meta {
+		color: #{map-deep-get($config-global, "color", "foreground", "light")};
+		font-size: #{map-deep-get($config-global, "font", "size", "sm")};
+
+		a {
+			color: currentColor;
+
+			&:hover,
+			&:active {
+				color: #{map-deep-get($config-global, "color", "primary", "hover")};
+			}
+		}
+	}
+
+	.a8c-posts-list-item__edit-link {
+		margin-left: #{map-deep-get($config-global, "spacing", "unit")};
+	}
+}
+
+.a8c-posts-list__view-all {
+	// Extend button style
+	@extend %button-style;
+	display: inline-block;
+}

varia/style-editor.css

@@ -406,6 +406,10 @@ p.has-background:not(.has-background-background-color) a {
 	color: currentColor;
 }
 
+.a8c-posts-list {
+	padding-left: 0;
+}
+
 .wp-block-pullquote {
 	padding: calc( 3 * 16px) 0;
 	margin-left: 0;

varia/style-rtl.css

@@ -1021,11 +1021,17 @@ object {
 	min-width: 300px;
 }
 
+/**
+ * Placeholder button style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
 button,
 .button,
 input[type="submit"],
 .wp-block-button__link,
-.wp-block-file__button {
+.wp-block-file__button, .a8c-posts-list__view-all {
 	line-height: 1;
 	color: white;
 	cursor: pointer;
@@ -1038,15 +1044,15 @@ input[type="submit"],
 	padding: 16px 16px;
 }
 
-button:before, button:after,
+button:before,
 .button:before,
-.button:after,
 input[type="submit"]:before,
-input[type="submit"]:after,
 .wp-block-button__link:before,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, button:after,
+.button:after,
+input[type="submit"]:after,
 .wp-block-button__link:after,
-.wp-block-file__button:before,
-.wp-block-file__button:after {
+.wp-block-file__button:after, .a8c-posts-list__view-all:after {
 	content: '';
 	display: block;
 	height: 0;
@@ -1057,7 +1063,7 @@ button:before,
 .button:before,
 input[type="submit"]:before,
 .wp-block-button__link:before,
-.wp-block-file__button:before {
+.wp-block-file__button:before, .a8c-posts-list__view-all:before {
 	margin-bottom: -0.12em;
 }
 
@@ -1065,23 +1071,23 @@ button:after,
 .button:after,
 input[type="submit"]:after,
 .wp-block-button__link:after,
-.wp-block-file__button:after {
+.wp-block-file__button:after, .a8c-posts-list__view-all:after {
 	margin-top: -0.11em;
 }
 
-button:hover, button:focus, button.has-focus,
+button:hover,
 .button:hover,
-.button:focus,
-.button.has-focus,
-input[type="submit"]:hover,
-input[type="submit"]:focus,
-input[type="submit"].has-focus,
+input:hover[type="submit"],
 .wp-block-button__link:hover,
+.wp-block-file__button:hover, .a8c-posts-list__view-all:hover, button:focus,
+.button:focus,
+input:focus[type="submit"],
 .wp-block-button__link:focus,
-.wp-block-button__link.has-focus,
-.wp-block-file__button:hover,
-.wp-block-file__button:focus,
-.wp-block-file__button.has-focus {
+.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, button.has-focus,
+.has-focus.button,
+input.has-focus[type="submit"],
+.has-focus.wp-block-button__link,
+.has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all {
 	color: white;
 	background-color: indigo;
 }
@@ -1567,6 +1573,76 @@ p.has-background:not(.has-background-background-color) a {
 	color: currentColor;
 }
 
+.a8c-posts-list__listing {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}
+
+.a8c-posts-list__listing:not(:last-child) {
+	margin-bottom: calc(3 * 32px);
+}
+
+.a8c-posts-list-item__featured span {
+	color: white;
+	background-color: blue;
+	font-family: sans-serif;
+	font-weight: bold;
+	font-size: 0.83333rem;
+	line-height: 1;
+	padding: calc(0.5 * 16px) calc(0.66 * 16px);
+}
+
+.a8c-posts-list__item {
+	display: block;
+	/* Vertical margins logic between posts */
+	margin-top: calc(3 * 32px);
+	margin-bottom: calc(3 * 32px);
+}
+
+.a8c-posts-list__item:first-child {
+	margin-top: 0;
+}
+
+.a8c-posts-list__item:last-child {
+	margin-bottom: 0;
+}
+
+.a8c-posts-list__item .entry > * {
+	/* Vertical margins logic between post details */
+	margin-top: 16px;
+	margin-bottom: 16px;
+}
+
+.a8c-posts-list__item .entry > *:first-child {
+	margin-top: 0;
+}
+
+.a8c-posts-list__item .entry > *:last-child {
+	margin-bottom: 0;
+}
+
+.a8c-posts-list__item .a8c-posts-list-item__meta {
+	color: #767676;
+	font-size: 0.83333rem;
+}
+
+.a8c-posts-list__item .a8c-posts-list-item__meta a {
+	color: currentColor;
+}
+
+.a8c-posts-list__item .a8c-posts-list-item__meta a:hover, .a8c-posts-list__item .a8c-posts-list-item__meta a:active {
+	color: indigo;
+}
+
+.a8c-posts-list__item .a8c-posts-list-item__edit-link {
+	margin-right: 16px;
+}
+
+.a8c-posts-list__view-all {
+	display: inline-block;
+}
+
 .wp-block-pullquote {
 	padding: calc( 3 * 16px) 0;
 	margin-right: 0;

varia/style.css

@@ -1021,11 +1021,17 @@ object {
 	min-width: 300px;
 }
 
+/**
+ * Placeholder button style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
 button,
 .button,
 input[type="submit"],
 .wp-block-button__link,
-.wp-block-file__button {
+.wp-block-file__button, .a8c-posts-list__view-all {
 	line-height: 1;
 	color: white;
 	cursor: pointer;
@@ -1038,15 +1044,15 @@ input[type="submit"],
 	padding: 16px 16px;
 }
 
-button:before, button:after,
+button:before,
 .button:before,
-.button:after,
 input[type="submit"]:before,
-input[type="submit"]:after,
 .wp-block-button__link:before,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, button:after,
+.button:after,
+input[type="submit"]:after,
 .wp-block-button__link:after,
-.wp-block-file__button:before,
-.wp-block-file__button:after {
+.wp-block-file__button:after, .a8c-posts-list__view-all:after {
 	content: '';
 	display: block;
 	height: 0;
@@ -1057,7 +1063,7 @@ button:before,
 .button:before,
 input[type="submit"]:before,
 .wp-block-button__link:before,
-.wp-block-file__button:before {
+.wp-block-file__button:before, .a8c-posts-list__view-all:before {
 	margin-bottom: -0.12em;
 }
 
@@ -1065,23 +1071,23 @@ button:after,
 .button:after,
 input[type="submit"]:after,
 .wp-block-button__link:after,
-.wp-block-file__button:after {
+.wp-block-file__button:after, .a8c-posts-list__view-all:after {
 	margin-top: -0.11em;
 }
 
-button:hover, button:focus, button.has-focus,
+button:hover,
 .button:hover,
-.button:focus,
-.button.has-focus,
-input[type="submit"]:hover,
-input[type="submit"]:focus,
-input[type="submit"].has-focus,
+input:hover[type="submit"],
 .wp-block-button__link:hover,
+.wp-block-file__button:hover, .a8c-posts-list__view-all:hover, button:focus,
+.button:focus,
+input:focus[type="submit"],
 .wp-block-button__link:focus,
-.wp-block-button__link.has-focus,
-.wp-block-file__button:hover,
-.wp-block-file__button:focus,
-.wp-block-file__button.has-focus {
+.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, button.has-focus,
+.has-focus.button,
+input.has-focus[type="submit"],
+.has-focus.wp-block-button__link,
+.has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all {
 	color: white;
 	background-color: indigo;
 }
@@ -1567,6 +1573,76 @@ p.has-background:not(.has-background-background-color) a {
 	color: currentColor;
 }
 
+.a8c-posts-list__listing {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}
+
+.a8c-posts-list__listing:not(:last-child) {
+	margin-bottom: calc(3 * 32px);
+}
+
+.a8c-posts-list-item__featured span {
+	color: white;
+	background-color: blue;
+	font-family: sans-serif;
+	font-weight: bold;
+	font-size: 0.83333rem;
+	line-height: 1;
+	padding: calc(0.5 * 16px) calc(0.66 * 16px);
+}
+
+.a8c-posts-list__item {
+	display: block;
+	/* Vertical margins logic between posts */
+	margin-top: calc(3 * 32px);
+	margin-bottom: calc(3 * 32px);
+}
+
+.a8c-posts-list__item:first-child {
+	margin-top: 0;
+}
+
+.a8c-posts-list__item:last-child {
+	margin-bottom: 0;
+}
+
+.a8c-posts-list__item .entry > * {
+	/* Vertical margins logic between post details */
+	margin-top: 16px;
+	margin-bottom: 16px;
+}
+
+.a8c-posts-list__item .entry > *:first-child {
+	margin-top: 0;
+}
+
+.a8c-posts-list__item .entry > *:last-child {
+	margin-bottom: 0;
+}
+
+.a8c-posts-list__item .a8c-posts-list-item__meta {
+	color: #767676;
+	font-size: 0.83333rem;
+}
+
+.a8c-posts-list__item .a8c-posts-list-item__meta a {
+	color: currentColor;
+}
+
+.a8c-posts-list__item .a8c-posts-list-item__meta a:hover, .a8c-posts-list__item .a8c-posts-list-item__meta a:active {
+	color: indigo;
+}
+
+.a8c-posts-list__item .a8c-posts-list-item__edit-link {
+	margin-left: 16px;
+}
+
+.a8c-posts-list__view-all {
+	display: inline-block;
+}
+
 .wp-block-pullquote {
 	padding: calc( 3 * 16px) 0;
 	margin-left: 0;