Merge pull request #2399 from Automattic/seedlet/add/alternating-grid-block-style

Seedlet: Add Alternating Grid block style for the Latest Posts block

seedlet/assets/css/ie.css

@@ -2826,6 +2826,34 @@ img {
 	padding-right: 0;
 }
 
+@media only screen and (min-width: 592px) {
+	.wp-block-latest-posts.is-style-seedlet-alternating-grid {
+		overflow: hidden;
+	}
+	.wp-block-latest-posts.is-style-seedlet-alternating-grid > li {
+		width: calc(50% - 13px);
+		max-width: calc(50% - 13px);
+		text-align: right;
+	}
+	.wp-block-latest-posts.is-style-seedlet-alternating-grid > li:nth-child(2n + 1) {
+		float: right;
+		text-align: left;
+	}
+	.wp-block-latest-posts.is-style-seedlet-alternating-grid.is-grid {
+		display: inherit;
+	}
+	.wp-block-latest-posts.is-style-seedlet-alternating-grid.is-grid > li {
+		margin-top: 30px;
+		margin-right: 0;
+	}
+	.wp-block-latest-posts.is-style-seedlet-alternating-grid.is-grid > li:first-child {
+		margin-top: 0;
+	}
+	.wp-block-latest-posts.is-style-seedlet-alternating-grid.is-grid > li:last-child {
+		margin-bottom: 0;
+	}
+}
+
 .gallery-item {
 	display: inline-block;
 	text-align: center;

seedlet/assets/css/style-editor.css

@@ -914,6 +914,34 @@ div[data-type="core/button"] {
 	line-height: var(--global--line-height-body);
 }
 
+@media only screen and (min-width: 592px) {
+	.wp-block-latest-posts.is-style-seedlet-alternating-grid {
+		overflow: hidden;
+	}
+	.wp-block-latest-posts.is-style-seedlet-alternating-grid > li {
+		width: calc(50% - (0.5 * var(--global--spacing-horizontal)));
+		max-width: calc(50% - (0.5 * var(--global--spacing-horizontal)));
+		text-align: right;
+	}
+	.wp-block-latest-posts.is-style-seedlet-alternating-grid > li:nth-child(2n + 1) {
+		float: right;
+		text-align: left;
+	}
+	.wp-block-latest-posts.is-style-seedlet-alternating-grid.is-grid {
+		display: inherit;
+	}
+	.wp-block-latest-posts.is-style-seedlet-alternating-grid.is-grid > li {
+		margin-top: var(--global--spacing-vertical);
+		margin-right: 0;
+	}
+	.wp-block-latest-posts.is-style-seedlet-alternating-grid.is-grid > li:first-child {
+		margin-top: 0;
+	}
+	.wp-block-latest-posts.is-style-seedlet-alternating-grid.is-grid > li:last-child {
+		margin-bottom: 0;
+	}
+}
+
 .gallery-item {
 	display: inline-block;
 	text-align: center;

seedlet/assets/sass/blocks/latest-posts/_editor.scss

@@ -64,3 +64,40 @@
 		line-height: var(--global--line-height-body);
 	}
 }
+
+@include media(tablet) {
+	.wp-block-latest-posts.is-style-seedlet-alternating-grid {
+
+		// Necessary so that the block boundaries are respected.
+		overflow: hidden;
+		
+		> li {
+			width: calc(50% - (0.5 * var(--global--spacing-horizontal)));
+			max-width: calc(50% - (0.5 * var(--global--spacing-horizontal)));
+			text-align: right;
+
+			&:nth-child(2n + 1) {
+				float: right;
+				text-align: left;
+			}
+		}
+
+
+		&.is-grid {
+			display: inherit;
+
+			> li {
+				margin-top: var(--global--spacing-vertical);
+				margin-right: 0;
+
+				&:first-child {
+					margin-top: 0;
+				}
+
+				&:last-child {
+					margin-bottom: 0;
+				}
+			}
+		}
+	}
+}

seedlet/assets/sass/blocks/latest-posts/_style.scss

@@ -93,3 +93,40 @@
 		}
 	}
 }
+
+@include media(tablet) {
+	.wp-block-latest-posts.is-style-seedlet-alternating-grid {
+
+		// Necessary so that the block boundaries are respected.
+		overflow: hidden;
+		
+		> li {
+			width: calc(50% - (0.5 * var(--global--spacing-horizontal)));
+			max-width: calc(50% - (0.5 * var(--global--spacing-horizontal)));
+			text-align: right;
+
+			&:nth-child(2n + 1) {
+				float: right;
+				text-align: left;
+			}
+		}
+
+
+		&.is-grid {
+			display: inherit;
+
+			> li {
+				margin-top: var(--global--spacing-vertical);
+				margin-right: 0;
+
+				&:first-child {
+					margin-top: 0;
+				}
+
+				&:last-child {
+					margin-bottom: 0;
+				}
+			}
+		}
+	}
+}

seedlet/functions.php

@@ -445,6 +445,11 @@ require get_template_directory() . '/inc/customizer.php';
  */
 require get_template_directory() . '/inc/block-patterns.php';
 
