Merge pull request #4299 from ampproject/4297-load-block-styles-in-reader-mode

Load block styles via amp_post_template_head action

Author: westonruter

includes/amp-post-template-functions.php

@@ -15,6 +15,7 @@ function amp_post_template_init_hooks() {
 	add_action( 'amp_post_template_head', 'amp_print_schemaorg_metadata' );
 	add_action( 'amp_post_template_head', 'amp_add_generator_metadata' );
 	add_action( 'amp_post_template_head', 'wp_generator' );
+	add_action( 'amp_post_template_head', 'amp_post_template_add_block_styles' );
 	add_action( 'amp_post_template_css', 'amp_post_template_add_styles', 99 );
 	add_action( 'amp_post_template_data', 'amp_post_template_add_analytics_script' );
 	add_action( 'amp_post_template_footer', 'amp_post_template_add_analytics_data' );
@@ -54,6 +55,19 @@ function amp_post_template_add_fonts( $amp_template ) {
 	}
 }
 
+/**
+ * Add block styles for core blocks and third-party blocks.
+ *
+ * @since 1.5.0
+ */
+function amp_post_template_add_block_styles() {
+	add_theme_support( 'wp-block-styles' );
+	if ( function_exists( 'wp_common_block_scripts_and_styles' ) ) {
+		wp_common_block_scripts_and_styles();
+	}
+	wp_styles()->do_items();
+}
+
 /**
  * Print styles.
  *

templates/style.php

@@ -28,9 +28,22 @@
 $link_color              = $this->get_customizer_setting( 'link_color' );
 $header_background_color = $this->get_customizer_setting( 'header_background_color' );
 $header_color            = $this->get_customizer_setting( 'header_color' );
+
+$alignwide_max = $content_max_width > 0 ? $content_max_width * 2 : 1920
 ?>
 /* Generic WP styling */
 
+.alignnone,
+.aligncenter,
+.alignleft,
+.alignright,
+.alignwide {
+	margin-top: 1em;
+	margin-right: auto;
+	margin-bottom: 1em;
+	margin-left: auto;
+}
+
 .alignright {
 	float: right;
 }
@@ -46,6 +59,35 @@
 	margin-right: auto;
 }
 
+.alignwide {
+	width: 100%;
+}
+
+@media (min-width: calc(840px - 48px)) {
+	.alignwide {
+		width: calc(100vw - 48px);
+		max-width: calc(100vw - 48px);
+		margin-left: calc(50% - 50vw + 24px);
+		margin-right: calc(50% - 50vw + 24px);
+	}
+}
+
+@media (min-width: calc(<?php echo sprintf( '%dpx', $alignwide_max ); ?>)) {
+	.alignwide {
+		width: calc(<?php echo sprintf( '%dpx', $alignwide_max ); ?> - 48px);
+		max-width: calc(<?php echo sprintf( '%dpx', $alignwide_max ); ?> - 48px);
+		margin-left: calc(calc(50% - <?php echo sprintf( '%dpx', $alignwide_max ); ?> / 2) + 24px);
+		margin-right: calc(calc(50% - <?php echo sprintf( '%dpx', $alignwide_max ); ?> / 2) + 24px);
+	}
+}
+
+.alignfull {
+	width: 100vw;
+	max-width: 100vw;
+	margin-left: calc(50% - 50vw);
+	margin-right: calc(50% - 50vw);
+}
+
 .amp-wp-enforced-sizes {
 	/** Our sizes fallback is 100vw, and we have a padding on the container; the max-width here prevents the element from overflowing. **/
 	max-width: 100%;
@@ -268,11 +310,13 @@
 	margin: 0 auto;
 }
 
-.amp-wp-article-content amp-img.alignright {
+.amp-wp-article-content amp-img.alignright,
+.amp-wp-article-content .wp-block-cover.alignright {
 	margin: 0 0 1em 16px;
 }
 
-.amp-wp-article-content amp-img.alignleft {
+.amp-wp-article-content amp-img.alignleft,
+.amp-wp-article-content .wp-block-cover.alignleft {
 	margin: 0 16px 1em 0;
 }