Bug: CoreImage width attribute resolve throws error. (wpengine#130)

* Bug: CoreImage width attribute resolve throws error. * Chore: Changeset * Test: Add unit tests
rtCamp · Jul 17, 2023 · 28fca4a · 28fca4a
1 parent 2c990a7
commit 28fca4a
Show file tree

Hide file tree

Showing 3 changed files with 106 additions and 0 deletions.
diff --git a/.changeset/serious-items-bow.md b/.changeset/serious-items-bow.md
@@ -0,0 +1,5 @@
+---
+"@wpengine/wp-graphql-content-blocks": patch
+---
+
+Bug Fix: CoreImage `width` attribute throws error.
diff --git a/includes/Blocks/CoreImage.php b/includes/Blocks/CoreImage.php
@@ -29,5 +29,6 @@ class CoreImage extends Block {
 			'source'    => 'attribute',
 			'attribute' => 'src',
 		),
+		'width'        => array( 'type' => 'string' ),
 	);
 }
diff --git a/tests/unit/blocks/CoreImageTest.php b/tests/unit/blocks/CoreImageTest.php
@@ -0,0 +1,100 @@
+<?php
+
+namespace WPGraphQL\ContentBlocks\Unit;
+
+final class CoreImageTest extends PluginTestCase {
+    public $instance;
+	public $post_id;
+
+    public function setUp(): void {
+		parent::setUp();
+		global $wpdb;
+
+		$this->post_id = wp_insert_post(
+			array(
+				'post_title'   => 'Post Title',
+				'post_content' => preg_replace(
+					'/\s+/',
+					' ',
+					trim(
+						'
+                        <!-- wp:image {"width":500,"height":500,"sizeSlug":"full","linkDestination":"none"} -->
+                        <figure class="wp-block-image size-full is-resized"><img src="http://mysite.local/wp-content/uploads/2023/05/online-programming-course-hero-section-bg.svg" alt="" class="wp-image-1432" width="500" height="500"/></figure>
+                        <!-- /wp:image -->
+                        '
+					)
+				),
+				'post_status'  => 'publish',
+			)
+		);
+	}
+
+    public function tearDown(): void {
+		// your tear down methods here
+		parent::tearDown();
+		wp_delete_post( $this->post_id, true );
+	}
+
+    public function test_retrieve_core_image_attributes() {
+		$query  = '
+		fragment CoreColumnBlockFragment on CoreColumn {
+			attributes {
+			  width
+			}
+		  }
+		  
+		  fragment CoreImageBlockFragment on CoreImage {
+			attributes {
+			  width
+			  height
+			  alt
+			  src
+			  style
+			  sizeSlug
+			  linkClass
+			  linkTarget
+			  linkDestination
+			  align
+			  caption
+			  cssClassName
+			}
+		  }
+		  
+		  query GetPosts {
+			posts(first: 1) {
+			  nodes {
+				databaseId
+				editorBlocks {
+				  name
+				  ...CoreImageBlockFragment
+				  ...CoreColumnBlockFragment
+				}
+			  }
+			}
+		  }
+		';
+		$actual = graphql( array( 'query' => $query ) );
+		$node   = $actual['data']['posts']['nodes'][0];
+
+		// Verify that the ID of the first post matches the one we just created.
+		$this->assertEquals( $this->post_id, $node['databaseId'] );
+		// There should be only one block using that query when not using flat: true
+		$this->assertEquals( count( $node['editorBlocks'] ), 1 );
+		$this->assertEquals( $node['editorBlocks'][0]['name'], 'core/image' );
+
+		$this->assertEquals( $node['editorBlocks'][0]['attributes'], [
+			"width" => "500",
+			"height" => 500.0,
+			"alt" => "",
+			"src" => "http://mysite.local/wp-content/uploads/2023/05/online-programming-course-hero-section-bg.svg",
+			"style" => NULL,
+			"sizeSlug" => "full",
+			"linkClass" => NULL,
+			"linkTarget" => NULL,
+			"linkDestination" => "none",
+			"align" => NULL,
+			"caption" => "",
+			"cssClassName" => "wp-block-image size-full is-resized"   
+		]); 
+	}
+}