From 292c8c3bbef807b589be3e10a16cb5d78e6a3ea0 Mon Sep 17 00:00:00 2001
From: Joseph Scott <joseph@josephscott.org>
Date: Mon, 25 May 2020 03:58:49 -0600
Subject: [PATCH] Only load Premium Block CSS when that block is being used
 (#42590)

* Only load Premium Block CSS when that block is being used

Currently when you activate the Full Site Editing plugin the style.css for the Premium Content Block gets loaded on ever page view.  This change adjusts it to only load on pages where that block is being used.

* Copy styles over to editor

Co-authored-by: Eoin Gallagher <eoin@automattic.com>
---
 .../premium-content/editor.css                | 32 +++++++++++++++++++
 .../premium-content/premium-content.php       |  2 +-
 .../premium-content/style.css                 | 11 -------
 3 files changed, 33 insertions(+), 12 deletions(-)

diff --git a/apps/full-site-editing/full-site-editing-plugin/premium-content/editor.css b/apps/full-site-editing/full-site-editing-plugin/premium-content/editor.css
index 62b12e769aadd4..eb09d87b6576f6 100644
--- a/apps/full-site-editing/full-site-editing-plugin/premium-content/editor.css
+++ b/apps/full-site-editing/full-site-editing-plugin/premium-content/editor.css
@@ -104,3 +104,35 @@
 	margin: 16px;
 	display: block;
 }
+
+.premium-content-toolbar-button .components-dropdown-menu__toggle::after {
+	display: block;
+	content: "";
+	position: absolute;
+	bottom: 1px;
+	right: 0;
+	border-color: transparent currentColor currentColor transparent;
+	border-style: solid;
+	border-width: 4px;
+}
+
+.premium-content-logged-out-view-button {
+	margin: 5px;
+}
+
+.wp-block-premium-content-logged-out-view__buttons {
+	display: flex;
+	margin: 5px;
+}
+
+.premium-content-logged-out-view-button.wp-block-button .wp-block-button__link,
+.wp-block-premium-content-logged-out-view__buttons .wp-block-button .wp-block-button__link {
+	min-width: 200px;
+	margin-right: 20px;
+}
+
+.wp-block-premium-content-logged-out-view p:last-child,
+.wp-block-premium-content-logged-out-view h3 {
+	margin-bottom: 20px;
+}
+
diff --git a/apps/full-site-editing/full-site-editing-plugin/premium-content/premium-content.php b/apps/full-site-editing/full-site-editing-plugin/premium-content/premium-content.php
index 7865bbfd963ecf..12de026f7abe05 100644
--- a/apps/full-site-editing/full-site-editing-plugin/premium-content/premium-content.php
+++ b/apps/full-site-editing/full-site-editing-plugin/premium-content/premium-content.php
@@ -83,7 +83,6 @@ function premium_content_block_init() {
 		array(
 			'editor_script'   => 'premium-content-container-block-editor',
 			'editor_style'    => 'premium-content-container-block-editor',
-			'style'           => 'premium-content-container-block',
 			'render_callback' => '\A8C\FSE\Earn\PremiumContent\premium_content_container_render',
 		)
 	);
@@ -193,6 +192,7 @@ function ( $matches ) use ( $attributes ) {
  * @return string
  */
 function premium_content_block_logged_out_view_render( $attributes, $content ) {
+	wp_enqueue_style( 'premium-content-container-block' );
 	wp_enqueue_script( 'premium-content-frontend' );
 
 	$button_styles = array();
diff --git a/apps/full-site-editing/full-site-editing-plugin/premium-content/style.css b/apps/full-site-editing/full-site-editing-plugin/premium-content/style.css
index 0472f6db147307..6120cfd5af4085 100644
--- a/apps/full-site-editing/full-site-editing-plugin/premium-content/style.css
+++ b/apps/full-site-editing/full-site-editing-plugin/premium-content/style.css
@@ -18,17 +18,6 @@
 	margin: 5px;
 }
 
-.premium-content-toolbar-button .components-dropdown-menu__toggle::after {
-	display: block;
-	content: "";
-	position: absolute;
-	bottom: 1px;
-	right: 0;
-	border-color: transparent currentColor currentColor transparent;
-	border-style: solid;
-	border-width: 4px;
-}
-
 .premium-content-logged-out-view-button.wp-block-button .wp-block-button__link,
 .wp-block-premium-content-logged-out-view__buttons .wp-block-button .wp-block-button__link {
 	min-width: 200px;