Merge pull request #66 from Zamfi99/feature/graphql-extend-complex-types

Fix boolean and complex type representation in GraphQL
Automattic · Jul 26, 2024 · 184bca0 · 184bca0
2 parents cbdc101 + a0ce58b
commit 184bca0
Show file tree

Hide file tree

Showing 3 changed files with 161 additions and 8 deletions.
diff --git a/src/graphql/graphql-api.php b/src/graphql/graphql-api.php
@@ -261,10 +261,10 @@ public static function register_types() {
 	 * @return array
 	 */
 	public static function get_block_attribute_pair( $name, $value ) {
-		// Unknown array types (table cells, for example) are encoded as JSON strings.
+		// Non-string types (numbers, booleans, arrays, objects, for example) are encoded as JSON strings.
 		$is_value_json_encoded = false;
 
-		if ( ! is_scalar( $value ) ) {
+		if ( ! is_string( $value ) ) {
 			$value                 = wp_json_encode( $value );
 			$is_value_json_encoded = true;
 		}

diff --git a/tests/graphql/test-graphql-api.php b/tests/graphql/test-graphql-api.php
@@ -7,11 +7,20 @@
 
 namespace WPCOMVIP\BlockDataApi;
 
+use GraphQLRelay\Relay;
+
 /**
  * Tests for the GraphQL API.
  */
 class GraphQLAPITest extends RegistryTestCase {
 
+	protected function setUp(): void {
+		parent::setUp();
+
+		// Reset block ID counter before each test
+		Relay::reset();
+	}
+
 	public function test_is_graphql_enabled_true() {
 		$this->assertTrue( apply_filters( 'vip_block_data_api__is_graphql_enabled', true ) );
 	}
@@ -104,8 +113,8 @@ public function test_get_blocks_data() {
 						],
 						[
 							'name'               => 'dropCap',
-							'value'              => '',
-							'isValueJsonEncoded' => false,
+							'value'              => 'false',
+							'isValueJsonEncoded' => true,
 						],
 					],
 					'id'         => '1',
@@ -130,8 +139,8 @@ public function test_get_blocks_data() {
 								],
 								[
 									'name'               => 'dropCap',
-									'value'              => '',
-									'isValueJsonEncoded' => false,
+									'value'              => 'false',
+									'isValueJsonEncoded' => true,
 								],
 							],
 							'id'         => '3',
@@ -157,7 +166,7 @@ public function test_get_blocks_data() {
 										[
 											'name'  => 'level',
 											'value' => '2',
-											'isValueJsonEncoded' => false,
+											'isValueJsonEncoded' => true,
 										],
 									],
 									'id'         => '5',
@@ -180,6 +189,8 @@ public function test_get_blocks_data() {
 		$this->assertEquals( $expected_blocks, $blocks_data );
 	}
 
+	// get_blocks_data() attribute type tests
+
 	public function test_array_data_in_attribute() {
 		$this->register_global_block_with_attributes( 'test/custom-table', [
 			'head' => [
@@ -311,7 +322,145 @@ public function test_array_data_in_attribute() {
 							'isValueJsonEncoded' => true,
 						],
 					],
-					'id'         => '6',
+					'id'         => '1',
+				],
+			],
+		];
+
+		$post = $this->factory()->post->create_and_get( [
+			'post_content' => $html,
+		] );
+
+		$blocks_data = GraphQLApi::get_blocks_data( $post );
+
+		$this->assertEquals( $expected_blocks, $blocks_data );
+	}
+
+	public function test_get_block_data_with_boolean_attributes() {
+		$this->register_global_block_with_attributes( 'test/toggle-text', [
+			'isVisible'  => [
+				'type' => 'boolean',
+			],
+			'isBordered' => [
+				'type' => 'boolean',
+			],
+		] );
+
+		$html = '
+			<!-- wp:test/toggle-text { "isVisible": true, "isBordered": false } -->
+			<div>Block</div>
+			<!-- /wp:test/toggle-text -->
+		';
+
+		$expected_blocks = [
+			'blocks' => [
+				[
+					'id'         => '1',
+					'name'       => 'test/toggle-text',
+					'attributes' => [
+						[
+							'name'               => 'isVisible',
+							'value'              => 'true',
+							'isValueJsonEncoded' => true,
+						],
+						[
+							'name'               => 'isBordered',
+							'value'              => 'false',
+							'isValueJsonEncoded' => true,
+						],
+					],
+				],
+			],
+		];
+
+		$post = $this->factory()->post->create_and_get( [
+			'post_content' => $html,
+		] );
+
+		$blocks_data = GraphQLApi::get_blocks_data( $post );
+
+		$this->assertEquals( $expected_blocks, $blocks_data );
+	}
+
+	public function test_get_block_data_with_number_attributes() {
+		$this->register_global_block_with_attributes( 'test/gallery-block', [
+			'tileCount'   => [
+				'type' => 'number',
+			],
+			'tileWidthPx' => [
+				'type' => 'integer', // Same as 'number'
+			],
+			'tileOpacity' => [
+				'type' => 'number',
+			],
+		] );
+
+		$html = '
+			<!-- wp:test/gallery-block { "tileCount": 5, "tileWidthPx": 300, "tileOpacity": 0.5 } -->
+			<div>Gallery</div>
+			<!-- /wp:test/gallery-block -->
+		';
+
+		$expected_blocks = [
+			'blocks' => [
+				[
+					'id'         => '1',
+					'name'       => 'test/gallery-block',
+					'attributes' => [
+						[
+							'name'               => 'tileCount',
+							'value'              => '5',
+							'isValueJsonEncoded' => true,
+						],
+						[
+							'name'               => 'tileWidthPx',
+							'value'              => '300',
+							'isValueJsonEncoded' => true,
+						],
+						[
+							'name'               => 'tileOpacity',
+							'value'              => '0.5',
+							'isValueJsonEncoded' => true,
+						],
+					],
+				],
+			],
+		];
+
+		$post = $this->factory()->post->create_and_get( [
+			'post_content' => $html,
+		] );
+
+		$blocks_data = GraphQLApi::get_blocks_data( $post );
+
+		$this->assertEquals( $expected_blocks, $blocks_data );
+	}
+
+	public function test_get_block_data_with_string_attribute() {
+		$this->register_global_block_with_attributes( 'test/custom-block', [
+			'myComment' => [
+				'type' => 'string',
+			],
+		] );
+
+		$html = '
+			<!-- wp:test/custom-block { "myComment": "great!" } -->
+			<p>Toggleable text</p>
+			<!-- /wp:test/custom-block -->
+		';
+
+		$expected_blocks = [
+			'blocks' => [
+				[
+					'id'         => '1',
+					'name'       => 'test/custom-block',
+					'attributes' => [
+						[
+							'name'               => 'myComment',
+							'value'              => 'great!',
+							'isValueJsonEncoded' => false, // Strings should not be marked JSON encoded
+						],
+					],
 				],
 			],
 		];

diff --git a/tests/mocks/graphql-relay-mock.php b/tests/mocks/graphql-relay-mock.php
@@ -21,4 +21,8 @@ public static function toGlobalId( $type, $id ) {
 		++self::$current_id;
 		return strval( self::$current_id );
 	}
+
+	public static function reset() {
+		self::$current_id = 0;
+	}
 }