[Heading block] Add a wp-block-heading CSS class

docs/reference-guides/core-blocks.md

@@ -60,7 +60,7 @@ Prompt visitors to take action with a group of button-style links. ([Source](htt
 -	**Name:** core/buttons
 -	**Category:** design
 -	**Supports:** align (full, wide), anchor, spacing (blockGap, margin), typography (fontSize, lineHeight)
--	**Attributes:** 
+-	**Attributes:**
 
 ## Calendar
 
@@ -168,7 +168,7 @@ Contains the block elements used to display a comment, like the title, date, aut
 -	**Name:** core/comment-template
 -	**Category:** design
 -	**Supports:** align, spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
--	**Attributes:** 
+-	**Attributes:**
 
 ## Comments
 
@@ -204,7 +204,7 @@ Displays a list of page numbers for comments pagination. ([Source](https://githu
 -	**Name:** core/comments-pagination-numbers
 -	**Category:** theme
 -	**Supports:** color (background, gradients, ~~text~~), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
--	**Attributes:** 
+-	**Attributes:**
 
 ## Comments Previous Page
 
@@ -420,7 +420,7 @@ Separate your content into a multi-page experience. ([Source](https://github.com
 -	**Name:** core/nextpage
 -	**Category:** design
 -	**Supports:** ~~className~~, ~~customClassName~~, ~~html~~
--	**Attributes:** 
+-	**Attributes:**
 
 ## Page List
 
@@ -528,7 +528,7 @@ Displays the contents of a post or page. ([Source](https://github.com/WordPress/
 -	**Name:** core/post-content
 -	**Category:** theme
 -	**Supports:** align (full, wide), dimensions (minHeight), typography (fontSize, lineHeight), ~~html~~
--	**Attributes:** 
+-	**Attributes:**
 
 ## Post Date
 
@@ -573,7 +573,7 @@ Contains the block elements used to render a post, like the title, date, feature
 -	**Name:** core/post-template
 -	**Category:** theme
 -	**Supports:** align, typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
--	**Attributes:** 
+-	**Attributes:**
 
 ## Post Terms
 
@@ -627,7 +627,7 @@ Contains the block elements used to render content when no query results are fou
 -	**Name:** core/query-no-results
 -	**Category:** theme
 -	**Supports:** align, color (background, gradients, link, text), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
--	**Attributes:** 
+-	**Attributes:**
 
 ## Pagination
 
@@ -654,7 +654,7 @@ Displays a list of page numbers for pagination ([Source](https://github.com/Word
 -	**Name:** core/query-pagination-numbers
 -	**Category:** theme
 -	**Supports:** color (background, gradients, ~~text~~), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
--	**Attributes:** 
+-	**Attributes:**
 
 ## Previous Page
 

lib/blocks.php

@@ -23,7 +23,6 @@ function gutenberg_reregister_core_block_types() {
 				'columns',
 				'comments',
 				'group',
-				'heading',
 				'html',
 				'list',
 				'list-item',
@@ -69,6 +68,7 @@ function gutenberg_reregister_core_block_types() {
 				'home-link.php'                    => 'core/home-link',
 				'image.php'                        => 'core/image',
 				'gallery.php'                      => 'core/gallery',
+				'heading.php'                      => 'core/heading',
 				'latest-comments.php'              => 'core/latest-comments',
 				'latest-posts.php'                 => 'core/latest-posts',
 				'loginout.php'                     => 'core/loginout',

packages/block-library/src/heading/block.json

@@ -29,7 +29,7 @@
 	"supports": {
 		"align": [ "wide", "full" ],
 		"anchor": true,
-		"className": false,
+		"className": true,
 		"color": {
 			"gradients": true,
 			"link": true,

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

@@ -0,0 +1,51 @@
+<?php
+/**
+ * Appending the wp-block-heading to before rendering the stored `core/heading` block contents.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Adds a wp-block-heading class to the heading block content.
+ *
+ * For example, the following block content:
+ *  <h2 class="align-left">Hello World</h2>
+ *
+ * Would be transformed to:
+ *  <h2 class="align-left wp-block-heading">Hello World</h2>
+ *
+ * @param array  $attributes Attributes of the block being rendered.
+ * @param string $content Content of the block being rendered.
+ *
+ * @return string The content of the block being rendered.
+ */
+function block_core_heading_render( $attributes, $content ) {
+	if ( ! $content ) {
+		return $content;
+	}
+
+	$p = new WP_HTML_Tag_Processor( $content );
+
+	$header_tags = array( 'H1', 'H2', 'H3', 'H4', 'H5', 'H6' );
+	while ( $p->next_tag() ) {
+		if ( in_array( $p->get_tag(), $header_tags, true ) ) {
+			$p->add_class( 'wp-block-heading' );
+		}
+	}
+
+	return $p->get_updated_html();
+}
+
+/**
+ * Registers the `core/heading` block on server.
+ */
+function register_block_core_heading() {
+	register_block_type_from_metadata(
+		__DIR__ . '/heading',
+		array(
+			'render_callback' => 'block_core_heading_render',
+		)
+	);
+}
+
+add_action( 'init', 'register_block_core_heading' );

packages/e2e-tests/specs/editor/blocks/__snapshots__/heading.test.js.snap

@@ -2,19 +2,19 @@
 
 exports[`Heading can be created by prefixing existing content with number signs and a space 1`] = `
 "<!-- wp:heading {\\"level\\":4} -->
-<h4>4</h4>
+<h4 class=\\"wp-block-heading\\">4</h4>
 <!-- /wp:heading -->"
 `;
 
 exports[`Heading can be created by prefixing number sign and a space 1`] = `
 "<!-- wp:heading {\\"level\\":3} -->
-<h3>3</h3>
+<h3 class=\\"wp-block-heading\\">3</h3>
 <!-- /wp:heading -->"
 `;
 
 exports[`Heading should correctly apply named colors 1`] = `
 "<!-- wp:heading {\\"textColor\\":\\"luminous-vivid-orange\\"} -->
-<h2 class=\\"has-luminous-vivid-orange-color has-text-color\\">Heading</h2>
+<h2 class=\\"wp-block-heading has-luminous-vivid-orange-color has-text-color\\">Heading</h2>
 <!-- /wp:heading -->"
 `;
 
@@ -24,13 +24,13 @@ exports[`Heading should create a paragraph block above when pressing enter at th
 <!-- /wp:paragraph -->
 
 <!-- wp:heading -->
-<h2>a</h2>
+<h2 class=\\"wp-block-heading\\">a</h2>
 <!-- /wp:heading -->"
 `;
 
 exports[`Heading should create a paragraph block below when pressing enter at the end 1`] = `
 "<!-- wp:heading -->
-<h2>a</h2>
+<h2 class=\\"wp-block-heading\\">a</h2>
 <!-- /wp:heading -->
 
 <!-- wp:paragraph -->
@@ -40,12 +40,12 @@ exports[`Heading should create a paragraph block below when pressing enter at th
 
 exports[`Heading should not work with the list input rule 1`] = `
 "<!-- wp:heading -->
-<h2>1. H</h2>
+<h2 class=\\"wp-block-heading\\">1. H</h2>
 <!-- /wp:heading -->"
 `;
 
 exports[`Heading should work with the format input rules 1`] = `
 "<!-- wp:heading -->
-<h2><code>code</code></h2>
+<h2 class=\\"wp-block-heading\\"><code>code</code></h2>
 <!-- /wp:heading -->"
 `;

packages/e2e-tests/specs/editor/blocks/heading.test.js

@@ -87,7 +87,7 @@ describe( 'Heading', () => {
 		await page.keyboard.press( 'Enter' );
 		expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
 		"<!-- wp:heading {\\"level\\":3,\\"style\\":{\\"color\\":{\\"text\\":\\"#4b7f4d\\"}}} -->
-		<h3 class=\\"has-text-color\\" style=\\"color:#4b7f4d\\">Heading</h3>
+		<h3 class=\\"wp-block-heading has-text-color\\" style=\\"color:#4b7f4d\\">Heading</h3>
 		<!-- /wp:heading -->"
 	` );
 	} );

packages/e2e-tests/specs/editor/various/__snapshots__/block-grouping.test.js.snap

@@ -3,7 +3,7 @@
 exports[`Block Grouping Group creation creates a group from multiple blocks of different types via block transforms 1`] = `
 "<!-- wp:group {\\"layout\\":{\\"type\\":\\"constrained\\"}} -->
 <div class=\\"wp-block-group\\"><!-- wp:heading -->
-<h2>Group Heading</h2>
+<h2 class=\\"wp-block-heading\\">Group Heading</h2>
 <!-- /wp:heading -->
 
 <!-- wp:image -->
@@ -51,7 +51,7 @@ exports[`Block Grouping Group creation creates a group from multiple blocks of t
 exports[`Block Grouping Group creation groups and ungroups multiple blocks of different types via options toolbar 1`] = `
 "<!-- wp:group {\\"layout\\":{\\"type\\":\\"constrained\\"}} -->
 <div class=\\"wp-block-group\\"><!-- wp:heading -->
-<h2>Group Heading</h2>
+<h2 class=\\"wp-block-heading\\">Group Heading</h2>
 <!-- /wp:heading -->
 
 <!-- wp:image -->
@@ -66,7 +66,7 @@ exports[`Block Grouping Group creation groups and ungroups multiple blocks of di
 
 exports[`Block Grouping Group creation groups and ungroups multiple blocks of different types via options toolbar 2`] = `
 "<!-- wp:heading -->
-<h2>Group Heading</h2>
+<h2 class=\\"wp-block-heading\\">Group Heading</h2>
 <!-- /wp:heading -->
 
 <!-- wp:image -->
@@ -81,7 +81,7 @@ exports[`Block Grouping Group creation groups and ungroups multiple blocks of di
 exports[`Block Grouping Preserving selected blocks attributes preserves width alignment settings of selected blocks 1`] = `
 "<!-- wp:group {\\"align\\":\\"full\\",\\"layout\\":{\\"type\\":\\"constrained\\"}} -->
 <div class=\\"wp-block-group alignfull\\"><!-- wp:heading -->
-<h2>Group Heading</h2>
+<h2 class=\\"wp-block-heading\\">Group Heading</h2>
 <!-- /wp:heading -->
 
 <!-- wp:image {\\"align\\":\\"full\\"} -->

packages/e2e-tests/specs/editor/various/__snapshots__/inserting-blocks.test.js.snap

@@ -71,7 +71,7 @@ exports[`Inserting blocks inserts a block in proper place after having clicked \
 <!-- /wp:paragraph -->
 
 <!-- wp:heading -->
-<h2>Heading</h2>
+<h2 class=\\"wp-block-heading\\">Heading</h2>
 <!-- /wp:heading -->
 
 <!-- wp:paragraph -->
@@ -93,7 +93,7 @@ exports[`Inserting blocks inserts a block in proper place after having clicked \
 <!-- /wp:cover -->
 
 <!-- wp:heading -->
-<h2>Heading</h2>
+<h2 class=\\"wp-block-heading\\">Heading</h2>
 <!-- /wp:heading -->
 
 <!-- wp:paragraph -->

packages/e2e-tests/specs/editor/various/__snapshots__/keep-styles-on-block-transforms.test.js.snap

@@ -8,15 +8,15 @@ exports[`Keep styles on block transforms Should keep colors during a transform 1
 
 exports[`Keep styles on block transforms Should keep the font size during a transform from multiple blocks into multiple blocks 1`] = `
 "<!-- wp:heading {\\"fontSize\\":\\"large\\"} -->
-<h2 class=\\"has-large-font-size\\">Line 1 to be made large</h2>
+<h2 class=\\"wp-block-heading has-large-font-size\\">Line 1 to be made large</h2>
 <!-- /wp:heading -->
 
 <!-- wp:heading {\\"fontSize\\":\\"large\\"} -->
-<h2 class=\\"has-large-font-size\\">Line 2 to be made large</h2>
+<h2 class=\\"wp-block-heading has-large-font-size\\">Line 2 to be made large</h2>
 <!-- /wp:heading -->
 
 <!-- wp:heading {\\"fontSize\\":\\"large\\"} -->
-<h2 class=\\"has-large-font-size\\">Line 3 to be made large</h2>
+<h2 class=\\"wp-block-heading has-large-font-size\\">Line 3 to be made large</h2>
 <!-- /wp:heading -->"
 `;
 

packages/e2e-tests/specs/editor/various/__snapshots__/list-view.test.js.snap

@@ -6,7 +6,7 @@ exports[`List view allows a user to drag a block to a new sibling position 1`] =
 <!-- /wp:paragraph -->
 
 <!-- wp:heading -->
-<h2></h2>
+<h2 class=\\"wp-block-heading\\"></h2>
 <!-- /wp:heading -->
 
 <!-- wp:image -->

packages/e2e-tests/specs/editor/various/__snapshots__/multi-block-selection.test.js.snap

@@ -84,13 +84,13 @@ exports[`Multi-block selection should forward delete across blocks 1`] = `
 <!-- /wp:paragraph -->
 
 <!-- wp:heading -->
-<h2>]2</h2>
+<h2 class=\\"wp-block-heading\\">]2</h2>
 <!-- /wp:heading -->"
 `;
 
 exports[`Multi-block selection should forward delete across blocks 2`] = `
 "<!-- wp:heading -->
-<h2>1&amp;2</h2>
+<h2 class=\\"wp-block-heading\\">1&amp;2</h2>
 <!-- /wp:heading -->"
 `;
 
@@ -128,7 +128,7 @@ exports[`Multi-block selection should handle Enter across blocks 1`] = `
 <!-- /wp:paragraph -->
 
 <!-- wp:heading -->
-<h2>]2</h2>
+<h2 class=\\"wp-block-heading\\">]2</h2>
 <!-- /wp:heading -->"
 `;
 
@@ -142,7 +142,7 @@ exports[`Multi-block selection should handle Enter across blocks 2`] = `
 <!-- /wp:paragraph -->
 
 <!-- wp:heading -->
-<h2>2</h2>
+<h2 class=\\"wp-block-heading\\">2</h2>
 <!-- /wp:heading -->"
 `;
 

packages/e2e-tests/specs/editor/various/__snapshots__/rich-text.test.js.snap

@@ -32,7 +32,7 @@ exports[`RichText should handle Home and End keys 1`] = `
 
 exports[`RichText should handle change in tag name gracefully 1`] = `
 "<!-- wp:heading {\\"level\\":3} -->
-<h3></h3>
+<h3 class=\\"wp-block-heading\\"></h3>
 <!-- /wp:heading -->"
 `;