Dynamically add CSS class to Paragraph block

packages/block-library/src/paragraph/index.php

@@ -0,0 +1,48 @@
+<?php
+/**
+ * Server-side rendering of the `core/paragraph` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Append the `wp-block-paragraph` class before rendering the stored
+ * `core/paragraph` block contents.
+ *
+ * For example, the following block content:
+ *  <p class="align-left">Hello World</p>
+ *
+ * Would be transformed to:
+ *  <p class="align-left wp-block-paragraph">Hello World</p>
+ *
+ * @since 7.0.0
+ *
+ * @param string $block_content The block content.
+ *
+ * @return string Filtered block content.
+ */
+function block_core_paragraph_add_class( $block_content ) {
+	if ( ! $block_content ) {
+		return $block_content;
+	}
+
+	$processor = new WP_HTML_Tag_Processor( $block_content );
+
+	if ( $processor->next_tag( 'p' ) ) {
+		$processor->add_class( 'wp-block-paragraph' );
+	}
+
+	return $processor->get_updated_html();
+}
+
+add_filter( 'render_block_core/paragraph', 'block_core_paragraph_add_class' );
+
+/**
+ * Registers the `core/paragraph` block on server.
+ *
+ * @since 7.0.0
+ */
+function register_block_core_paragraph() {
+	register_block_type_from_metadata( __DIR__ . '/paragraph' );
+}
+add_action( 'init', 'register_block_core_paragraph' );

phpunit/block-bindings-test.php

@@ -85,7 +85,7 @@ public function data_update_block_with_value_from_source() {
 <!-- /wp:paragraph -->
 HTML
 				,
-				'<p>test source value</p>',
+				'<p class="wp-block-paragraph">test source value</p>',
 			),
 			'button block'    => array(
 				'text',
@@ -162,19 +162,19 @@ function ( $source_args, $block_instance, $attribute_name ) {
 					$value = $source_args['key'];
 					return "The attribute name is '$attribute_name' and its binding has argument 'key' with value '$value'.";
 				},
-				"<p>The attribute name is 'content' and its binding has argument 'key' with value 'test'.</p>",
+				"<p class=\"wp-block-paragraph\">The attribute name is 'content' and its binding has argument 'key' with value 'test'.</p>",
 			),
 			'unsafe HTML should be sanitized' => array(
 				function () {
 					return '<script>alert("Unsafe HTML")</script>';
 				},
-				'<p>alert("Unsafe HTML")</p>',
+				'<p class="wp-block-paragraph">alert("Unsafe HTML")</p>',
 			),
 			'symbols and numbers should be rendered correctly' => array(
 				function () {
 					return '$12.50';
 				},
-				'<p>$12.50</p>',
+				'<p class="wp-block-paragraph">$12.50</p>',
 			),
 		);
 	}
@@ -386,7 +386,7 @@ public function test_filter_block_bindings_source_value() {
 		remove_filter( 'block_bindings_source_value', $filter_value );
 
 		$this->assertSame(
-			'<p>Filtered value: test_arg. Block instance: core/paragraph. Attribute name: content.</p>',
+			'<p class="wp-block-paragraph">Filtered value: test_arg. Block instance: core/paragraph. Attribute name: content.</p>',
 			trim( $result ),
 			'The block content should show the filtered value.'
 		);

phpunit/blocks/render-block-paragraph-test.php

@@ -0,0 +1,89 @@
+<?php
+/**
+ * Paragraph block rendering tests.
+ *
+ * @package WordPress
+ * @subpackage Blocks
+ */
+
+/**
+ * Tests for the Paragraph block.
+ *
+ * @group blocks
+ */
+class Render_Block_Paragraph_Test extends WP_UnitTestCase {
+
+	/**
+	 * @dataProvider data_css_class_examples
+	 *
+	 * @param string $input           The input HTML.
+	 * @param string $expected_result The expected result HTML.
+	 */
+	public function test_block_core_paragraph_render_appends_css_class_to_a_vanilla_element( $input, $expected_result ) {
+		$parsed_blocks = parse_blocks( '<!-- wp:paragraph -->' . $input . '<!-- /wp:paragraph -->' );
+		$block         = new WP_Block( $parsed_blocks[0] );
+		$actual        = $block->render();
+		$this->assertEquals( $expected_result, $actual );
+	}
+
+	public function data_css_class_examples() {
+		return array(
+			'should add a class name to a vanilla p element' => array(
+				'<p>Hello World</p>',
+				'<p class="wp-block-paragraph">Hello World</p>',
+			),
+			'should not add a class name to a div element' => array(
+				'<div>Hello World</div>',
+				'<div>Hello World</div>',
+			),
+			'should not add a class name to a span element' => array(
+				'<span>Hello World</span>',
+				'<span>Hello World</span>',
+			),
+			'should not add a class name to a heading element' => array(
+				'<h2>Hello World</h2>',
+				'<h2>Hello World</h2>',
+			),
+			'should add a class name even when the class attribute is already defined' => array(
+				'<p class="is-align-right">Hello World</p>',
+				'<p class="is-align-right wp-block-paragraph">Hello World</p>',
+			),
+			'should handle single quotes'                  => array(
+				"<p class='is-align-right'>Hello World</p>",
+				'<p class="is-align-right wp-block-paragraph">Hello World</p>',
+			),
+			'should handle single quotes with double quotes inside' => array(
+				"<p class='\" is-align-right'>Hello World</p>",
+				'<p class="&quot; is-align-right wp-block-paragraph">Hello World</p>',
+			),
+			'should not add a class name even when it is already defined' => array(
+				'<p class="is-align-right wp-block-paragraph">Hello World</p>',
+				'<p class="is-align-right wp-block-paragraph">Hello World</p>',
+			),
+			'should add a class name even when there are other HTML attributes present' => array(
+				'<p style="display: block">Hello World</p>',
+				'<p class="wp-block-paragraph" style="display: block">Hello World</p>',
+			),
+			'should add a class name even when the class attribute is already defined and has many entries' => array(
+				'<p class="is-align-right custom   classes">Hello World</p>',
+				'<p class="is-align-right custom   classes wp-block-paragraph">Hello World</p>',
+			),
+			'should not add a class name to a nested p'    => array(
+				'<p class="is-align-right custom classes"><p>Hello World</p></p>',
+				'<p class="is-align-right custom classes wp-block-paragraph"><p>Hello World</p></p>',
+			),
+			'should not add a class name to a nested p when the parent has another attribute' => array(
+				'<p style="display: block" class="is-align-right"><p>Hello World</p></p>',
+				'<p style="display: block" class="is-align-right wp-block-paragraph"><p>Hello World</p></p>',
+			),
+			'should add a class name even when the class attribute is surrounded by other attributes' => array(
+				'<p style="display: block" class="is-align-right" data-class="corner case!"><p>Hello World</p></p>',
+				'<p style="display: block" class="is-align-right wp-block-paragraph" data-class="corner case!"><p>Hello World</p></p>',
+			),
+			'should add a class name without getting confused when there is a tricky data-class attribute present' => array(
+				'<p data-class="corner case!" style="display: block" class="is-align-right"><p>Hello World</p></p>',
+				'<p data-class="corner case!" style="display: block" class="is-align-right wp-block-paragraph"><p>Hello World</p></p>',
+			),
+		);
+	}
+}

phpunit/blocks/renderReusable.php

@@ -63,6 +63,6 @@ public function test_render_respects_custom_context() {
 		);
 
 		$output = $synced_pattern_block_instance->render();
-		$this->assertSame( '<p>Custom content set from block context</p>', $output );
+		$this->assertSame( '<p class="wp-block-paragraph">Custom content set from block context</p>', $output );
 	}
 }

