Feat: Adds mediaDetails field in CoreImage block.

.changeset/fifty-emus-mate.md

@@ -0,0 +1,27 @@
+---
+"@wpengine/wp-graphql-content-blocks": patch
+---
+
+Adds mediaDetails field in CoreImage block:
+
+```graphql
+{
+  posts {
+    nodes {
+      editorBlocks {
+        ... on CoreImage {
+          mediaDetails {
+            file
+            sizes {
+              name
+              fileSize
+              height
+              width
+            }
+          }
+        }
+      }
+    }
+  }
+}
+```

includes/Blocks/Block.php

@@ -12,7 +12,6 @@
 use WPGraphQL\ContentBlocks\Utilities\DOMHelpers;
 use WPGraphQL\ContentBlocks\Utilities\WPGraphQLHelpers;
 use WPGraphQL\ContentBlocks\Type\Scalar\Scalar;
-use WPGraphQL\ContentBlocks\Field\BlockSupports\Anchor;
 use WPGraphQL\Utils\Utils;
 
 /**

includes/Blocks/CoreImage.php

@@ -7,6 +7,9 @@
 
 namespace WPGraphQL\ContentBlocks\Blocks;
 
+use WP_Block_Type;
+use WPGraphQL\ContentBlocks\Registry\Registry;
+
 /**
  * Class CoreImage
  */
@@ -31,4 +34,39 @@ class CoreImage extends Block {
 		),
 		'width'        => array( 'type' => 'string' ),
 	);
+
+	/**
+	 * Block constructor.
+	 *
+	 * @param \WP_Block_Type                             $block The Block Type.
+	 * @param \WPGraphQL\ContentBlocks\Registry\Registry $block_registry The instance of the WPGraphQL block registry.
+	 */
+	public function __construct( WP_Block_Type $block, Registry $block_registry ) {
+		parent::__construct( $block, $block_registry );
+		register_graphql_field(
+			$this->type_name,
+			'mediaDetails',
+			array(
+				'type'        => 'MediaDetails',
+				'description' => sprintf(
+					// translators: %s is the block type name.
+					__( 'Media Details of the %s Block Type', 'wp-graphql-content-blocks' ),
+					$this->type_name
+				),
+				'resolve'     => function ( $block ) {
+					$attrs = $block['attrs'];
+					$id = $attrs['id'] ?? null;
+					if ( $id ) {
+						$media_details = wp_get_attachment_metadata( $id );
+						if ( ! empty( $media_details ) ) {
+							$media_details['ID'] = $id;
+
+							return $media_details;
+						}
+					}
+					return null;
+				},
+			)
+		);
+	}
 }

tests/bootstrap.php

@@ -8,6 +8,7 @@
 $_tests_dir = getenv( 'WP_TESTS_DIR' );
 
 define( 'WP_TEST_PLUGINS_DIR', '/var/www/html/wp-content/plugins' );
+define( 'WP_TEST_DATA_DIR', dirname( __FILE__ ) . '/_data' );
 
 if ( ! $_tests_dir ) {
 	$_tests_dir = rtrim( sys_get_temp_dir(), '/\\' ) . '/wordpress-tests-lib';
@@ -42,3 +43,4 @@ function _manually_load_plugin() {
 }
 
 require $_tests_dir . '/includes/bootstrap.php';
+

tests/unit/blocks/CoreImageTest.php

@@ -5,10 +5,12 @@
 final class CoreImageTest extends PluginTestCase {
     public $instance;
 	public $post_id;
+	public $attachment_id;
 
     public function setUp(): void {
 		parent::setUp();
 		global $wpdb;
+		$this->attachment_id = $this->factory->attachment->create_upload_object( WP_TEST_DATA_DIR . '/images/test-image.jpg' );
 
 		$this->post_id = wp_insert_post(
 			array(
@@ -18,7 +20,7 @@ public function setUp(): void {
 					' ',
 					trim(
 						'
-                        <!-- wp:image {"width":500,"height":500,"sizeSlug":"full","linkDestination":"none"} -->
+                        <!-- wp:image {"width":500,"height":500,"sizeSlug":"full","linkDestination":"none", "id":' . $this->attachment_id . '} -->
                         <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 -->
                         '
@@ -35,6 +37,38 @@ public function tearDown(): void {
 		wp_delete_post( $this->post_id, true );
 	}
 
+	public function test_retrieve_core_image_media_details() {
+		$query  = '
+		  fragment CoreImageBlockFragment on CoreImage {
+			attributes {
+			  id
+			}
+			mediaDetails {
+			  height
+			  width
+			}
+		  }
+
+		  query GetPosts {
+			posts(first: 1) {
+			  nodes {
+				editorBlocks {
+				  ...CoreImageBlockFragment
+				}
+			  }
+			}
+		  }
+		';
+		$actual = graphql( array( 'query' => $query ) );
+		$node   = $actual['data']['posts']['nodes'][0];
+
+		$this->assertEquals( $node['editorBlocks'][0]['mediaDetails'], [
+			"width" => 50,
+			"height" => 50,
+		]);
+	}
+
+
     public function test_retrieve_core_image_attributes() {
 		$query  = '
 		fragment CoreColumnBlockFragment on CoreColumn {
@@ -45,6 +79,7 @@ public function test_retrieve_core_image_attributes() {
 
 		  fragment CoreImageBlockFragment on CoreImage {
 			attributes {
+			  id
 			  width
 			  height
 			  alt
@@ -86,6 +121,7 @@ public function test_retrieve_core_image_attributes() {
 			"width" => "500",
 			"height" => 500.0,
 			"alt" => "",
+			"id" => $this->attachment_id,
 			"src" => "http://mysite.local/wp-content/uploads/2023/05/online-programming-course-hero-section-bg.svg",
 			"style" => NULL,
 			"sizeSlug" => "full",