WordPress · juanfra · Jan 19, 2023 · Jan 19, 2023 · Jan 23, 2023 · Jan 23, 2023
@@ -90,7 +90,7 @@ Due to the lack of inline snapshots in Playwright, some migrated tests are using
 
 ```js
 expect( await editor.getEditedPostContent() ).toBe( `<!-- wp:paragraph -->
-<p>Paragraph</p>
+<p class="wp-block-paragraph">Paragraph</p>
 <!-- /wp:paragraph -->` );
 ```
 

@@ -18,7 +18,7 @@ Blocks understand content as attributes and are serializable to HTML. To this po
 
 ```html
 <!-- wp:paragraph {"key": "value"} -->
-<p>Welcome to the world of blocks.</p>
+<p class="wp-block-paragraph">Welcome to the world of blocks.</p>
 <!-- /wp:paragraph -->
 ```
 

@@ -27,7 +27,7 @@ Since the introduction of the block editor in WordPress 5.0, there were tools fo
 By default, blocks come with a given HTML markup. Think of the paragraph block, for example:
 
 ```html
-<p></p>
+<p class="wp-block-paragraph"></p>
 ```
 
 In its simplest form, any style rule that targets the `p` selector will apply styles to this block, whether it comes from a block, a theme, etc.
@@ -37,7 +37,7 @@ The user may change the state of this block by applying different styles: a text
 After some user modifications to the block, the initial markup may become something like this:
 
 ```html
-<p class="has-color has-green-color has-font-size has-small-font-size my-custom-class"
+<p class="wp-block-paragraph has-color has-green-color has-font-size has-small-font-size my-custom-class"
 	style="line-height: 1em"></p>
 ```
 

@@ -90,6 +90,7 @@ When you add `supports` for any feature, the proper classes get added to the obj
 
 ```html
 <p class="
+    wp-block-paragraph
     wp-block-block-development-examples-block-supports-6aa4dd
     has-accent-4-color
     has-contrast-background-color

@@ -713,7 +713,7 @@ Compare this to a statically rendered block like the Paragraph block.
 
 ```html
 <!-- wp:paragraph -->
-<p>This is a test.</p>
+<p class="wp-block-paragraph">This is a test.</p>
 <!-- /wp:paragraph -->
 ```
 

@@ -32,7 +32,7 @@ To opt into this, include `core/post-content` in the Block Types for your patter
 <!-- /wp:heading -->
 
 <!-- wp:paragraph {"lock":{"move":true,"remove":true}} -->
-<p>To RSVP, please join the #fse-outreach-experiment in Make Slack. </p>
+<p class="wp-block-paragraph">To RSVP, please join the #fse-outreach-experiment in Make Slack. </p>
 <!-- /wp:paragraph -->
 
 <!-- wp:buttons -->
@@ -43,7 +43,7 @@ To opt into this, include `core/post-content` in the Block Types for your patter
 
 <!-- wp:cover {"useFeaturedImage":true,"dimRatio":80,"overlayColor":"primary","contentPosition":"center center","align":"full"} -->
 <div class="wp-block-cover alignfull"><span aria-hidden="true" class="wp-block-cover__background has-primary-background-color has-background-dim-80 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write titleā¦","fontSize":"large"} -->
-<p class="has-text-align-center has-large-font-size">We hope to see you there!</p>
+<p class="wp-block-paragraph has-text-align-center has-large-font-size">We hope to see you there!</p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:cover -->
 ```
@@ -62,7 +62,7 @@ register_block_pattern(
   array(
       'title'         => __( '404 Only template pattern', 'wp-my-theme' ),
       'templateTypes' => array( '404' ),
-      'content'       => '<!-- wp:paragraph {"align":"center","fontSize":"x-large"} --><p class="has-text-align-center has-x-large-font-size">404 pattern</p><!-- /wp:paragraph -->',
+      'content'       => '<!-- wp:paragraph {"align":"center","fontSize":"x-large"} --><p class="wp-block-paragraph has-text-align-center has-x-large-font-size">404 pattern</p><!-- /wp:paragraph -->',
   )
 );
 ```
@@ -87,4 +87,4 @@ The content creator will then find the respective Pattern in the inserter “Pat
 
 ## Additional resources
 
-- [Using template patterns to build multiple homepage designs](https://developer.wordpress.org/news/2023/04/13/using-template-patterns-to-build-multiple-homepage-designs/) (WordPress Developer Blog)
+- [Using template patterns to build multiple homepage designs](https://developer.wordpress.org/news/2023/04/13/using-template-patterns-to-build-multiple-homepage-designs/) (WordPress Developer Blog)
@@ -502,7 +502,7 @@ If you open DeveloperTools and inspect the LocalStorage you will see serialized
 <!-- /wp:heading -->
 
 <!-- wp:paragraph -->
-<p>This is an experiment to discover how easy (or otherwise) it is to create a standalone instance of the Block Editor in the WordPress admin.</p>
+<p class="wp-block-paragraph">This is an experiment to discover how easy (or otherwise) it is to create a standalone instance of the Block Editor in the WordPress admin.</p>
 <!-- /wp:paragraph -->
 ```
 