test/e2e/specs/editor/plugins/block-hooks.spec.js

@@ -10,7 +10,7 @@ const dummyBlocksContent = `<!-- wp:heading -->
 <p class="dummy-paragraph">This is a dummy paragraph.</p>
 <!-- /wp:paragraph -->`;
 const dummyClassicContent =
-	'<h2 class="dummy-heading">This is a dummy heading</h2><p class="dummy-paragraph">This is a dummy paragraph.</p>';
+	'<h2 class="dummy-classic-heading">This is a dummy heading</h2><p class="dummy-classic-paragraph">This is a dummy paragraph.</p>';
 
 const getHookedBlockClassName = ( relativePosition, anchorBlock ) =>
 	`hooked-block-${ relativePosition }-${ anchorBlock.replace(
@@ -84,9 +84,11 @@ test.describe( 'Block Hooks API', () => {
 					page.locator( '.entry-content > *' )
 				).toHaveClass( [
 					'wp-block-heading',
-					getHookedBlockClassName( 'after', 'core/heading' ),
-					'dummy-paragraph',
-					getHookedBlockClassName( 'last_child', blockType ),
+					getHookedBlockClassName( 'after', 'core/heading' ) +
+						' wp-block-paragraph',
+					'dummy-paragraph wp-block-paragraph',
+					getHookedBlockClassName( 'last_child', blockType ) +
+						' wp-block-paragraph',
 				] );
 			} );
 
@@ -158,9 +160,11 @@ test.describe( 'Block Hooks API', () => {
 					page.locator( '.entry-content > *' )
 				).toHaveClass( [
 					'wp-block-heading',
-					getHookedBlockClassName( 'after', 'core/heading' ),
-					getHookedBlockClassName( 'last_child', blockType ),
-					'dummy-paragraph',
+					getHookedBlockClassName( 'after', 'core/heading' ) +
+						' wp-block-paragraph',
+					getHookedBlockClassName( 'last_child', blockType ) +
+						' wp-block-paragraph',
+					'dummy-paragraph wp-block-paragraph',
 				] );
 			} );
 		} );
@@ -212,9 +216,10 @@ test.describe( 'Block Hooks API', () => {
 				await expect(
 					page.locator( '.entry-content > *' )
 				).toHaveClass( [
-					'dummy-heading',
-					'dummy-paragraph',
-					getHookedBlockClassName( 'last_child', blockType ),
+					'dummy-classic-heading',
+					'dummy-classic-paragraph',
+					getHookedBlockClassName( 'last_child', blockType ) +
+						' wp-block-paragraph',
 				] );
 			} );
 
@@ -271,9 +276,10 @@ test.describe( 'Block Hooks API', () => {
 				await expect(
 					page.locator( '.entry-content > *' )
 				).toHaveClass( [
-					getHookedBlockClassName( 'last_child', blockType ),
-					'dummy-heading',
-					'dummy-paragraph',
+					getHookedBlockClassName( 'last_child', blockType ) +
+						' wp-block-paragraph',
+					'dummy-classic-heading',
+					'dummy-classic-paragraph',
 				] );
 			} );
 		} );