Bug: inner blocks "anchor" field being applied to parent block result…

…ing in duplicates (#63) * Bug: inner blocks "anchor" field being applied to parent block resulting in duplicates * Refactor: Use parse_block instead of innerHTML * Chore: Check for is HTML is empty * Chore: Add Changeset
wpengine · May 3, 2023 · 8955fac · 8955fac
1 parent e9967c8
commit 8955fac
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 16 deletions.
diff --git a/.changeset/quiet-insects-mate.md b/.changeset/quiet-insects-mate.md
@@ -0,0 +1,5 @@
+---
+"@wpengine/wp-graphql-content-blocks": patch
+---
+
+Bug Fix: inner blocks "anchor" field being applied to parent block resulting in duplicates
diff --git a/includes/Field/BlockSupports/Anchor.php b/includes/Field/BlockSupports/Anchor.php
@@ -31,18 +31,12 @@ public static function register( WP_Block_Type $block_spec ) {
 							'type'        => 'string',
 							'description' => __( 'The anchor field for the block.', 'wp-graphql-content-blocks' ),
 							'resolve'     => function ( $block ) {
-								$attribute_config = array(
-									'type'      => 'string',
-									'source'    => 'attribute',
-									'attribute' => 'id',
-									'selector'  => '*',
-								);
 								$rendered_block   = wp_unslash( render_block( $block ) );
 								$value            = null;
 								if ( empty( $rendered_block ) ) {
 									return $value;
 								}
-								$value = DOMHelpers::parseAttribute( $rendered_block, $attribute_config['selector'], $attribute_config['attribute'], null );
+								$value = DOMHelpers::parseFirstNodeAttribute( $rendered_block, 'id' );
 								return $value;
 							},
 						),

diff --git a/includes/utilities/DomHelpers.php b/includes/utilities/DomHelpers.php
@@ -33,6 +33,29 @@ public static function parseAttribute( $html, $selector, $attribute, $default =
 		return $value;
 	}
 
+	/**
+	 * Parses the given HTML string to extract the specified attribute selector of the first node.
+	 *
+	 * @param string $html The HTML string to parse.
+	 * @param string $attribute The attribute to extract of the first node.
+	 *
+	 * @return string|null extracted attribute
+	 */
+	public static function parseFirstNodeAttribute( $html, $attribute ) {
+		$value = null;
+		if ( trim( empty( $html ) ) ) {
+			return $value;
+		}
+		$doc = new Document( $html );
+		// <html><body>$html</body></html>
+		$elem = $doc->find( '*' )[2];
+		if ( $elem ) {
+			$value = $elem->getAttribute( $attribute );
+		}
+
+		return $value;
+	}
+
 	/**
 	 * Parses the given HTML string to extract the innerHTML contents.
 	 *
@@ -53,16 +76,16 @@ public static function parseHTML( $html, $selector, $default = null ) {
 		}
 		return $inner_html;
 	}
-	
+
 	/**
 	 * Parses the given HTML string and extracts the specified elements.
-	 * 
+	 *
 	 * @param string $html The HTML string to parse.
 	 * @param string $element The element (selector) to extract.
-	 * 
+	 *
 	 * @return string|null the HTML string of the extracted elements
 	 */
-	public static function getElementsFromHTML($html, $element) {
+	public static function getElementsFromHTML( $html, $element ) {
 		$doc = new Document();
 		$doc->loadHTML( $html );
 		$elements = $doc->find( $element );
@@ -79,18 +102,18 @@ public static function getElementsFromHTML($html, $element) {
 	/**
 	 * Gets the text content of a given selector. If multiple selectors exist,
 	 * the first result will be used.
-	 * 
+	 *
 	 * @param string $html The HTML string to parse.
 	 * @param string $selector The selector to get the text content from.
-	 * 
+	 *
 	 * @return string|null The text content of the selector if found.
 	 */
-	public static function getTextFromSelector($html, $selector) {
+	public static function getTextFromSelector( $html, $selector ) {
 		$doc = new Document();
 		$doc->loadHTML( $html );
 		$nodes = $doc->find( $selector );
 
-		if( count( $nodes ) === 0 ) {
+		if ( count( $nodes ) === 0 ) {
 			return null;
 		}
 

diff --git a/tests/unit/BlockSupportsAnchorTest.php b/tests/unit/BlockSupportsAnchorTest.php
@@ -27,6 +27,13 @@ public function setUp(): void {
                         <!-- wp:paragraph -->
                         <p>Example paragraph without Anchor</p>
                         <!-- /wp:paragraph -->
+
+						<!-- wp:group -->
+						<div class="wp-block-group">
+							<!-- wp:paragraph -->
+							<p id="example-inner">Example inner block</p>
+							<!-- /wp:paragraph -->
+						<!-- /wp:group -->				
 			        '
 					)
 				),
@@ -109,10 +116,18 @@ public function test_register_anchor_query_field() {
 		}';
 		$actual = graphql( array( 'query' => $query ) );
 		$node   = $actual['data']['posts']['nodes'][0];
-		$this->assertEquals( count( $node['editorBlocks'] ), 2 );
+
+		$this->assertEquals( count( $node['editorBlocks'] ), 4 );
 		$this->assertEquals( $node['editorBlocks'][0]['name'], 'core/paragraph' );
 		$this->assertEquals( $node['editorBlocks'][0]['anchor'], 'example' );
+
 		$this->assertEquals( $node['editorBlocks'][1]['name'], 'core/paragraph' );
 		$this->assertNull( $node['editorBlocks'][1]['anchor'] );
+
+		$this->assertEquals( $node['editorBlocks'][2]['name'], 'core/group' );
+		$this->assertNull( $node['editorBlocks'][2]['anchor'] );
+
+		$this->assertEquals( $node['editorBlocks'][3]['name'], 'core/paragraph' );
+		$this->assertEquals( $node['editorBlocks'][3]['anchor'], 'example-inner' );
 	}
 }