@@ -152,7 +152,7 @@ register_block_pattern(
 		'title'      => __( 'Powered by WordPress', 'my-plugin' ),
 		'blockTypes' => array( 'core/paragraph' ),
 		'content'    => '<!-- wp:paragraph {"backgroundColor":"black","textColor":"white"} -->
-		<p class="has-white-color has-black-background-color has-text-color has-background">Powered by WordPress</p>
+		<p class="wp-block-paragraph has-white-color has-black-background-color has-text-color has-background">Powered by WordPress</p>
 		<!-- /wp:paragraph -->',
 	)
 );
@@ -174,7 +174,7 @@ register_block_pattern(
 						<h2 class="has-large-font-size"><span style="color:#ba0c49" class="has-inline-color">Hi everyone</span></h2>
 						<!-- /wp:heading -->
 						<!-- wp:paragraph {"backgroundColor":"black","textColor":"white"} -->
-						<p class="has-white-color has-black-background-color has-text-color has-background">Powered by WordPress</p>
+						<p class="wp-block-paragraph has-white-color has-black-background-color has-text-color has-background">Powered by WordPress</p>
 						<!-- /wp:paragraph -->
 						</div><!-- /wp:group -->',
 	)

@@ -531,7 +531,7 @@ Start with the basic building block of all narrative. ([Source](https://github.c
 
 -	**Name:** core/paragraph
 -	**Category:** text
--	**Supports:** __unstablePasteTextInline, anchor, color (background, gradients, link, text), interactivity (clientNavigation), spacing (margin, padding), splitting, typography (fontSize, lineHeight), ~~className~~
+-	**Supports:** __unstablePasteTextInline, anchor, color (background, gradients, link, text), interactivity (clientNavigation), spacing (margin, padding), splitting, typography (fontSize, lineHeight)
 -	**Attributes:** align, content, direction, dropCap, placeholder
 
 ## Pattern Placeholder

@@ -83,6 +83,7 @@ function gutenberg_reregister_core_block_types() {
 				'navigation-link.php'              => 'core/navigation-link',
 				'navigation-submenu.php'           => 'core/navigation-submenu',
 				'page-list.php'                    => 'core/page-list',
+				'paragraph.php'                    => 'core/paragraph',
 				'page-list-item.php'               => 'core/page-list-item',
 				'pattern.php'                      => 'core/pattern',
 				'post-author.php'                  => 'core/post-author',

@@ -2,7 +2,7 @@
 
 exports[`BlockDraggable moves blocks: Initial order 1`] = `
 "<!-- wp:paragraph -->
-<p>This is a paragraph.</p>
+<p class="wp-block-paragraph">This is a paragraph.</p>
 <!-- /wp:paragraph -->
 
 <!-- wp:image {"sizeSlug":"large"} -->
@@ -30,7 +30,7 @@ exports[`BlockDraggable moves blocks: Paragraph block moved from first to second
 <!-- /wp:image -->
 
 <!-- wp:paragraph -->
-<p>This is a paragraph.</p>
+<p class="wp-block-paragraph">This is a paragraph.</p>
 <!-- /wp:paragraph -->
 
 <!-- wp:spacer -->
@@ -58,7 +58,7 @@ exports[`BlockDraggable moves blocks: Spacer block moved from third to first pos
 <!-- /wp:image -->
 
 <!-- wp:paragraph -->
-<p>This is a paragraph.</p>
+<p class="wp-block-paragraph">This is a paragraph.</p>
 <!-- /wp:paragraph -->
 
 <!-- wp:gallery {"linkTo":"none"} -->

diff --git a/packages/block-editor/src/components/block-draggable/test/index.native.js b/packages/block-editor/src/components/block-draggable/test/index.native.js
@@ -46,7 +46,7 @@ const BLOCKS = [
 		name: 'Paragraph',
 		html: `
 		<!-- wp:paragraph -->
-		<p>This is a paragraph.</p>
+		<p class="wp-block-paragraph">This is a paragraph.</p>
 		<!-- /wp:paragraph -->`,
 		layout: { x: 0, y: 0, width: 100, height: 100 },
 	},

@@ -2,7 +2,7 @@
 
 exports[`Block Mover Picker moving blocks disables the Move Down button for the last block 1`] = `
 "<!-- wp:paragraph -->
-<p>Hello!</p>
+<p class="wp-block-paragraph">Hello!</p>
 <!-- /wp:paragraph -->
 
 <!-- wp:spacer -->
@@ -16,7 +16,7 @@ exports[`Block Mover Picker moving blocks disables the Move Down button for the
 
 exports[`Block Mover Picker moving blocks disables the Move Up button for the first block 1`] = `
 "<!-- wp:paragraph -->
-<p>Hello!</p>
+<p class="wp-block-paragraph">Hello!</p>
 <!-- /wp:paragraph -->
 
 <!-- wp:spacer -->
@@ -34,7 +34,7 @@ exports[`Block Mover Picker moving blocks moves blocks up and down 1`] = `
 <!-- /wp:heading -->
 
 <!-- wp:paragraph -->
-<p>Hello!</p>
+<p class="wp-block-paragraph">Hello!</p>
 <!-- /wp:paragraph -->
 
 <!-- wp:spacer -->

@@ -384,7 +384,7 @@ export default [
 										},
 										innerBlocks: [],
 										originalContent:
-											'<p class="has-text-align-right has-black-color has-text-color" style="font-size:148px;font-style:normal;font-weight:700;letter-spacing:-4px;line-height:0.8;text-transform:uppercase">Let<br>\'EM<br>Roll</p>',
+											'<p class="wp-block-paragraph has-text-align-right has-black-color has-text-color" style="font-size:148px;font-style:normal;font-weight:700;letter-spacing:-4px;line-height:0.8;text-transform:uppercase">Let<br>\'EM<br>Roll</p>',
 										validationIssues: [],
 									},
 									{
@@ -410,7 +410,7 @@ export default [
 										},
 										innerBlocks: [],
 										originalContent:
-											'<p class="has-text-align-right has-white-color has-text-color" style="font-size:148px;font-style:normal;font-weight:700;letter-spacing:-4px;line-height:0.8;text-transform:uppercase">Big<br>John<br>Patton</p>',
+											'<p class="wp-block-paragraph has-text-align-right has-white-color has-text-color" style="font-size:148px;font-style:normal;font-weight:700;letter-spacing:-4px;line-height:0.8;text-transform:uppercase">Big<br>John<br>Patton</p>',
 										validationIssues: [],
 									},
 								],
@@ -500,7 +500,7 @@ export default [
 										},
 										innerBlocks: [],
 										originalContent:
-											'<p class="has-text-color" style="color:#000000;font-size:30px;line-height:1.1"><strong>Oceanic Inspiration</strong></p>',
+											'<p class="wp-block-paragraph has-text-color" style="color:#000000;font-size:30px;line-height:1.1"><strong>Oceanic Inspiration</strong></p>',
 										validationIssues: [],
 									},
 								],
@@ -592,7 +592,7 @@ export default [
 										},
 										innerBlocks: [],
 										originalContent:
-											'<p class="has-text-color has-extra-small-font-size" style="color:#000000">Winding veils round their heads, the women walked on deck. They were now moving steadily down the river, passing the dark shapes of ships at anchor, and London was a swarm of lights with a pale yellow canopy drooping above it. There were the lights of the great theatres, the lights of the long streets, lights that indicated huge squares of domestic comfort, lights that hung high in air.</p>',
+											'<p class="wp-block-paragraph has-text-color has-extra-small-font-size" style="color:#000000">Winding veils round their heads, the women walked on deck. They were now moving steadily down the river, passing the dark shapes of ships at anchor, and London was a swarm of lights with a pale yellow canopy drooping above it. There were the lights of the great theatres, the lights of the long streets, lights that indicated huge squares of domestic comfort, lights that hung high in air.</p>',
 										validationIssues: [],
 									},
 								],
@@ -625,7 +625,7 @@ export default [
 										},
 										innerBlocks: [],
 										originalContent:
-											'<p class="has-text-color has-extra-small-font-size" style="color:#000000">No darkness would ever settle upon those lamps, as no darkness had settled upon them for hundreds of years. It seemed dreadful that the town should blaze for ever in the same spot; dreadful at least to people going away to adventure upon the sea, and beholding it as a circumscribed mound, eternally burnt, eternally scarred. From the deck of the ship the great city appeared a crouched and cowardly figure, a sedentary miser.</p>',
+											'<p class="wp-block-paragraph has-text-color has-extra-small-font-size" style="color:#000000">No darkness would ever settle upon those lamps, as no darkness had settled upon them for hundreds of years. It seemed dreadful that the town should blaze for ever in the same spot; dreadful at least to people going away to adventure upon the sea, and beholding it as a circumscribed mound, eternally burnt, eternally scarred. From the deck of the ship the great city appeared a crouched and cowardly figure, a sedentary miser.</p>',
 										validationIssues: [],
 									},
 								],
@@ -737,7 +737,7 @@ export default [
 								},
 								innerBlocks: [],
 								originalContent:
-									'<p class="has-text-align-left has-black-color has-text-color" style="font-size:148px;font-style:normal;font-weight:700;letter-spacing:-2px;line-height:0.9;text-transform:uppercase"><mark style="color:#a65a00" class="has-inline-color">✴︎</mark> Walk</p>',
+									'<p class="wp-block-paragraph has-text-align-left has-black-color has-text-color" style="font-size:148px;font-style:normal;font-weight:700;letter-spacing:-2px;line-height:0.9;text-transform:uppercase"><mark style="color:#a65a00" class="has-inline-color">✴︎</mark> Walk</p>',
 								validationIssues: [],
 							},
 							{
@@ -763,7 +763,7 @@ export default [
 								},
 								innerBlocks: [],
 								originalContent:
-									'<p class="has-text-align-right has-black-color has-text-color" style="font-size:148px;font-style:normal;font-weight:700;letter-spacing:-2px;line-height:0.9;text-transform:uppercase">In the</p>',
+									'<p class="wp-block-paragraph has-text-align-right has-black-color has-text-color" style="font-size:148px;font-style:normal;font-weight:700;letter-spacing:-2px;line-height:0.9;text-transform:uppercase">In the</p>',
 								validationIssues: [],
 							},
 							{
@@ -789,7 +789,7 @@ export default [
 								},
 								innerBlocks: [],
 								originalContent:
-									'<p class="has-text-align-left has-black-color has-text-color" style="font-size:148px;font-style:normal;font-weight:700;letter-spacing:-2px;line-height:0.9;text-transform:uppercase">Park</p>',
+									'<p class="wp-block-paragraph has-text-align-left has-black-color has-text-color" style="font-size:148px;font-style:normal;font-weight:700;letter-spacing:-2px;line-height:0.9;text-transform:uppercase">Park</p>',
 								validationIssues: [],
 							},
 							{
@@ -817,7 +817,7 @@ export default [
 								},
 								innerBlocks: [],
 								originalContent:
-									'<p class="has-text-align-center has-text-color" style="color:#a65a00;font-size:140px;font-style:italic;font-weight:200;letter-spacing:0px;line-height:0.9;text-transform:uppercase">—01.03</p>',
+									'<p class="wp-block-paragraph has-text-align-center has-text-color" style="color:#a65a00;font-size:140px;font-style:italic;font-weight:200;letter-spacing:0px;line-height:0.9;text-transform:uppercase">—01.03</p>',
 								validationIssues: [],
 							},
 						],

@@ -2,7 +2,7 @@
 
 exports[`Block Actions Menu block options copies and pastes a block 1`] = `
 "<!-- wp:paragraph -->
-<p>Hello!</p>
+<p class="wp-block-paragraph">Hello!</p>
 <!-- /wp:paragraph -->
 
 <!-- wp:heading -->
@@ -28,13 +28,13 @@ exports[`Block Actions Menu block options cuts and pastes a block 1`] = `
 <!-- /wp:heading -->
 
 <!-- wp:paragraph -->
-<p>Hello!</p>
+<p class="wp-block-paragraph">Hello!</p>
 <!-- /wp:paragraph -->"
 `;
 
 exports[`Block Actions Menu block options does not replace a non empty Paragraph block when pasting another block 1`] = `
 "<!-- wp:paragraph -->
-<p>Hello!</p>
+<p class="wp-block-paragraph">Hello!</p>
 <!-- /wp:paragraph -->
 
 <!-- wp:heading -->
@@ -52,7 +52,7 @@ exports[`Block Actions Menu block options does not replace a non empty Paragraph
 
 exports[`Block Actions Menu block options duplicates a block 1`] = `
 "<!-- wp:paragraph -->
-<p>Hello!</p>
+<p class="wp-block-paragraph">Hello!</p>
 <!-- /wp:paragraph -->
 
 <!-- wp:spacer -->
@@ -84,7 +84,7 @@ exports[`Block Actions Menu block options transforms a Paragraph block into a Pu
 
 exports[`Block Actions Menu moving blocks disables the Move Down button for the last block 1`] = `
 "<!-- wp:paragraph -->
-<p>Hello!</p>
+<p class="wp-block-paragraph">Hello!</p>
 <!-- /wp:paragraph -->
 
 <!-- wp:spacer -->
@@ -98,7 +98,7 @@ exports[`Block Actions Menu moving blocks disables the Move Down button for the
 
 exports[`Block Actions Menu moving blocks disables the Move Up button for the first block 1`] = `
 "<!-- wp:paragraph -->
-<p>Hello!</p>
+<p class="wp-block-paragraph">Hello!</p>
 <!-- /wp:paragraph -->
 
 <!-- wp:spacer -->
@@ -116,7 +116,7 @@ exports[`Block Actions Menu moving blocks moves blocks up and down 1`] = `
 <!-- /wp:heading -->
 
 <!-- wp:paragraph -->
-<p>Hello!</p>
+<p class="wp-block-paragraph">Hello!</p>
 <!-- /wp:paragraph -->
 
 <!-- wp:spacer -->

diff --git a/packages/block-editor/src/components/block-toolbar/test/block-toolbar-menu.native.js b/packages/block-editor/src/components/block-toolbar/test/block-toolbar-menu.native.js
@@ -34,7 +34,7 @@ describe( 'Block Actions Menu', () => {
 	it( "renders the block name in the Picker's header", async () => {
 		const screen = await initializeEditor( {
 			initialHtml: `<!-- wp:paragraph -->
-            <p></p>
+            <p class="wp-block-paragraph"></p>
             <!-- /wp:paragraph -->`,
 		} );
 		const { getByRole } = screen;

@@ -24,7 +24,7 @@ exports[`Inserter can add blocks after another block 1`] = `
 <!-- /wp:more -->
 
 <!-- wp:paragraph -->
-<p></p>
+<p class="wp-block-paragraph"></p>
 <!-- /wp:paragraph -->"
 `;
 
@@ -34,7 +34,7 @@ exports[`Inserter can add blocks before another block 1`] = `
 <!-- /wp:heading -->
 
 <!-- wp:paragraph -->
-<p></p>
+<p class="wp-block-paragraph"></p>
 <!-- /wp:paragraph -->"
 `;
 
@@ -48,7 +48,7 @@ exports[`Inserter can add blocks creates a new Paragraph block tapping on the em
 <!-- /wp:heading -->
 
 <!-- wp:paragraph -->
-<p></p>
+<p class="wp-block-paragraph"></p>
 <!-- /wp:paragraph -->"
 `;
 
@@ -94,7 +94,7 @@ exports[`Inserter can add blocks to the beginning 1`] = `
 <!-- /wp:heading -->
 
 <!-- wp:paragraph -->
-<p></p>
+<p class="wp-block-paragraph"></p>
 <!-- /wp:paragraph -->"
 `;
 
@@ -108,7 +108,7 @@ exports[`Inserter can add blocks to the end 1`] = `
 <!-- /wp:heading -->
 
 <!-- wp:paragraph -->
-<p></p>
+<p class="wp-block-paragraph"></p>
 <!-- /wp:paragraph -->
 
 <!-- wp:more -->

@@ -2,7 +2,7 @@
 
 exports[`<RichText/> when applying the font size renders component with style and font size 1`] = `
 "<!-- wp:paragraph {"style":{"color":{"text":"#fcb900"},"typography":{"fontSize":35.56}}} -->
-<p class="has-text-color" style="color:#fcb900;font-size:35.56px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet ut nibh vitae ornare. Sed auctor nec augue at blandit.</p>
+<p class="wp-block-paragraph has-text-color" style="color:#fcb900;font-size:35.56px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet ut nibh vitae ornare. Sed auctor nec augue at blandit.</p>
 <!-- /wp:paragraph -->"
 `;