Merge pull request #2654 from Automattic/fix/2257-varia-premium-content-margins

Premium Content : Ensuring correct vertical margin

varia/package-lock.json

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

varia/package.json

@@ -1,6 +1,6 @@
 {
   "name": "varia",
-  "version": "1.5.4",
+  "version": "1.5.6",
   "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/sass/blocks/_imports.scss

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

varia/sass/blocks/premium-content/_style.scss

@@ -0,0 +1,10 @@
+.wp-block-premium-content-container {
+
+	.wp-premium-content-logged-out-view,
+	.wp-block-premium-content-subscriber-view {
+		> * {
+			@extend .entry-content-child;
+		}
+	}
+
+}

varia/sass/layout/_structure.scss

@@ -87,6 +87,7 @@
 .site-main > article > *, // apply vertical margins to article level
 .site-main > .not-found > *, // apply vertical margins to article level
 .entry-content > *,
+.entry-content-child,
 [class*="inner-container"] > *,
 .widget-area > * {
 

varia/style-rtl.css

@@ -6,7 +6,7 @@ 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.5.4
+Version: 1.5.6
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Text Domain: varia
@@ -918,6 +918,9 @@ footer {
 .site-main > article > *,
 .site-main > .not-found > *,
 .entry-content > *,
+.entry-content-child,
+.wp-block-premium-content-container .wp-premium-content-logged-out-view > *,
+.wp-block-premium-content-container .wp-block-premium-content-subscriber-view > *,
 [class*="inner-container"] > *,
 .widget-area > * {
 	margin-top: 21.312px;
@@ -929,6 +932,9 @@ footer {
 	.site-main > article > *,
 	.site-main > .not-found > *,
 	.entry-content > *,
+	.entry-content-child,
+	.wp-block-premium-content-container .wp-premium-content-logged-out-view > *,
+	.wp-block-premium-content-container .wp-block-premium-content-subscriber-view > *,
 	[class*="inner-container"] > *,
 	.widget-area > * {
 		margin-top: 32px;
@@ -940,6 +946,9 @@ footer {
 .site-main > article > *:first-child,
 .site-main > .not-found > *:first-child,
 .entry-content > *:first-child,
+.entry-content-child:first-child,
+.wp-block-premium-content-container .wp-premium-content-logged-out-view > :first-child,
+.wp-block-premium-content-container .wp-block-premium-content-subscriber-view > :first-child,
 [class*="inner-container"] > *:first-child,
 .widget-area > *:first-child {
 	margin-top: 0;
@@ -949,6 +958,9 @@ footer {
 .site-main > article > *:last-child,
 .site-main > .not-found > *:last-child,
 .entry-content > *:last-child,
+.entry-content-child:last-child,
+.wp-block-premium-content-container .wp-premium-content-logged-out-view > :last-child,
+.wp-block-premium-content-container .wp-block-premium-content-subscriber-view > :last-child,
 [class*="inner-container"] > *:last-child,
 .widget-area > *:last-child {
 	margin-bottom: 0;

varia/style.css

@@ -6,7 +6,7 @@ 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.5.4
+Version: 1.5.6
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Text Domain: varia
@@ -918,6 +918,9 @@ footer {
 .site-main > article > *,
 .site-main > .not-found > *,
 .entry-content > *,
+.entry-content-child,
+.wp-block-premium-content-container .wp-premium-content-logged-out-view > *,
+.wp-block-premium-content-container .wp-block-premium-content-subscriber-view > *,
 [class*="inner-container"] > *,
 .widget-area > * {
 	margin-top: 21.312px;
@@ -929,6 +932,9 @@ footer {
 	.site-main > article > *,
 	.site-main > .not-found > *,
 	.entry-content > *,
+	.entry-content-child,
+	.wp-block-premium-content-container .wp-premium-content-logged-out-view > *,
+	.wp-block-premium-content-container .wp-block-premium-content-subscriber-view > *,
 	[class*="inner-container"] > *,
 	.widget-area > * {
 		margin-top: 32px;
@@ -940,6 +946,9 @@ footer {
 .site-main > article > *:first-child,
 .site-main > .not-found > *:first-child,
 .entry-content > *:first-child,
+.entry-content-child:first-child,
+.wp-block-premium-content-container .wp-premium-content-logged-out-view > :first-child,
+.wp-block-premium-content-container .wp-block-premium-content-subscriber-view > :first-child,
 [class*="inner-container"] > *:first-child,
 .widget-area > *:first-child {
 	margin-top: 0;
@@ -949,6 +958,9 @@ footer {
 .site-main > article > *:last-child,
 .site-main > .not-found > *:last-child,
 .entry-content > *:last-child,
+.entry-content-child:last-child,
+.wp-block-premium-content-container .wp-premium-content-logged-out-view > :last-child,
+.wp-block-premium-content-container .wp-block-premium-content-subscriber-view > :last-child,
 [class*="inner-container"] > *:last-child,
 .widget-area > *:last-child {
 	margin-bottom: 0;

varia/style.scss

@@ -5,7 +5,7 @@ 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.5.4
+Version: 1.5.6
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Text Domain: varia