Quadrat: Add a join pattern

quadrat/inc/block-patterns.php

@@ -124,10 +124,10 @@ function quadrat_register_block_patterns() {
 					'categories' => array( 'quadrat' ),
 
 					'content'    => '<!-- wp:media-text {"mediaId":1497,"mediaLink":"https://quadrat.mystagingwebsite.com/wp-content/uploads/2021/04/Introspection-scaled.jpg","mediaType":"image","mediaWidth":40,"mediaSizeSlug":"large","imageFill":false,"className":"has-pink-color has-darker-blue-background-color has-text-color has-background is-style-default"} -->
-					<div class="wp-block-media-text alignwide is-stacked-on-mobile has-pink-color has-darker-blue-background-color has-text-color has-background is-style-default" style="grid-template-columns:40% auto"><figure class="wp-block-media-text__media"><img src="https://quadrat.mystagingwebsite.com/wp-content/uploads/2021/04/Introspection-scaled.jpg" alt="' . esc_attr__( 'Illustration of an introspective woman.', 'quadrat') . '" class="wp-image-1497 size-large"/></figure><div class="wp-block-media-text__content"><!-- wp:heading {"level":3} -->
+					<div class="wp-block-media-text alignwide is-stacked-on-mobile has-pink-color has-darker-blue-background-color has-text-color has-background is-style-default" style="grid-template-columns:40% auto"><figure class="wp-block-media-text__media"><img src="https://quadrat.mystagingwebsite.com/wp-content/uploads/2021/04/Introspection-scaled.jpg" alt="' . esc_attr__( 'Illustration of an introspective woman.', 'quadrat' ) . '" class="wp-image-1497 size-large"/></figure><div class="wp-block-media-text__content"><!-- wp:heading {"level":3} -->
 					<h3>' . esc_html__( 'Episode 3: A Cycle of Emotions', 'quadrat' ) . '</h3>
 					<!-- /wp:heading -->
-					
+
 					<!-- wp:paragraph {"fontSize":"small"} -->
 					<p class="has-small-font-size">' . wp_kses_post( __( '<em>“Do we need periods if they make us crazy?”</em>, Sarah asks. We reached out to our friend Diana Roth, an endocrinologist specialized in women’s hormonal health to know how menstrual cycles impact women’s brains and emotions. Hint: yes, we do.', 'quadrat' ) ) . '</p>
 					<!-- /wp:paragraph --></div></div>
@@ -161,15 +161,15 @@ function quadrat_register_block_patterns() {
 					<div class="wp-block-media-text alignwide is-stacked-on-mobile is-vertically-aligned-top" style="grid-template-columns:52% auto"><figure class="wp-block-media-text__media"><img src="https://quadrat.mystagingwebsite.com/wp-content/uploads/2021/05/Group-of-squares-displayed-diagonally._.png" alt="' . esc_attr__( 'Group of squares displayed diagonally', 'quadrat' ) . '"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","fontSize":"tiny"} -->
 					<p class="has-tiny-font-size">Coaching</p>
 					<!-- /wp:paragraph -->
-					
+
 					<!-- wp:heading {"level":3} -->
 					<h3>' . esc_html__( 'Career Coaching 101', 'quadrat' ) . '</h3>
 					<!-- /wp:heading -->
-					
+
 					<!-- wp:paragraph -->
 					<p>' . esc_html__( 'Starting at $ 99', 'quadrat' ) . '</p>
 					<!-- /wp:paragraph -->
-					
+
 					<!-- wp:buttons -->
 					<div class="wp-block-buttons"><!-- wp:button -->
 					<div class="wp-block-button"><a class="wp-block-button__link">' . esc_html__( 'Learn more', 'quadrat' ) . '</a></div>
@@ -222,8 +222,34 @@ function quadrat_register_block_patterns() {
 				)
 			);
 
+			if ( \WP_Block_Type_Registry::get_instance()->is_registered( 'jetpack/subscriptions' ) ) {
+				register_block_pattern(
+					'quadrat/join',
+					array(
+						'title'      => __( 'Join', 'quadrat' ),
+						'categories' => array( 'quadrat' ),
+						'content'    => '<!-- wp:columns -->
+							<div class="wp-block-columns"><!-- wp:column -->
+							<div class="wp-block-column"><!-- wp:heading {"level":3} -->
+							<h3>' . esc_html( 'Join the Community' ) . '</h3>
+							<!-- /wp:heading -->
+
+							<!-- wp:paragraph -->
+							<p>' . esc_html__( 'We’re thrilled to have you here! Now, if you don’t want to miss an article or an episode, you can subscribe to our newsletter.' ) . '</p>
+							<!-- /wp:paragraph --></div>
+							<!-- /wp:column -->
+
+							<!-- wp:column {"verticalAlignment":"center","className":"subscription-column"} -->
+							<div class="wp-block-column is-vertically-aligned-center subscription-column"><!-- wp:jetpack/subscriptions {"buttonOnNewLine":true} -->
+							<div class="wp-block-jetpack-subscriptions wp-block-jetpack-subscriptions__supports-newline wp-block-jetpack-subscriptions__use-newline">[jetpack_subscription_form show_subscribers_total="false" button_on_newline="true" custom_font_size="16px" custom_border_radius="0" custom_border_weight="1" custom_padding="15" custom_spacing="10" submit_button_classes="" email_field_classes="" show_only_email_and_button="true"]</div>
+							<!-- /wp:jetpack/subscriptions --></div>
+							<!-- /wp:column --></div>
+							<!-- /wp:columns -->',
+					)
+				);
+			}
 		}
 	}
 endif;
 
-add_action( 'after_setup_theme', 'quadrat_register_block_patterns', 12 );
+add_action( 'init', 'quadrat_register_block_patterns' );

quadrat/sass/theme.scss

@@ -11,3 +11,7 @@
 .wp-block-post-featured-image {
 	margin-top: 0;
 }
+
+.subscription-column {
+	text-align: right;
+}