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>

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;
+}
+

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();

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;