diff --git a/lib/class-wp-duotone-gutenberg.php b/lib/class-wp-duotone-gutenberg.php
index 3544f58036710..c3cad8c6de06e 100644
--- a/lib/class-wp-duotone-gutenberg.php
+++ b/lib/class-wp-duotone-gutenberg.php
@@ -360,11 +360,11 @@ public static function render_duotone_support( $block_content, $block ) {
 		);
 
 		// Like the layout hook, this assumes the hook only applies to blocks with a single wrapper.
-		return preg_replace(
-			'/' . preg_quote( 'class="', '/' ) . '/',
-			'class="' . $filter_id . ' ',
-			$block_content,
-			1
-		);
+		$tags = new WP_HTML_Tag_Processor( $block_content );
+		if ( $tags->next_tag() ) {
+			$tags->add_class( $filter_id );
+		}
+
+		return $tags->get_updated_html();
 	}
 }
diff --git a/phpunit/class-wp-duotone-test.php b/phpunit/class-wp-duotone-test.php
index 21df35847fac5..49ef631e65f02 100644
--- a/phpunit/class-wp-duotone-test.php
+++ b/phpunit/class-wp-duotone-test.php
@@ -21,7 +21,7 @@ public function test_gutenberg_render_duotone_support_preset() {
 			'attrs'     => array( 'style' => array( 'color' => array( 'duotone' => 'var:preset|duotone|blue-orange' ) ) ),
 		);
 		$block_content = '<figure class="wp-block-image size-full"><img src="/my-image.jpg" /></figure>';
-		$expected      = '<figure class="wp-duotone-blue-orange wp-block-image size-full"><img src="/my-image.jpg" /></figure>';
+		$expected      = '<figure class="wp-block-image size-full wp-duotone-blue-orange"><img src="/my-image.jpg" /></figure>';
 		$this->assertSame( $expected, WP_Duotone_Gutenberg::render_duotone_support( $block_content, $block ) );
 	}
 
@@ -31,7 +31,7 @@ public function test_gutenberg_render_duotone_support_css() {
 			'attrs'     => array( 'style' => array( 'color' => array( 'duotone' => 'unset' ) ) ),
 		);
 		$block_content = '<figure class="wp-block-image size-full"><img src="/my-image.jpg" /></figure>';
-		$expected      = '/<figure class="wp-duotone-unset-\d+ wp-block-image size-full"><img src="\\/my-image.jpg" \\/><\\/figure>/';
+		$expected      = '/<figure class="wp-block-image size-full wp-duotone-unset-\d+"><img src="\\/my-image.jpg" \\/><\\/figure>/';
 		$this->assertMatchesRegularExpression( $expected, WP_Duotone_Gutenberg::render_duotone_support( $block_content, $block ) );
 	}
 
@@ -41,7 +41,7 @@ public function test_gutenberg_render_duotone_support_custom() {
 			'attrs'     => array( 'style' => array( 'color' => array( 'duotone' => array( '#FFFFFF', '#000000' ) ) ) ),
 		);
 		$block_content = '<figure class="wp-block-image size-full"><img src="/my-image.jpg" /></figure>';
-		$expected      = '/<figure class="wp-duotone-ffffff-000000-\d+ wp-block-image size-full"><img src="\\/my-image.jpg" \\/><\\/figure>/';
+		$expected      = '/<figure class="wp-block-image size-full wp-duotone-ffffff-000000-\d+"><img src="\\/my-image.jpg" \\/><\\/figure>/';
 		$this->assertMatchesRegularExpression( $expected, WP_Duotone_Gutenberg::render_duotone_support( $block_content, $block ) );
 	}