+/**
+ * Block Styles.
+ */
+require get_template_directory() . '/inc/block-styles.php';
+
 /**
  * Load WooCommerce compatibility file.
  */

seedlet/inc/block-patterns.php

@@ -37,4 +37,12 @@ if ( function_exists( 'register_block_pattern' ) ) {
 			'content'	=> "<!-- wp:group {\"align\":\"full\",\"className\":\"is-style-overflow\",\"gradient\":\"stripe\"} -->\n<div class=\"wp-block-group alignfull is-style-overflow has-stripe-gradient-background has-background\"><div class=\"wp-block-group__inner-container\"><!-- wp:columns {\"align\":\"wide\"} -->\n<div class=\"wp-block-columns alignwide\"><!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:image -->\n<figure class=\"wp-block-image\"><img alt=\"\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:image -->\n<figure class=\"wp-block-image\"><img alt=\"\"/></figure>\n<!-- /wp:image --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center\"><!-- wp:image -->\n<figure class=\"wp-block-image\"><img alt=\"\"/></figure>\n<!-- /wp:image --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns --></div></div>\n<!-- /wp:group -->",
 		)
 	);
+	register_block_pattern(
+		'seedlet/latest-posts-alternating-grid',
+		array (
+			'title'		=> __( 'Alternating Grid of Latest Posts', 'seedlet' ),
+			'categories'=> array( 'seedlet' ),
+			'content'	=> "<!-- wp:latest-posts {\"displayPostContent\":true,\"columns\":5,\"className\":\"is-style-seedlet-alternating-grid\"} /-->",
+		)
+	);
 } 

seedlet/inc/block-styles.php

@@ -0,0 +1,26 @@
+<?php
+/**
+ * Seedlet Theme: Block Styles
+ *
+ * @package Seedlet
+ * @since 1.0.0
+ */
+
+if ( function_exists( 'register_block_style' ) ) {
+	function seedlet_register_block_styles() {
+
+		/**
+		 * Register block style
+		 */
+		register_block_style(
+			'core/latest-posts',
+			array(
+				'name'         => 'seedlet-alternating-grid',
+				'label'        => 'Alternating Grid',
+				'style_handle' => 'seedlet-alternating-grid',
+			)
+		);
+	}
+
+	add_action( 'init', 'seedlet_register_block_styles' );
+}

seedlet/style-rtl.css

@@ -1787,6 +1787,34 @@ img {
 	padding-left: 0;
 }
 
+@media only screen and (min-width: 592px) {
+	.wp-block-latest-posts.is-style-seedlet-alternating-grid {
+		overflow: hidden;
+	}
+	.wp-block-latest-posts.is-style-seedlet-alternating-grid > li {
+		width: calc(50% - (0.5 * var(--global--spacing-horizontal)));
+		max-width: calc(50% - (0.5 * var(--global--spacing-horizontal)));
+		text-align: left;
+	}
+	.wp-block-latest-posts.is-style-seedlet-alternating-grid > li:nth-child(2n + 1) {
+		float: left;
+		text-align: right;
+	}
+	.wp-block-latest-posts.is-style-seedlet-alternating-grid.is-grid {
+		display: inherit;
+	}
+	.wp-block-latest-posts.is-style-seedlet-alternating-grid.is-grid > li {
+		margin-top: var(--global--spacing-vertical);
+		margin-left: 0;
+	}
+	.wp-block-latest-posts.is-style-seedlet-alternating-grid.is-grid > li:first-child {
+		margin-top: 0;
+	}
+	.wp-block-latest-posts.is-style-seedlet-alternating-grid.is-grid > li:last-child {
+		margin-bottom: 0;
+	}
+}
+
 .gallery-item {
 	display: inline-block;
 	text-align: center;

seedlet/style.css

@@ -1795,6 +1795,34 @@ img {
 	padding-right: 0;
 }
 
+@media only screen and (min-width: 592px) {
+	.wp-block-latest-posts.is-style-seedlet-alternating-grid {
+		overflow: hidden;
+	}
+	.wp-block-latest-posts.is-style-seedlet-alternating-grid > li {
+		width: calc(50% - (0.5 * var(--global--spacing-horizontal)));
+		max-width: calc(50% - (0.5 * var(--global--spacing-horizontal)));
+		text-align: right;
+	}
+	.wp-block-latest-posts.is-style-seedlet-alternating-grid > li:nth-child(2n + 1) {
+		float: right;
+		text-align: left;
+	}
+	.wp-block-latest-posts.is-style-seedlet-alternating-grid.is-grid {
+		display: inherit;
+	}
+	.wp-block-latest-posts.is-style-seedlet-alternating-grid.is-grid > li {
+		margin-top: var(--global--spacing-vertical);
+		margin-right: 0;
+	}
+	.wp-block-latest-posts.is-style-seedlet-alternating-grid.is-grid > li:first-child {
+		margin-top: 0;
+	}
+	.wp-block-latest-posts.is-style-seedlet-alternating-grid.is-grid > li:last-child {
+		margin-bottom: 0;
+	}
+}
+
 .gallery-item {
 	display: inline-block;
 	text-align: center;