Ver código fonte

First draft Posts List Block Support for Varia.

Jeffrey Pearce 6 anos atrás
pai
commit
c4a139a78d

+ 1 - 0
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 "pullquote/editor";
 @import "quote/editor";
 @import "separator/editor";

+ 1 - 0
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";

+ 3 - 0
varia/sass/blocks/posts-list/_editor.scss

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

+ 46 - 0
varia/sass/blocks/posts-list/_style.scss

@@ -0,0 +1,46 @@
+.a8c-posts-list {
+	margin-left: 0;
+	.a8c-posts-list__listing {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+	}
+
+	.a8c-posts-list__item {
+		display: block;
+
+		.a8c-posts-list-item__meta {
+			color: #{map-deep-get($config-global, "color", "foreground", "light")};
+			font-size: #{map-deep-get($config-global, "font", "size", "xs")};
+			line-height: #{map-deep-get($config-global, "font", "line-height", "body")};
+		}
+
+		.a8c-posts-list-item__excerpt {
+			font-size: #{map-deep-get($config-global, "font", "size", "sm")};
+			line-height: #{map-deep-get($config-global, "font", "line-height", "body")};
+			margin: 0;
+		}
+	}
+
+	& > li {
+		/* Vertical margins logic */
+		margin-top: #{map-deep-get($config-global, "spacing", "vertical")};
+		margin-bottom: #{map-deep-get($config-global, "spacing", "vertical")};
+
+		&:first-child {
+			margin-top: 0;
+		}
+
+		&:last-child {
+			margin-bottom: 0;
+		}
+	}
+
+	& > li > a {
+		font-family: #{map-deep-get($config-heading, "font", "family")};
+		font-size: #{map-deep-get($config-heading, "font", "size", "h4")};
+		font-weight: #{map-deep-get($config-heading, "font", "weight")};
+		line-height: #{map-deep-get($config-heading, "font", "line-height", "h4")};
+	}
+		
+}

+ 4 - 0
varia/style-editor.css

@@ -394,6 +394,10 @@ object {
 	color: currentColor;
 }
 
+.a8c-posts-list {
+	padding-left: 0;
+}
+
 .wp-block-pullquote {
 	padding: calc( 3 * 16px) 0;
 	margin-left: 0;

+ 5 - 0
varia/style-rtl.css

@@ -1722,6 +1722,11 @@ hr.is-style-dots:before {
 	padding-right: 0.83333rem;
 }
 
+.wp-block-jetpack-slideshow ul {
+	margin-right: 0;
+	margin-left: 0;
+}
+
 .wp-block-spacer {
 	display: block;
 	margin-bottom: 0;

+ 47 - 0
varia/style.css

@@ -1562,6 +1562,53 @@ p.has-background {
 	padding: 16px 16px;
 }
 
+.a8c-posts-list {
+	margin-left: 0;
+}
+
+.a8c-posts-list .a8c-posts-list__listing {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}
+
+.a8c-posts-list .a8c-posts-list__item {
+	display: block;
+}
+
+.a8c-posts-list .a8c-posts-list__item .a8c-posts-list-item__meta {
+	color: #767676;
+	font-size: 0.69444rem;
+	line-height: 1.78;
+}
+
+.a8c-posts-list .a8c-posts-list__item .a8c-posts-list-item__excerpt {
+	font-size: 0.83333rem;
+	line-height: 1.78;
+	margin: 0;
+}
+
+.a8c-posts-list > li {
+	/* Vertical margins logic */
+	margin-top: 32px;
+	margin-bottom: 32px;
+}
+
+.a8c-posts-list > li:first-child {
+	margin-top: 0;
+}
+
+.a8c-posts-list > li:last-child {
+	margin-bottom: 0;
+}
+
+.a8c-posts-list > li > a {
+	font-family: sans-serif;
+	font-size: 1.728rem;
+	font-weight: bold;
+	line-height: 1.125;
+}
+
 .wp-block-pullquote {
 	padding: calc( 3 * 16px) 0;
 	margin-left: 0;