Add custom class name to facilitate locating block

WordPress · Feb 11, 2025 · 1bbca4a · 1bbca4a
1 parent cdea816
commit 1bbca4a
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 4 deletions.
diff --git a/packages/e2e-tests/plugins/block-hooks.php b/packages/e2e-tests/plugins/block-hooks.php
@@ -33,11 +33,12 @@ function gutenberg_test_set_hooked_block_inner_html( $hooked_block, $hooked_bloc
 		( 'core/block' === $anchor_block['blockName'] && 'first_child' === $relative_position )
 	) {
 		$hooked_block['attrs']        = array(
-			'backgroundColor' => 'accent',
+			'className' => "hooked-block-${relative_position}-" . $anchor_block['blockName'],
 		);
 		$hooked_block['innerContent'] = array(
 			sprintf(
-				'<p class="has-background has-accent-background-color">This block was inserted by the Block Hooks API in the <code>%1$s</code> position next to the <code>%2$s</code> anchor block.</p>',
+				'<p class="%1$s">This block was inserted by the Block Hooks API in the <code>%2$s</code> position next to the <code>%3$s</code> anchor block.</p>',
+				$hooked_block['attrs']['className'],
 				$relative_position,
 				$anchor_block['blockName']
 			),

diff --git a/test/e2e/specs/editor/plugins/block-hooks.spec.js b/test/e2e/specs/editor/plugins/block-hooks.spec.js
@@ -11,8 +11,8 @@ test.describe( 'Block Hooks API', () => {
 	const getHookedBlockMarkup = (
 		relativePosition,
 		anchorBlock
-	) => `<!-- wp:paragraph {"backgroundColor":"accent"} -->
-<p class="has-background has-accent-background-color">
+	) => `<!-- wp:paragraph {"className":"hooked-block-${ relativePosition }-${ anchorBlock }"} -->
+<p class="hooked-block-${ relativePosition }-${ anchorBlock }">
 This block was inserted by the Block Hooks API in the <code>${ relativePosition }</code> position next to the <code>${ anchorBlock }</code> anchor block.
 </p><!-- /wp:paragraph -->`;