From 83ddbfb6f878e433563fa184c218f11a030cb07c Mon Sep 17 00:00:00 2001
From: Carolina Nymark <myazalea@hotmail.com>
Date: Thu, 9 May 2024 05:12:47 +0200
Subject: [PATCH] Add block class name to the list block (#56469)

Adds the `wp-block-list` class name to the list block in the editor and front. This means that global styles applied to `core/list` affects the list block, instead of affecting all lists.
Ensures that pre-existing list blocks use the class name on the front, `<ol>` is transformed to `<ol class="wp-block-list">`.
Deprecates the version of the list block that did not support `className`.
The ` __experimentalSelector` on the list item block is changed to `.wp-block-list > li`,
Updates tests and test fixtures that use the list block.


Co-authored-by: carolinan <poena@git.wordpress.org>
Co-authored-by: tellthemachines <isabel_brison@git.wordpress.org>
Co-authored-by: mtias <matveb@git.wordpress.org>
Co-authored-by: oandregal <oandregal@git.wordpress.org>
Co-authored-by: fabiankaegy <fabiankaegy@git.wordpress.org>
---
 docs/reference-guides/core-blocks.md          |   2 +-
 lib/blocks.php                                |   2 +-
 .../__snapshots__/transforms.native.js.snap   |   2 +-
 .../block-library/src/list-item/block.json    |   2 +-
 packages/block-library/src/list/block.json    |   2 -
 packages/block-library/src/list/deprecated.js |  89 ++++++++++-
 packages/block-library/src/list/index.php     |  54 +++++++
 .../test/__snapshots__/edit.native.js.snap    |  22 +--
 .../__snapshots__/transforms.native.js.snap   |   6 +-
 .../src/list/test/edit.native.js              |  48 +++---
 .../src/list/test/transforms.native.js        |   2 +-
 .../__snapshots__/transforms.native.js.snap   |   2 +-
 post-content.php                              |   2 +-
 test/e2e/specs/editor/blocks/list.spec.js     | 142 +++++++++---------
 ...-paste-preformatted-in-list-1-chromium.txt |   2 +-
 .../specs/editor/various/writing-flow.spec.js |   2 +-
 .../blocks-raw-handling.test.js.snap          |   6 +-
 test/integration/blocks-raw-handling.test.js  |   6 +-
 .../core__list__deprecated-v0.serialized.html |   2 +-
 ...list__deprecated-v1-nested.serialized.html |  10 +-
 .../core__list__deprecated-v1.serialized.html |   2 +-
 .../core__list__deprecated-v2.serialized.html |   2 +-
 .../core__list__deprecated-v3-css-class.html  |   3 +
 .../core__list__deprecated-v3-css-class.json  |  60 ++++++++
 ..._list__deprecated-v3-css-class.parsed.json |  11 ++
 ...t__deprecated-v3-css-class.serialized.html |  25 +++
 .../fixtures/blocks/core__list__ul.html       |   2 +-
 .../blocks/core__list__ul.parsed.json         |   4 +-
 .../blocks/core__list__ul.serialized.html     |   2 +-
 .../fixtures/documents/apple-out.html         |   6 +-
 .../fixtures/documents/evernote-out.html      |   8 +-
 .../documents/google-docs-list-only-out.html  |   4 +-
 .../fixtures/documents/google-docs-out.html   |   6 +-
 .../google-docs-with-comments-out.html        |   6 +-
 .../fixtures/documents/markdown-out.html      |   6 +-
 .../fixtures/documents/ms-word-list-out.html  |   2 +-
 .../documents/ms-word-online-out.html         |   4 +-
 .../fixtures/documents/ms-word-out.html       |   6 +-
 .../integration/blocks-raw-handling.native.js |  10 +-
 39 files changed, 406 insertions(+), 168 deletions(-)
 create mode 100644 packages/block-library/src/list/index.php
 create mode 100644 test/integration/fixtures/blocks/core__list__deprecated-v3-css-class.html
 create mode 100644 test/integration/fixtures/blocks/core__list__deprecated-v3-css-class.json
 create mode 100644 test/integration/fixtures/blocks/core__list__deprecated-v3-css-class.parsed.json
 create mode 100644 test/integration/fixtures/blocks/core__list__deprecated-v3-css-class.serialized.html

diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index 3a0a88048e982f..c08869db34b484 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/docs/reference-guides/core-blocks.md
@@ -415,7 +415,7 @@ Create a bulleted or numbered list. ([Source](https://github.com/WordPress/guten
 -	**Name:** core/list
 -	**Category:** text
 -	**Allowed Blocks:** core/list-item
--	**Supports:** __unstablePasteTextInline, anchor, color (background, gradients, link, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~className~~, ~~html~~
+-	**Supports:** __unstablePasteTextInline, anchor, color (background, gradients, link, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
 -	**Attributes:** ordered, placeholder, reversed, start, type, values
 
 ## List item
diff --git a/lib/blocks.php b/lib/blocks.php
index eed9142db436a0..679219cc6ff774 100644
--- a/lib/blocks.php
+++ b/lib/blocks.php
@@ -26,7 +26,6 @@ function gutenberg_reregister_core_block_types() {
 				'form-submit-button',
 				'group',
 				'html',
-				'list',
 				'list-item',
 				'missing',
 				'more',
@@ -76,6 +75,7 @@ function gutenberg_reregister_core_block_types() {
 				'heading.php'                      => 'core/heading',
 				'latest-comments.php'              => 'core/latest-comments',
 				'latest-posts.php'                 => 'core/latest-posts',
+				'list.php'                         => 'core/list',
 				'loginout.php'                     => 'core/loginout',
 				'media-text.php'                   => 'core/media-text',
 				'navigation.php'                   => 'core/navigation',
diff --git a/packages/block-library/src/heading/test/__snapshots__/transforms.native.js.snap b/packages/block-library/src/heading/test/__snapshots__/transforms.native.js.snap
index 4f6512b3f86625..c773f863077715 100644
--- a/packages/block-library/src/heading/test/__snapshots__/transforms.native.js.snap
+++ b/packages/block-library/src/heading/test/__snapshots__/transforms.native.js.snap
@@ -20,7 +20,7 @@ exports[`Heading block transforms to Group block 1`] = `
 
 exports[`Heading block transforms to List block 1`] = `
 "<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>Example text</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list -->"
diff --git a/packages/block-library/src/list-item/block.json b/packages/block-library/src/list-item/block.json
index 3acaf2a3bb29b2..92822c993589d3 100644
--- a/packages/block-library/src/list-item/block.json
+++ b/packages/block-library/src/list-item/block.json
@@ -21,8 +21,8 @@
 	},
 	"supports": {
 		"className": false,
+		"__experimentalSelector": ".wp-block-list > li",
 		"splitting": true,
-		"__experimentalSelector": "li",
 		"spacing": {
 			"margin": true,
 			"padding": true,
diff --git a/packages/block-library/src/list/block.json b/packages/block-library/src/list/block.json
index 8e6ff21e5bd10a..157aaf7c0cf633 100644
--- a/packages/block-library/src/list/block.json
+++ b/packages/block-library/src/list/block.json
@@ -39,7 +39,6 @@
 	"supports": {
 		"anchor": true,
 		"html": false,
-		"className": false,
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,
@@ -70,7 +69,6 @@
 			}
 		},
 		"__unstablePasteTextInline": true,
-		"__experimentalSelector": "ol,ul",
 		"__experimentalOnMerge": true,
 		"__experimentalSlashInserter": true,
 		"interactivity": {
diff --git a/packages/block-library/src/list/deprecated.js b/packages/block-library/src/list/deprecated.js
index cecc17430f65e5..edb04dff27c904 100644
--- a/packages/block-library/src/list/deprecated.js
+++ b/packages/block-library/src/list/deprecated.js
@@ -219,6 +219,93 @@ const v2 = {
 	migrate: migrateTypeToInlineStyle,
 };
 
+// Version without block support 'className: true'.
+const v3 = {
+	attributes: {
+		ordered: {
+			type: 'boolean',
+			default: false,
+			__experimentalRole: 'content',
+		},
+		values: {
+			type: 'string',
+			source: 'html',
+			selector: 'ol,ul',
+			multiline: 'li',
+			__unstableMultilineWrapperTags: [ 'ol', 'ul' ],
+			default: '',
+			__experimentalRole: 'content',
+		},
+		type: {
+			type: 'string',
+		},
+		start: {
+			type: 'number',
+		},
+		reversed: {
+			type: 'boolean',
+		},
+		placeholder: {
+			type: 'string',
+		},
+	},
+	supports: {
+		anchor: true,
+		className: false,
+		typography: {
+			fontSize: true,
+			lineHeight: true,
+			__experimentalFontFamily: true,
+			__experimentalFontWeight: true,
+			__experimentalFontStyle: true,
+			__experimentalTextTransform: true,
+			__experimentalTextDecoration: true,
+			__experimentalLetterSpacing: true,
+			__experimentalDefaultControls: {
+				fontSize: true,
+			},
+		},
+		color: {
+			gradients: true,
+			link: true,
+			__experimentalDefaultControls: {
+				background: true,
+				text: true,
+			},
+		},
+		spacing: {
+			margin: true,
+			padding: true,
+			__experimentalDefaultControls: {
+				margin: false,
+				padding: false,
+			},
+		},
+		__unstablePasteTextInline: true,
+		__experimentalSelector: 'ol,ul',
+		__experimentalOnMerge: 'true',
+		__experimentalSlashInserter: true,
+	},
+	save( { attributes } ) {
+		const { ordered, type, reversed, start } = attributes;
+		const TagName = ordered ? 'ol' : 'ul';
+		return (
+			<TagName
+				{ ...useBlockProps.save( {
+					reversed,
+					start,
+					style: {
+						listStyleType:
+							ordered && type !== 'decimal' ? type : undefined,
+					},
+				} ) }
+			>
+				<InnerBlocks.Content />
+			</TagName>
+		);
+	},
+};
+
 /**
  * New deprecations need to be placed first
  * for them to have higher priority.
@@ -227,4 +314,4 @@ const v2 = {
  *
  * See block-deprecation.md
  */
-export default [ v2, v1, v0 ];
+export default [ v3, v2, v1, v0 ];
diff --git a/packages/block-library/src/list/index.php b/packages/block-library/src/list/index.php
new file mode 100644
index 00000000000000..1bffd813248575
--- /dev/null
+++ b/packages/block-library/src/list/index.php
@@ -0,0 +1,54 @@
+<?php
+/**
+ * Adds the wp-block-list class to the rendered list block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Adds the wp-block-list class to the rendered list block.
+ * Ensures that pre-existing list blocks use the class name on the front.
+ * For example, <ol> is transformed to <ol class="wp-block-list">.
+ *
+ * @since 6.6.0
+ *
+ * @see https://github.com/WordPress/gutenberg/issues/12420
+ *
+ * @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_list_render( $attributes, $content ) {
+	if ( ! $content ) {
+		return $content;
+	}
+
+	$processor = new WP_HTML_Tag_Processor( $content );
+
+	$list_tags = array( 'OL', 'UL' );
+	while ( $processor->next_tag() ) {
+		if ( in_array( $processor->get_tag(), $list_tags, true ) ) {
+			$processor->add_class( 'wp-block-list' );
+			break;
+		}
+	}
+
+	return $processor->get_updated_html();
+}
+
+/**
+ * Registers the `core/list` block on server.
+ *
+ * @since 6.6.0
+ */
+function register_block_core_list() {
+	register_block_type_from_metadata(
+		__DIR__ . '/list',
+		array(
+			'render_callback' => 'block_core_list_render',
+		)
+	);
+}
+
+add_action( 'init', 'register_block_core_list' );
diff --git a/packages/block-library/src/list/test/__snapshots__/edit.native.js.snap b/packages/block-library/src/list/test/__snapshots__/edit.native.js.snap
index 1bc5cf6ce937f8..058ccc6b9ca635 100644
--- a/packages/block-library/src/list/test/__snapshots__/edit.native.js.snap
+++ b/packages/block-library/src/list/test/__snapshots__/edit.native.js.snap
@@ -2,7 +2,7 @@
 
 exports[`List block adds one item to the list 1`] = `
 "<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>First list item</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list -->"
@@ -10,9 +10,9 @@ exports[`List block adds one item to the list 1`] = `
 
 exports[`List block changes the indentation level 1`] = `
 "<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>Item 1<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>Item 2</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list --></li>
@@ -22,7 +22,7 @@ exports[`List block changes the indentation level 1`] = `
 
 exports[`List block changes to ordered list 1`] = `
 "<!-- wp:list {"ordered":true} -->
-<ol><!-- wp:list-item -->
+<ol class="wp-block-list"><!-- wp:list-item -->
 <li>Item 1</li>
 <!-- /wp:list-item -->
 
@@ -38,7 +38,7 @@ exports[`List block changes to ordered list 1`] = `
 
 exports[`List block changes to reverse ordered list 1`] = `
 "<!-- wp:list {"ordered":true,"reversed":true} -->
-<ol reversed><!-- wp:list-item -->
+<ol reversed class="wp-block-list"><!-- wp:list-item -->
 <li>Item 1</li>
 <!-- /wp:list-item -->
 
@@ -54,7 +54,7 @@ exports[`List block changes to reverse ordered list 1`] = `
 
 exports[`List block inserts block 1`] = `
 "<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li></li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list -->"
@@ -62,7 +62,7 @@ exports[`List block inserts block 1`] = `
 
 exports[`List block removes the indentation level 1`] = `
 "<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>Item 1</li>
 <!-- /wp:list-item -->
 
@@ -74,7 +74,7 @@ exports[`List block removes the indentation level 1`] = `
 
 exports[`List block sets a start value to an ordered list 1`] = `
 "<!-- wp:list {"ordered":true,"start":25} -->
-<ol start="25"><!-- wp:list-item -->
+<ol start="25" class="wp-block-list"><!-- wp:list-item -->
 <li>Item 1</li>
 <!-- /wp:list-item -->
 
@@ -90,19 +90,19 @@ exports[`List block sets a start value to an ordered list 1`] = `
 
 exports[`List block shows different indentation levels 1`] = `
 "<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>List item 1</li>
 <!-- /wp:list-item -->
 
 <!-- wp:list-item -->
 <li>List item 2<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>List item nested 1</li>
 <!-- /wp:list-item -->
 
 <!-- wp:list-item -->
 <li>List item nested 2<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>Extra item 1</li>
 <!-- /wp:list-item -->
 
diff --git a/packages/block-library/src/list/test/__snapshots__/transforms.native.js.snap b/packages/block-library/src/list/test/__snapshots__/transforms.native.js.snap
index 723d19a658366f..9e28f1c77de943 100644
--- a/packages/block-library/src/list/test/__snapshots__/transforms.native.js.snap
+++ b/packages/block-library/src/list/test/__snapshots__/transforms.native.js.snap
@@ -4,7 +4,7 @@ exports[`List block transforms to Columns block 1`] = `
 "<!-- wp:columns -->
 <div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
 <div class="wp-block-column" style="flex-basis:100%"><!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>First Item</li>
 <!-- /wp:list-item -->
 
@@ -23,7 +23,7 @@ exports[`List block transforms to Columns block 1`] = `
 exports[`List block transforms to Group block 1`] = `
 "<!-- wp:group {"layout":{"type":"constrained"}} -->
 <div class="wp-block-group"><!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>First Item</li>
 <!-- /wp:list-item -->
 
@@ -69,7 +69,7 @@ exports[`List block transforms to Paragraph block 1`] = `
 exports[`List block transforms to Quote block 1`] = `
 "<!-- wp:quote -->
 <blockquote class="wp-block-quote"><!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>First Item</li>
 <!-- /wp:list-item -->
 
diff --git a/packages/block-library/src/list/test/edit.native.js b/packages/block-library/src/list/test/edit.native.js
index 1f7296db98c8c3..a33bce32e5bca0 100644
--- a/packages/block-library/src/list/test/edit.native.js
+++ b/packages/block-library/src/list/test/edit.native.js
@@ -60,7 +60,7 @@ describe( 'List block', () => {
 
 	it( 'adds one item to the list', async () => {
 		const initialHtml = `<!-- wp:list -->
-		<ul><!-- wp:list-item -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
 		<li></li><!-- /wp:list-item --></ul>
 		<!-- /wp:list -->`;
 
@@ -88,17 +88,17 @@ describe( 'List block', () => {
 
 	it( 'shows different indentation levels', async () => {
 		const initialHtml = `<!-- wp:list -->
-		<ul><!-- wp:list-item -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>List item 1</li>
 		<!-- /wp:list-item -->
 		<!-- wp:list-item -->
 		<li>List item 2<!-- wp:list -->
-		<ul><!-- wp:list-item -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>List item nested 1</li>
 		<!-- /wp:list-item -->
 		<!-- wp:list-item -->
 		<li>List item nested 2<!-- wp:list -->
-		<ul><!-- wp:list-item -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>Extra item 1</li>
 		<!-- /wp:list-item -->
 		<!-- wp:list-item -->
@@ -140,7 +140,7 @@ describe( 'List block', () => {
 
 	it( 'changes the indentation level', async () => {
 		const initialHtml = `<!-- wp:list -->
-		<ul><!-- wp:list-item -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>Item 1</li>
 		<!-- /wp:list-item -->
 		<!-- wp:list-item -->
@@ -183,9 +183,9 @@ describe( 'List block', () => {
 
 	it( 'removes the indentation level', async () => {
 		const initialHtml = `<!-- wp:list -->
-		<ul><!-- wp:list-item -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>Item 1<!-- wp:list -->
-		<ul><!-- wp:list-item -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>Item 2</li>
 		<!-- /wp:list-item --></ul>
 		<!-- /wp:list --></li>
@@ -230,7 +230,7 @@ describe( 'List block', () => {
 
 	it( 'changes to ordered list', async () => {
 		const initialHtml = `<!-- wp:list -->
-		<ul><!-- wp:list-item -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>Item 1</li>
 		<!-- /wp:list-item -->
 		<!-- wp:list-item -->
@@ -258,7 +258,7 @@ describe( 'List block', () => {
 
 	it( 'changes to reverse ordered list', async () => {
 		const initialHtml = `<!-- wp:list -->
-		<ul><!-- wp:list-item -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>Item 1</li>
 		<!-- /wp:list-item -->
 		<!-- wp:list-item -->
@@ -299,7 +299,7 @@ describe( 'List block', () => {
 
 	it( 'sets a start value to an ordered list', async () => {
 		const initialHtml = `<!-- wp:list -->
-		<ul><!-- wp:list-item -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>Item 1</li>
 		<!-- /wp:list-item -->
 		<!-- wp:list-item -->
@@ -342,7 +342,7 @@ describe( 'List block', () => {
 	it( 'splits empty list items into paragraphs', async () => {
 		// Arrange
 		const initialHtml = `<!-- wp:list -->
-		<ul><!-- wp:list-item -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>One</li><!-- /wp:list-item -->
 		<!-- wp:list-item -->
 		<li>Two</li><!-- /wp:list-item --></ul>
@@ -370,7 +370,7 @@ describe( 'List block', () => {
 		// Assert
 		expect( getEditorHtml() ).toMatchInlineSnapshot( `
 		"<!-- wp:list -->
-		<ul><!-- wp:list-item -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>One</li>
 		<!-- /wp:list-item --></ul>
 		<!-- /wp:list -->
@@ -380,7 +380,7 @@ describe( 'List block', () => {
 		<!-- /wp:paragraph -->
 
 		<!-- wp:list -->
-		<ul><!-- wp:list-item -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>Two</li>
 		<!-- /wp:list-item --></ul>
 		<!-- /wp:list -->"
@@ -389,7 +389,7 @@ describe( 'List block', () => {
 
 	it( 'merges paragraphs into list items', async () => {
 		const initialHtml = `<!-- wp:list -->
-		<ul><!-- wp:list-item -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>One</li>
 		<!-- /wp:list-item --></ul>
 		<!-- /wp:list -->
@@ -399,7 +399,7 @@ describe( 'List block', () => {
 		<!-- /wp:paragraph -->
 
 		<!-- wp:list -->
-		<ul><!-- wp:list-item -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>Three</li>
 		<!-- /wp:list-item --></ul>
 		<!-- /wp:list -->`;
@@ -417,7 +417,7 @@ describe( 'List block', () => {
 		// Assert
 		expect( getEditorHtml() ).toMatchInlineSnapshot( `
 		"<!-- wp:list -->
-		<ul><!-- wp:list-item -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>One</li>
 		<!-- /wp:list-item -->
 
@@ -435,7 +435,7 @@ describe( 'List block', () => {
 	it( 'merges lists into lists', async () => {
 		// Arrange
 		const initialHtml = `<!-- wp:list -->
-		<ul><!-- wp:list-item -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>One</li>
 		<!-- /wp:list-item -->
 
@@ -445,7 +445,7 @@ describe( 'List block', () => {
 		<!-- /wp:list -->
 
 		<!-- wp:list -->
-		<ul><!-- wp:list-item -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>Three</li>
 		<!-- /wp:list-item --></ul>
 		<!-- /wp:list -->`;
@@ -466,7 +466,7 @@ describe( 'List block', () => {
 		// Assert
 		expect( getEditorHtml() ).toMatchInlineSnapshot( `
 		"<!-- wp:list -->
-		<ul><!-- wp:list-item -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>One</li>
 		<!-- /wp:list-item -->
 
@@ -486,7 +486,7 @@ describe( 'List block', () => {
 		<p>A quick brown fox.</p>
 		<!-- /wp:paragraph -->
 		<!-- wp:list -->
-		<ul><!-- wp:list-item -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>One</li><!-- /wp:list-item --><!-- wp:list-item -->
 		<li>Two</li><!-- /wp:list-item --></ul>
 		<!-- /wp:list -->`;
@@ -527,7 +527,7 @@ describe( 'List block', () => {
 		<!-- /wp:paragraph -->
 
 		<!-- wp:list -->
-		<ul><!-- wp:list-item -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>Two</li>
 		<!-- /wp:list-item --></ul>
 		<!-- /wp:list -->"
@@ -539,9 +539,9 @@ describe( 'List block', () => {
 		<p>A quick brown fox.</p>
 		<!-- /wp:paragraph -->
 		<!-- wp:list -->
-		<ul><!-- wp:list-item -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>One<!-- wp:list -->
-		<ul><!-- wp:list-item -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>Two</li>
 		<!-- /wp:list-item -->
 		<!-- wp:list-item -->
@@ -591,7 +591,7 @@ describe( 'List block', () => {
 		<!-- /wp:paragraph -->
 
 		<!-- wp:list -->
-		<ul><!-- wp:list-item -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>Two</li>
 		<!-- /wp:list-item -->
 
diff --git a/packages/block-library/src/list/test/transforms.native.js b/packages/block-library/src/list/test/transforms.native.js
index dd8ec5ccd2c772..538d5b7ed0193e 100644
--- a/packages/block-library/src/list/test/transforms.native.js
+++ b/packages/block-library/src/list/test/transforms.native.js
@@ -12,7 +12,7 @@ import {
 const block = 'List';
 const initialHtml = `
 <!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>First Item</li>
 <!-- /wp:list-item -->
 
diff --git a/packages/block-library/src/paragraph/test/__snapshots__/transforms.native.js.snap b/packages/block-library/src/paragraph/test/__snapshots__/transforms.native.js.snap
index b0855c02bd0e96..3a2a928b81f5e8 100644
--- a/packages/block-library/src/paragraph/test/__snapshots__/transforms.native.js.snap
+++ b/packages/block-library/src/paragraph/test/__snapshots__/transforms.native.js.snap
@@ -32,7 +32,7 @@ exports[`Paragraph block transforms to Heading block 1`] = `
 
 exports[`Paragraph block transforms to List block 1`] = `
 "<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>Example text</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list -->"
diff --git a/post-content.php b/post-content.php
index 0bdeb30733f6cd..3c9b18087b0e84 100644
--- a/post-content.php
+++ b/post-content.php
@@ -61,7 +61,7 @@
 <!-- /wp:paragraph -->
 
 <!-- wp:list -->
-<ul>
+<ul class="wp-block-list">
 	<li><?php _e( 'Text &amp; Headings', 'gutenberg' ); ?></li>
 	<li><?php _e( 'Images &amp; Videos', 'gutenberg' ); ?></li>
 	<li><?php _e( 'Galleries', 'gutenberg' ); ?></li>
diff --git a/test/e2e/specs/editor/blocks/list.spec.js b/test/e2e/specs/editor/blocks/list.spec.js
index 10f25d6b3609f0..7c42ad7989aff9 100644
--- a/test/e2e/specs/editor/blocks/list.spec.js
+++ b/test/e2e/specs/editor/blocks/list.spec.js
@@ -24,7 +24,7 @@ test.describe( 'List (@firefox)', () => {
 		await pageUtils.pressKeys( 'primary+v' );
 
 		const copied = `<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>one</li>
 <!-- /wp:list-item -->
 
@@ -53,7 +53,7 @@ test.describe( 'List (@firefox)', () => {
 		await page.keyboard.type( 'Another list item' );
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>A list item</li>
 <!-- /wp:list-item -->
 
@@ -78,7 +78,7 @@ test.describe( 'List (@firefox)', () => {
 		await page.keyboard.type( '* ' );
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>test</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list -->`
@@ -97,7 +97,7 @@ test.describe( 'List (@firefox)', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list {"ordered":true} -->
-<ol><!-- wp:list-item -->
+<ol class="wp-block-list"><!-- wp:list-item -->
 <li>A list item</li>
 <!-- /wp:list-item --></ol>
 <!-- /wp:list -->`
@@ -264,7 +264,7 @@ test.describe( 'List (@firefox)', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>I’m a list</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list -->`
@@ -283,7 +283,7 @@ test.describe( 'List (@firefox)', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>test</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list -->`
@@ -309,7 +309,7 @@ test.describe( 'List (@firefox)', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>one</li>
 <!-- /wp:list-item -->
 
@@ -335,7 +335,7 @@ test.describe( 'List (@firefox)', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>one</li>
 <!-- /wp:list-item -->
 
@@ -368,7 +368,7 @@ test.describe( 'List (@firefox)', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>one<br>...</li>
 <!-- /wp:list-item -->
 
@@ -433,7 +433,7 @@ test.describe( 'List (@firefox)', () => {
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:quote -->
 <blockquote class="wp-block-quote"><!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>one</li>
 <!-- /wp:list-item -->
 
@@ -457,7 +457,7 @@ test.describe( 'List (@firefox)', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>one</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list -->
@@ -473,7 +473,7 @@ test.describe( 'List (@firefox)', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>one</li>
 <!-- /wp:list-item -->
 
@@ -498,7 +498,7 @@ test.describe( 'List (@firefox)', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>one</li>
 <!-- /wp:list-item -->
 
@@ -516,7 +516,7 @@ test.describe( 'List (@firefox)', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>one</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list -->
@@ -526,7 +526,7 @@ test.describe( 'List (@firefox)', () => {
 <!-- /wp:paragraph -->
 
 <!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>two</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list -->`
@@ -541,7 +541,7 @@ test.describe( 'List (@firefox)', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>one</li>
 <!-- /wp:list-item -->
 
@@ -637,7 +637,7 @@ test.describe( 'List (@firefox)', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list {"ordered":true} -->
-<ol><!-- wp:list-item -->
+<ol class="wp-block-list"><!-- wp:list-item -->
 <li>one</li>
 <!-- /wp:list-item --></ol>
 <!-- /wp:list -->
@@ -647,7 +647,7 @@ test.describe( 'List (@firefox)', () => {
 <!-- /wp:paragraph -->
 
 <!-- wp:list {"ordered":true} -->
-<ol><!-- wp:list-item -->
+<ol class="wp-block-list"><!-- wp:list-item -->
 <li>two</li>
 <!-- /wp:list-item --></ol>
 <!-- /wp:list -->`
@@ -665,9 +665,9 @@ test.describe( 'List (@firefox)', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>one<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>two</li>
 <!-- /wp:list-item -->
 
@@ -691,9 +691,9 @@ test.describe( 'List (@firefox)', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>one<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li></li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list --></li>
@@ -708,7 +708,7 @@ test.describe( 'List (@firefox)', () => {
 		await editor.clickBlockToolbarButton( 'Ordered' );
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list {"ordered":true} -->
-<ol><!-- wp:list-item -->
+<ol class="wp-block-list"><!-- wp:list-item -->
 <li></li>
 <!-- /wp:list-item --></ol>
 <!-- /wp:list -->`
@@ -729,9 +729,9 @@ test.describe( 'List (@firefox)', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>a<!-- wp:list {"ordered":true} -->
-<ol><!-- wp:list-item -->
+<ol class="wp-block-list"><!-- wp:list-item -->
 <li>1</li>
 <!-- /wp:list-item --></ol>
 <!-- /wp:list --></li>
@@ -754,7 +754,7 @@ test.describe( 'List (@firefox)', () => {
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:quote -->
 <blockquote class="wp-block-quote"><!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>aaa</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list -->
@@ -775,9 +775,9 @@ test.describe( 'List (@firefox)', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>a<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>1</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list --></li>
@@ -789,7 +789,7 @@ test.describe( 'List (@firefox)', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>a</li>
 <!-- /wp:list-item -->
 
@@ -812,11 +812,11 @@ test.describe( 'List (@firefox)', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>a<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>1<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>i</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list --></li>
@@ -830,9 +830,9 @@ test.describe( 'List (@firefox)', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>a<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>1</li>
 <!-- /wp:list-item -->
 
@@ -851,9 +851,9 @@ test.describe( 'List (@firefox)', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>a<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>1</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list --></li>
@@ -882,11 +882,11 @@ test.describe( 'List (@firefox)', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>a<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>b<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>c</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list --></li>
@@ -901,13 +901,13 @@ test.describe( 'List (@firefox)', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>a</li>
 <!-- /wp:list-item -->
 
 <!-- wp:list-item -->
 <li>b<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>c</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list --></li>
@@ -927,7 +927,7 @@ test.describe( 'List (@firefox)', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>a<br></li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list -->`
@@ -950,7 +950,7 @@ test.describe( 'List (@firefox)', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>a</li>
 <!-- /wp:list-item -->
 
@@ -981,11 +981,11 @@ test.describe( 'List (@firefox)', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>1<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>a<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>i</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list --></li>
@@ -1000,9 +1000,9 @@ test.describe( 'List (@firefox)', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>1<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>a</li>
 <!-- /wp:list-item -->
 
@@ -1018,9 +1018,9 @@ test.describe( 'List (@firefox)', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>1<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>a</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list --></li>
@@ -1036,9 +1036,9 @@ test.describe( 'List (@firefox)', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>1<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>a</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list --></li>
@@ -1051,7 +1051,7 @@ test.describe( 'List (@firefox)', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>1</li>
 <!-- /wp:list-item -->
 
@@ -1065,7 +1065,7 @@ test.describe( 'List (@firefox)', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>1</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list -->`
@@ -1098,13 +1098,13 @@ test.describe( 'List (@firefox)', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>1</li>
 <!-- /wp:list-item -->
 
 <!-- wp:list-item -->
 <li>2<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>a</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list --></li>
@@ -1128,7 +1128,7 @@ test.describe( 'List (@firefox)', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>1</li>
 <!-- /wp:list-item -->
 
@@ -1182,9 +1182,9 @@ test.describe( 'List (@firefox)', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>1<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>2</li>
 <!-- /wp:list-item -->
 
@@ -1208,9 +1208,9 @@ test.describe( 'List (@firefox)', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>1<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>2</li>
 <!-- /wp:list-item -->
 
@@ -1243,7 +1243,7 @@ test.describe( 'List (@firefox)', () => {
 <!-- /wp:paragraph -->
 
 <!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>2</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list -->`
@@ -1267,7 +1267,7 @@ test.describe( 'List (@firefox)', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list {"ordered":true} -->
-<ol><!-- wp:list-item -->
+<ol class="wp-block-list"><!-- wp:list-item -->
 <li>1</li>
 <!-- /wp:list-item -->
 
@@ -1299,7 +1299,7 @@ test.describe( 'List (@firefox)', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>a</li>
 <!-- /wp:list-item -->
 
@@ -1325,7 +1325,7 @@ test.describe( 'List (@firefox)', () => {
 		// Add empty list block
 		await page.getByPlaceholder( 'Start writing with text or HTML' )
 			.fill( `<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li></li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list -->` );
@@ -1335,7 +1335,7 @@ test.describe( 'List (@firefox)', () => {
 
 		// Verify no WSOD and content is proper.
 		expect( await editor.getEditedPostContent() ).toBe( `<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li></li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list -->` );
@@ -1356,7 +1356,7 @@ test.describe( 'List (@firefox)', () => {
 		await page.keyboard.type( '* c' );
 
 		await expect.poll( editor.getEditedPostContent ).toBe( `<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>a</li>
 <!-- /wp:list-item -->
 
@@ -1366,7 +1366,7 @@ test.describe( 'List (@firefox)', () => {
 <!-- /wp:list -->
 
 <!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>c</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list -->` );
@@ -1375,7 +1375,7 @@ test.describe( 'List (@firefox)', () => {
 		await page.keyboard.press( 'Backspace' );
 
 		await expect.poll( editor.getEditedPostContent ).toBe( `<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>a</li>
 <!-- /wp:list-item -->
 
@@ -1398,7 +1398,7 @@ test.describe( 'List (@firefox)', () => {
 		await page.keyboard.type( '1' );
 
 		expect( await editor.getEditedPostContent() ).toBe( `<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li></li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list -->
@@ -1439,7 +1439,7 @@ test.describe( 'List (@firefox)', () => {
 		await page.getByRole( 'menuitem', { name: 'List' } ).click();
 
 		expect( await editor.getEditedPostContent() ).toBe( `<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>1</li>
 <!-- /wp:list-item -->
 
diff --git a/test/e2e/specs/editor/various/__snapshots__/Copy-cut-paste-should-paste-preformatted-in-list-1-chromium.txt b/test/e2e/specs/editor/various/__snapshots__/Copy-cut-paste-should-paste-preformatted-in-list-1-chromium.txt
index 002e7a19200283..d46df0dfb55d44 100644
--- a/test/e2e/specs/editor/various/__snapshots__/Copy-cut-paste-should-paste-preformatted-in-list-1-chromium.txt
+++ b/test/e2e/specs/editor/various/__snapshots__/Copy-cut-paste-should-paste-preformatted-in-list-1-chromium.txt
@@ -1,5 +1,5 @@
 <!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>xy</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list -->
\ No newline at end of file
diff --git a/test/e2e/specs/editor/various/writing-flow.spec.js b/test/e2e/specs/editor/various/writing-flow.spec.js
index 91aafa43690fd2..2dee26255c103b 100644
--- a/test/e2e/specs/editor/various/writing-flow.spec.js
+++ b/test/e2e/specs/editor/various/writing-flow.spec.js
@@ -356,7 +356,7 @@ test.describe( 'Writing Flow (@firefox, @webkit)', () => {
 		await page.keyboard.type( 'a' );
 		await page.keyboard.press( 'Backspace' );
 		await expect.poll( editor.getEditedPostContent ).toBe( `<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li></li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list -->` );
diff --git a/test/integration/__snapshots__/blocks-raw-handling.test.js.snap b/test/integration/__snapshots__/blocks-raw-handling.test.js.snap
index b810a20b4d7c52..589eef78f34e21 100644
--- a/test/integration/__snapshots__/blocks-raw-handling.test.js.snap
+++ b/test/integration/__snapshots__/blocks-raw-handling.test.js.snap
@@ -135,7 +135,7 @@ exports[`rawHandler should convert HTML post to blocks with minimal content chan
 <!-- /wp:html -->
 
 <!-- wp:list {"ordered":true} -->
-<ol><!-- wp:list-item -->
+<ol class="wp-block-list"><!-- wp:list-item -->
 <li>Item</li>
 <!-- /wp:list-item --></ol>
 <!-- /wp:list -->
@@ -177,9 +177,9 @@ exports[`rawHandler should convert a caption shortcode with link 1`] = `
 
 exports[`rawHandler should convert a list with attributes 1`] = `
 "<!-- wp:list {"ordered":true,"type":"lower-roman","start":2,"reversed":true} -->
-<ol reversed start="2" style="list-style-type:lower-roman"><!-- wp:list-item -->
+<ol reversed start="2" style="list-style-type:lower-roman" class="wp-block-list"><!-- wp:list-item -->
 <li>1<!-- wp:list {"ordered":true,"type":"lower-roman","start":2,"reversed":true} -->
-<ol reversed start="2" style="list-style-type:lower-roman"><!-- wp:list-item -->
+<ol reversed start="2" style="list-style-type:lower-roman" class="wp-block-list"><!-- wp:list-item -->
 <li>1</li>
 <!-- /wp:list-item --></ol>
 <!-- /wp:list --></li>
diff --git a/test/integration/blocks-raw-handling.test.js b/test/integration/blocks-raw-handling.test.js
index 5fb7123f9b820a..81d3b7053468be 100644
--- a/test/integration/blocks-raw-handling.test.js
+++ b/test/integration/blocks-raw-handling.test.js
@@ -177,7 +177,7 @@ describe( 'Blocks raw handling', () => {
 			.join( '' );
 
 		expect( filtered ).toMatchInlineSnapshot( `
-		"<ul><!-- wp:list-item -->
+		"<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>one</li>
 		<!-- /wp:list-item -->
 
@@ -202,7 +202,7 @@ describe( 'Blocks raw handling', () => {
 			.join( '' );
 
 		expect( filtered ).toMatchInlineSnapshot( `
-		"<ul><!-- wp:list-item -->
+		"<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>one</li>
 		<!-- /wp:list-item -->
 
@@ -318,7 +318,7 @@ describe( 'Blocks raw handling', () => {
 			.join( '' );
 
 		expect( filtered ).toMatchInlineSnapshot( `
-		"<ul><!-- wp:list-item -->
+		"<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>One</li>
 		<!-- /wp:list-item -->
 
diff --git a/test/integration/fixtures/blocks/core__list__deprecated-v0.serialized.html b/test/integration/fixtures/blocks/core__list__deprecated-v0.serialized.html
index fa50fb5db17e7b..ad0919beb9bde4 100644
--- a/test/integration/fixtures/blocks/core__list__deprecated-v0.serialized.html
+++ b/test/integration/fixtures/blocks/core__list__deprecated-v0.serialized.html
@@ -1,5 +1,5 @@
 <!-- wp:list {"fontFamily":"cambria-georgia"} -->
-<ul class="has-cambria-georgia-font-family"><!-- wp:list-item -->
+<ul class="wp-block-list has-cambria-georgia-font-family"><!-- wp:list-item -->
 <li>one</li>
 <!-- /wp:list-item -->
 
diff --git a/test/integration/fixtures/blocks/core__list__deprecated-v1-nested.serialized.html b/test/integration/fixtures/blocks/core__list__deprecated-v1-nested.serialized.html
index 61e33d3dc0e156..39a3efa2eabed8 100644
--- a/test/integration/fixtures/blocks/core__list__deprecated-v1-nested.serialized.html
+++ b/test/integration/fixtures/blocks/core__list__deprecated-v1-nested.serialized.html
@@ -1,9 +1,9 @@
 <!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li><strong>Item</strong><!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li><strong>Item</strong><!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li><a rel="noreferrer noopener" href="#" target="_blank">Item</a></li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list --></li>
@@ -11,7 +11,7 @@
 
 <!-- wp:list-item -->
 <li><strong>Item</strong><!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li><a rel="noreferrer noopener" href="#" target="_blank">Item</a></li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list --></li>
@@ -19,7 +19,7 @@
 
 <!-- wp:list-item -->
 <li><strong>Item</strong><!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li><a rel="noreferrer noopener" href="#" target="_blank">Item</a></li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list --></li>
diff --git a/test/integration/fixtures/blocks/core__list__deprecated-v1.serialized.html b/test/integration/fixtures/blocks/core__list__deprecated-v1.serialized.html
index c09708d51db0bb..4d74394771fcb5 100644
--- a/test/integration/fixtures/blocks/core__list__deprecated-v1.serialized.html
+++ b/test/integration/fixtures/blocks/core__list__deprecated-v1.serialized.html
@@ -1,5 +1,5 @@
 <!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>Text &amp; Headings</li>
 <!-- /wp:list-item -->
 
diff --git a/test/integration/fixtures/blocks/core__list__deprecated-v2.serialized.html b/test/integration/fixtures/blocks/core__list__deprecated-v2.serialized.html
index 44c97ca29209cf..6fdf3ad84feeb9 100644
--- a/test/integration/fixtures/blocks/core__list__deprecated-v2.serialized.html
+++ b/test/integration/fixtures/blocks/core__list__deprecated-v2.serialized.html
@@ -1,5 +1,5 @@
 <!-- wp:list {"ordered":true,"type":"upper-alpha"} -->
-<ol style="list-style-type:upper-alpha"><!-- wp:list-item -->
+<ol style="list-style-type:upper-alpha" class="wp-block-list"><!-- wp:list-item -->
 <li>Item 1</li>
 <!-- /wp:list-item --></ol>
 <!-- /wp:list -->
diff --git a/test/integration/fixtures/blocks/core__list__deprecated-v3-css-class.html b/test/integration/fixtures/blocks/core__list__deprecated-v3-css-class.html
new file mode 100644
index 00000000000000..aef6bf669f2c98
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__list__deprecated-v3-css-class.html
@@ -0,0 +1,3 @@
+<!-- wp:core/list -->
+<ul><li>Text & Headings</li><li>Images & Videos</li><li>Galleries</li><li>Embeds, like YouTube, Tweets, or other WordPress posts.</li><li>Layout blocks, like Buttons, Hero Images, Separators, etc.</li><li>And <em>Lists</em> like this one of course :)</li></ul>
+<!-- /wp:core/list -->
diff --git a/test/integration/fixtures/blocks/core__list__deprecated-v3-css-class.json b/test/integration/fixtures/blocks/core__list__deprecated-v3-css-class.json
new file mode 100644
index 00000000000000..80cd87e4eb69e8
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__list__deprecated-v3-css-class.json
@@ -0,0 +1,60 @@
+[
+	{
+		"name": "core/list",
+		"isValid": true,
+		"attributes": {
+			"ordered": false,
+			"values": ""
+		},
+		"innerBlocks": [
+			{
+				"name": "core/list-item",
+				"isValid": true,
+				"attributes": {
+					"content": "Text &amp; Headings"
+				},
+				"innerBlocks": []
+			},
+			{
+				"name": "core/list-item",
+				"isValid": true,
+				"attributes": {
+					"content": "Images &amp; Videos"
+				},
+				"innerBlocks": []
+			},
+			{
+				"name": "core/list-item",
+				"isValid": true,
+				"attributes": {
+					"content": "Galleries"
+				},
+				"innerBlocks": []
+			},
+			{
+				"name": "core/list-item",
+				"isValid": true,
+				"attributes": {
+					"content": "Embeds, like YouTube, Tweets, or other WordPress posts."
+				},
+				"innerBlocks": []
+			},
+			{
+				"name": "core/list-item",
+				"isValid": true,
+				"attributes": {
+					"content": "Layout blocks, like Buttons, Hero Images, Separators, etc."
+				},
+				"innerBlocks": []
+			},
+			{
+				"name": "core/list-item",
+				"isValid": true,
+				"attributes": {
+					"content": "And <em>Lists</em> like this one of course :)"
+				},
+				"innerBlocks": []
+			}
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__list__deprecated-v3-css-class.parsed.json b/test/integration/fixtures/blocks/core__list__deprecated-v3-css-class.parsed.json
new file mode 100644
index 00000000000000..427f4c3a975cfd
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__list__deprecated-v3-css-class.parsed.json
@@ -0,0 +1,11 @@
+[
+	{
+		"blockName": "core/list",
+		"attrs": {},
+		"innerBlocks": [],
+		"innerHTML": "\n<ul><li>Text & Headings</li><li>Images & Videos</li><li>Galleries</li><li>Embeds, like YouTube, Tweets, or other WordPress posts.</li><li>Layout blocks, like Buttons, Hero Images, Separators, etc.</li><li>And <em>Lists</em> like this one of course :)</li></ul>\n",
+		"innerContent": [
+			"\n<ul><li>Text & Headings</li><li>Images & Videos</li><li>Galleries</li><li>Embeds, like YouTube, Tweets, or other WordPress posts.</li><li>Layout blocks, like Buttons, Hero Images, Separators, etc.</li><li>And <em>Lists</em> like this one of course :)</li></ul>\n"
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__list__deprecated-v3-css-class.serialized.html b/test/integration/fixtures/blocks/core__list__deprecated-v3-css-class.serialized.html
new file mode 100644
index 00000000000000..4d74394771fcb5
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__list__deprecated-v3-css-class.serialized.html
@@ -0,0 +1,25 @@
+<!-- wp:list -->
+<ul class="wp-block-list"><!-- wp:list-item -->
+<li>Text &amp; Headings</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>Images &amp; Videos</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>Galleries</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>Embeds, like YouTube, Tweets, or other WordPress posts.</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>Layout blocks, like Buttons, Hero Images, Separators, etc.</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>And <em>Lists</em> like this one of course :)</li>
+<!-- /wp:list-item --></ul>
+<!-- /wp:list -->
diff --git a/test/integration/fixtures/blocks/core__list__ul.html b/test/integration/fixtures/blocks/core__list__ul.html
index c09708d51db0bb..4d74394771fcb5 100644
--- a/test/integration/fixtures/blocks/core__list__ul.html
+++ b/test/integration/fixtures/blocks/core__list__ul.html
@@ -1,5 +1,5 @@
 <!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>Text &amp; Headings</li>
 <!-- /wp:list-item -->
 
diff --git a/test/integration/fixtures/blocks/core__list__ul.parsed.json b/test/integration/fixtures/blocks/core__list__ul.parsed.json
index 2853bc5558ebe3..4639b007c777b7 100644
--- a/test/integration/fixtures/blocks/core__list__ul.parsed.json
+++ b/test/integration/fixtures/blocks/core__list__ul.parsed.json
@@ -52,9 +52,9 @@
 				]
 			}
 		],
-		"innerHTML": "\n<ul>\n\n\n\n\n\n\n\n\n\n</ul>\n",
+		"innerHTML": "\n<ul class=\"wp-block-list\">\n\n\n\n\n\n\n\n\n\n</ul>\n",
 		"innerContent": [
-			"\n<ul>",
+			"\n<ul class=\"wp-block-list\">",
 			null,
 			"\n\n",
 			null,
diff --git a/test/integration/fixtures/blocks/core__list__ul.serialized.html b/test/integration/fixtures/blocks/core__list__ul.serialized.html
index c09708d51db0bb..4d74394771fcb5 100644
--- a/test/integration/fixtures/blocks/core__list__ul.serialized.html
+++ b/test/integration/fixtures/blocks/core__list__ul.serialized.html
@@ -1,5 +1,5 @@
 <!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>Text &amp; Headings</li>
 <!-- /wp:list-item -->
 
diff --git a/test/integration/fixtures/documents/apple-out.html b/test/integration/fixtures/documents/apple-out.html
index afada0ee3136e8..d6112309af9f03 100644
--- a/test/integration/fixtures/documents/apple-out.html
+++ b/test/integration/fixtures/documents/apple-out.html
@@ -11,13 +11,13 @@
 <!-- /wp:paragraph -->
 
 <!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>A</li>
 <!-- /wp:list-item -->
 
 <!-- wp:list-item -->
 <li>Bulleted<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>Indented</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list --></li>
@@ -29,7 +29,7 @@
 <!-- /wp:list -->
 
 <!-- wp:list {"ordered":true} -->
-<ol><!-- wp:list-item -->
+<ol class="wp-block-list"><!-- wp:list-item -->
 <li>One</li>
 <!-- /wp:list-item -->
 
diff --git a/test/integration/fixtures/documents/evernote-out.html b/test/integration/fixtures/documents/evernote-out.html
index a5ff509c7a1737..2a7212f2e29b3d 100644
--- a/test/integration/fixtures/documents/evernote-out.html
+++ b/test/integration/fixtures/documents/evernote-out.html
@@ -7,13 +7,13 @@
 <!-- /wp:paragraph -->
 
 <!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>An</li>
 <!-- /wp:list-item -->
 
 <!-- wp:list-item -->
 <li>Unordered<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>Indented</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list --></li>
@@ -25,13 +25,13 @@
 <!-- /wp:list -->
 
 <!-- wp:list {"ordered":true,"start":1} -->
-<ol start="1"><!-- wp:list-item -->
+<ol start="1" class="wp-block-list"><!-- wp:list-item -->
 <li>One</li>
 <!-- /wp:list-item -->
 
 <!-- wp:list-item -->
 <li>Two<!-- wp:list {"ordered":true} -->
-<ol><!-- wp:list-item -->
+<ol class="wp-block-list"><!-- wp:list-item -->
 <li>Indented</li>
 <!-- /wp:list-item --></ol>
 <!-- /wp:list --></li>
diff --git a/test/integration/fixtures/documents/google-docs-list-only-out.html b/test/integration/fixtures/documents/google-docs-list-only-out.html
index 642dc168bb5bb9..ec14d44d2b9224 100644
--- a/test/integration/fixtures/documents/google-docs-list-only-out.html
+++ b/test/integration/fixtures/documents/google-docs-list-only-out.html
@@ -1,7 +1,7 @@
 <!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>My first list item<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>A sub list item</li>
 <!-- /wp:list-item -->
 
diff --git a/test/integration/fixtures/documents/google-docs-out.html b/test/integration/fixtures/documents/google-docs-out.html
index f2ec15cf4f92ad..3ee7d25875abc6 100644
--- a/test/integration/fixtures/documents/google-docs-out.html
+++ b/test/integration/fixtures/documents/google-docs-out.html
@@ -11,13 +11,13 @@ <h2 class="wp-block-heading">This is a <em>heading</em></h2>
 <!-- /wp:paragraph -->
 
 <!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>A</li>
 <!-- /wp:list-item -->
 
 <!-- wp:list-item -->
 <li>Bulleted<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>Indented</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list --></li>
@@ -29,7 +29,7 @@ <h2 class="wp-block-heading">This is a <em>heading</em></h2>
 <!-- /wp:list -->
 
 <!-- wp:list {"ordered":true} -->
-<ol><!-- wp:list-item -->
+<ol class="wp-block-list"><!-- wp:list-item -->
 <li>One</li>
 <!-- /wp:list-item -->
 
diff --git a/test/integration/fixtures/documents/google-docs-with-comments-out.html b/test/integration/fixtures/documents/google-docs-with-comments-out.html
index f2ec15cf4f92ad..3ee7d25875abc6 100644
--- a/test/integration/fixtures/documents/google-docs-with-comments-out.html
+++ b/test/integration/fixtures/documents/google-docs-with-comments-out.html
@@ -11,13 +11,13 @@ <h2 class="wp-block-heading">This is a <em>heading</em></h2>
 <!-- /wp:paragraph -->
 
 <!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>A</li>
 <!-- /wp:list-item -->
 
 <!-- wp:list-item -->
 <li>Bulleted<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>Indented</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list --></li>
@@ -29,7 +29,7 @@ <h2 class="wp-block-heading">This is a <em>heading</em></h2>
 <!-- /wp:list -->
 
 <!-- wp:list {"ordered":true} -->
-<ol><!-- wp:list-item -->
+<ol class="wp-block-list"><!-- wp:list-item -->
 <li>One</li>
 <!-- /wp:list-item -->
 
diff --git a/test/integration/fixtures/documents/markdown-out.html b/test/integration/fixtures/documents/markdown-out.html
index ed57e4e05e7176..9ed72f6d3ef6d3 100644
--- a/test/integration/fixtures/documents/markdown-out.html
+++ b/test/integration/fixtures/documents/markdown-out.html
@@ -15,13 +15,13 @@ <h2 class="wp-block-heading">Lists</h2>
 <!-- /wp:heading -->
 
 <!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>A</li>
 <!-- /wp:list-item -->
 
 <!-- wp:list-item -->
 <li>Bulleted<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>Indented</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list --></li>
@@ -33,7 +33,7 @@ <h2 class="wp-block-heading">Lists</h2>
 <!-- /wp:list -->
 
 <!-- wp:list {"ordered":true} -->
-<ol><!-- wp:list-item -->
+<ol class="wp-block-list"><!-- wp:list-item -->
 <li>One</li>
 <!-- /wp:list-item -->
 
diff --git a/test/integration/fixtures/documents/ms-word-list-out.html b/test/integration/fixtures/documents/ms-word-list-out.html
index f57946f64bc985..2e55413b159a6a 100644
--- a/test/integration/fixtures/documents/ms-word-list-out.html
+++ b/test/integration/fixtures/documents/ms-word-list-out.html
@@ -7,7 +7,7 @@ <h3 class="wp-block-heading"><a>This is a headline?</a></h3>
 <!-- /wp:paragraph -->
 
 <!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>One</li>
 <!-- /wp:list-item -->
 
diff --git a/test/integration/fixtures/documents/ms-word-online-out.html b/test/integration/fixtures/documents/ms-word-online-out.html
index 2d8314bbf0fd60..13698a929d9b13 100644
--- a/test/integration/fixtures/documents/ms-word-online-out.html
+++ b/test/integration/fixtures/documents/ms-word-online-out.html
@@ -7,7 +7,7 @@
 <!-- /wp:paragraph -->
 
 <!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>A </li>
 <!-- /wp:list-item -->
 
@@ -25,7 +25,7 @@
 <!-- /wp:list -->
 
 <!-- wp:list {"ordered":true,"start":1} -->
-<ol start="1"><!-- wp:list-item -->
+<ol start="1" class="wp-block-list"><!-- wp:list-item -->
 <li>One </li>
 <!-- /wp:list-item -->
 
diff --git a/test/integration/fixtures/documents/ms-word-out.html b/test/integration/fixtures/documents/ms-word-out.html
index 89eaa6f3bcd161..81b82b5f9502fe 100644
--- a/test/integration/fixtures/documents/ms-word-out.html
+++ b/test/integration/fixtures/documents/ms-word-out.html
@@ -19,13 +19,13 @@ <h2 class="wp-block-heading">This is a heading level 2</h2>
 <!-- /wp:paragraph -->
 
 <!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>A</li>
 <!-- /wp:list-item -->
 
 <!-- wp:list-item -->
 <li>Bulleted<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>Indented</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list --></li>
@@ -37,7 +37,7 @@ <h2 class="wp-block-heading">This is a heading level 2</h2>
 <!-- /wp:list -->
 
 <!-- wp:list {"ordered":true} -->
-<ol><!-- wp:list-item -->
+<ol class="wp-block-list"><!-- wp:list-item -->
 <li>One</li>
 <!-- /wp:list-item -->
 
diff --git a/test/native/integration/blocks-raw-handling.native.js b/test/native/integration/blocks-raw-handling.native.js
index 5f21ca035fbf9d..6fae0e72be0cac 100644
--- a/test/native/integration/blocks-raw-handling.native.js
+++ b/test/native/integration/blocks-raw-handling.native.js
@@ -187,7 +187,7 @@ describe( 'Blocks raw handling', () => {
 			.join( '' );
 
 		expect( filtered ).toMatchInlineSnapshot( `
-		"<ul><!-- wp:list-item -->
+		"<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>one</li>
 		<!-- /wp:list-item -->
 
@@ -212,7 +212,7 @@ describe( 'Blocks raw handling', () => {
 			.join( '' );
 
 		expect( filtered ).toMatchInlineSnapshot( `
-		"<ul><!-- wp:list-item -->
+		"<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>one</li>
 		<!-- /wp:list-item -->
 
@@ -309,7 +309,7 @@ describe( 'Blocks raw handling', () => {
 
 	it( 'should treat single list item as inline text', () => {
 		const filtered = pasteHandler( {
-			HTML: '<ul><li>Some <strong>bold</strong> text.</li></ul>',
+			HTML: '<ul class="wp-block-list"><li>Some <strong>bold</strong> text.</li></ul>',
 			plainText: 'Some <strong>bold</strong> text.\n',
 			mode: 'AUTO',
 		} );
@@ -320,7 +320,7 @@ describe( 'Blocks raw handling', () => {
 
 	it( 'should treat multiple list items as a block', () => {
 		const filtered = pasteHandler( {
-			HTML: '<ul><li>One</li><li>Two</li><li>Three</li></ul>',
+			HTML: '<ul class="wp-block-list"><li>One</li><li>Two</li><li>Three</li></ul>',
 			plainText: 'One\nTwo\nThree\n',
 			mode: 'AUTO',
 		} )
@@ -328,7 +328,7 @@ describe( 'Blocks raw handling', () => {
 			.join( '' );
 
 		expect( filtered ).toMatchInlineSnapshot( `
-		"<ul><!-- wp:list-item -->
+		"<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>One</li>
 		<!-- /wp:list-item -->