Merge pull request #1122 from alleyinteractive/fix/issue-1117/gutenbe…

…rg-cover-publish-error Fix Error when Using Gutenberg Cover Block with Caption
alleyinteractive · May 10, 2024 · b1bed12 · b1bed12
2 parents a99bcf7 + 0a5715c
commit b1bed12
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 4 deletions.
diff --git a/includes/apple-exporter/components/class-image.php b/includes/apple-exporter/components/class-image.php
@@ -256,10 +256,7 @@ protected function build( $html ) {
 		$caption_regex = $is_cover_block ? '#<div.*?>?\n(.*)#m' : '#<figcaption.*?>(.*?)</figcaption>#ms';
 		if ( preg_match( $caption_regex, $html, $matches ) ) {
 			$caption                  = trim( $matches[1] );
-			$values['#caption#']      = ! $is_cover_block ? $caption : [
-				'text'   => $caption,
-				'format' => 'html',
-			];
+			$values['#caption#']      = $caption;
 			$values['#caption_text#'] = $caption;
 			$values                   = $this->group_component( $values['#caption#'], $values );
 			$spec_name                = 'json-with-caption';

diff --git a/tests/apple-exporter/components/test-class-image.php b/tests/apple-exporter/components/test-class-image.php
@@ -59,6 +59,64 @@ public function test_component_role() {
 		$this->assertEquals( 'image', $json['components'][1]['components'][3]['role'] );
 	}
 
+	/**
+	 * Tests the process of transforming a Cover block into an image.
+	 */
+	public function test_transform_cover() {
+		$featured_image = $this->get_new_attachment();
+		$image_id       = $this->get_new_attachment();
+		$image_url      = wp_get_attachment_image_url( $image_id, 'full' );
+		$post_content   = <<<HTML
+<!-- wp:cover {"url":"$image_url","id":$image_id,"dimRatio":50,"customOverlayColor":"#e9e9e9","isDark":false,"layout":{"type":"constrained"}} -->
+<div class="wp-block-cover is-light"><span aria-hidden="true" class="wp-block-cover__background has-background-dim" style="background-color:#e9e9e9"></span><img class="wp-block-cover__image-background wp-image-$image_id" alt="" src="$image_url" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
+<p class="has-text-align-center has-large-font-size">Testing cover block.</p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:cover -->
+HTML;
+		$post_id        = self::factory()->post->create( [ 'post_content' => $post_content ] );
+		update_post_meta( $post_id, '_thumbnail_id', $featured_image );
+		$json = $this->get_json_for_post( $post_id );
+		$this->assertEquals(
+			[
+				'role'       => 'container',
+				'components' => [
+					[
+						'role'    => 'photo',
+						'URL'     => $image_url,
+						'layout'  => 'full-width-image-with-caption',
+						'caption' => [
+							'format'    => 'html',
+							'text'      => '<p class="has-text-align-center has-large-font-size">Testing cover block.</p>',
+							'textStyle' => [
+								'fontName' => 'AvenirNext-Italic',
+							],
+						],
+					],
+					[
+						'role'      => 'caption',
+						'text'      => '<p class="has-text-align-center has-large-font-size">Testing cover block.</p>',
+						'format'    => 'html',
+						'textStyle' => [
+							'textAlignment' => 'left',
+							'fontName'      => 'AvenirNext-Italic',
+							'fontSize'      => 16,
+							'tracking'      => 0,
+							'lineHeight'    => 24,
+							'textColor'     => '#4f4f4f',
+						],
+						'layout'    => [
+							'margin' => [
+								'bottom' => 25,
+							],
+						],
+					],
+				],
+				'layout'     => [],
+			],
+			$json['components'][1]['components'][3]
+		);
+	}
+
 	/**
 	 * Test Image component matching and JSON
 	 * output with HTML markup for an image.