From 1bbca4a4b9003c620aed8ace7e4f4fa005fb55a0 Mon Sep 17 00:00:00 2001
From: Bernie Reiter <ockham@raz.or.at>
Date: Tue, 11 Feb 2025 14:26:07 +0100
Subject: [PATCH] Add custom class name to facilitate locating block

---
 packages/e2e-tests/plugins/block-hooks.php        | 5 +++--
 test/e2e/specs/editor/plugins/block-hooks.spec.js | 4 ++--
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/e2e-tests/plugins/block-hooks.php b/packages/e2e-tests/plugins/block-hooks.php
index 314dde800e043..0b3814cca0c44 100644
--- 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
index e175cad2d7c3d..84e324adfb46c 100644
--- 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 -->`;