diff --git a/lib/block-supports/behaviors.php b/lib/block-supports/behaviors.php
index cf668ed22d887..6f442d7b0d2d7 100644
--- a/lib/block-supports/behaviors.php
+++ b/lib/block-supports/behaviors.php
@@ -233,7 +233,9 @@ function gutenberg_render_behaviors_support_lightbox( $block_content, $block ) {
             data-wp-bind--aria-modal="context.core.image.lightboxEnabled"
             data-wp-effect="effects.core.image.initLightbox"
             data-wp-on--keydown="actions.core.image.handleKeydown"
-            data-wp-on--mousewheel="actions.core.image.hideLightbox"
+            data-wp-on--touchstart="actions.core.image.handleTouchStart"
+            data-wp-on--touchmove="actions.core.image.handleTouchMove"
+            data-wp-on--touchend="actions.core.image.handleTouchEnd"
             data-wp-on--click="actions.core.image.hideLightbox"
             >
                 <button type="button" aria-label="$close_button_label" style="fill: $close_button_color" class="close-button" data-wp-on--click="actions.core.image.hideLightbox">
diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php
index 59a3bbc3eb2ef..3aa07158df853 100644
--- a/lib/class-wp-theme-json-gutenberg.php
+++ b/lib/class-wp-theme-json-gutenberg.php
@@ -1145,9 +1145,23 @@ protected function process_blocks_custom_css( $css, $selector ) {
 		// Split CSS nested rules.
 		$parts = explode( '&', $css );
 		foreach ( $parts as $part ) {
-			$processed_css .= ( ! str_contains( $part, '{' ) )
-				? trim( $selector ) . '{' . trim( $part ) . '}' // If the part doesn't contain braces, it applies to the root level.
-				: trim( $selector . $part ); // Prepend the selector, which effectively replaces the "&" character.
+			$is_root_css = ( ! str_contains( $part, '{' ) );
+			if ( $is_root_css ) {
+				// If the part doesn't contain braces, it applies to the root level.
+				$processed_css .= trim( $selector ) . '{' . trim( $part ) . '}';
+			} else {
+				// If the part contains braces, it's a nested CSS rule.
+				$part = explode( '{', str_replace( '}', '', $part ) );
+				if ( count( $part ) !== 2 ) {
+					continue;
+				}
+				$nested_selector = $part[0];
+				$css_value       = $part[1];
+				$part_selector   = str_starts_with( $nested_selector, ' ' )
+					? static::scope_selector( $selector, $nested_selector )
+					: static::append_to_selector( $selector, $nested_selector );
+				$processed_css  .= $part_selector . '{' . trim( $css_value ) . '}';
+			}
 		}
 		return $processed_css;
 	}
diff --git a/lib/compat/plugin/footnotes.php b/lib/compat/plugin/footnotes.php
new file mode 100644
index 0000000000000..a14a7922b24a1
--- /dev/null
+++ b/lib/compat/plugin/footnotes.php
@@ -0,0 +1,250 @@
+<?php
+/**
+ * Compatibility shim for the footnotes bloct to enable test passing while awaiting the tested code to be merged to core.
+ *
+ * See https://github.com/WordPress/gutenberg/pull/52988.
+ *
+ * Once merged, this shim can be removed.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Remove footnote revision hooks when plugin is running on a version of core that already supports meta revisions.
+ */
+if ( function_exists( 'wp_post_revision_meta_keys' ) ) {
+	if ( has_action( 'rest_after_insert_post', 'wp_add_footnotes_revisions_to_post_meta' ) ) {
+		remove_action( 'rest_after_insert_post', 'wp_add_footnotes_revisions_to_post_meta' );
+	}
+	if ( has_action( 'rest_after_insert_page', 'wp_add_footnotes_revisions_to_post_meta' ) ) {
+		remove_action( 'rest_after_insert_page', 'wp_add_footnotes_revisions_to_post_meta' );
+	}
+	if ( has_action( 'wp_after_insert_post', 'wp_save_footnotes_meta' ) ) {
+		remove_action( 'wp_after_insert_post', 'wp_save_footnotes_meta' );
+	}
+	if ( has_action( '_wp_put_post_revision', 'wp_keep_footnotes_revision_id' ) ) {
+		remove_action( '_wp_put_post_revision', 'wp_keep_footnotes_revision_id' );
+	}
+	if ( has_action( 'wp_restore_post_revision', 'wp_restore_footnotes_from_revision' ) ) {
+		remove_action( 'wp_restore_post_revision', 'wp_restore_footnotes_from_revision' );
+	}
+	if ( has_action( 'wp_creating_autosave', '_wp_rest_api_autosave_meta' ) ) {
+		remove_action( 'wp_creating_autosave', '_wp_rest_api_autosave_meta' );
+	}
+	if ( has_action( '_wp_put_post_revision', '_wp_rest_api_autosave_meta' ) ) {
+		remove_action( '_wp_put_post_revision', '_wp_rest_api_autosave_meta' );
+	}
+	if ( has_filter( 'rest_pre_insert_post', '_wp_rest_api_force_autosave_difference' ) ) {
+		remove_filter( 'rest_pre_insert_post', '_wp_rest_api_force_autosave_difference' );
+	}
+} else {
+	/**
+	 * For versions of core that don't support meta revisions, use hooks to add.
+	 */
+	if ( ! function_exists( 'wp_save_footnotes_meta' ) ) {
+		/**
+		 * Saves the footnotes meta value to the revision.
+		 *
+		 * @since 6.3.0
+		 * @since 6.4.0 Core added post meta revisions, so this is no longer needed.
+		 *
+		 * @param int $revision_id The revision ID.
+		 */
+		function wp_save_footnotes_meta( $revision_id ) {
+			$post_id = wp_is_post_revision( $revision_id );
+
+			if ( $post_id ) {
+				$footnotes = get_post_meta( $post_id, 'footnotes', true );
+
+				if ( $footnotes ) {
+					// Can't use update_post_meta() because it doesn't allow revisions.
+					update_metadata( 'post', $revision_id, 'footnotes', wp_slash( $footnotes ) );
+				}
+			}
+		}
+		if ( ! function_exists( 'wp_post_revision_meta_keys' ) ) {
+			add_action( 'wp_after_insert_post', 'wp_save_footnotes_meta' );
+		}
+	}
+
+	if ( ! function_exists( 'wp_keep_footnotes_revision_id' ) ) {
+		/**
+		 * Keeps track of the revision ID for "rest_after_insert_{$post_type}".
+		 *
+		 * @since 6.3.0
+		 * @since 6.4.0 Core added post meta revisions, so this is no longer needed.
+		 *
+		 * @global int $wp_temporary_footnote_revision_id The footnote revision ID.
+		 *
+		 * @param int $revision_id The revision ID.
+		 */
+		function wp_keep_footnotes_revision_id( $revision_id ) {
+			global $wp_temporary_footnote_revision_id;
+			$wp_temporary_footnote_revision_id = $revision_id;
+		}
+		if ( ! function_exists( 'wp_post_revision_meta_keys' ) ) {
+			add_action( '_wp_put_post_revision', 'wp_keep_footnotes_revision_id' );
+		}
+	}
+
+	if ( ! function_exists( 'wp_add_footnotes_revisions_to_post_meta' ) ) {
+
+		/**
+		 * This is a specific fix for the REST API. The REST API doesn't update
+		 * the post and post meta in one go (through `meta_input`). While it
+		 * does fix the `wp_after_insert_post` hook to be called correctly after
+		 * updating meta, it does NOT fix hooks such as post_updated and
+		 * save_post, which are normally also fired after post meta is updated
+		 * in `wp_insert_post()`. Unfortunately, `wp_save_post_revision` is
+		 * added to the `post_updated` action, which means the meta is not
+		 * available at the time, so we have to add it afterwards through the
+		 * `"rest_after_insert_{$post_type}"` action.
+		 *
+		 * @since 6.3.0
+		 * @since 6.4.0 Core added post meta revisions, so this is no longer needed.
+		 *
+		 * @global int $wp_temporary_footnote_revision_id The footnote revision ID.
+		 *
+		 * @param WP_Post $post The post object.
+		 */
+		function wp_add_footnotes_revisions_to_post_meta( $post ) {
+			global $wp_temporary_footnote_revision_id;
+
+			if ( $wp_temporary_footnote_revision_id ) {
+				$revision = get_post( $wp_temporary_footnote_revision_id );
+
+				if ( ! $revision ) {
+					return;
+				}
+
+				$post_id = $revision->post_parent;
+
+				// Just making sure we're updating the right revision.
+				if ( $post->ID === $post_id ) {
+					$footnotes = get_post_meta( $post_id, 'footnotes', true );
+
+					if ( $footnotes ) {
+						// Can't use update_post_meta() because it doesn't allow revisions.
+						update_metadata( 'post', $wp_temporary_footnote_revision_id, 'footnotes', wp_slash( $footnotes ) );
+					}
+				}
+			}
+		}
+
+		if ( ! function_exists( 'wp_post_revision_meta_keys' ) ) {
+			add_action( 'rest_after_insert_post', 'wp_add_footnotes_revisions_to_post_meta' );
+			add_action( 'rest_after_insert_page', 'wp_add_footnotes_revisions_to_post_meta' );
+		}
+	}
+
+	if ( ! function_exists( 'wp_restore_footnotes_from_revision' ) ) {
+
+		/**
+		 * Restores the footnotes meta value from the revision.
+		 *
+		 * @since 6.3.0
+		 * @since 6.4.0 Core added post meta revisions, so this is no longer needed.
+		 *
+		 * @param int $post_id     The post ID.
+		 * @param int $revision_id The revision ID.
+		 */
+		function wp_restore_footnotes_from_revision( $post_id, $revision_id ) {
+			$footnotes = get_post_meta( $revision_id, 'footnotes', true );
+
+			if ( $footnotes ) {
+				update_post_meta( $post_id, 'footnotes', wp_slash( $footnotes ) );
+			} else {
+				delete_post_meta( $post_id, 'footnotes' );
+			}
+		}
+		if ( ! function_exists( 'wp_post_revision_meta_keys' ) ) {
+			add_action( 'wp_restore_post_revision', 'wp_restore_footnotes_from_revision', 10, 2 );
+		}
+	}
+
+	if ( ! function_exists( '_wp_rest_api_autosave_meta' ) ) {
+
+		/**
+		 * The REST API autosave endpoint doesn't save meta, so we can use the
+		 * `wp_creating_autosave` when it updates an exiting autosave, and
+		 * `_wp_put_post_revision` when it creates a new autosave.
+		 *
+		 * @since 6.3.0
+		 * @since 6.4.0 Core added post meta revisions, so this is no longer needed.
+		 *
+		 * @param int|array $autosave The autosave ID or array.
+		 */
+		function _wp_rest_api_autosave_meta( $autosave ) {
+			// Ensure it's a REST API request.
+			if ( ! defined( 'REST_REQUEST' ) || ! REST_REQUEST ) {
+				return;
+			}
+
+			$body = rest_get_server()->get_raw_data();
+			$body = json_decode( $body, true );
+
+			if ( ! isset( $body['meta']['footnotes'] ) ) {
+				return;
+			}
+
+			// `wp_creating_autosave` passes the array,
+			// `_wp_put_post_revision` passes the ID.
+			$id = is_int( $autosave ) ? $autosave : $autosave['ID'];
+
+			if ( ! $id ) {
+				return;
+			}
+
+			// Can't use update_post_meta() because it doesn't allow revisions.
+			update_metadata( 'post', $id, 'footnotes', wp_slash( $body['meta']['footnotes'] ) );
+		}
+
+		if ( ! function_exists( 'wp_post_revision_meta_keys' ) ) {
+			// See https://github.com/WordPress/wordpress-develop/blob/2103cb9966e57d452c94218bbc3171579b536a40/src/wp-includes/rest-api/endpoints/class-wp-rest-autosaves-controller.php#L391C1-L391C1.
+			add_action( 'wp_creating_autosave', '_wp_rest_api_autosave_meta' );
+			// See https://github.com/WordPress/wordpress-develop/blob/2103cb9966e57d452c94218bbc3171579b536a40/src/wp-includes/rest-api/endpoints/class-wp-rest-autosaves-controller.php#L398.
+			// Then https://github.com/WordPress/wordpress-develop/blob/2103cb9966e57d452c94218bbc3171579b536a40/src/wp-includes/revision.php#L367.
+			add_action( '_wp_put_post_revision', '_wp_rest_api_autosave_meta' );
+		}
+	}
+
+	if ( ! function_exists( '_wp_rest_api_force_autosave_difference' ) ) {
+
+		/**
+		 * This is a workaround for the autosave endpoint returning early if the
+		 * revision field are equal. The problem is that "footnotes" is not real
+		 * revision post field, so there's nothing to compare against.
+		 *
+		 * This trick sets the "footnotes" field (value doesn't matter), which will
+		 * cause the autosave endpoint to always update the latest revision. That should
+		 * be fine, it should be ok to update the revision even if nothing changed. Of
+		 * course, this is temporary fix.
+		 *
+		 * @since 6.3.0
+		 * @since 6.4.0 Core added post meta revisions, so this is no longer needed.
+		 *
+		 * @param WP_Post         $prepared_post The prepared post object.
+		 * @param WP_REST_Request $request       The request object.
+		 *
+		 * See https://github.com/WordPress/wordpress-develop/blob/2103cb9966e57d452c94218bbc3171579b536a40/src/wp-includes/rest-api/endpoints/class-wp-rest-autosaves-controller.php#L365-L384.
+		 * See https://github.com/WordPress/wordpress-develop/blob/2103cb9966e57d452c94218bbc3171579b536a40/src/wp-includes/rest-api/endpoints/class-wp-rest-autosaves-controller.php#L219.
+		 */
+		function _wp_rest_api_force_autosave_difference( $prepared_post, $request ) {
+			// We only want to be altering POST requests.
+			if ( $request->get_method() !== 'POST' ) {
+				return $prepared_post;
+			}
+
+			// Only alter requests for the '/autosaves' route.
+			if ( substr( $request->get_route(), -strlen( '/autosaves' ) ) !== '/autosaves' ) {
+				return $prepared_post;
+			}
+
+			$prepared_post->footnotes = '[]';
+			return $prepared_post;
+		}
+		if ( ! function_exists( 'wp_post_revision_meta_keys' ) ) {
+			add_filter( 'rest_pre_insert_post', '_wp_rest_api_force_autosave_difference', 10, 2 );
+		}
+	}
+}
diff --git a/lib/experimental/fonts/font-library/class-wp-font-collection.php b/lib/experimental/fonts/font-library/class-wp-font-collection.php
index 5b3702ae865d1..3dd9b5fed764f 100644
--- a/lib/experimental/fonts/font-library/class-wp-font-collection.php
+++ b/lib/experimental/fonts/font-library/class-wp-font-collection.php
@@ -79,7 +79,7 @@ public function get_config() {
 	 */
 	public function get_data() {
 		// If the src is a URL, fetch the data from the URL.
-		if ( false !== strpos( $this->config['src'], 'http' ) && false !== strpos( $this->config['src'], '://' ) ) {
+		if ( str_contains( $this->config['src'], 'http' ) && str_contains( $this->config['src'], '://' ) ) {
 			if ( ! wp_http_validate_url( $this->config['src'] ) ) {
 				return new WP_Error( 'font_collection_read_error', __( 'Invalid URL for Font Collection data.', 'gutenberg' ) );
 			}
diff --git a/lib/experimental/fonts/font-library/class-wp-font-family-utils.php b/lib/experimental/fonts/font-library/class-wp-font-family-utils.php
index 200cfef22289f..f6166f3b13a3a 100644
--- a/lib/experimental/fonts/font-library/class-wp-font-family-utils.php
+++ b/lib/experimental/fonts/font-library/class-wp-font-family-utils.php
@@ -85,8 +85,9 @@ public static function merge_fonts_data( $font1, $font2 ) {
 	 * @return bool True if the file has a font MIME type, false otherwise.
 	 */
 	public static function has_font_mime_type( $filepath ) {
-		$filetype = wp_check_filetype( $filepath, WP_Font_Library::ALLOWED_FONT_MIME_TYPES );
+		$allowed_mime_types = WP_Font_Library::get_expected_font_mime_types_per_php_version();
+		$filetype           = wp_check_filetype( $filepath, $allowed_mime_types );
 
-		return in_array( $filetype['type'], WP_Font_Library::ALLOWED_FONT_MIME_TYPES, true );
+		return in_array( $filetype['type'], $allowed_mime_types, true );
 	}
 }
diff --git a/lib/experimental/fonts/font-library/class-wp-font-family.php b/lib/experimental/fonts/font-library/class-wp-font-family.php
index ad7b0d207cd0d..68e980ced05ce 100644
--- a/lib/experimental/fonts/font-library/class-wp-font-family.php
+++ b/lib/experimental/fonts/font-library/class-wp-font-family.php
@@ -182,7 +182,7 @@ private function get_upload_overrides( $filename ) {
 			// Seems mime type for files that are not images cannot be tested.
 			// See wp_check_filetype_and_ext().
 			'test_type'                => true,
-			'mimes'                    => WP_Font_Library::ALLOWED_FONT_MIME_TYPES,
+			'mimes'                    => WP_Font_Library::get_expected_font_mime_types_per_php_version(),
 			'unique_filename_callback' => static function () use ( $filename ) {
 				// Keep the original filename.
 				return $filename;
diff --git a/lib/experimental/fonts/font-library/class-wp-font-library.php b/lib/experimental/fonts/font-library/class-wp-font-library.php
index d488e330486a7..e77a79244569b 100644
--- a/lib/experimental/fonts/font-library/class-wp-font-library.php
+++ b/lib/experimental/fonts/font-library/class-wp-font-library.php
@@ -20,14 +20,28 @@
  */
 class WP_Font_Library {
 
-	const PHP_7_TTF_MIME_TYPE = PHP_VERSION_ID >= 70300 ? 'application/font-sfnt' : 'application/x-font-ttf';
+	/**
+	 * Provide the expected mime-type value for font files per-PHP release. Due to differences in the values returned these values differ between PHP versions.
+	 *
+	 * This is necessary until a collection of valid mime-types per-file extension can be provided to 'upload_mimes' filter.
+	 *
+	 * @since 6.4.0
+	 *
+	 * @param array $php_version_id The version of PHP to provide mime types for. The default is the current PHP version.
+	 *
+	 * @return Array A collection of mime types keyed by file extension.
+	 */
+	public static function get_expected_font_mime_types_per_php_version( $php_version_id = PHP_VERSION_ID ) {
 
-	const ALLOWED_FONT_MIME_TYPES = array(
-		'otf'   => 'font/otf',
-		'ttf'   => PHP_VERSION_ID >= 70400 ? 'font/sfnt' : self::PHP_7_TTF_MIME_TYPE,
-		'woff'  => PHP_VERSION_ID >= 80100 ? 'font/woff' : 'application/font-woff',
-		'woff2' => PHP_VERSION_ID >= 80100 ? 'font/woff2' : 'application/font-woff2',
-	);
+		$php_7_ttf_mime_type = $php_version_id >= 70300 ? 'application/font-sfnt' : 'application/x-font-ttf';
+
+		return array(
+			'otf'   => 'application/vnd.ms-opentype',
+			'ttf'   => $php_version_id >= 70400 ? 'font/sfnt' : $php_7_ttf_mime_type,
+			'woff'  => $php_version_id >= 80100 ? 'font/woff' : 'application/font-woff',
+			'woff2' => $php_version_id >= 80100 ? 'font/woff2' : 'application/font-woff2',
+		);
+	}
 
 	/**
 	 * Font collections.
@@ -130,6 +144,6 @@ public static function set_upload_dir( $defaults ) {
 	 * @return array Modified upload directory.
 	 */
 	public static function set_allowed_mime_types( $mime_types ) {
-		return array_merge( $mime_types, self::ALLOWED_FONT_MIME_TYPES );
+		return array_merge( $mime_types, self::get_expected_font_mime_types_per_php_version() );
 	}
 }
diff --git a/lib/experimental/fonts/font-library/class-wp-rest-font-library-controller.php b/lib/experimental/fonts/font-library/class-wp-rest-font-library-controller.php
index dcf94d93012a2..90fb3c6973ca3 100644
--- a/lib/experimental/fonts/font-library/class-wp-rest-font-library-controller.php
+++ b/lib/experimental/fonts/font-library/class-wp-rest-font-library-controller.php
@@ -289,19 +289,39 @@ public function uninstall_schema() {
 	 * @return WP_REST_Response|WP_Error Response object on success, or WP_Error object on failure.
 	 */
 	public function uninstall_fonts( $request ) {
-		$fonts_param = $request->get_param( 'fontFamilies' );
+		$fonts_to_uninstall = $request->get_param( 'fontFamilies' );
+
+		$errors    = array();
+		$successes = array();
+
+		if ( empty( $fonts_to_uninstall ) ) {
+			$errors[] = new WP_Error(
+				'no_fonts_to_install',
+				__( 'No fonts to uninstall', 'gutenberg' )
+			);
+			$data     = array(
+				'successes' => $successes,
+				'errors'    => $errors,
+			);
+			$response = rest_ensure_response( $data );
+			$response->set_status( 400 );
+			return $response;
+		}
 
-		foreach ( $fonts_param as $font_data ) {
+		foreach ( $fonts_to_uninstall as $font_data ) {
 			$font   = new WP_Font_Family( $font_data );
 			$result = $font->uninstall();
-
-			// If there was an error uninstalling the font, return the error.
 			if ( is_wp_error( $result ) ) {
-				return $result;
+				$errors[] = $result;
+			} else {
+				$successes[] = $result;
 			}
 		}
-
-		return new WP_REST_Response( __( 'Font family uninstalled successfully.', 'gutenberg' ), 200 );
+		$data = array(
+			'successes' => $successes,
+			'errors'    => $errors,
+		);
+		return rest_ensure_response( $data );
 	}
 
 	/**
@@ -321,23 +341,48 @@ public function update_font_library_permissions_check() {
 				)
 			);
 		}
+		return true;
+	}
 
+	/**
+	 * Checks whether the user has write permissions to the temp and fonts directories.
+	 *
+	 * @since 6.4.0
+	 *
+	 * @return true|WP_Error True if the user has write permissions, WP_Error object otherwise.
+	 */
+	private function has_write_permission() {
 		// The update endpoints requires write access to the temp and the fonts directories.
 		$temp_dir   = get_temp_dir();
-		$upload_dir = wp_upload_dir()['basedir'];
+		$upload_dir = WP_Font_Library::get_fonts_dir();
 		if ( ! is_writable( $temp_dir ) || ! wp_is_writable( $upload_dir ) ) {
-			return new WP_Error(
-				'rest_cannot_write_fonts_folder',
-				__( 'Error: WordPress does not have permission to write the fonts folder on your server.', 'gutenberg' ),
-				array(
-					'status' => 500,
-				)
-			);
+			return false;
 		}
-
 		return true;
 	}
 
+	/**
+	 * Checks whether the request needs write permissions.
+	 *
+	 * @since 6.4.0
+	 *
+	 * @param array[] $font_families Font families to install.
+	 * @return bool Whether the request needs write permissions.
+	 */
+	private function needs_write_permission( $font_families ) {
+		foreach ( $font_families as $font ) {
+			if ( isset( $font['fontFace'] ) ) {
+				foreach ( $font['fontFace'] as $face ) {
+					// If the font is being downloaded from a URL or uploaded, it needs write permissions.
+					if ( isset( $face['downloadFromUrl'] ) || isset( $face['uploadedFile'] ) ) {
+						return true;
+					}
+				}
+			}
+		}
+		return false;
+	}
+
 	/**
 	 * Installs new fonts.
 	 *
@@ -361,38 +406,52 @@ public function install_fonts( $request ) {
 		 */
 		$fonts_to_install = json_decode( $fonts_param, true );
 
+		$successes       = array();
+		$errors          = array();
+		$response_status = 200;
+
 		if ( empty( $fonts_to_install ) ) {
-			return new WP_Error(
+			$errors[]        = new WP_Error(
 				'no_fonts_to_install',
-				__( 'No fonts to install', 'gutenberg' ),
-				array( 'status' => 400 )
+				__( 'No fonts to install', 'gutenberg' )
 			);
+			$response_status = 400;
 		}
 
-		// Get uploaded files (used when installing local fonts).
-		$files = $request->get_file_params();
-
-		// Iterates the fonts data received and creates a new WP_Font_Family object for each one.
-		$fonts_installed = array();
-		foreach ( $fonts_to_install as $font_data ) {
-			$font = new WP_Font_Family( $font_data );
-			$font->install( $files );
-			$fonts_installed[] = $font;
+		if ( $this->needs_write_permission( $fonts_to_install ) && ! $this->has_write_permission() ) {
+			$errors[]        = new WP_Error(
+				'cannot_write_fonts_folder',
+				__( 'Error: WordPress does not have permission to write the fonts folder on your server.', 'gutenberg' )
+			);
+			$response_status = 500;
 		}
 
-		if ( empty( $fonts_installed ) ) {
-			return new WP_Error(
-				'error_installing_fonts',
-				__( 'Error installing fonts. No font was installed.', 'gutenberg' ),
-				array( 'status' => 500 )
+		if ( ! empty( $errors ) ) {
+			$data     = array(
+				'successes' => $successes,
+				'errors'    => $errors,
 			);
+			$response = rest_ensure_response( $data );
+			$response->set_status( $response_status );
+			return $response;
 		}
 
-		$response = array();
-		foreach ( $fonts_installed as $font ) {
-			$response[] = $font->get_data();
+		// Get uploaded files (used when installing local fonts).
+		$files = $request->get_file_params();
+		foreach ( $fonts_to_install as $font_data ) {
+			$font   = new WP_Font_Family( $font_data );
+			$result = $font->install( $files );
+			if ( is_wp_error( $result ) ) {
+				$errors[] = $result;
+			} else {
+				$successes[] = $result;
+			}
 		}
 
-		return new WP_REST_Response( $response );
+		$data = array(
+			'successes' => $successes,
+			'errors'    => $errors,
+		);
+		return rest_ensure_response( $data );
 	}
 }
diff --git a/lib/load.php b/lib/load.php
index 0d442302450ea..77232efcfae1a 100644
--- a/lib/load.php
+++ b/lib/load.php
@@ -72,6 +72,7 @@ function gutenberg_is_experiment_enabled( $name ) {
 
 // Gutenberg plugin compat.
 require __DIR__ . '/compat/plugin/edit-site-routes-backwards-compat.php';
+require __DIR__ . '/compat/plugin/footnotes.php';
 
 if ( ! class_exists( 'WP_HTML_Processor' ) ) {
 	require __DIR__ . '/compat/wordpress-6.4/html-api/class-wp-html-active-formatting-elements.php';
diff --git a/packages/block-editor/src/components/global-styles/hooks.js b/packages/block-editor/src/components/global-styles/hooks.js
index 4bbc9c40588e0..356ff4dce57a9 100644
--- a/packages/block-editor/src/components/global-styles/hooks.js
+++ b/packages/block-editor/src/components/global-styles/hooks.js
@@ -117,7 +117,7 @@ export function useGlobalSetting( propertyPath, blockName, source = 'all' ) {
 					`settings${ appendedBlockPath }.${ setting }`
 				) ??
 				getValueFromObjectPath( configToUse, `settings.${ setting }` );
-			if ( value ) {
+			if ( value !== undefined ) {
 				result = setImmutably( result, setting.split( '.' ), value );
 			}
 		} );
diff --git a/packages/block-editor/src/components/global-styles/test/use-global-styles-output.js b/packages/block-editor/src/components/global-styles/test/use-global-styles-output.js
index 1aead846e95cd..b05381a8325b0 100644
--- a/packages/block-editor/src/components/global-styles/test/use-global-styles-output.js
+++ b/packages/block-editor/src/components/global-styles/test/use-global-styles-output.js
@@ -14,6 +14,7 @@ import {
 	toCustomProperties,
 	toStyles,
 	getStylesDeclarations,
+	processCSSNesting,
 } from '../use-global-styles-output';
 import { ROOT_BLOCK_SELECTOR } from '../utils';
 
@@ -967,4 +968,42 @@ describe( 'global styles renderer', () => {
 			] );
 		} );
 	} );
+
+	describe( 'processCSSNesting', () => {
+		it( 'should return processed CSS without any nested selectors', () => {
+			expect(
+				processCSSNesting( 'color: red; margin: auto;', '.foo' )
+			).toEqual( '.foo{color: red; margin: auto;}' );
+		} );
+		it( 'should return processed CSS with nested selectors', () => {
+			expect(
+				processCSSNesting(
+					'color: red; margin: auto; &.one{color: blue;} & .two{color: green;}',
+					'.foo'
+				)
+			).toEqual(
+				'.foo{color: red; margin: auto;}.foo.one{color: blue;}.foo .two{color: green;}'
+			);
+		} );
+		it( 'should return processed CSS with pseudo elements', () => {
+			expect(
+				processCSSNesting(
+					'color: red; margin: auto; &::before{color: blue;} & ::before{color: green;}  &.one::before{color: yellow;} & .two::before{color: purple;}',
+					'.foo'
+				)
+			).toEqual(
+				'.foo{color: red; margin: auto;}.foo::before{color: blue;}.foo ::before{color: green;}.foo.one::before{color: yellow;}.foo .two::before{color: purple;}'
+			);
+		} );
+		it( 'should return processed CSS with multiple root selectors', () => {
+			expect(
+				processCSSNesting(
+					'color: red; margin: auto; &.one{color: blue;} & .two{color: green;} &::before{color: yellow;} & ::before{color: purple;}  &.three::before{color: orange;} & .four::before{color: skyblue;}',
+					'.foo, .bar'
+				)
+			).toEqual(
+				'.foo, .bar{color: red; margin: auto;}.foo.one, .bar.one{color: blue;}.foo .two, .bar .two{color: green;}.foo::before, .bar::before{color: yellow;}.foo ::before, .bar ::before{color: purple;}.foo.three::before, .bar.three::before{color: orange;}.foo .four::before, .bar .four::before{color: skyblue;}'
+			);
+		} );
+	} );
 } );
diff --git a/packages/block-editor/src/components/global-styles/use-global-styles-output.js b/packages/block-editor/src/components/global-styles/use-global-styles-output.js
index e32df90695b35..7e99eca355b52 100644
--- a/packages/block-editor/src/components/global-styles/use-global-styles-output.js
+++ b/packages/block-editor/src/components/global-styles/use-global-styles-output.js
@@ -15,7 +15,12 @@ import { getCSSRules } from '@wordpress/style-engine';
 /**
  * Internal dependencies
  */
-import { PRESET_METADATA, ROOT_BLOCK_SELECTOR, scopeSelector } from './utils';
+import {
+	PRESET_METADATA,
+	ROOT_BLOCK_SELECTOR,
+	scopeSelector,
+	appendToSelector,
+} from './utils';
 import { getBlockCSSSelector } from './get-block-css-selector';
 import {
 	getTypographyFontSizeValue,
@@ -1124,18 +1129,33 @@ function updateConfigWithSeparator( config ) {
 	return config;
 }
 
-const processCSSNesting = ( css, blockSelector ) => {
+export function processCSSNesting( css, blockSelector ) {
 	let processedCSS = '';
 
 	// Split CSS nested rules.
 	const parts = css.split( '&' );
 	parts.forEach( ( part ) => {
-		processedCSS += ! part.includes( '{' )
-			? blockSelector + '{' + part + '}' // If the part doesn't contain braces, it applies to the root level.
-			: blockSelector + part; // Prepend the selector, which effectively replaces the "&" character.
+		const isRootCss = ! part.includes( '{' );
+		if ( isRootCss ) {
+			// If the part doesn't contain braces, it applies to the root level.
+			processedCSS += `${ blockSelector }{${ part.trim() }}`;
+		} else {
+			// If the part contains braces, it's a nested CSS rule.
+			const splittedPart = part.replace( '}', '' ).split( '{' );
+			if ( splittedPart.length !== 2 ) {
+				return;
+			}
+
+			const [ nestedSelector, cssValue ] = splittedPart;
+			const combinedSelector = nestedSelector.startsWith( ' ' )
+				? scopeSelector( blockSelector, nestedSelector )
+				: appendToSelector( blockSelector, nestedSelector );
+
+			processedCSS += `${ combinedSelector }{${ cssValue.trim() }}`;
+		}
 	} );
 	return processedCSS;
-};
+}
 
 /**
  * Returns the global styles output using a global styles configuration.
diff --git a/packages/block-editor/src/components/global-styles/utils.js b/packages/block-editor/src/components/global-styles/utils.js
index d4f2d959a3365..f4adb7a790312 100644
--- a/packages/block-editor/src/components/global-styles/utils.js
+++ b/packages/block-editor/src/components/global-styles/utils.js
@@ -393,6 +393,27 @@ export function scopeSelector( scope, selector ) {
 	return selectorsScoped.join( ', ' );
 }
 
+/**
+ * Appends a sub-selector to an existing one.
+ *
+ * Given the compounded `selector` "h1, h2, h3"
+ * and the `toAppend` selector ".some-class" the result will be
+ * "h1.some-class, h2.some-class, h3.some-class".
+ *
+ * @param {string} selector Original selector.
+ * @param {string} toAppend Selector to append.
+ *
+ * @return {string} The new selector.
+ */
+export function appendToSelector( selector, toAppend ) {
+	if ( ! selector.includes( ',' ) ) {
+		return selector + toAppend;
+	}
+	const selectors = selector.split( ',' );
+	const newSelectors = selectors.map( ( sel ) => sel + toAppend );
+	return newSelectors.join( ',' );
+}
+
 /**
  * Compares global style variations according to their styles and settings properties.
  *
diff --git a/packages/block-editor/src/components/link-control/search-item.js b/packages/block-editor/src/components/link-control/search-item.js
index e91326b3ba4ee..c332fecd19a95 100644
--- a/packages/block-editor/src/components/link-control/search-item.js
+++ b/packages/block-editor/src/components/link-control/search-item.js
@@ -13,7 +13,8 @@ import {
 	file,
 } from '@wordpress/icons';
 import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
-import { safeDecodeURI, filterURLForDisplay } from '@wordpress/url';
+import { safeDecodeURI, filterURLForDisplay, getPath } from '@wordpress/url';
+import { pipe } from '@wordpress/compose';
 
 const ICONS_MAP = {
 	post: postList,
@@ -44,6 +45,58 @@ function SearchItemIcon( { isURL, suggestion } ) {
 	return null;
 }
 
+/**
+ * Adds a leading slash to a url if it doesn't already have one.
+ * @param {string} url the url to add a leading slash to.
+ * @return {string} the url with a leading slash.
+ */
+function addLeadingSlash( url ) {
+	const trimmedURL = url?.trim();
+
+	if ( ! trimmedURL?.length ) return url;
+
+	return url?.replace( /^\/?/, '/' );
+}
+
+function removeTrailingSlash( url ) {
+	const trimmedURL = url?.trim();
+
+	if ( ! trimmedURL?.length ) return url;
+
+	return url?.replace( /\/$/, '' );
+}
+
+const partialRight =
+	( fn, ...partialArgs ) =>
+	( ...args ) =>
+		fn( ...args, ...partialArgs );
+
+const defaultTo = ( d ) => ( v ) => {
+	return v === null || v === undefined || v !== v ? d : v;
+};
+
+/**
+ * Prepares a URL for display in the UI.
+ * - decodes the URL.
+ * - filters it (removes protocol, www, etc.).
+ * - truncates it if necessary.
+ * - adds a leading slash.
+ * @param {string} url the url.
+ * @return {string} the processed url to display.
+ */
+function getURLForDisplay( url ) {
+	if ( ! url ) return url;
+
+	return pipe(
+		safeDecodeURI,
+		getPath,
+		defaultTo( '' ),
+		partialRight( filterURLForDisplay, 24 ),
+		removeTrailingSlash,
+		addLeadingSlash
+	)( url );
+}
+
 export const LinkControlSearchItem = ( {
 	itemProps,
 	suggestion,
@@ -54,7 +107,7 @@ export const LinkControlSearchItem = ( {
 } ) => {
 	const info = isURL
 		? __( 'Press ENTER to add this link' )
-		: filterURLForDisplay( safeDecodeURI( suggestion?.url ), 24 );
+		: getURLForDisplay( suggestion.url );
 
 	return (
 		<MenuItem
diff --git a/packages/block-editor/src/components/tool-selector/index.js b/packages/block-editor/src/components/tool-selector/index.js
index 1e93a18cf6bb9..a0df14f1a19d9 100644
--- a/packages/block-editor/src/components/tool-selector/index.js
+++ b/packages/block-editor/src/components/tool-selector/index.js
@@ -51,7 +51,7 @@ function ToolSelector( props, ref ) {
 					label={ __( 'Tools' ) }
 				/>
 			) }
-			popoverProps={ { placement: 'bottom-start' } }
+			popoverProps={ { placement: 'bottom-start', variant: undefined } }
 			renderContent={ () => (
 				<>
 					<NavigableMenu role="menu" aria-label={ __( 'Tools' ) }>
diff --git a/packages/block-editor/src/hooks/block-rename-ui.js b/packages/block-editor/src/hooks/block-rename-ui.js
index ddb4b743df3e5..9025bfee61983 100644
--- a/packages/block-editor/src/hooks/block-rename-ui.js
+++ b/packages/block-editor/src/hooks/block-rename-ui.js
@@ -44,17 +44,21 @@ function RenameModal( { blockName, originalBlockName, onClose, onSave } ) {
 	);
 
 	const handleSubmit = () => {
-		// Must be assertive to immediately announce change.
-		speak(
-			sprintf(
-				/* translators: %1$s: type of update (either reset of changed). %2$s: new name/label for the block */
-				__( 'Block name %1$s to: "%2$s".' ),
-				nameIsOriginal || nameIsEmpty ? __( 'reset' ) : __( 'changed' ),
-				editedBlockName
-			),
-			'assertive'
-		);
+		const message =
+			nameIsOriginal || nameIsEmpty
+				? sprintf(
+						/* translators: %s: new name/label for the block */
+						__( 'Block name reset to: "%s".' ),
+						editedBlockName
+				  )
+				: sprintf(
+						/* translators: %s: new name/label for the block */
+						__( 'Block name changed to: "%s".' ),
+						editedBlockName
+				  );
 
+		// Must be assertive to immediately announce change.
+		speak( message, 'assertive' );
 		onSave( editedBlockName );
 
 		// Immediate close avoids ability to hit save multiple times.
diff --git a/packages/block-library/src/footnotes/index.php b/packages/block-library/src/footnotes/index.php
index 5924db3a190c2..bc6291dd21c38 100644
--- a/packages/block-library/src/footnotes/index.php
+++ b/packages/block-library/src/footnotes/index.php
@@ -39,15 +39,20 @@ function render_block_core_footnotes( $attributes, $content, $block ) {
 	}
 
 	$wrapper_attributes = get_block_wrapper_attributes();
+	$footnote_index     = 1;
 
 	$block_content = '';
 
 	foreach ( $footnotes as $footnote ) {
+		// Translators: %d: Integer representing the number of return links on the page.
+		$aria_label     = sprintf( __( 'Jump to footnote reference %1$d' ), $footnote_index );
 		$block_content .= sprintf(
-			'<li id="%1$s">%2$s <a href="#%1$s-link">↩︎</a></li>',
+			'<li id="%1$s">%2$s <a href="#%1$s-link" aria-label="%3$s">↩︎</a></li>',
 			$footnote['id'],
-			$footnote['content']
+			$footnote['content'],
+			$aria_label
 		);
+		++$footnote_index;
 	}
 
 	return sprintf(
@@ -68,9 +73,10 @@ function register_block_core_footnotes() {
 			$post_type,
 			'footnotes',
 			array(
-				'show_in_rest' => true,
-				'single'       => true,
-				'type'         => 'string',
+				'show_in_rest'      => true,
+				'single'            => true,
+				'type'              => 'string',
+				'revisions_enabled' => true,
 			)
 		);
 	}
@@ -84,106 +90,7 @@ function register_block_core_footnotes() {
 add_action( 'init', 'register_block_core_footnotes' );
 
 /**
- * Saves the footnotes meta value to the revision.
- *
- * @since 6.3.0
- *
- * @param int $revision_id The revision ID.
- */
-function wp_save_footnotes_meta( $revision_id ) {
-	$post_id = wp_is_post_revision( $revision_id );
-
-	if ( $post_id ) {
-		$footnotes = get_post_meta( $post_id, 'footnotes', true );
-
-		if ( $footnotes ) {
-			// Can't use update_post_meta() because it doesn't allow revisions.
-			update_metadata( 'post', $revision_id, 'footnotes', wp_slash( $footnotes ) );
-		}
-	}
-}
-add_action( 'wp_after_insert_post', 'wp_save_footnotes_meta' );
-
-/**
- * Keeps track of the revision ID for "rest_after_insert_{$post_type}".
- *
- * @since 6.3.0
- *
- * @global int $wp_temporary_footnote_revision_id The footnote revision ID.
- *
- * @param int $revision_id The revision ID.
- */
-function wp_keep_footnotes_revision_id( $revision_id ) {
-	global $wp_temporary_footnote_revision_id;
-	$wp_temporary_footnote_revision_id = $revision_id;
-}
-add_action( '_wp_put_post_revision', 'wp_keep_footnotes_revision_id' );
-
-/**
- * This is a specific fix for the REST API. The REST API doesn't update
- * the post and post meta in one go (through `meta_input`). While it
- * does fix the `wp_after_insert_post` hook to be called correctly after
- * updating meta, it does NOT fix hooks such as post_updated and
- * save_post, which are normally also fired after post meta is updated
- * in `wp_insert_post()`. Unfortunately, `wp_save_post_revision` is
- * added to the `post_updated` action, which means the meta is not
- * available at the time, so we have to add it afterwards through the
- * `"rest_after_insert_{$post_type}"` action.
- *
- * @since 6.3.0
- *
- * @global int $wp_temporary_footnote_revision_id The footnote revision ID.
- *
- * @param WP_Post $post The post object.
- */
-function wp_add_footnotes_revisions_to_post_meta( $post ) {
-	global $wp_temporary_footnote_revision_id;
-
-	if ( $wp_temporary_footnote_revision_id ) {
-		$revision = get_post( $wp_temporary_footnote_revision_id );
-
-		if ( ! $revision ) {
-			return;
-		}
-
-		$post_id = $revision->post_parent;
-
-		// Just making sure we're updating the right revision.
-		if ( $post->ID === $post_id ) {
-			$footnotes = get_post_meta( $post_id, 'footnotes', true );
-
-			if ( $footnotes ) {
-				// Can't use update_post_meta() because it doesn't allow revisions.
-				update_metadata( 'post', $wp_temporary_footnote_revision_id, 'footnotes', wp_slash( $footnotes ) );
-			}
-		}
-	}
-}
-
-add_action( 'rest_after_insert_post', 'wp_add_footnotes_revisions_to_post_meta' );
-add_action( 'rest_after_insert_page', 'wp_add_footnotes_revisions_to_post_meta' );
-
-/**
- * Restores the footnotes meta value from the revision.
- *
- * @since 6.3.0
- *
- * @param int $post_id     The post ID.
- * @param int $revision_id The revision ID.
- */
-function wp_restore_footnotes_from_revision( $post_id, $revision_id ) {
-	$footnotes = get_post_meta( $revision_id, 'footnotes', true );
-
-	if ( $footnotes ) {
-		update_post_meta( $post_id, 'footnotes', wp_slash( $footnotes ) );
-	} else {
-		delete_post_meta( $post_id, 'footnotes' );
-	}
-}
-add_action( 'wp_restore_post_revision', 'wp_restore_footnotes_from_revision', 10, 2 );
-
-/**
- * Adds the footnotes field to the revision.
+ * Adds the footnotes field to the revisions display.
  *
  * @since 6.3.0
  *
@@ -197,7 +104,7 @@ function wp_add_footnotes_to_revision( $fields ) {
 add_filter( '_wp_post_revision_fields', 'wp_add_footnotes_to_revision' );
 
 /**
- * Gets the footnotes field from the revision.
+ * Gets the footnotes field from the revision for the revisions screen.
  *
  * @since 6.3.0
  *
@@ -211,76 +118,3 @@ function wp_get_footnotes_from_revision( $revision_field, $field, $revision ) {
 	return get_metadata( 'post', $revision->ID, $field, true );
 }
 add_filter( '_wp_post_revision_field_footnotes', 'wp_get_footnotes_from_revision', 10, 3 );
-
-/**
- * The REST API autosave endpoint doesn't save meta, so we can use the
- * `wp_creating_autosave` when it updates an exiting autosave, and
- * `_wp_put_post_revision` when it creates a new autosave.
- *
- * @since 6.3.0
- *
- * @param int|array $autosave The autosave ID or array.
- */
-function _wp_rest_api_autosave_meta( $autosave ) {
-	// Ensure it's a REST API request.
-	if ( ! defined( 'REST_REQUEST' ) || ! REST_REQUEST ) {
-		return;
-	}
-
-	$body = rest_get_server()->get_raw_data();
-	$body = json_decode( $body, true );
-
-	if ( ! isset( $body['meta']['footnotes'] ) ) {
-		return;
-	}
-
-	// `wp_creating_autosave` passes the array,
-	// `_wp_put_post_revision` passes the ID.
-	$id = is_int( $autosave ) ? $autosave : $autosave['ID'];
-
-	if ( ! $id ) {
-		return;
-	}
-
-	update_post_meta( $id, 'footnotes', wp_slash( $body['meta']['footnotes'] ) );
-}
-// See https://github.com/WordPress/wordpress-develop/blob/2103cb9966e57d452c94218bbc3171579b536a40/src/wp-includes/rest-api/endpoints/class-wp-rest-autosaves-controller.php#L391C1-L391C1.
-add_action( 'wp_creating_autosave', '_wp_rest_api_autosave_meta' );
-// See https://github.com/WordPress/wordpress-develop/blob/2103cb9966e57d452c94218bbc3171579b536a40/src/wp-includes/rest-api/endpoints/class-wp-rest-autosaves-controller.php#L398.
-// Then https://github.com/WordPress/wordpress-develop/blob/2103cb9966e57d452c94218bbc3171579b536a40/src/wp-includes/revision.php#L367.
-add_action( '_wp_put_post_revision', '_wp_rest_api_autosave_meta' );
-
-/**
- * This is a workaround for the autosave endpoint returning early if the
- * revision field are equal. The problem is that "footnotes" is not real
- * revision post field, so there's nothing to compare against.
- *
- * This trick sets the "footnotes" field (value doesn't matter), which will
- * cause the autosave endpoint to always update the latest revision. That should
- * be fine, it should be ok to update the revision even if nothing changed. Of
- * course, this is temporary fix.
- *
- * @since 6.3.0
- *
- * @param WP_Post         $prepared_post The prepared post object.
- * @param WP_REST_Request $request       The request object.
- *
- * See https://github.com/WordPress/wordpress-develop/blob/2103cb9966e57d452c94218bbc3171579b536a40/src/wp-includes/rest-api/endpoints/class-wp-rest-autosaves-controller.php#L365-L384.
- * See https://github.com/WordPress/wordpress-develop/blob/2103cb9966e57d452c94218bbc3171579b536a40/src/wp-includes/rest-api/endpoints/class-wp-rest-autosaves-controller.php#L219.
- */
-function _wp_rest_api_force_autosave_difference( $prepared_post, $request ) {
-	// We only want to be altering POST requests.
-	if ( $request->get_method() !== 'POST' ) {
-		return $prepared_post;
-	}
-
-	// Only alter requests for the '/autosaves' route.
-	if ( substr( $request->get_route(), -strlen( '/autosaves' ) ) !== '/autosaves' ) {
-		return $prepared_post;
-	}
-
-	$prepared_post->footnotes = '[]';
-	return $prepared_post;
-}
-
-add_filter( 'rest_pre_insert_post', '_wp_rest_api_force_autosave_difference', 10, 2 );
diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js
index 04839a47b880a..c207e0418aeaa 100644
--- a/packages/block-library/src/image/image.js
+++ b/packages/block-library/src/image/image.js
@@ -372,7 +372,7 @@ export default function Image( {
 	const lightboxSetting = useSetting( 'lightbox' );
 
 	const showLightboxToggle =
-		lightboxSetting === true || lightboxSetting?.allowEditing === true;
+		!! lightbox || lightboxSetting?.allowEditing === true;
 
 	const lightboxChecked =
 		lightbox?.enabled || ( ! lightbox && lightboxSetting?.enabled );
diff --git a/packages/block-library/src/image/index.php b/packages/block-library/src/image/index.php
index 5256ff2dfa0d5..54aa8fca6d5f4 100644
--- a/packages/block-library/src/image/index.php
+++ b/packages/block-library/src/image/index.php
@@ -64,7 +64,12 @@ function render_block_core_image( $attributes, $content, $block ) {
 	}
 
 	if ( $lightbox_enabled ) {
-		return block_core_image_render_lightbox( $processor->get_updated_html(), $block->parsed_block );
+		// This render needs to happen in a filter with priority 15 to ensure that it
+		// runs after the duotone filter and that duotone styles are applied to the image
+		// in the lightbox. We also need to ensure that the lightbox works with any plugins
+		// that might use filters as well. We can consider removing this in the future if the
+		// way the blocks are rendered changes, or if a new kind of filter is introduced.
+		add_filter( 'render_block_core/image', 'block_core_image_render_lightbox', 15, 2 );
 	}
 
 	return $processor->get_updated_html();
@@ -267,7 +272,9 @@ function block_core_image_render_lightbox( $block_content, $block ) {
             aria-modal="false"
             data-wp-effect="effects.core.image.initLightbox"
             data-wp-on--keydown="actions.core.image.handleKeydown"
-            data-wp-on--mousewheel="actions.core.image.hideLightbox"
+            data-wp-on--touchstart="actions.core.image.handleTouchStart"
+            data-wp-on--touchmove="actions.core.image.handleTouchMove"
+            data-wp-on--touchend="actions.core.image.handleTouchEnd"
             data-wp-on--click="actions.core.image.hideLightbox"
             >
                 <button type="button" aria-label="$close_button_label" style="fill: $close_button_color" class="close-button" data-wp-on--click="actions.core.image.hideLightbox">
diff --git a/packages/block-library/src/image/style.scss b/packages/block-library/src/image/style.scss
index c7eec224f6587..5c3552fd80c2e 100644
--- a/packages/block-library/src/image/style.scss
+++ b/packages/block-library/src/image/style.scss
@@ -186,8 +186,8 @@
 
 	.close-button {
 		position: absolute;
-		top: calc(env(safe-area-inset-top) + 12.5px);
-		right: calc(env(safe-area-inset-right) + 12.5px);
+		top: calc(env(safe-area-inset-top) + 20px);
+		right: calc(env(safe-area-inset-right) + 20px);
 		padding: 0;
 		cursor: pointer;
 		z-index: 5000000;
@@ -297,10 +297,6 @@
 	}
 }
 
-html.wp-has-lightbox-open {
-	overflow: hidden;
-}
-
 @keyframes turn-on-visibility {
 	0% {
 		opacity: 0;
diff --git a/packages/block-library/src/image/view.js b/packages/block-library/src/image/view.js
index 53a2d1f7d567f..13f20c9cd7cb6 100644
--- a/packages/block-library/src/image/view.js
+++ b/packages/block-library/src/image/view.js
@@ -17,6 +17,69 @@ const focusableSelectors = [
 	'[tabindex]:not([tabindex^="-"])',
 ];
 
+/*
+ * Stores a context-bound scroll handler.
+ *
+ * This callback could be defined inline inside of the store
+ * object but it's created externally to avoid confusion about
+ * how its logic is called. This logic is not referenced directly
+ * by the directives in the markup because the scroll event we
+ * need to listen to is triggered on the window; so by defining it
+ * outside of the store, we signal that the behavior here is different.
+ * If we find a compelling reason to move it to the store, feel free.
+ *
+ * @type {Function}
+ */
+let scrollCallback;
+
+/*
+ * Tracks whether user is touching screen; used to
+ * differentiate behavior for touch and mouse input.
+ *
+ * @type {boolean}
+ */
+let isTouching = false;
+
+/*
+ * Tracks the last time the screen was touched; used to
+ * differentiate behavior for touch and mouse input.
+ *
+ * @type {number}
+ */
+let lastTouchTime = 0;
+
+/*
+ * Lightbox page-scroll handler: prevents scrolling.
+ *
+ * This handler is added to prevent scrolling behaviors that
+ * trigger content shift while the lightbox is open.
+ *
+ * It would be better to accomplish this through CSS alone, but
+ * using overflow: hidden is currently the only way to do so, and
+ * that causes the layout to shift and prevents the zoom animation
+ * from working in some cases because we're unable to account for
+ * the layout shift when doing the animation calculations. Instead,
+ * here we use JavaScript to prevent and reset the scrolling
+ * behavior. In the future, we may be able to use CSS or overflow: hidden
+ * instead to not rely on JavaScript, but this seems to be the best approach
+ * for now that provides the best visual experience.
+ *
+ * @param {Object} context Interactivity page context?
+ */
+function handleScroll( context ) {
+	// We can't override the scroll behavior on mobile devices
+	// because doing so breaks the pinch to zoom functionality, and we
+	// want to allow users to zoom in further on the high-res image.
+	if ( ! isTouching && Date.now() - lastTouchTime > 450 ) {
+		// We are unable to use event.preventDefault() to prevent scrolling
+		// because the scroll event can't be canceled, so we reset the position instead.
+		window.scrollTo(
+			context.core.image.scrollLeftReset,
+			context.core.image.scrollTopReset
+		);
+	}
+}
+
 store(
 	{
 		state: {
@@ -43,54 +106,49 @@ store(
 
 						context.core.image.lightboxEnabled = true;
 						setStyles( context, event );
-						// Hide overflow only when the animation is in progress,
-						// otherwise the removal of the scrollbars will draw attention
-						// to itself and look like an error
-						document.documentElement.classList.add(
-							'wp-has-lightbox-open'
+
+						context.core.image.scrollTopReset =
+							window.pageYOffset ||
+							document.documentElement.scrollTop;
+
+						// In most cases, this value will be 0, but this is included
+						// in case a user has created a page with horizontal scrolling.
+						context.core.image.scrollLeftReset =
+							window.pageXOffset ||
+							document.documentElement.scrollLeft;
+
+						// We define and bind the scroll callback here so
+						// that we can pass the context and as an argument.
+						// We may be able to change this in the future if we
+						// define the scroll callback in the store instead, but
+						// this approach seems to tbe clearest for now.
+						scrollCallback = handleScroll.bind( null, context );
+
+						// We need to add a scroll event listener to the window
+						// here because we are unable to otherwise access it via
+						// the Interactivity API directives. If we add a native way
+						// to access the window, we can remove this.
+						window.addEventListener(
+							'scroll',
+							scrollCallback,
+							false
 						);
 					},
-					hideLightbox: async ( { context, event } ) => {
+					hideLightbox: async ( { context } ) => {
 						context.core.image.hideAnimationEnabled = true;
 						if ( context.core.image.lightboxEnabled ) {
-							// If scrolling, wait a moment before closing the lightbox.
-							if (
-								context.core.image.lightboxAnimation === 'fade'
-							) {
-								context.core.image.scrollDelta += event.deltaY;
-								if (
-									event.type === 'mousewheel' &&
-									Math.abs(
-										window.scrollY -
-											context.core.image.scrollDelta
-									) < 10
-								) {
-									return;
-								}
-							} else if (
-								context.core.image.lightboxAnimation === 'zoom'
-							) {
-								// Disable scroll until the zoom animation ends.
-								// Get the current page scroll position
-								const scrollTop =
-									window.pageYOffset ||
-									document.documentElement.scrollTop;
-								const scrollLeft =
-									window.pageXOffset ||
-									document.documentElement.scrollLeft;
-								// if any scroll is attempted, set this to the previous value.
-								window.onscroll = function () {
-									window.scrollTo( scrollLeft, scrollTop );
-								};
-								// Enable scrolling after the animation finishes
-								setTimeout( function () {
-									window.onscroll = function () {};
-								}, 400 );
-							}
-
-							document.documentElement.classList.remove(
-								'wp-has-lightbox-open'
-							);
+							// We want to wait until the close animation is completed
+							// before allowing a user to scroll again. The duration of this
+							// animation is defined in the styles.scss and depends on if the
+							// animation is 'zoom' or 'fade', but in any case we should wait
+							// a few milliseconds longer than the duration, otherwise a user
+							// may scroll too soon and cause the animation to look sloppy.
+							setTimeout( function () {
+								window.removeEventListener(
+									'scroll',
+									scrollCallback
+								);
+							}, 450 );
 
 							context.core.image.lightboxEnabled = false;
 							context.core.image.lastFocusedElement.focus( {
@@ -139,6 +197,27 @@ store(
 							ref,
 						} );
 					},
+					handleTouchStart: () => {
+						isTouching = true;
+					},
+					handleTouchMove: ( { context, event } ) => {
+						// On mobile devices, we want to prevent triggering the
+						// scroll event because otherwise the page jumps around as
+						// we reset the scroll position. This also means that closing
+						// the lightbox requires that a user perform a simple tap. This
+						// may be changed in the future if we find a better alternative
+						// to override or reset the scroll position during swipe actions.
+						if ( context.core.image.lightboxEnabled ) {
+							event.preventDefault();
+						}
+					},
+					handleTouchEnd: () => {
+						// We need to wait a few milliseconds before resetting
+						// to ensure that pinch to zoom works consistently
+						// on mobile devices when the lightbox is open.
+						lastTouchTime = Date.now();
+						isTouching = false;
+					},
 				},
 			},
 		},
@@ -266,6 +345,13 @@ store(
 	}
 );
 
+/*
+ * Computes styles for the lightbox and adds them to the document.
+ *
+ * @function
+ * @param {Object} context - An Interactivity API context
+ * @param {Object} event - A triggering event
+ */
 function setStyles( context, event ) {
 	// The reference img element lies adjacent
 	// to the event target button in the DOM.
@@ -434,6 +520,13 @@ function setStyles( context, event ) {
 	`;
 }
 
+/*
+ * Debounces a function call.
+ *
+ * @function
+ * @param {Function} func - A function to be called
+ * @param {number} wait - The time to wait before calling the function
+ */
 function debounce( func, wait = 50 ) {
 	let timeout;
 	return () => {
diff --git a/packages/block-library/src/navigation-link/style.scss b/packages/block-library/src/navigation-link/style.scss
index 19080c8d38482..2a45c3c545d30 100644
--- a/packages/block-library/src/navigation-link/style.scss
+++ b/packages/block-library/src/navigation-link/style.scss
@@ -5,7 +5,6 @@
 .wp-block-navigation {
 	// This wraps just the innermost text for custom menu items.
 	.wp-block-navigation-item__label {
-		word-break: normal;
 		overflow-wrap: break-word;
 	}
 
diff --git a/packages/block-library/src/paragraph/edit.js b/packages/block-library/src/paragraph/edit.js
index 09d0157e987fd..21f692bd25b26 100644
--- a/packages/block-library/src/paragraph/edit.js
+++ b/packages/block-library/src/paragraph/edit.js
@@ -155,7 +155,7 @@ function ParagraphBlock( {
 				onRemove={ onRemove }
 				aria-label={
 					content
-						? __( 'Paragraph block' )
+						? __( 'Block: Paragraph' )
 						: __(
 								'Empty block; start writing or type forward slash to choose a block'
 						  )
diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js
index ff957b575c7a4..616478d8013f7 100644
--- a/packages/block-library/src/search/edit.js
+++ b/packages/block-library/src/search/edit.js
@@ -84,7 +84,7 @@ export default function SearchEdit( {
 		style,
 	} = attributes;
 
-	const insertedInNavigationBlock = useSelect(
+	const wasJustInsertedIntoNavigationBlock = useSelect(
 		( select ) => {
 			const { getBlockParentsByBlockName, wasBlockJustInserted } =
 				select( blockEditorStore );
@@ -98,15 +98,21 @@ export default function SearchEdit( {
 	const { __unstableMarkNextChangeAsNotPersistent } =
 		useDispatch( blockEditorStore );
 
-	if ( insertedInNavigationBlock ) {
-		// This side-effect should not create an undo level.
-		__unstableMarkNextChangeAsNotPersistent();
-		setAttributes( {
-			showLabel: false,
-			buttonUseIcon: true,
-			buttonPosition: 'button-inside',
-		} );
-	}
+	useEffect( () => {
+		if ( wasJustInsertedIntoNavigationBlock ) {
+			// This side-effect should not create an undo level.
+			__unstableMarkNextChangeAsNotPersistent();
+			setAttributes( {
+				showLabel: false,
+				buttonUseIcon: true,
+				buttonPosition: 'button-inside',
+			} );
+		}
+	}, [
+		__unstableMarkNextChangeAsNotPersistent,
+		wasJustInsertedIntoNavigationBlock,
+		setAttributes,
+	] );
 
 	const borderRadius = style?.border?.radius;
 	const borderProps = useBorderProps( attributes );
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 9e8f98108ed75..70adcb535181d 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -6,6 +6,7 @@
 
 -   `Placeholder`: Improved DOM structure and screen reader announcements ([#45801](https://github.com/WordPress/gutenberg/pull/45801)).
 -   `DateTimePicker`: fix onChange callback check so that it also works inside iframes ([#54669](https://github.com/WordPress/gutenberg/pull/54669)).
+-   `Popover`: Apply the CSS in JS styles properly for components used within popovers. ([#54912](https://github.com/WordPress/gutenberg/pull/54912))
 
 ### Internal
 
diff --git a/packages/components/src/popover/index.tsx b/packages/components/src/popover/index.tsx
index bb51252b549c5..ffbb43433bc72 100644
--- a/packages/components/src/popover/index.tsx
+++ b/packages/components/src/popover/index.tsx
@@ -60,6 +60,7 @@ import type {
 	PopoverAnchorRefTopBottom,
 } from './types';
 import { overlayMiddlewares } from './overlay-middlewares';
+import { StyleProvider } from '../style-provider';
 
 /**
  * Name of slot in which popover should fill.
@@ -447,7 +448,10 @@ const UnforwardedPopover = (
 	if ( shouldRenderWithinSlot ) {
 		content = <Fill name={ slotName }>{ content }</Fill>;
 	} else if ( ! inline ) {
-		content = createPortal( content, getPopoverFallbackContainer() );
+		content = createPortal(
+			<StyleProvider document={ document }>{ content }</StyleProvider>,
+			getPopoverFallbackContainer()
+		);
 	}
 
 	if ( hasAnchor ) {
diff --git a/packages/core-commands/src/site-editor-navigation-commands.js b/packages/core-commands/src/site-editor-navigation-commands.js
index f60a8af7d39a0..45d2dc6c47ad7 100644
--- a/packages/core-commands/src/site-editor-navigation-commands.js
+++ b/packages/core-commands/src/site-editor-navigation-commands.js
@@ -24,7 +24,7 @@ import { useIsTemplatesAccessible, useIsBlockBasedTheme } from './hooks';
 import { unlock } from './lock-unlock';
 import { orderEntityRecordsBySearch } from './utils/order-entity-records-by-search';
 
-const { useHistory } = unlock( routerPrivateApis );
+const { useHistory, useLocation } = unlock( routerPrivateApis );
 
 const icons = {
 	post,
@@ -136,6 +136,14 @@ const getNavigationCommandLoaderPerPostType = ( postType ) =>
 const getNavigationCommandLoaderPerTemplate = ( templateType ) =>
 	function useNavigationCommandLoader( { search } ) {
 		const history = useHistory();
+		const location = useLocation();
+
+		const isPatternsPage =
+			location?.params?.path === '/patterns' ||
+			location?.params?.postType === 'wp_block';
+		const didAccessPatternsPage =
+			!! location?.params?.didAccessPatternsPage;
+
 		const isBlockBasedTheme = useIsBlockBasedTheme();
 		const { records, isLoading } = useSelect( ( select ) => {
 			const { getEntityRecords } = select( coreStore );
@@ -184,6 +192,11 @@ const getNavigationCommandLoaderPerTemplate = ( templateType ) =>
 						const args = {
 							postType: templateType,
 							postId: record.id,
+							didAccessPatternsPage:
+								! isBlockBasedTheme &&
+								( isPatternsPage || didAccessPatternsPage )
+									? 1
+									: undefined,
 							...extraArgs,
 						};
 						const targetUrl = addQueryArgs(
diff --git a/packages/e2e-test-utils-playwright/src/lighthouse/index.ts b/packages/e2e-test-utils-playwright/src/lighthouse/index.ts
index 274799db6c9c2..0ba2c8e67ba61 100644
--- a/packages/e2e-test-utils-playwright/src/lighthouse/index.ts
+++ b/packages/e2e-test-utils-playwright/src/lighthouse/index.ts
@@ -4,11 +4,16 @@
 import type { Page } from '@playwright/test';
 import * as lighthouse from 'lighthouse/core/index.cjs';
 
+type LighthouseConstructorProps = {
+	page: Page;
+	port: number;
+};
+
 export class Lighthouse {
-	constructor(
-		public readonly page: Page,
-		public readonly port: number
-	) {
+	page: Page;
+	port: number;
+
+	constructor( { page, port }: LighthouseConstructorProps ) {
 		this.page = page;
 		this.port = port;
 	}
diff --git a/packages/e2e-test-utils-playwright/src/metrics/index.ts b/packages/e2e-test-utils-playwright/src/metrics/index.ts
index d90a2f34fc510..68343f6d7c482 100644
--- a/packages/e2e-test-utils-playwright/src/metrics/index.ts
+++ b/packages/e2e-test-utils-playwright/src/metrics/index.ts
@@ -1,11 +1,46 @@
 /**
  * External dependencies
  */
-import type { Page } from '@playwright/test';
+import type { Page, Browser } from '@playwright/test';
+
+type EventType =
+	| 'click'
+	| 'focus'
+	| 'focusin'
+	| 'keydown'
+	| 'keypress'
+	| 'keyup'
+	| 'mouseout'
+	| 'mouseover';
+
+interface TraceEvent {
+	cat: string;
+	name: string;
+	dur?: number;
+	args: {
+		data?: {
+			type: EventType;
+		};
+	};
+}
+
+interface Trace {
+	traceEvents: TraceEvent[];
+}
+
+type MetricsConstructorProps = {
+	page: Page;
+};
 
 export class Metrics {
-	constructor( public readonly page: Page ) {
+	browser: Browser;
+	page: Page;
+	trace: Trace;
+
+	constructor( { page }: MetricsConstructorProps ) {
 		this.page = page;
+		this.browser = page.context().browser()!;
+		this.trace = { traceEvents: [] };
 	}
 
 	/**
@@ -38,10 +73,10 @@ export class Metrics {
 	 *
 	 * @see https://web.dev/ttfb/#measure-ttfb-in-javascript
 	 *
-	 * @return {Promise<number>} TTFB value.
+	 * @return TTFB value.
 	 */
 	async getTimeToFirstByte() {
-		return this.page.evaluate< number >( () => {
+		return await this.page.evaluate< number >( () => {
 			const { responseStart, startTime } = (
 				performance.getEntriesByType(
 					'navigation'
@@ -57,10 +92,10 @@ export class Metrics {
 	 * @see https://w3c.github.io/largest-contentful-paint/
 	 * @see https://web.dev/lcp/#measure-lcp-in-javascript
 	 *
-	 * @return {Promise<number>} LCP value.
+	 * @return LCP value.
 	 */
 	async getLargestContentfulPaint() {
-		return this.page.evaluate< number >(
+		return await this.page.evaluate< number >(
 			() =>
 				new Promise( ( resolve ) => {
 					new PerformanceObserver( ( entryList ) => {
@@ -83,10 +118,10 @@ export class Metrics {
 	 * @see https://github.com/WICG/layout-instability
 	 * @see https://web.dev/cls/#measure-layout-shifts-in-javascript
 	 *
-	 * @return {Promise<number>} CLS value.
+	 * @return CLS value.
 	 */
 	async getCumulativeLayoutShift() {
-		return this.page.evaluate< number >(
+		return await this.page.evaluate< number >(
 			() =>
 				new Promise( ( resolve ) => {
 					let CLS = 0;
@@ -108,4 +143,134 @@ export class Metrics {
 				} )
 		);
 	}
+
+	/**
+	 * Returns the loading durations using the Navigation Timing API. All the
+	 * durations exclude the server response time.
+	 *
+	 * @return Object with loading metrics durations.
+	 */
+	async getLoadingDurations() {
+		return await this.page.evaluate( () => {
+			const [
+				{
+					requestStart,
+					responseStart,
+					responseEnd,
+					domContentLoadedEventEnd,
+					loadEventEnd,
+				},
+			] = performance.getEntriesByType(
+				'navigation'
+			) as PerformanceNavigationTiming[];
+			const paintTimings = performance.getEntriesByType(
+				'paint'
+			) as PerformancePaintTiming[];
+
+			const firstPaintStartTime = paintTimings.find(
+				( { name } ) => name === 'first-paint'
+			)!.startTime;
+
+			const firstContentfulPaintStartTime = paintTimings.find(
+				( { name } ) => name === 'first-contentful-paint'
+			)!.startTime;
+
+			return {
+				// Server side metric.
+				serverResponse: responseStart - requestStart,
+				// For client side metrics, consider the end of the response (the
+				// browser receives the HTML) as the start time (0).
+				firstPaint: firstPaintStartTime - responseEnd,
+				domContentLoaded: domContentLoadedEventEnd - responseEnd,
+				loaded: loadEventEnd - responseEnd,
+				firstContentfulPaint:
+					firstContentfulPaintStartTime - responseEnd,
+				timeSinceResponseEnd: performance.now() - responseEnd,
+			};
+		} );
+	}
+
+	/**
+	 * Starts Chromium tracing with predefined options for performance testing.
+	 *
+	 * @param options Options to pass to `browser.startTracing()`.
+	 */
+	async startTracing( options = {} ) {
+		return await this.browser.startTracing( this.page, {
+			screenshots: false,
+			categories: [ 'devtools.timeline' ],
+			...options,
+		} );
+	}
+
+	/**
+	 * Stops Chromium tracing and saves the trace.
+	 */
+	async stopTracing() {
+		const traceBuffer = await this.browser.stopTracing();
+		const traceJSON = JSON.parse( traceBuffer.toString() );
+
+		this.trace = traceJSON;
+	}
+
+	/**
+	 * @return Durations of all traced `keydown`, `keypress`, and `keyup`
+	 * events.
+	 */
+	getTypingEventDurations() {
+		return [
+			this.getEventDurations( 'keydown' ),
+			this.getEventDurations( 'keypress' ),
+			this.getEventDurations( 'keyup' ),
+		];
+	}
+
+	/**
+	 * @return Durations of all traced `focus` and `focusin` events.
+	 */
+	getSelectionEventDurations() {
+		return [
+			this.getEventDurations( 'focus' ),
+			this.getEventDurations( 'focusin' ),
+		];
+	}
+
+	/**
+	 * @return Durations of all traced `click` events.
+	 */
+	getClickEventDurations() {
+		return [ this.getEventDurations( 'click' ) ];
+	}
+
+	/**
+	 * @return Durations of all traced `mouseover` and `mouseout` events.
+	 */
+	getHoverEventDurations() {
+		return [
+			this.getEventDurations( 'mouseover' ),
+			this.getEventDurations( 'mouseout' ),
+		];
+	}
+
+	/**
+	 * @param eventType Type of event to filter.
+	 * @return Durations of all events of a given type.
+	 */
+	getEventDurations( eventType: EventType ) {
+		if ( this.trace.traceEvents.length === 0 ) {
+			throw new Error(
+				'No trace events found. Did you forget to call stopTracing()?'
+			);
+		}
+
+		return this.trace.traceEvents
+			.filter(
+				( item: TraceEvent ): boolean =>
+					item.cat === 'devtools.timeline' &&
+					item.name === 'EventDispatch' &&
+					item?.args?.data?.type === eventType &&
+					!! item.dur
+			)
+			.map( ( item ) => ( item.dur ? item.dur / 1000 : 0 ) );
+	}
 }
diff --git a/packages/e2e-test-utils-playwright/src/test.ts b/packages/e2e-test-utils-playwright/src/test.ts
index c428df46c56f1..778f71b6d770e 100644
--- a/packages/e2e-test-utils-playwright/src/test.ts
+++ b/packages/e2e-test-utils-playwright/src/test.ts
@@ -176,10 +176,10 @@ const test = base.extend<
 		{ scope: 'worker' },
 	],
 	lighthouse: async ( { page, lighthousePort }, use ) => {
-		await use( new Lighthouse( page, lighthousePort ) );
+		await use( new Lighthouse( { page, port: lighthousePort } ) );
 	},
 	metrics: async ( { page }, use ) => {
-		await use( new Metrics( page ) );
+		await use( new Metrics( { page } ) );
 	},
 } );
 
diff --git a/packages/e2e-tests/specs/editor/various/inserting-blocks.test.js b/packages/e2e-tests/specs/editor/various/inserting-blocks.test.js
index bed9002e303a2..4285a410f891e 100644
--- a/packages/e2e-tests/specs/editor/various/inserting-blocks.test.js
+++ b/packages/e2e-tests/specs/editor/various/inserting-blocks.test.js
@@ -249,7 +249,7 @@ describe( 'Inserting blocks', () => {
 		await page.keyboard.type( 'First paragraph' );
 		await insertBlock( 'Image' );
 		const paragraphBlock = await canvas().$(
-			'p[aria-label="Paragraph block"]'
+			'p[aria-label="Block: Paragraph"]'
 		);
 		paragraphBlock.click();
 		await page.evaluate( () => new Promise( window.requestIdleCallback ) );
diff --git a/packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js b/packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js
index b3dccdf8bf20a..55fc8473c22fd 100644
--- a/packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js
+++ b/packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js
@@ -35,7 +35,7 @@ const tabThroughParagraphBlock = async ( paragraphText ) => {
 	await tabThroughBlockToolbar();
 
 	await page.keyboard.press( 'Tab' );
-	await expect( await getActiveLabel() ).toBe( 'Paragraph block' );
+	await expect( await getActiveLabel() ).toBe( 'Block: Paragraph' );
 	await expect(
 		await page.evaluate( () => {
 			const { activeElement } =
@@ -49,7 +49,7 @@ const tabThroughParagraphBlock = async ( paragraphText ) => {
 
 	// Need to shift+tab here to end back in the block. If not, we'll be in the next region and it will only require 4 region jumps instead of 5.
 	await pressKeyWithModifier( 'shift', 'Tab' );
-	await expect( await getActiveLabel() ).toBe( 'Paragraph block' );
+	await expect( await getActiveLabel() ).toBe( 'Block: Paragraph' );
 };
 
 const tabThroughBlockToolbar = async () => {
diff --git a/packages/e2e-tests/specs/editor/various/pattern-blocks.test.js b/packages/e2e-tests/specs/editor/various/pattern-blocks.test.js
index e0b3df5ef70a8..442ed2b21915a 100644
--- a/packages/e2e-tests/specs/editor/various/pattern-blocks.test.js
+++ b/packages/e2e-tests/specs/editor/various/pattern-blocks.test.js
@@ -136,7 +136,7 @@ describe( 'Pattern blocks', () => {
 		);
 
 		// Make sure the reusable block has loaded properly before attempting to publish the post.
-		await canvas().waitForSelector( 'p[aria-label="Paragraph block"]' );
+		await canvas().waitForSelector( 'p[aria-label="Block: Paragraph"]' );
 
 		await publishPost();
 
@@ -146,8 +146,8 @@ describe( 'Pattern blocks', () => {
 		await page.waitForSelector( closePublishPanelSelector );
 		await page.click( closePublishPanelSelector );
 
-		await canvas().waitForSelector( 'p[aria-label="Paragraph block"]' );
-		await canvas().focus( 'p[aria-label="Paragraph block"]' );
+		await canvas().waitForSelector( 'p[aria-label="Block: Paragraph"]' );
+		await canvas().focus( 'p[aria-label="Block: Paragraph"]' );
 
 		// Change the block's content.
 		await page.keyboard.type( 'Einen ' );
@@ -157,7 +157,7 @@ describe( 'Pattern blocks', () => {
 
 		// Check that its content is up to date.
 		const paragraphContent = await canvas().$eval(
-			'p[aria-label="Paragraph block"]',
+			'p[aria-label="Block: Paragraph"]',
 			( element ) => element.innerText
 		);
 		expect( paragraphContent ).toMatch( 'Einen Guten Berg!' );
@@ -341,11 +341,11 @@ describe( 'Pattern blocks', () => {
 
 		// Make an edit to the reusable block and assert that there's only a
 		// paragraph in a reusable block.
-		await canvas().waitForSelector( 'p[aria-label="Paragraph block"]' );
-		await canvas().click( 'p[aria-label="Paragraph block"]' );
+		await canvas().waitForSelector( 'p[aria-label="Block: Paragraph"]' );
+		await canvas().click( 'p[aria-label="Block: Paragraph"]' );
 		await page.keyboard.type( '2' );
 		const selector =
-			'//div[@aria-label="Block: Pattern"]//p[@aria-label="Paragraph block"][.="12"]';
+			'//div[@aria-label="Block: Pattern"]//p[@aria-label="Block: Paragraph"][.="12"]';
 		const reusableBlockWithParagraph = await page.$x( selector );
 		expect( reusableBlockWithParagraph ).toBeTruthy();
 
diff --git a/packages/e2e-tests/specs/widgets/editing-widgets.test.js b/packages/e2e-tests/specs/widgets/editing-widgets.test.js
index 9292867159e61..e944e90a92fae 100644
--- a/packages/e2e-tests/specs/widgets/editing-widgets.test.js
+++ b/packages/e2e-tests/specs/widgets/editing-widgets.test.js
@@ -738,7 +738,7 @@ describe( 'Widgets screen', () => {
 		await find(
 			{
 				role: 'document',
-				name: 'Paragraph block',
+				name: 'Block: Paragraph',
 				value: 'First Paragraph',
 			},
 			{
@@ -759,7 +759,7 @@ describe( 'Widgets screen', () => {
 		await find(
 			{
 				role: 'document',
-				name: 'Paragraph block',
+				name: 'Block: Paragraph',
 				value: 'First Paragraph',
 			},
 			{
@@ -875,7 +875,7 @@ describe( 'Widgets screen', () => {
 		await page.keyboard.type( 'First Paragraph' );
 		const updatedParagraphBlockInFirstWidgetArea = await find(
 			{
-				name: 'Paragraph block',
+				name: 'Block: Paragraph',
 				value: 'First Paragraph',
 			},
 			{
diff --git a/packages/edit-site/src/components/add-new-pattern/index.js b/packages/edit-site/src/components/add-new-pattern/index.js
index 4a88e340f05fc..1ee32615435b4 100644
--- a/packages/edit-site/src/components/add-new-pattern/index.js
+++ b/packages/edit-site/src/components/add-new-pattern/index.js
@@ -11,6 +11,7 @@ import {
 	privateApis as editPatternsPrivateApis,
 	store as patternsStore,
 } from '@wordpress/patterns';
+import { store as coreStore } from '@wordpress/core-data';
 import { store as noticesStore } from '@wordpress/notices';
 
 /**
@@ -19,7 +20,6 @@ import { store as noticesStore } from '@wordpress/notices';
 import CreateTemplatePartModal from '../create-template-part-modal';
 import SidebarButton from '../sidebar-button';
 import { unlock } from '../../lock-unlock';
-import { store as editSiteStore } from '../../store';
 import {
 	PATTERN_TYPES,
 	PATTERN_DEFAULT_CATEGORY,
@@ -36,9 +36,8 @@ export default function AddNewPattern() {
 	const [ showPatternModal, setShowPatternModal ] = useState( false );
 	const [ showTemplatePartModal, setShowTemplatePartModal ] =
 		useState( false );
-	const isTemplatePartsMode = useSelect( ( select ) => {
-		const settings = select( editSiteStore ).getSettings();
-		return !! settings.supportsTemplatePartsMode;
+	const isBlockBasedTheme = useSelect( ( select ) => {
+		return select( coreStore ).getCurrentTheme()?.is_block_theme;
 	}, [] );
 	const { createPatternFromFile } = unlock( useDispatch( patternsStore ) );
 	const { createSuccessNotice, createErrorNotice } =
@@ -52,7 +51,7 @@ export default function AddNewPattern() {
 		history.push( {
 			postId: pattern.id,
 			postType: PATTERN_TYPES.user,
-			categoryType: PATTERN_TYPES.user,
+			categoryType: PATTERN_TYPES.theme,
 			categoryId,
 			canvas: 'edit',
 		} );
@@ -82,9 +81,7 @@ export default function AddNewPattern() {
 		},
 	];
 
-	// Remove condition when command palette issues are resolved.
-	// See: https://github.com/WordPress/gutenberg/issues/52154.
-	if ( ! isTemplatePartsMode ) {
+	if ( isBlockBasedTheme ) {
 		controls.push( {
 			icon: symbolFilled,
 			onClick: () => setShowTemplatePartModal( true ),
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/collection-font-details.js b/packages/edit-site/src/components/global-styles/font-library-modal/collection-font-details.js
index 4da9cf0713b19..de0c1cfa16ec6 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/collection-font-details.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/collection-font-details.js
@@ -42,7 +42,7 @@ function CollectionFontDetails( {
 						handleToggleVariant={ handleToggleVariant }
 						selected={ isFontFontFaceInOutline(
 							font.slug,
-							face,
+							font.fontFace ? face : null, // If the font has no fontFace, we want to check if the font is in the outline
 							fontToInstallOutline
 						) }
 					/>
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/context.js b/packages/edit-site/src/components/global-styles/font-library-modal/context.js
index eb5d56e8b4c9b..8ab067495fcc0 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/context.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/context.js
@@ -9,8 +9,6 @@ import {
 	useEntityRecords,
 	store as coreStore,
 } from '@wordpress/core-data';
-import { store as noticesStore } from '@wordpress/notices';
-import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -51,8 +49,6 @@ function FontLibraryProvider( { children } ) {
 	const fontFamiliesHasChanges =
 		!! globalStyles?.edits?.settings?.typography?.fontFamilies;
 
-	const { createErrorNotice } = useDispatch( noticesStore );
-
 	const [ isInstalling, setIsInstalling ] = useState( false );
 	const [ refreshKey, setRefreshKey ] = useState( 0 );
 
@@ -202,7 +198,8 @@ function FontLibraryProvider( { children } ) {
 			// Prepare formData to install.
 			const formData = makeFormDataFromFontFamilies( fonts );
 			// Install the fonts (upload the font files to the server and create the post in the database).
-			const fontsInstalled = await fetchInstallFonts( formData );
+			const response = await fetchInstallFonts( formData );
+			const fontsInstalled = response?.successes || [];
 			// Get intersecting font faces between the fonts we tried to installed and the fonts that were installed
 			// (to avoid activating a non installed font).
 			const fontToBeActivated = getIntersectingFontFaces(
@@ -217,41 +214,40 @@ function FontLibraryProvider( { children } ) {
 			] );
 			refreshLibrary();
 			setIsInstalling( false );
-			return true;
-		} catch ( e ) {
-			// eslint-disable-next-line no-console
-			console.error( e );
-			createErrorNotice( __( 'Error installing fonts.' ), {
-				type: 'snackbar',
-			} );
+
+			return response;
+		} catch ( error ) {
 			setIsInstalling( false );
-			return false;
+			return {
+				errors: [ error ],
+			};
 		}
 	}
 
 	async function uninstallFont( font ) {
 		try {
 			// Uninstall the font (remove the font files from the server and the post from the database).
-			await fetchUninstallFonts( [ font ] );
+			const response = await fetchUninstallFonts( [ font ] );
 			// Deactivate the font family (remove the font family from the global styles).
-			deactivateFontFamily( font );
-			// Save the global styles to the database.
-			await saveSpecifiedEntityEdits(
-				'root',
-				'globalStyles',
-				globalStylesId,
-				[ 'settings.typography.fontFamilies' ]
-			);
+			if ( ! response.errors ) {
+				deactivateFontFamily( font );
+				// Save the global styles to the database.
+				await saveSpecifiedEntityEdits(
+					'root',
+					'globalStyles',
+					globalStylesId,
+					[ 'settings.typography.fontFamilies' ]
+				);
+			}
 			// Refresh the library (the the library font families from database).
 			refreshLibrary();
-			return true;
-		} catch ( e ) {
+			return response;
+		} catch ( error ) {
 			// eslint-disable-next-line no-console
-			console.error( e );
-			createErrorNotice( __( 'Error uninstalling fonts.' ), {
-				type: 'snackbar',
-			} );
-			return false;
+			console.error( error );
+			return {
+				errors: [ error ],
+			};
 		}
 	}
 
@@ -281,14 +277,16 @@ function FontLibraryProvider( { children } ) {
 		} );
 		// Add custom fonts to the browser.
 		fontsToAdd.forEach( ( font ) => {
-			font.fontFace.forEach( ( face ) => {
-				// Load font faces just in the iframe because they already are in the document.
-				loadFontFaceInBrowser(
-					face,
-					getDisplaySrcFromFontFace( face.src ),
-					'iframe'
-				);
-			} );
+			if ( font.fontFace ) {
+				font.fontFace.forEach( ( face ) => {
+					// Load font faces just in the iframe because they already are in the document.
+					loadFontFaceInBrowser(
+						face,
+						getDisplaySrcFromFontFace( face.src ),
+						'iframe'
+					);
+				} );
+			}
 		} );
 	};
 
@@ -311,7 +309,7 @@ function FontLibraryProvider( { children } ) {
 		// Get the src of the font.
 		const src = getDisplaySrcFromFontFace( fontFace.src, themeUrl );
 		// If the font is already loaded, don't load it again.
-		if ( loadedFontUrls.has( src ) ) return;
+		if ( ! src || loadedFontUrls.has( src ) ) return;
 		// Load the font in the browser.
 		loadFontFaceInBrowser( fontFace, src, 'document' );
 		// Add the font to the loaded fonts list.
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js b/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
index 56d1a03e63b32..a3b697efcfb8b 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
@@ -12,6 +12,7 @@ import {
 	FlexItem,
 	Flex,
 	Button,
+	Notice,
 } from '@wordpress/components';
 import { debounce } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
@@ -29,6 +30,7 @@ import CollectionFontDetails from './collection-font-details';
 import { toggleFont } from './utils/toggleFont';
 import { getFontsOutline } from './utils/fonts-outline';
 import GoogleFontsConfirmDialog from './google-fonts-confirm-dialog';
+import { getNoticeFromInstallResponse } from './utils/get-notice-from-response';
 
 const DEFAULT_CATEGORY = {
 	id: 'all',
@@ -45,13 +47,15 @@ function FontCollection( { id } ) {
 		);
 	};
 
+	const [ notice, setNotice ] = useState( null );
 	const [ selectedFont, setSelectedFont ] = useState( null );
 	const [ fontsToInstall, setFontsToInstall ] = useState( [] );
 	const [ filters, setFilters ] = useState( {} );
 	const [ renderConfirmDialog, setRenderConfirmDialog ] = useState(
 		requiresPermission && ! getGoogleFontsPermissionFromStorage()
 	);
-	const { collections, getFontCollection } = useContext( FontLibraryContext );
+	const { collections, getFontCollection, installFonts } =
+		useContext( FontLibraryContext );
 	const selectedCollection = collections.find(
 		( collection ) => collection.id === id
 	);
@@ -76,6 +80,16 @@ function FontCollection( { id } ) {
 		setSelectedFont( null );
 	}, [ id ] );
 
+	// Reset notice after 5 seconds
+	useEffect( () => {
+		if ( notice ) {
+			const timeout = setTimeout( () => {
+				setNotice( null );
+			}, 5000 );
+			return () => clearTimeout( timeout );
+		}
+	}, [ notice ] );
+
 	const collectionFonts = useMemo(
 		() => selectedCollection?.data?.fontFamilies ?? [],
 		[ selectedCollection ]
@@ -122,6 +136,13 @@ function FontCollection( { id } ) {
 		setFontsToInstall( [] );
 	};
 
+	const handleInstall = async () => {
+		const response = await installFonts( fontsToInstall );
+		const installNotice = getNoticeFromInstallResponse( response );
+		setNotice( installNotice );
+		resetFontsToInstall();
+	};
+
 	return (
 		<TabLayout
 			title={
@@ -135,10 +156,7 @@ function FontCollection( { id } ) {
 			handleBack={ !! selectedFont && handleUnselectFont }
 			footer={
 				fontsToInstall.length > 0 && (
-					<Footer
-						fontsToInstall={ fontsToInstall }
-						resetFontsToInstall={ resetFontsToInstall }
-					/>
+					<Footer handleInstall={ handleInstall } />
 				)
 			}
 		>
@@ -153,6 +171,22 @@ function FontCollection( { id } ) {
 				<Spinner />
 			) }
 
+			{ notice && (
+				<>
+					<FlexItem>
+						<Spacer margin={ 2 } />
+						<Notice
+							isDismissible={ false }
+							status={ notice.type }
+							className="font-library-modal__font-collection__notice"
+						>
+							{ notice.message }
+						</Notice>
+					</FlexItem>
+					<Spacer margin={ 2 } />
+				</>
+			) }
+
 			{ ! renderConfirmDialog && ! selectedFont && (
 				<Flex>
 					<FlexItem>
@@ -232,13 +266,8 @@ function FontCollection( { id } ) {
 	);
 }
 
-function Footer( { fontsToInstall, resetFontsToInstall } ) {
-	const { installFonts, isInstalling } = useContext( FontLibraryContext );
-
-	const handleInstall = async () => {
-		await installFonts( fontsToInstall );
-		resetFontsToInstall();
-	};
+function Footer( { handleInstall } ) {
+	const { isInstalling } = useContext( FontLibraryContext );
 
 	return (
 		<Flex justify="flex-end">
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/index.js b/packages/edit-site/src/components/global-styles/font-library-modal/index.js
index 60d3161985ac5..1128ca0811977 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/index.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/index.js
@@ -10,13 +10,21 @@ import { useContext } from '@wordpress/element';
  */
 import InstalledFonts from './installed-fonts';
 import FontCollection from './font-collection';
+import UploadFonts from './upload-fonts';
 import { FontLibraryContext } from './context';
 
-const INSTALLED_FONTS_TAB = {
-	name: 'installed-fonts',
-	title: __( 'Library' ),
-	className: 'installed-fonts',
-};
+const DEFAULT_TABS = [
+	{
+		name: 'installed-fonts',
+		title: __( 'Library' ),
+		className: 'installed-fonts',
+	},
+	{
+		name: 'upload-fonts',
+		title: __( 'Upload' ),
+		className: 'upload-fonts',
+	},
+];
 
 const tabsFromCollections = ( collections ) =>
 	collections.map( ( { id, name } ) => ( {
@@ -35,7 +43,7 @@ function FontLibraryModal( {
 	const { collections } = useContext( FontLibraryContext );
 
 	const tabs = [
-		INSTALLED_FONTS_TAB,
+		...DEFAULT_TABS,
 		...tabsFromCollections( collections || [] ),
 	];
 
@@ -53,6 +61,8 @@ function FontLibraryModal( {
 			>
 				{ ( tab ) => {
 					switch ( tab.name ) {
+						case 'upload-fonts':
+							return <UploadFonts />;
 						case 'installed-fonts':
 							return <InstalledFonts />;
 						default:
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js b/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js
index 59303aef453dc..2a8d1e591e084 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js
@@ -9,6 +9,8 @@ import {
 	__experimentalSpacer as Spacer,
 	Button,
 	Spinner,
+	Notice,
+	FlexItem,
 } from '@wordpress/components';
 
 /**
@@ -19,8 +21,8 @@ import { FontLibraryContext } from './context';
 import FontsGrid from './fonts-grid';
 import LibraryFontDetails from './library-font-details';
 import LibraryFontCard from './library-font-card';
-import LocalFonts from './local-fonts';
 import ConfirmDeleteDialog from './confirm-delete-dialog';
+import { getNoticeFromUninstallResponse } from './utils/get-notice-from-response';
 import { unlock } from '../../../lock-unlock';
 const { ProgressBar } = unlock( componentsPrivateApis );
 
@@ -44,10 +46,14 @@ function InstalledFonts() {
 		handleSetLibraryFontSelected( font );
 	};
 
+	const [ notice, setNotice ] = useState( null );
+
 	const handleConfirmUninstall = async () => {
-		const result = await uninstallFont( libraryFontSelected );
+		const response = await uninstallFont( libraryFontSelected );
+		const uninstallNotice = getNoticeFromUninstallResponse( response );
+		setNotice( uninstallNotice );
 		// If the font was succesfully uninstalled it is unselected
-		if ( result ) {
+		if ( ! response?.errors?.length ) {
 			handleUnselectFont();
 		}
 		setIsConfirmDeleteOpen( false );
@@ -72,8 +78,19 @@ function InstalledFonts() {
 
 	useEffect( () => {
 		refreshLibrary();
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [] );
 
+	// Reset notice after 5 seconds
+	useEffect( () => {
+		if ( notice ) {
+			const timeout = setTimeout( () => {
+				setNotice( null );
+			}, 5000 );
+			return () => clearTimeout( timeout );
+		}
+	}, [ notice ] );
+
 	return (
 		<TabLayout
 			title={ libraryFontSelected?.name || '' }
@@ -93,6 +110,22 @@ function InstalledFonts() {
 				handleCancelUninstall={ handleCancelUninstall }
 			/>
 
+			{ notice && (
+				<>
+					<FlexItem>
+						<Spacer margin={ 2 } />
+						<Notice
+							isDismissible={ false }
+							status={ notice.type }
+							className="font-library-modal__font-collection__notice"
+						>
+							{ notice.message }
+						</Notice>
+					</FlexItem>
+					<Spacer margin={ 4 } />
+				</>
+			) }
+
 			{ ! libraryFontSelected && (
 				<>
 					{ isResolvingLibrary && <Spinner /> }
@@ -129,9 +162,6 @@ function InstalledFonts() {
 							</FontsGrid>
 						</>
 					) }
-
-					<Spacer margin={ 8 } />
-					<LocalFonts />
 				</>
 			) }
 
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/local-fonts.js b/packages/edit-site/src/components/global-styles/font-library-modal/local-fonts.js
index 7d5f7a2f79b16..9612f8be52f5e 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/local-fonts.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/local-fonts.js
@@ -1,15 +1,18 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import {
 	Button,
 	DropZone,
 	__experimentalSpacer as Spacer,
 	__experimentalText as Text,
+	__experimentalVStack as VStack,
 	FormFileUpload,
+	Notice,
+	FlexItem,
 } from '@wordpress/components';
-import { useContext } from '@wordpress/element';
+import { useContext, useState, useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -19,9 +22,16 @@ import { FontLibraryContext } from './context';
 import { Font } from '../../../../lib/lib-font.browser';
 import makeFamiliesFromFaces from './utils/make-families-from-faces';
 import { loadFontFaceInBrowser } from './utils';
+import { getNoticeFromInstallResponse } from './utils/get-notice-from-response';
 
 function LocalFonts() {
 	const { installFonts } = useContext( FontLibraryContext );
+	const [ notice, setNotice ] = useState( null );
+	const supportedFormats =
+		ALLOWED_FILE_EXTENSIONS.slice( 0, -1 )
+			.map( ( extension ) => `.${ extension }` )
+			.join( ', ' ) +
+		` ${ __( 'and' ) } .${ ALLOWED_FILE_EXTENSIONS.slice( -1 ) }`;
 
 	const handleDropZone = ( files ) => {
 		handleFilesUpload( files );
@@ -30,6 +40,16 @@ function LocalFonts() {
 		handleFilesUpload( event.target.files );
 	};
 
+	// Reset notice after 5 seconds
+	useEffect( () => {
+		if ( notice ) {
+			const timeout = setTimeout( () => {
+				setNotice( null );
+			}, 5000 );
+			return () => clearTimeout( timeout );
+		}
+	}, [ notice ] );
+
 	/**
 	 * Filters the selected files to only allow the ones with the allowed extensions
 	 *
@@ -37,6 +57,7 @@ function LocalFonts() {
 	 * @return {void}
 	 */
 	const handleFilesUpload = ( files ) => {
+		setNotice( null );
 		const uniqueFilenames = new Set();
 		const selectedFiles = [ ...files ];
 		const allowedFiles = selectedFiles.filter( ( file ) => {
@@ -126,33 +147,54 @@ function LocalFonts() {
 	 */
 	const handleInstall = async ( fontFaces ) => {
 		const fontFamilies = makeFamiliesFromFaces( fontFaces );
-		await installFonts( fontFamilies );
+		const response = await installFonts( fontFamilies );
+		const installNotice = getNoticeFromInstallResponse( response );
+		setNotice( installNotice );
 	};
 
 	return (
 		<>
-			<Text className="font-library-modal__subtitle">
-				{ __( 'Upload Fonts' ) }
-			</Text>
-			<Spacer margin={ 2 } />
+			<Spacer margin={ 16 } />
 			<DropZone onFilesDrop={ handleDropZone } />
-			<FormFileUpload
-				accept={ ALLOWED_FILE_EXTENSIONS.map(
-					( ext ) => `.${ ext }`
-				).join( ',' ) }
-				multiple={ true }
-				onChange={ onFilesUpload }
-				render={ ( { openFileDialog } ) => (
-					<Button
-						className="font-library-modal__upload-area"
-						onClick={ openFileDialog }
-					>
-						<span>
-							{ __( 'Drag and drop your font files here.' ) }
-						</span>
-					</Button>
+			<VStack className="font-library-modal__local-fonts">
+				<FormFileUpload
+					accept={ ALLOWED_FILE_EXTENSIONS.map(
+						( ext ) => `.${ ext }`
+					).join( ',' ) }
+					multiple={ true }
+					onChange={ onFilesUpload }
+					render={ ( { openFileDialog } ) => (
+						<Button
+							className="font-library-modal__upload-area"
+							onClick={ openFileDialog }
+						>
+							<span>{ __( 'Upload font' ) }</span>
+						</Button>
+					) }
+				/>
+				{ notice && (
+					<FlexItem>
+						<Spacer margin={ 2 } />
+						<Notice
+							isDismissible={ false }
+							status={ notice.type }
+							className="font-library-modal__upload-area__notice"
+						>
+							{ notice.message }
+						</Notice>
+					</FlexItem>
 				) }
-			/>
+				<Spacer margin={ 2 } />
+				<Text className="font-library-modal__upload-area__text">
+					{ sprintf(
+						/* translators: %s: supported font formats: ex: .ttf, .woff and .woff2 */
+						__(
+							'Uploaded fonts appear in your library and can be used in your theme. Supported formats: %s.'
+						),
+						supportedFormats
+					) }
+				</Text>
+			</VStack>
 		</>
 	);
 }
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/style.scss b/packages/edit-site/src/components/global-styles/font-library-modal/style.scss
index 663aef94ab7e6..86cac4244dea9 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/style.scss
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/style.scss
@@ -92,11 +92,24 @@
 	align-items: center;
 	display: flex;
 	justify-content: center;
-	height: 100px;
+	height: 250px;
 	width: 100%;
 	background-color: #f0f0f0;
 }
 
+.font-library-modal__local-fonts {
+	margin: 0 auto;
+	width: 80%;
+
+	.font-library-modal__upload-area__text {
+		color: #6e6e6e;
+	}
+
+	.font-library-modal__upload-area__notice {
+		margin: 0;
+	}
+}
+
 .font-library-modal__font-name {
 	font-weight: bold;
 }
@@ -137,3 +150,7 @@
 		max-width: 350px;
 	}
 }
+
+.font-library-modal__font-collection__notice {
+	margin: 0;
+}
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/upload-fonts.js b/packages/edit-site/src/components/global-styles/font-library-modal/upload-fonts.js
new file mode 100644
index 0000000000000..effc4a2a5227c
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/upload-fonts.js
@@ -0,0 +1,20 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalSpacer as Spacer } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import LocalFonts from './local-fonts';
+
+function UploadFonts() {
+	return (
+		<>
+			<Spacer margin={ 8 } />
+			<LocalFonts />
+		</>
+	);
+}
+
+export default UploadFonts;
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/utils/fonts-outline.js b/packages/edit-site/src/components/global-styles/font-library-modal/utils/fonts-outline.js
index 0414681a432ad..bef9353e94350 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/utils/fonts-outline.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/utils/fonts-outline.js
@@ -15,7 +15,8 @@ export function getFontsOutline( fonts ) {
 }
 
 export function isFontFontFaceInOutline( slug, face, outline ) {
-	return (
-		outline[ slug ]?.[ `${ face.fontStyle }-${ face.fontWeight }` ] || false
-	);
+	if ( ! face ) {
+		return !! outline[ slug ];
+	}
+	return !! outline[ slug ]?.[ `${ face.fontStyle }-${ face.fontWeight }` ];
 }
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/utils/get-notice-from-response.js b/packages/edit-site/src/components/global-styles/font-library-modal/utils/get-notice-from-response.js
new file mode 100644
index 0000000000000..b22bd0afe2324
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/utils/get-notice-from-response.js
@@ -0,0 +1,62 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+export function getNoticeFromInstallResponse( response ) {
+	const { errors = [], successes = [] } = response;
+	// Everything failed.
+	if ( errors.length && ! successes.length ) {
+		return {
+			type: 'error',
+			message: __( 'Error installing the fonts.' ),
+		};
+	}
+
+	// Eveerything succeeded.
+	if ( ! errors.length && successes.length ) {
+		return {
+			type: 'success',
+			message: __( 'Fonts were installed successfully.' ),
+		};
+	}
+
+	// Some succeeded, some failed.
+	if ( errors.length && successes.length ) {
+		return {
+			type: 'warning',
+			message: __(
+				'Some fonts were installed successfully and some failed.'
+			),
+		};
+	}
+}
+
+export function getNoticeFromUninstallResponse( response ) {
+	const { errors = [], successes = [] } = response;
+	// Everything failed.
+	if ( errors.length && ! successes.length ) {
+		return {
+			type: 'error',
+			message: __( 'Error uninstalling the fonts.' ),
+		};
+	}
+
+	// Everything succeeded.
+	if ( ! errors.length && successes.length ) {
+		return {
+			type: 'success',
+			message: __( 'Fonts were uninstalled successfully.' ),
+		};
+	}
+
+	// Some succeeded, some failed.
+	if ( errors.length && successes.length ) {
+		return {
+			type: 'warning',
+			message: __(
+				'Some fonts were uninstalled successfully and some failed.'
+			),
+		};
+	}
+}
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/utils/index.js b/packages/edit-site/src/components/global-styles/font-library-modal/utils/index.js
index 49e7e7e4684ee..7afa0f7aee17a 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/utils/index.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/utils/index.js
@@ -109,6 +109,10 @@ export async function loadFontFaceInBrowser( fontFace, source, addTo = 'all' ) {
 }
 
 export function getDisplaySrcFromFontFace( input, urlPrefix ) {
+	if ( ! input ) {
+		return;
+	}
+
 	let src;
 	if ( Array.isArray( input ) ) {
 		src = input[ 0 ];
diff --git a/packages/edit-site/src/components/page-patterns/grid.js b/packages/edit-site/src/components/page-patterns/grid.js
index 32fa6ebe55b39..59a8cc431567f 100644
--- a/packages/edit-site/src/components/page-patterns/grid.js
+++ b/packages/edit-site/src/components/page-patterns/grid.js
@@ -9,7 +9,7 @@ export default function Grid( { categoryId, items, ...props } ) {
 	}
 
 	return (
-		<ul role="listbox" className="edit-site-patterns__grid" { ...props }>
+		<ul className="edit-site-patterns__grid" { ...props }>
 			{ items.map( ( item ) => (
 				<GridItem
 					key={ item.name }
diff --git a/packages/edit-site/src/components/page-patterns/patterns-list.js b/packages/edit-site/src/components/page-patterns/patterns-list.js
index 95e6824c58144..bbcb7e7910211 100644
--- a/packages/edit-site/src/components/page-patterns/patterns-list.js
+++ b/packages/edit-site/src/components/page-patterns/patterns-list.js
@@ -35,7 +35,7 @@ const { useLocation, useHistory } = unlock( routerPrivateApis );
 const SYNC_FILTERS = {
 	all: __( 'All' ),
 	[ PATTERN_SYNC_TYPES.full ]: __( 'Synced' ),
-	[ PATTERN_SYNC_TYPES.unsynced ]: __( 'Standard' ),
+	[ PATTERN_SYNC_TYPES.unsynced ]: __( 'Not synced' ),
 };
 
 const SYNC_DESCRIPTIONS = {
diff --git a/packages/edit-site/src/components/page-patterns/use-patterns.js b/packages/edit-site/src/components/page-patterns/use-patterns.js
index 1558f4b1e0032..6504b6f59684c 100644
--- a/packages/edit-site/src/components/page-patterns/use-patterns.js
+++ b/packages/edit-site/src/components/page-patterns/use-patterns.js
@@ -155,9 +155,13 @@ const selectPatterns = createSelector(
 		];
 
 		if ( syncStatus ) {
-			patterns = patterns.filter(
-				( pattern ) => pattern.syncStatus === syncStatus
-			);
+			// User patterns can have their sync statuses checked directly
+			// Non-user patterns are all unsynced for the time being.
+			patterns = patterns.filter( ( pattern ) => {
+				return pattern.id
+					? pattern.syncStatus === syncStatus
+					: syncStatus === PATTERN_SYNC_TYPES.unsynced;
+			} );
 		}
 
 		if ( categoryId ) {
diff --git a/packages/edit-site/src/components/page-template-parts/index.js b/packages/edit-site/src/components/page-template-parts/index.js
index f53ea6c10c554..2a8c41e333ce2 100644
--- a/packages/edit-site/src/components/page-template-parts/index.js
+++ b/packages/edit-site/src/components/page-template-parts/index.js
@@ -9,6 +9,7 @@ import {
 import { __ } from '@wordpress/i18n';
 import { useEntityRecords } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
@@ -20,8 +21,15 @@ import AddedBy from '../list/added-by';
 import TemplateActions from '../template-actions';
 import AddNewTemplatePart from './add-new-template-part';
 import { TEMPLATE_PART_POST_TYPE } from '../../utils/constants';
+import { unlock } from '../../lock-unlock';
+
+const { useLocation } = unlock( routerPrivateApis );
 
 export default function PageTemplateParts() {
+	const {
+		params: { didAccessPatternsPage },
+	} = useLocation();
+
 	const { records: templateParts } = useEntityRecords(
 		'postType',
 		TEMPLATE_PART_POST_TYPE,
@@ -40,8 +48,13 @@ export default function PageTemplateParts() {
 							params={ {
 								postId: templatePart.id,
 								postType: templatePart.type,
+								didAccessPatternsPage: !! didAccessPatternsPage
+									? 1
+									: undefined,
+							} }
+							state={ {
+								backPath: '/wp_template_part/all',
 							} }
-							state={ { backPath: '/wp_template_part/all' } }
 						>
 							{ decodeEntities(
 								templatePart.title?.rendered ||
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/reset-default-template.js b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/reset-default-template.js
index bc61b82a8d005..fab050c62d219 100644
--- a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/reset-default-template.js
+++ b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/reset-default-template.js
@@ -37,7 +37,7 @@ export default function ResetDefaultTemplate( { onClick } ) {
 					} );
 				} }
 			>
-				{ __( 'Reset' ) }
+				{ __( 'Use default template' ) }
 			</MenuItem>
 		</MenuGroup>
 	);
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/template-panel/pattern-categories.js b/packages/edit-site/src/components/sidebar-edit-mode/template-panel/pattern-categories.js
index a8e2b12c6a5e0..3740b622361ff 100644
--- a/packages/edit-site/src/components/sidebar-edit-mode/template-panel/pattern-categories.js
+++ b/packages/edit-site/src/components/sidebar-edit-mode/template-panel/pattern-categories.js
@@ -3,7 +3,7 @@
  */
 import { __, _x, sprintf } from '@wordpress/i18n';
 import { useEffect, useMemo, useState } from '@wordpress/element';
-import { FormTokenField, PanelRow } from '@wordpress/components';
+import { FormTokenField, FlexBlock, PanelRow } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { useDebounce } from '@wordpress/compose';
@@ -257,21 +257,23 @@ export default function PatternCategories( { post } ) {
 
 	return (
 		<PanelRow initialOpen={ true } title={ __( 'Categories' ) }>
-			<FormTokenField
-				__next40pxDefaultSize
-				value={ values }
-				suggestions={ suggestions }
-				onChange={ onChange }
-				onInputChange={ debouncedSearch }
-				maxSuggestions={ MAX_TERMS_SUGGESTIONS }
-				label={ __( 'Pattern categories' ) }
-				messages={ {
-					added: termAddedLabel,
-					removed: termRemovedLabel,
-					remove: removeTermLabel,
-				} }
-				tokenizeOnBlur
-			/>
+			<FlexBlock>
+				<FormTokenField
+					__next40pxDefaultSize
+					value={ values }
+					suggestions={ suggestions }
+					onChange={ onChange }
+					onInputChange={ debouncedSearch }
+					maxSuggestions={ MAX_TERMS_SUGGESTIONS }
+					label={ __( 'Pattern categories' ) }
+					messages={ {
+						added: termAddedLabel,
+						removed: termRemovedLabel,
+						remove: removeTermLabel,
+					} }
+					tokenizeOnBlur
+				/>
+			</FlexBlock>
 		</PanelRow>
 	);
 }
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/template-panel/template-areas.js b/packages/edit-site/src/components/sidebar-edit-mode/template-panel/template-areas.js
index fd00d9d2c0e24..24dcd301bf239 100644
--- a/packages/edit-site/src/components/sidebar-edit-mode/template-panel/template-areas.js
+++ b/packages/edit-site/src/components/sidebar-edit-mode/template-panel/template-areas.js
@@ -73,7 +73,7 @@ export default function TemplateAreas() {
 
 			<ul className="edit-site-template-card__template-areas-list">
 				{ templateParts.map( ( { templatePart, block } ) => (
-					<li key={ templatePart.slug }>
+					<li key={ block.clientId }>
 						<TemplateAreaItem
 							area={ templatePart.area }
 							clientId={ block.clientId }
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js
index 14c137eed3791..70325f09bd21d 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js
@@ -10,6 +10,8 @@ import { useViewportMatch } from '@wordpress/compose';
 import { getTemplatePartIcon } from '@wordpress/editor';
 import { __ } from '@wordpress/i18n';
 import { getQueryArgs } from '@wordpress/url';
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
 import { file } from '@wordpress/icons';
 
 /**
@@ -27,6 +29,7 @@ import {
 import { useLink } from '../routes/link';
 import usePatternCategories from './use-pattern-categories';
 import useTemplatePartAreas from './use-template-part-areas';
+import { store as editSiteStore } from '../../store';
 
 function TemplatePartGroup( { areas, currentArea, currentType } ) {
 	return (
@@ -93,8 +96,23 @@ export default function SidebarNavigationScreenPatterns() {
 	const { templatePartAreas, hasTemplateParts, isLoading } =
 		useTemplatePartAreas();
 	const { patternCategories, hasPatterns } = usePatternCategories();
+	const isBlockBasedTheme = useSelect(
+		( select ) => select( coreStore ).getCurrentTheme()?.is_block_theme,
+		[]
+	);
+	const isTemplatePartsMode = useSelect( ( select ) => {
+		const settings = select( editSiteStore ).getSettings();
+		return !! settings.supportsTemplatePartsMode;
+	}, [] );
+
+	const templatePartsLink = useLink( {
+		path: '/wp_template_part/all',
+		// If a classic theme that supports template parts accessed
+		// the Patterns page directly, preserve that state in the URL.
+		didAccessPatternsPage:
+			! isBlockBasedTheme && isTemplatePartsMode ? 1 : undefined,
+	} );
 
-	const templatePartsLink = useLink( { path: '/wp_template_part/all' } );
 	const footer = ! isMobileViewport ? (
 		<ItemGroup>
 			<SidebarNavigationItem
@@ -104,14 +122,17 @@ export default function SidebarNavigationScreenPatterns() {
 			>
 				{ __( 'Manage all of my patterns' ) }
 			</SidebarNavigationItem>
-			<SidebarNavigationItem withChevron { ...templatePartsLink }>
-				{ __( 'Manage all template parts' ) }
-			</SidebarNavigationItem>
+			{ ( isBlockBasedTheme || isTemplatePartsMode ) && (
+				<SidebarNavigationItem withChevron { ...templatePartsLink }>
+					{ __( 'Manage all template parts' ) }
+				</SidebarNavigationItem>
+			) }
 		</ItemGroup>
 	) : undefined;
 
 	return (
 		<SidebarNavigationScreen
+			isRoot={ ! isBlockBasedTheme }
 			title={ __( 'Patterns' ) }
 			description={ __(
 				'Manage what patterns are available when editing the site.'
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-template/home-template-details.js b/packages/edit-site/src/components/sidebar-navigation-screen-template/home-template-details.js
index 6cdf1f0a27651..4f1dbcd432df2 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-template/home-template-details.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-template/home-template-details.js
@@ -7,7 +7,6 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import {
 	CheckboxControl,
-	__experimentalUseNavigator as useNavigator,
 	__experimentalInputControl as InputControl,
 	__experimentalNumberControl as NumberControl,
 	__experimentalTruncate as Truncate,
@@ -62,10 +61,6 @@ function TemplateAreaButton( { postId, icon, title } ) {
 }
 
 export default function HomeTemplateDetails() {
-	const navigator = useNavigator();
-	const {
-		params: { postType, postId },
-	} = navigator;
 	const { editEntityRecord } = useDispatch( coreStore );
 
 	const {
@@ -75,34 +70,30 @@ export default function HomeTemplateDetails() {
 		postsPageTitle,
 		postsPageId,
 		currentTemplateParts,
-	} = useSelect(
-		( select ) => {
-			const { getEntityRecord } = select( coreStore );
-			const siteSettings = getEntityRecord( 'root', 'site' );
-			const { getSettings } = unlock( select( editSiteStore ) );
-			const _currentTemplateParts =
-				select( editSiteStore ).getCurrentTemplateTemplateParts();
-			const siteEditorSettings = getSettings();
-			const _postsPageRecord = siteSettings?.page_for_posts
-				? select( coreStore ).getEntityRecord(
-						'postType',
-						'page',
-						siteSettings?.page_for_posts
-				  )
-				: EMPTY_OBJECT;
+	} = useSelect( ( select ) => {
+		const { getEntityRecord } = select( coreStore );
+		const { getSettings, getCurrentTemplateTemplateParts } = unlock(
+			select( editSiteStore )
+		);
+		const siteSettings = getEntityRecord( 'root', 'site' );
+		const _postsPageRecord = siteSettings?.page_for_posts
+			? getEntityRecord(
+					'postType',
+					'page',
+					siteSettings?.page_for_posts
+			  )
+			: EMPTY_OBJECT;
 
-			return {
-				allowCommentsOnNewPosts:
-					siteSettings?.default_comment_status === 'open',
-				postsPageTitle: _postsPageRecord?.title?.rendered,
-				postsPageId: _postsPageRecord?.id,
-				postsPerPage: siteSettings?.posts_per_page,
-				templatePartAreas: siteEditorSettings?.defaultTemplatePartAreas,
-				currentTemplateParts: _currentTemplateParts,
-			};
-		},
-		[ postType, postId ]
-	);
+		return {
+			allowCommentsOnNewPosts:
+				siteSettings?.default_comment_status === 'open',
+			postsPageTitle: _postsPageRecord?.title?.rendered,
+			postsPageId: _postsPageRecord?.id,
+			postsPerPage: siteSettings?.posts_per_page,
+			templatePartAreas: getSettings()?.defaultTemplatePartAreas,
+			currentTemplateParts: getCurrentTemplateTemplateParts(),
+		};
+	}, [] );
 
 	const [ commentsOnNewPostsValue, setCommentsOnNewPostsValue ] =
 		useState( '' );
@@ -126,11 +117,12 @@ export default function HomeTemplateDetails() {
 	 */
 	const templateAreas = useMemo( () => {
 		return currentTemplateParts.length && templatePartAreas
-			? currentTemplateParts.map( ( { templatePart } ) => ( {
+			? currentTemplateParts.map( ( { templatePart, block } ) => ( {
 					...templatePartAreas?.find(
 						( { area } ) => area === templatePart?.area
 					),
 					...templatePart,
+					clientId: block.clientId,
 			  } ) )
 			: [];
 	}, [ currentTemplateParts, templatePartAreas ] );
@@ -214,9 +206,9 @@ export default function HomeTemplateDetails() {
 			>
 				<ItemGroup>
 					{ templateAreas.map(
-						( { label, icon, theme, slug, title } ) => (
+						( { clientId, label, icon, theme, slug, title } ) => (
 							<SidebarNavigationScreenDetailsPanelRow
-								key={ slug }
+								key={ clientId }
 							>
 								<TemplateAreaButton
 									postId={ `${ theme }//${ slug }` }
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-templates-browse/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-templates-browse/index.js
index 2b4d47359225f..a07e08a44f8b4 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-templates-browse/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-templates-browse/index.js
@@ -4,6 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { __experimentalUseNavigator as useNavigator } from '@wordpress/components';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
@@ -14,6 +15,7 @@ import {
 	TEMPLATE_POST_TYPE,
 	TEMPLATE_PART_POST_TYPE,
 } from '../../utils/constants';
+import { unlock } from '../../lock-unlock';
 
 const config = {
 	[ TEMPLATE_POST_TYPE ]: {
@@ -31,20 +33,26 @@ const config = {
 	},
 };
 
+const { useLocation } = unlock( routerPrivateApis );
+
 export default function SidebarNavigationScreenTemplatesBrowse() {
 	const {
 		params: { postType },
 	} = useNavigator();
+	const {
+		params: { didAccessPatternsPage },
+	} = useLocation();
 
 	const isTemplatePartsMode = useSelect( ( select ) => {
-		const settings = select( editSiteStore ).getSettings();
-
-		return !! settings.supportsTemplatePartsMode;
+		return !! select( editSiteStore ).getSettings()
+			.supportsTemplatePartsMode;
 	}, [] );
 
 	return (
 		<SidebarNavigationScreen
-			isRoot={ isTemplatePartsMode }
+			// If a classic theme that supports template parts has never
+			// accessed the Patterns page, return to the dashboard.
+			isRoot={ isTemplatePartsMode && ! didAccessPatternsPage }
 			title={ config[ postType ].title }
 			description={ config[ postType ].description }
 			backPath={ config[ postType ].backPath }
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss
index 6eb4b9eb91b8f..687326fbebd33 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss
+++ b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss
@@ -68,7 +68,6 @@
 .edit-site-sidebar-navigation-screen__title {
 	flex-grow: 1;
 	padding: $grid-unit-15 * 0.5 0 0 0;
-	overflow: hidden;
 	overflow-wrap: break-word;
 }
 
diff --git a/packages/format-library/src/text-color/inline.js b/packages/format-library/src/text-color/inline.js
index 7a2c2f92ea462..f71c776622258 100644
--- a/packages/format-library/src/text-color/inline.js
+++ b/packages/format-library/src/text-color/inline.js
@@ -137,6 +137,11 @@ export default function InlineColorUI( {
 	onClose,
 	contentRef,
 } ) {
+	const popoverAnchor = useAnchor( {
+		editableContentElement: contentRef.current,
+		settings,
+	} );
+
 	/*
 	 As you change the text color by typing a HEX value into a field,
 	 the return value of document.getSelection jumps to the field you're editing,
@@ -144,12 +149,8 @@ export default function InlineColorUI( {
 	 it will return null, since it can't find the <mark> element within the HEX input.
 	 This caches the last truthy value of the selection anchor reference.
 	 */
-	const popoverAnchor = useCachedTruthy(
-		useAnchor( {
-			editableContentElement: contentRef.current,
-			settings,
-		} )
-	);
+	const cachedRect = useCachedTruthy( popoverAnchor.getBoundingClientRect() );
+	popoverAnchor.getBoundingClientRect = () => cachedRect;
 
 	return (
 		<Popover
diff --git a/packages/keyboard-shortcuts/src/components/shortcut-provider.js b/packages/keyboard-shortcuts/src/components/shortcut-provider.js
index 9fabf392738f6..feda767a2ca6b 100644
--- a/packages/keyboard-shortcuts/src/components/shortcut-provider.js
+++ b/packages/keyboard-shortcuts/src/components/shortcut-provider.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useRef } from '@wordpress/element';
+import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -20,12 +20,12 @@ const { Provider } = context;
  * @return {import('@wordpress/element').WPElement} Component.
  */
 export function ShortcutProvider( props ) {
-	const keyboardShortcuts = useRef( new Set() );
+	const [ keyboardShortcuts ] = useState( () => new Set() );
 
 	function onKeyDown( event ) {
 		if ( props.onKeyDown ) props.onKeyDown( event );
 
-		for ( const keyboardShortcut of keyboardShortcuts.current ) {
+		for ( const keyboardShortcut of keyboardShortcuts ) {
 			keyboardShortcut( event );
 		}
 	}
diff --git a/packages/scripts/config/playwright.config.ts b/packages/scripts/config/playwright.config.js
similarity index 100%
rename from packages/scripts/config/playwright.config.ts
rename to packages/scripts/config/playwright.config.js
diff --git a/packages/scripts/config/playwright/global-setup.ts b/packages/scripts/config/playwright/global-setup.js
similarity index 82%
rename from packages/scripts/config/playwright/global-setup.ts
rename to packages/scripts/config/playwright/global-setup.js
index 10f2822fdfe1a..eace349c6309d 100644
--- a/packages/scripts/config/playwright/global-setup.ts
+++ b/packages/scripts/config/playwright/global-setup.js
@@ -2,14 +2,18 @@
  * External dependencies
  */
 import { request } from '@playwright/test';
-import type { FullConfig } from '@playwright/test';
 
 /**
  * WordPress dependencies
  */
 import { RequestUtils } from '@wordpress/e2e-test-utils-playwright';
 
-async function globalSetup( config: FullConfig ) {
+/**
+ *
+ * @param {import('@playwright/test').FullConfig} config
+ * @return {Promise<void>}
+ */
+async function globalSetup( config ) {
 	const { storageState, baseURL } = config.projects[ 0 ].use;
 	const storageStatePath =
 		typeof storageState === 'string' ? storageState : undefined;
diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php
index 39f308a5791f6..0e212983d9080 100644
--- a/phpunit/class-wp-theme-json-test.php
+++ b/phpunit/class-wp-theme-json-test.php
@@ -2007,29 +2007,37 @@ public function test_process_blocks_custom_css( $input, $expected ) {
 	 */
 	public function data_process_blocks_custom_css() {
 		return array(
-			// Simple CSS without any child selectors.
-			'no child selectors'                => array(
+			// Simple CSS without any nested selectors.
+			'no nested selectors'          => array(
 				'input'    => array(
 					'selector' => '.foo',
 					'css'      => 'color: red; margin: auto;',
 				),
 				'expected' => '.foo{color: red; margin: auto;}',
 			),
-			// CSS with child selectors.
-			'with children'                     => array(
+			// CSS with nested selectors.
+			'with nested selector'         => array(
 				'input'    => array(
 					'selector' => '.foo',
-					'css'      => 'color: red; margin: auto; & .bar{color: blue;}',
+					'css'      => 'color: red; margin: auto; &.one{color: blue;} & .two{color: green;}',
 				),
-				'expected' => '.foo{color: red; margin: auto;}.foo .bar{color: blue;}',
+				'expected' => '.foo{color: red; margin: auto;}.foo.one{color: blue;}.foo .two{color: green;}',
 			),
-			// CSS with child selectors and pseudo elements.
-			'with children and pseudo elements' => array(
+			// CSS with pseudo elements.
+			'with pseudo elements'         => array(
 				'input'    => array(
 					'selector' => '.foo',
-					'css'      => 'color: red; margin: auto; & .bar{color: blue;} &::before{color: green;}',
+					'css'      => 'color: red; margin: auto; &::before{color: blue;} & ::before{color: green;}  &.one::before{color: yellow;} & .two::before{color: purple;}',
 				),
-				'expected' => '.foo{color: red; margin: auto;}.foo .bar{color: blue;}.foo::before{color: green;}',
+				'expected' => '.foo{color: red; margin: auto;}.foo::before{color: blue;}.foo ::before{color: green;}.foo.one::before{color: yellow;}.foo .two::before{color: purple;}',
+			),
+			// CSS with multiple root selectors.
+			'with multiple root selectors' => array(
+				'input'    => array(
+					'selector' => '.foo, .bar',
+					'css'      => 'color: red; margin: auto; &.one{color: blue;} & .two{color: green;} &::before{color: yellow;} & ::before{color: purple;}  &.three::before{color: orange;} & .four::before{color: skyblue;}',
+				),
+				'expected' => '.foo, .bar{color: red; margin: auto;}.foo.one, .bar.one{color: blue;}.foo .two, .bar .two{color: green;}.foo::before, .bar::before{color: yellow;}.foo ::before, .bar ::before{color: purple;}.foo.three::before, .bar.three::before{color: orange;}.foo .four::before, .bar .four::before{color: skyblue;}',
 			),
 		);
 	}
diff --git a/phpunit/tests/data/fonts/gilbert-color.otf b/phpunit/tests/data/fonts/gilbert-color.otf
new file mode 100644
index 0000000000000..f21f9a173f2fe
Binary files /dev/null and b/phpunit/tests/data/fonts/gilbert-color.otf differ
diff --git a/phpunit/tests/fonts/font-library/wpFontFamily/install.php b/phpunit/tests/fonts/font-library/wpFontFamily/install.php
index ddd8c70a97972..79cb6ac3ba2ba 100644
--- a/phpunit/tests/fonts/font-library/wpFontFamily/install.php
+++ b/phpunit/tests/fonts/font-library/wpFontFamily/install.php
@@ -167,6 +167,8 @@ public function test_should_move_local_fontfaces( $font_data, array $files_data,
 				copy( __DIR__ . '/../../../data/fonts/cooper-hewitt.woff', $file['tmp_name'] );
 			} elseif ( 'font/woff2' === $file['type'] ) {
 				copy( __DIR__ . '/../../../data/fonts/DMSans.woff2', $file['tmp_name'] );
+			} elseif ( 'application/vnd.ms-opentype' === $file['type'] ) {
+				copy( __DIR__ . '/../../../data/fonts/gilbert-color.otf', $file['tmp_name'] );
 			}
 		}
 
@@ -302,6 +304,32 @@ public function data_should_move_local_fontfaces() {
 				),
 				'expected'   => array( 'dm-sans_regular_500.woff2' ),
 			),
+			// otf font type.
+			'otf local font'   => array(
+				'font_data'  => array(
+					'name'       => 'Gilbert Color',
+					'slug'       => 'gilbert-color',
+					'fontFamily' => 'Gilbert Color',
+					'fontFace'   => array(
+						array(
+							'fontFamily'   => 'Gilbert Color',
+							'fontStyle'    => 'regular',
+							'fontWeight'   => '500',
+							'uploadedFile' => 'files0',
+						),
+					),
+				),
+				'files_data' => array(
+					'files0' => array(
+						'name'     => 'gilbert-color.otf',
+						'type'     => 'application/vnd.ms-opentype',
+						'tmp_name' => wp_tempnam( 'Gilbert-' ),
+						'error'    => 0,
+						'size'     => 123,
+					),
+				),
+				'expected'   => array( 'gilbert-color_regular_500.otf' ),
+			),
 		);
 	}
 
diff --git a/phpunit/tests/fonts/font-library/wpFontLibrary/getMimeTypes.php b/phpunit/tests/fonts/font-library/wpFontLibrary/getMimeTypes.php
new file mode 100644
index 0000000000000..708134af69e92
--- /dev/null
+++ b/phpunit/tests/fonts/font-library/wpFontLibrary/getMimeTypes.php
@@ -0,0 +1,90 @@
+<?php
+/**
+ * Test WP_Font_Family_Utils::get_expected_font_mime_types_per_php_version().
+ *
+ * @package WordPress
+ * @subpackage Font Library
+ *
+ * @group fonts
+ * @group font-library
+ *
+ * @covers WP_Font_Family_Utils::get_expected_font_mime_types_per_php_version
+ */
+class Tests_Fonts_WpFontsFamilyUtils_GetMimeTypes extends WP_UnitTestCase {
+
+	/**
+	 *
+	 * @dataProvider data_should_supply_correct_mime_type_for_php_version
+	 *
+	 * @param array $php_version_id PHP_VERSION_ID value.
+	 * @param array $expected Expected mime types.
+	 */
+	public function test_should_supply_correct_mime_type_for_php_version( $php_version_id, $expected ) {
+		$mimes = WP_Font_Library::get_expected_font_mime_types_per_php_version( $php_version_id );
+		$this->assertEquals( $mimes, $expected );
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array[]
+	 */
+	public function data_should_supply_correct_mime_type_for_php_version() {
+		return array(
+			'version 7.2' => array(
+				'php_version_id' => 70200,
+				'expected'       => array(
+					'otf'   => 'application/vnd.ms-opentype',
+					'ttf'   => 'application/x-font-ttf',
+					'woff'  => 'application/font-woff',
+					'woff2' => 'application/font-woff2',
+				),
+			),
+			'version 7.3' => array(
+				'php_version_id' => 70300,
+				'expected'       => array(
+					'otf'   => 'application/vnd.ms-opentype',
+					'ttf'   => 'application/font-sfnt',
+					'woff'  => 'application/font-woff',
+					'woff2' => 'application/font-woff2',
+				),
+			),
+			'version 7.4' => array(
+				'php_version_id' => 70400,
+				'expected'       => array(
+					'otf'   => 'application/vnd.ms-opentype',
+					'ttf'   => 'font/sfnt',
+					'woff'  => 'application/font-woff',
+					'woff2' => 'application/font-woff2',
+				),
+			),
+			'version 8.0' => array(
+				'php_version_id' => 80000,
+				'expected'       => array(
+					'otf'   => 'application/vnd.ms-opentype',
+					'ttf'   => 'font/sfnt',
+					'woff'  => 'application/font-woff',
+					'woff2' => 'application/font-woff2',
+				),
+			),
+			'version 8.1' => array(
+				'php_version_id' => 80100,
+				'expected'       => array(
+					'otf'   => 'application/vnd.ms-opentype',
+					'ttf'   => 'font/sfnt',
+					'woff'  => 'font/woff',
+					'woff2' => 'font/woff2',
+				),
+			),
+			'version 8.2' => array(
+				'php_version_id' => 80200,
+				'expected'       => array(
+					'otf'   => 'application/vnd.ms-opentype',
+					'ttf'   => 'font/sfnt',
+					'woff'  => 'font/woff',
+					'woff2' => 'font/woff2',
+				),
+			),
+		);
+	}
+}
diff --git a/phpunit/tests/fonts/font-library/wpFontLibrary/setUploadDir.php b/phpunit/tests/fonts/font-library/wpFontLibrary/setUploadDir.php
index be15ecce89881..daa4c84aad900 100644
--- a/phpunit/tests/fonts/font-library/wpFontLibrary/setUploadDir.php
+++ b/phpunit/tests/fonts/font-library/wpFontLibrary/setUploadDir.php
@@ -15,14 +15,16 @@ class Tests_Fonts_WpFontLibrary_SetUploadDir extends WP_UnitTestCase {
 	public function test_should_set_fonts_upload_dir() {
 		$defaults = array(
 			'subdir'  => '/abc',
-			'basedir' => '/var/www/html/wp-content',
-			'baseurl' => 'http://example.com/wp-content',
+			'basedir' => '/any/path',
+			'baseurl' => 'http://example.com/an/arbitrary/url',
+			'path'    => '/any/path/abc',
+			'url'     => 'http://example.com/an/arbitrary/url/abc',
 		);
 		$expected = array(
 			'subdir'  => '/fonts',
-			'basedir' => '/var/www/html/wp-content',
+			'basedir' => WP_CONTENT_DIR,
 			'baseurl' => content_url(),
-			'path'    => '/var/www/html/wp-content/fonts',
+			'path'    => path_join( WP_CONTENT_DIR, 'fonts' ),
 			'url'     => content_url() . '/fonts',
 		);
 		$this->assertSame( $expected, WP_Font_Library::set_upload_dir( $defaults ) );
diff --git a/phpunit/tests/fonts/font-library/wpRestFontLibraryController/base.php b/phpunit/tests/fonts/font-library/wpRestFontLibraryController/base.php
index 5caa40b289293..a6b02f38a5e81 100644
--- a/phpunit/tests/fonts/font-library/wpRestFontLibraryController/base.php
+++ b/phpunit/tests/fonts/font-library/wpRestFontLibraryController/base.php
@@ -39,7 +39,7 @@ public function tear_down() {
 		$reflection = new ReflectionClass( 'WP_Font_Library' );
 		$property   = $reflection->getProperty( 'collections' );
 		$property->setAccessible( true );
-		$property->setValue( array() );
+		$property->setValue( null, array() );
 
 		// Clean up the /fonts directory.
 		foreach ( $this->files_in_dir( static::$fonts_dir ) as $file ) {
diff --git a/phpunit/tests/fonts/font-library/wpRestFontLibraryController/installFonts.php b/phpunit/tests/fonts/font-library/wpRestFontLibraryController/installFonts.php
index e92776b70ed64..6ec15c71ade59 100644
--- a/phpunit/tests/fonts/font-library/wpRestFontLibraryController/installFonts.php
+++ b/phpunit/tests/fonts/font-library/wpRestFontLibraryController/installFonts.php
@@ -28,14 +28,13 @@ public function test_install_fonts( $font_families, $files, $expected_response )
 		$install_request->set_file_params( $files );
 		$response = rest_get_server()->dispatch( $install_request );
 		$data     = $response->get_data();
-
 		$this->assertSame( 200, $response->get_status(), 'The response status is not 200.' );
-		$this->assertCount( count( $expected_response ), $data, 'Not all the font families were installed correctly.' );
+		$this->assertCount( count( $expected_response['successes'] ), $data['successes'], 'Not all the font families were installed correctly.' );
 
 		// Checks that the font families were installed correctly.
-		for ( $family_index = 0; $family_index < count( $data ); $family_index++ ) {
-			$installed_font = $data[ $family_index ];
-			$expected_font  = $expected_response[ $family_index ];
+		for ( $family_index = 0; $family_index < count( $data['successes'] ); $family_index++ ) {
+			$installed_font = $data['successes'][ $family_index ];
+			$expected_font  = $expected_response['successes'][ $family_index ];
 
 			if ( isset( $installed_font['fontFace'] ) || isset( $expected_font['fontFace'] ) ) {
 				for ( $face_index = 0; $face_index < count( $installed_font['fontFace'] ); $face_index++ ) {
@@ -61,9 +60,10 @@ public function test_install_fonts( $font_families, $files, $expected_response )
 	public function data_install_fonts() {
 
 		$temp_file_path1 = wp_tempnam( 'Piazzola1-' );
-		file_put_contents( $temp_file_path1, 'Mocking file content' );
+		copy( __DIR__ . '/../../../data/fonts/Merriweather.ttf', $temp_file_path1 );
+
 		$temp_file_path2 = wp_tempnam( 'Monteserrat-' );
-		file_put_contents( $temp_file_path2, 'Mocking file content' );
+		copy( __DIR__ . '/../../../data/fonts/Merriweather.ttf', $temp_file_path2 );
 
 		return array(
 
@@ -100,32 +100,35 @@ public function data_install_fonts() {
 				),
 				'files'             => array(),
 				'expected_response' => array(
-					array(
-						'fontFamily' => 'Piazzolla',
-						'slug'       => 'piazzolla',
-						'name'       => 'Piazzolla',
-						'fontFace'   => array(
-							array(
-								'fontFamily' => 'Piazzolla',
-								'fontStyle'  => 'normal',
-								'fontWeight' => '400',
-								'src'        => '/wp-content/fonts/piazzolla_normal_400.ttf',
+					'successes' => array(
+						array(
+							'fontFamily' => 'Piazzolla',
+							'slug'       => 'piazzolla',
+							'name'       => 'Piazzolla',
+							'fontFace'   => array(
+								array(
+									'fontFamily' => 'Piazzolla',
+									'fontStyle'  => 'normal',
+									'fontWeight' => '400',
+									'src'        => '/wp-content/fonts/piazzolla_normal_400.ttf',
+								),
 							),
 						),
-					),
-					array(
-						'fontFamily' => 'Montserrat',
-						'slug'       => 'montserrat',
-						'name'       => 'Montserrat',
-						'fontFace'   => array(
-							array(
-								'fontFamily' => 'Montserrat',
-								'fontStyle'  => 'normal',
-								'fontWeight' => '100',
-								'src'        => '/wp-content/fonts/montserrat_normal_100.ttf',
+						array(
+							'fontFamily' => 'Montserrat',
+							'slug'       => 'montserrat',
+							'name'       => 'Montserrat',
+							'fontFace'   => array(
+								array(
+									'fontFamily' => 'Montserrat',
+									'fontStyle'  => 'normal',
+									'fontWeight' => '100',
+									'src'        => '/wp-content/fonts/montserrat_normal_100.ttf',
+								),
 							),
 						),
 					),
+					'errors'    => array(),
 				),
 			),
 
@@ -160,33 +163,36 @@ public function data_install_fonts() {
 				),
 				'files'             => array(),
 				'expected_response' => array(
-					array(
-						'fontFamily' => 'Piazzolla',
-						'slug'       => 'piazzolla',
-						'name'       => 'Piazzolla',
-						'fontFace'   => array(
-							array(
-								'fontFamily' => 'Piazzolla',
-								'fontStyle'  => 'normal',
-								'fontWeight' => '400',
-								'src'        => 'http://fonts.gstatic.com/s/piazzolla/v33/N0b72SlTPu5rIkWIZjVgI-TckS03oGpPETyEJ88Rbvi0_TzOzKcQhZqx3gX9BRy5m5M.ttf',
+					'successes' => array(
+						array(
+							'fontFamily' => 'Piazzolla',
+							'slug'       => 'piazzolla',
+							'name'       => 'Piazzolla',
+							'fontFace'   => array(
+								array(
+									'fontFamily' => 'Piazzolla',
+									'fontStyle'  => 'normal',
+									'fontWeight' => '400',
+									'src'        => 'http://fonts.gstatic.com/s/piazzolla/v33/N0b72SlTPu5rIkWIZjVgI-TckS03oGpPETyEJ88Rbvi0_TzOzKcQhZqx3gX9BRy5m5M.ttf',
+								),
 							),
 						),
-					),
-					array(
-						'fontFamily' => 'Montserrat',
-						'slug'       => 'montserrat',
-						'name'       => 'Montserrat',
-						'fontFace'   => array(
-							array(
-								'fontFamily' => 'Montserrat',
-								'fontStyle'  => 'normal',
-								'fontWeight' => '100',
-								'src'        => 'http://fonts.gstatic.com/s/montserrat/v25/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Uw-Y3tcoqK5.ttf',
+						array(
+							'fontFamily' => 'Montserrat',
+							'slug'       => 'montserrat',
+							'name'       => 'Montserrat',
+							'fontFace'   => array(
+								array(
+									'fontFamily' => 'Montserrat',
+									'fontStyle'  => 'normal',
+									'fontWeight' => '100',
+									'src'        => 'http://fonts.gstatic.com/s/montserrat/v25/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Uw-Y3tcoqK5.ttf',
 
+								),
 							),
 						),
 					),
+					'errors'    => array(),
 				),
 			),
 
@@ -200,11 +206,14 @@ public function data_install_fonts() {
 				),
 				'files'             => array(),
 				'expected_response' => array(
-					array(
-						'fontFamily' => 'Arial',
-						'slug'       => 'arial',
-						'name'       => 'Arial',
+					'successes' => array(
+						array(
+							'fontFamily' => 'Arial',
+							'slug'       => 'arial',
+							'name'       => 'Arial',
+						),
 					),
+					'errors'    => array(),
 				),
 			),
 
@@ -254,32 +263,36 @@ public function data_install_fonts() {
 					),
 				),
 				'expected_response' => array(
-					array(
-						'fontFamily' => 'Piazzolla',
-						'slug'       => 'piazzolla',
-						'name'       => 'Piazzolla',
-						'fontFace'   => array(
-							array(
-								'fontFamily' => 'Piazzolla',
-								'fontStyle'  => 'normal',
-								'fontWeight' => '400',
-								'src'        => '/wp-content/fonts/piazzolla_normal_400.ttf',
+					'successes' => array(
+						array(
+							'fontFamily' => 'Piazzolla',
+							'slug'       => 'piazzolla',
+							'name'       => 'Piazzolla',
+							'fontFace'   => array(
+								array(
+									'fontFamily' => 'Piazzolla',
+									'fontStyle'  => 'normal',
+									'fontWeight' => '400',
+									'src'        => '/wp-content/fonts/piazzolla_normal_400.ttf',
+								),
 							),
 						),
-					),
-					array(
-						'fontFamily' => 'Montserrat',
-						'slug'       => 'montserrat',
-						'name'       => 'Montserrat',
-						'fontFace'   => array(
-							array(
-								'fontFamily' => 'Montserrat',
-								'fontStyle'  => 'normal',
-								'fontWeight' => '100',
-								'src'        => '/wp-content/fonts/montserrat_normal_100.ttf',
+						array(
+							'fontFamily' => 'Montserrat',
+							'slug'       => 'montserrat',
+							'name'       => 'Montserrat',
+							'fontFace'   => array(
+								array(
+									'fontFamily' => 'Montserrat',
+									'fontStyle'  => 'normal',
+									'fontWeight' => '100',
+									'src'        => '/wp-content/fonts/montserrat_normal_100.ttf',
+								),
 							),
 						),
+
 					),
+					'errors'    => array(),
 				),
 			),
 		);
diff --git a/phpunit/tests/fonts/font-library/wpRestFontLibraryController/uninstallFonts.php b/phpunit/tests/fonts/font-library/wpRestFontLibraryController/uninstallFonts.php
index 3082bfc87f62e..860f47d876481 100644
--- a/phpunit/tests/fonts/font-library/wpRestFontLibraryController/uninstallFonts.php
+++ b/phpunit/tests/fonts/font-library/wpRestFontLibraryController/uninstallFonts.php
@@ -70,7 +70,6 @@ public function test_uninstall() {
 		$uninstall_request = new WP_REST_Request( 'DELETE', '/wp/v2/fonts' );
 		$uninstall_request->set_param( 'fontFamilies', $font_families_to_uninstall );
 		$response = rest_get_server()->dispatch( $uninstall_request );
-		echo ( print_r( $response->get_data(), true ) );
 		$this->assertSame( 200, $response->get_status(), 'The response status is not 200.' );
 	}
 
@@ -91,7 +90,7 @@ public function test_uninstall_non_existing_fonts() {
 
 		$uninstall_request->set_param( 'fontFamilies', $non_existing_font_data );
 		$response = rest_get_server()->dispatch( $uninstall_request );
-		$response->get_data();
-		$this->assertSame( 500, $response->get_status(), 'The response status is not 500.' );
+		$data     = $response->get_data();
+		$this->assertCount( 2, $data['errors'], 'The response should have 2 errors, one for each font family uninstall failure.' );
 	}
 }
diff --git a/test/e2e/specs/editor/blocks/columns.spec.js b/test/e2e/specs/editor/blocks/columns.spec.js
index 23443059c1522..bcb23c9a24099 100644
--- a/test/e2e/specs/editor/blocks/columns.spec.js
+++ b/test/e2e/specs/editor/blocks/columns.spec.js
@@ -143,7 +143,7 @@ test.describe( 'Columns', () => {
 		} );
 
 		await editor.selectBlocks(
-			editor.canvas.locator( 'role=document[name="Paragraph block"i]' )
+			editor.canvas.locator( 'role=document[name="Block: Paragraph"i]' )
 		);
 		await page.keyboard.press( 'ArrowRight' );
 		await page.keyboard.press( 'Enter' );
@@ -200,7 +200,7 @@ test.describe( 'Columns', () => {
 
 		await editor.selectBlocks(
 			editor.canvas.locator(
-				'role=document[name="Paragraph block"i] >> text="1"'
+				'role=document[name="Block: Paragraph"i] >> text="1"'
 			)
 		);
 		await page.keyboard.press( 'ArrowRight' );
diff --git a/test/e2e/specs/editor/blocks/cover.spec.js b/test/e2e/specs/editor/blocks/cover.spec.js
index 98be7b8530409..192f24a4a6961 100644
--- a/test/e2e/specs/editor/blocks/cover.spec.js
+++ b/test/e2e/specs/editor/blocks/cover.spec.js
@@ -119,7 +119,7 @@ test.describe( 'Cover', () => {
 		// Activate the paragraph block inside the Cover block.
 		// The name of the block differs depending on whether text has been entered or not.
 		const coverBlockParagraph = coverBlock.getByRole( 'document', {
-			name: /Paragraph block|Empty block; start writing or type forward slash to choose a block/,
+			name: /Block: Paragraph|Empty block; start writing or type forward slash to choose a block/,
 		} );
 		await expect( coverBlockParagraph ).toBeEditable();
 
diff --git a/test/e2e/specs/editor/blocks/navigation-list-view.spec.js b/test/e2e/specs/editor/blocks/navigation-list-view.spec.js
index 185297178323f..6490fbee97f1f 100644
--- a/test/e2e/specs/editor/blocks/navigation-list-view.spec.js
+++ b/test/e2e/specs/editor/blocks/navigation-list-view.spec.js
@@ -570,9 +570,7 @@ class LinkControl {
 		await expect( result ).toBeVisible();
 
 		return result
-			.locator(
-				'.components-menu-item__info-wrapper .components-menu-item__item'
-			) // this is the only way to get the label text without the URL.
+			.locator( '.components-menu-item__item' ) // this is the only way to get the label text without the URL.
 			.innerText();
 	}
 }
diff --git a/test/e2e/specs/editor/blocks/quote.spec.js b/test/e2e/specs/editor/blocks/quote.spec.js
index 44645005ff05e..13b7ee341ede7 100644
--- a/test/e2e/specs/editor/blocks/quote.spec.js
+++ b/test/e2e/specs/editor/blocks/quote.spec.js
@@ -110,7 +110,7 @@ test.describe( 'Quote', () => {
 		await page.keyboard.type( 'two' );
 		await page.keyboard.down( 'Shift' );
 		await editor.canvas.click(
-			'role=document[name="Paragraph block"i] >> text=one'
+			'role=document[name="Block: Paragraph"i] >> text=one'
 		);
 		await page.keyboard.up( 'Shift' );
 		await editor.transformBlockTo( 'core/quote' );
diff --git a/test/e2e/specs/editor/blocks/search.spec.js b/test/e2e/specs/editor/blocks/search.spec.js
new file mode 100644
index 0000000000000..d11efd7328afe
--- /dev/null
+++ b/test/e2e/specs/editor/blocks/search.spec.js
@@ -0,0 +1,94 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Search', () => {
+	test.beforeEach( async ( { admin, requestUtils } ) => {
+		await requestUtils.deleteAllMenus();
+		await admin.createNewPost();
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.deleteAllMenus();
+	} );
+
+	test.afterEach( async ( { requestUtils } ) => {
+		await Promise.all( [
+			requestUtils.deleteAllPosts(),
+			requestUtils.deleteAllMenus(),
+		] );
+	} );
+
+	test( 'should auto-configure itself to sensible defaults when inserted into a Navigation block', async ( {
+		page,
+		editor,
+		requestUtils,
+	} ) => {
+		const createdMenu = await requestUtils.createNavigationMenu( {
+			title: 'Test Menu',
+			content: `<!-- wp:spacer -->
+<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->`,
+		} );
+
+		await editor.insertBlock( {
+			name: 'core/navigation',
+			attributes: {
+				ref: createdMenu?.id,
+			},
+		} );
+
+		const navBlockInserter = editor.canvas.getByRole( 'button', {
+			name: 'Add block',
+		} );
+		await navBlockInserter.click();
+
+		// Expect to see the block inserter.
+		await expect(
+			page.getByRole( 'searchbox', {
+				name: 'Search for blocks and patterns',
+			} )
+		).toBeFocused();
+
+		// Search for the Search block.
+		await page.keyboard.type( 'Search' );
+
+		const blockResults = page.getByRole( 'listbox', {
+			name: 'Blocks',
+		} );
+
+		await expect( blockResults ).toBeVisible();
+
+		const searchBlockResult = blockResults.getByRole( 'option', {
+			name: 'Search',
+		} );
+
+		// Select the Search block.
+		await searchBlockResult.click();
+
+		// Expect to see the Search block.
+		const searchBlock = editor.canvas.getByRole( 'document', {
+			name: 'Block: Search',
+		} );
+
+		await expect( searchBlock ).toBeVisible();
+
+		// The only way to access the inner controlled blocks of the Navigation block
+		// is to access the edited entity record for the associated Navigation Menu record.
+		const editedMenuRecord = await page.evaluate( ( menuId ) => {
+			return window.wp.data
+				.select( 'core' )
+				.getEditedEntityRecord( 'postType', 'wp_navigation', menuId );
+		}, createdMenu?.id );
+
+		// The 2nd block in the Navigation block is the Search block.
+		const searchBlockAttributes = editedMenuRecord.blocks[ 1 ].attributes;
+
+		expect( searchBlockAttributes ).toMatchObject( {
+			showLabel: false,
+			buttonUseIcon: true,
+			buttonPosition: 'button-inside',
+		} );
+	} );
+} );
diff --git a/test/e2e/specs/editor/plugins/block-variations.spec.js b/test/e2e/specs/editor/plugins/block-variations.spec.js
index 302bac732023c..0b445aee451c6 100644
--- a/test/e2e/specs/editor/plugins/block-variations.spec.js
+++ b/test/e2e/specs/editor/plugins/block-variations.spec.js
@@ -89,7 +89,7 @@ test.describe( 'Block variations', () => {
 		await page.keyboard.press( 'Enter' );
 
 		await expect(
-			editor.canvas.getByRole( 'document', { name: 'Paragraph block' } )
+			editor.canvas.getByRole( 'document', { name: 'Block: Paragraph' } )
 		).toHaveText( 'This is a success message!' );
 	} );
 
diff --git a/test/e2e/specs/editor/plugins/hooks-api.spec.js b/test/e2e/specs/editor/plugins/hooks-api.spec.js
index 9af8e6570eef3..b3b5ed68f66f1 100644
--- a/test/e2e/specs/editor/plugins/hooks-api.spec.js
+++ b/test/e2e/specs/editor/plugins/hooks-api.spec.js
@@ -41,7 +41,7 @@ test.describe( 'Using Hooks API', () => {
 		await page.keyboard.type( 'First paragraph' );
 
 		const paragraphBlock = editor.canvas.locator(
-			'role=document[name="Paragraph block"i]'
+			'role=document[name="Block: Paragraph"i]'
 		);
 		await expect( paragraphBlock ).toHaveText( 'First paragraph' );
 		await page.click(
diff --git a/test/e2e/specs/editor/various/block-deletion.spec.js b/test/e2e/specs/editor/various/block-deletion.spec.js
index 084cd008cdc44..9346412c46bcb 100644
--- a/test/e2e/specs/editor/various/block-deletion.spec.js
+++ b/test/e2e/specs/editor/various/block-deletion.spec.js
@@ -30,7 +30,7 @@ test.describe( 'Block deletion', () => {
 		await expect(
 			editor.canvas
 				.getByRole( 'document', {
-					name: 'Paragraph block',
+					name: 'Block: Paragraph',
 				} )
 				.last()
 		).toBeFocused();
@@ -78,7 +78,7 @@ test.describe( 'Block deletion', () => {
 
 		// Select the paragraph.
 		const paragraph = editor.canvas.getByRole( 'document', {
-			name: 'Paragraph block',
+			name: 'Block: Paragraph',
 		} );
 		await editor.selectBlocks( paragraph );
 
@@ -128,7 +128,7 @@ test.describe( 'Block deletion', () => {
 		await expect(
 			editor.canvas
 				.getByRole( 'document', {
-					name: 'Paragraph block',
+					name: 'Block: Paragraph',
 				} )
 				.last()
 		).toBeFocused();
@@ -307,7 +307,7 @@ test.describe( 'Block deletion', () => {
 		} );
 		await expect(
 			editor.canvas.getByRole( 'document', {
-				name: 'Paragraph block',
+				name: 'Block: Paragraph',
 			} )
 		).toBeFocused();
 
diff --git a/test/e2e/specs/editor/various/block-locking.spec.js b/test/e2e/specs/editor/various/block-locking.spec.js
index 481c476ac065b..67a7f0357bc2a 100644
--- a/test/e2e/specs/editor/various/block-locking.spec.js
+++ b/test/e2e/specs/editor/various/block-locking.spec.js
@@ -104,7 +104,7 @@ test.describe( 'Block Locking', () => {
 		} );
 
 		const paragraph = editor.canvas.getByRole( 'document', {
-			name: 'Paragraph block',
+			name: 'Block: Paragraph',
 		} );
 		await paragraph.click();
 
diff --git a/test/e2e/specs/editor/various/content-only-lock.spec.js b/test/e2e/specs/editor/various/content-only-lock.spec.js
index 8e07741db29b1..03282357a72b6 100644
--- a/test/e2e/specs/editor/various/content-only-lock.spec.js
+++ b/test/e2e/specs/editor/various/content-only-lock.spec.js
@@ -25,7 +25,7 @@ test.describe( 'Content-only lock', () => {
 
 		await pageUtils.pressKeys( 'secondary+M' );
 		await page.waitForSelector( 'iframe[name="editor-canvas"]' );
-		await editor.canvas.click( 'role=document[name="Paragraph block"i]' );
+		await editor.canvas.click( 'role=document[name="Block: Paragraph"i]' );
 		await page.keyboard.type( ' World' );
 		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
 	} );
@@ -50,7 +50,7 @@ test.describe( 'Content-only lock', () => {
 
 		await pageUtils.pressKeys( 'secondary+M' );
 		await page.waitForSelector( 'iframe[name="editor-canvas"]' );
-		await editor.canvas.click( 'role=document[name="Paragraph block"i]' );
+		await editor.canvas.click( 'role=document[name="Block: Paragraph"i]' );
 		await page.keyboard.type( ' WP' );
 		await expect.poll( editor.getBlocks ).toMatchObject( [
 			{
diff --git a/test/e2e/specs/editor/various/draggable-blocks.spec.js b/test/e2e/specs/editor/various/draggable-blocks.spec.js
index cd5fa12fca6f4..2d95e3bdefe97 100644
--- a/test/e2e/specs/editor/various/draggable-blocks.spec.js
+++ b/test/e2e/specs/editor/various/draggable-blocks.spec.js
@@ -43,7 +43,7 @@ test.describe( 'Draggable block', () => {
 <!-- /wp:paragraph -->` );
 
 		await editor.canvas.focus(
-			'role=document[name="Paragraph block"i] >> text=2'
+			'role=document[name="Block: Paragraph"i] >> text=2'
 		);
 		await editor.showBlockToolbar();
 
@@ -57,7 +57,7 @@ test.describe( 'Draggable block', () => {
 
 		// Move to and hover on the upper half of the paragraph block to trigger the indicator.
 		const firstParagraph = editor.canvas.locator(
-			'role=document[name="Paragraph block"i] >> text=1'
+			'role=document[name="Block: Paragraph"i] >> text=1'
 		);
 		const firstParagraphBound = await firstParagraph.boundingBox();
 		// Call the move function twice to make sure the `dragOver` event is sent.
@@ -115,7 +115,7 @@ test.describe( 'Draggable block', () => {
 <!-- /wp:paragraph -->` );
 
 		await editor.canvas.focus(
-			'role=document[name="Paragraph block"i] >> text=1'
+			'role=document[name="Block: Paragraph"i] >> text=1'
 		);
 		await editor.showBlockToolbar();
 
@@ -129,7 +129,7 @@ test.describe( 'Draggable block', () => {
 
 		// Move to and hover on the bottom half of the paragraph block to trigger the indicator.
 		const secondParagraph = editor.canvas.locator(
-			'role=document[name="Paragraph block"i] >> text=2'
+			'role=document[name="Block: Paragraph"i] >> text=2'
 		);
 		const secondParagraphBound = await secondParagraph.boundingBox();
 		// Call the move function twice to make sure the `dragOver` event is sent.
@@ -198,7 +198,7 @@ test.describe( 'Draggable block', () => {
 		} );
 
 		await editor.canvas.focus(
-			'role=document[name="Paragraph block"i] >> text=2'
+			'role=document[name="Block: Paragraph"i] >> text=2'
 		);
 		await editor.showBlockToolbar();
 
@@ -212,7 +212,7 @@ test.describe( 'Draggable block', () => {
 
 		// Move to and hover on the left half of the paragraph block to trigger the indicator.
 		const firstParagraph = editor.canvas.locator(
-			'role=document[name="Paragraph block"i] >> text=1'
+			'role=document[name="Block: Paragraph"i] >> text=1'
 		);
 		const firstParagraphBound = await firstParagraph.boundingBox();
 		// Call the move function twice to make sure the `dragOver` event is sent.
@@ -279,7 +279,7 @@ test.describe( 'Draggable block', () => {
 		} );
 
 		await editor.canvas.focus(
-			'role=document[name="Paragraph block"i] >> text=1'
+			'role=document[name="Block: Paragraph"i] >> text=1'
 		);
 		await editor.showBlockToolbar();
 
@@ -293,7 +293,7 @@ test.describe( 'Draggable block', () => {
 
 		// Move to and hover on the right half of the paragraph block to trigger the indicator.
 		const secondParagraph = editor.canvas.locator(
-			'role=document[name="Paragraph block"i] >> text=2'
+			'role=document[name="Block: Paragraph"i] >> text=2'
 		);
 		const secondParagraphBound = await secondParagraph.boundingBox();
 		// Call the move function twice to make sure the `dragOver` event is sent.
diff --git a/test/e2e/specs/editor/various/footnotes.spec.js b/test/e2e/specs/editor/various/footnotes.spec.js
index e024964831dfe..e3aa17c5a101c 100644
--- a/test/e2e/specs/editor/various/footnotes.spec.js
+++ b/test/e2e/specs/editor/various/footnotes.spec.js
@@ -348,6 +348,7 @@ test.describe( 'Footnotes', () => {
 
 		await previewPage.close();
 		await editorPage.bringToFront();
+		await editor.canvas.click( 'p:text("first paragraph")' );
 
 		// Open revisions.
 		await editor.openDocumentSettingsSidebar();
@@ -391,9 +392,10 @@ test.describe( 'Footnotes', () => {
 
 		await page.keyboard.type( '1' );
 
-		// Publish post.
-		await editor.publishPost();
+		// Publish post with the footnote set to "1".
+		const postId = await editor.publishPost();
 
+		// Test previewing changes to meta.
 		await editor.canvas.click( 'ol.wp-block-footnotes li span' );
 		await page.keyboard.press( 'End' );
 		await page.keyboard.type( '2' );
@@ -408,8 +410,7 @@ test.describe( 'Footnotes', () => {
 		await previewPage.close();
 		await editorPage.bringToFront();
 
-		// Test again, this time with an existing revision (different code
-		// path).
+		// Test again, this time with an existing revision (different code path).
 		await editor.canvas.click( 'ol.wp-block-footnotes li span' );
 		await page.keyboard.press( 'End' );
 		// Test slashing.
@@ -421,5 +422,22 @@ test.describe( 'Footnotes', () => {
 		await expect(
 			previewPage2.locator( 'ol.wp-block-footnotes li' )
 		).toHaveText( '123″  ↩︎' );
+
+		// Verify that the published post is unchanged after previewing changes to meta.
+		await previewPage2.close();
+		await editorPage.bringToFront();
+		await editor.openDocumentSettingsSidebar();
+		await page
+			.getByRole( 'region', { name: 'Editor settings' } )
+			.getByRole( 'button', { name: 'Post' } )
+			.click();
+
+		// Visit the published post.
+		await page.goto( `/?p=${ postId }` );
+
+		// Verify that the published post footnote still says "1".
+		await expect( page.locator( 'ol.wp-block-footnotes li' ) ).toHaveText(
+			'1 ↩︎'
+		);
 	} );
 } );
diff --git a/test/e2e/specs/editor/various/list-view.spec.js b/test/e2e/specs/editor/various/list-view.spec.js
index fb869e1ad838f..7fd21085deae2 100644
--- a/test/e2e/specs/editor/various/list-view.spec.js
+++ b/test/e2e/specs/editor/various/list-view.spec.js
@@ -275,7 +275,7 @@ test.describe( 'List View', () => {
 		} );
 		await expect(
 			editor.canvas.getByRole( 'document', {
-				name: 'Paragraph block',
+				name: 'Block: Paragraph',
 			} )
 		).toBeFocused();
 
diff --git a/test/e2e/specs/editor/various/multi-block-selection.spec.js b/test/e2e/specs/editor/various/multi-block-selection.spec.js
index 3f2c0e38d7b95..3374a13b98eb7 100644
--- a/test/e2e/specs/editor/various/multi-block-selection.spec.js
+++ b/test/e2e/specs/editor/various/multi-block-selection.spec.js
@@ -162,7 +162,7 @@ test.describe( 'Multi-block selection', () => {
 			} );
 		}
 		await editor.canvas
-			.getByRole( 'document', { name: 'Paragraph block' } )
+			.getByRole( 'document', { name: 'Block: Paragraph' } )
 			.filter( { hasText: '3' } )
 			.click();
 
@@ -262,7 +262,7 @@ test.describe( 'Multi-block selection', () => {
 		await page.keyboard.type( '2' );
 
 		await editor.canvas
-			.getByRole( 'document', { name: 'Paragraph block' } )
+			.getByRole( 'document', { name: 'Block: Paragraph' } )
 			.filter( { hasText: '1' } )
 			.click( { modifiers: [ 'Shift' ] } );
 
@@ -279,11 +279,11 @@ test.describe( 'Multi-block selection', () => {
 			.getByRole( 'button', { name: 'Group' } )
 			.click();
 		await editor.canvas
-			.getByRole( 'document', { name: 'Paragraph block' } )
+			.getByRole( 'document', { name: 'Block: Paragraph' } )
 			.filter( { hasText: '1' } )
 			.click();
 		await editor.canvas
-			.getByRole( 'document', { name: 'Paragraph block' } )
+			.getByRole( 'document', { name: 'Block: Paragraph' } )
 			.filter( { hasText: '2' } )
 			.click( { modifiers: [ 'Shift' ] } );
 
@@ -327,7 +327,7 @@ test.describe( 'Multi-block selection', () => {
 		} );
 
 		await editor.canvas
-			.getByRole( 'document', { name: 'Paragraph block' } )
+			.getByRole( 'document', { name: 'Block: Paragraph' } )
 			.click( { modifiers: [ 'Shift' ] } );
 		await pageUtils.pressKeys( 'primary+a' );
 		await page.keyboard.type( 'new content' );
@@ -360,12 +360,12 @@ test.describe( 'Multi-block selection', () => {
 		} );
 
 		await editor.canvas
-			.getByRole( 'document', { name: 'Paragraph block' } )
+			.getByRole( 'document', { name: 'Block: Paragraph' } )
 			.filter( { hasText: 'group' } )
 			.nth( 1 )
 			.click();
 		await editor.canvas
-			.getByRole( 'document', { name: 'Paragraph block' } )
+			.getByRole( 'document', { name: 'Block: Paragraph' } )
 			.filter( { hasText: 'first' } )
 			.click( { modifiers: [ 'Shift' ] } );
 
@@ -389,7 +389,7 @@ test.describe( 'Multi-block selection', () => {
 		} );
 
 		const paragraphBlock = editor.canvas.getByRole( 'document', {
-			name: 'Paragraph block',
+			name: 'Block: Paragraph',
 		} );
 		const { height } = await paragraphBlock.boundingBox();
 		await paragraphBlock.click( { position: { x: 0, y: height / 2 } } );
@@ -429,7 +429,7 @@ test.describe( 'Multi-block selection', () => {
 		await page.keyboard.press( 'ArrowDown' );
 
 		const [ paragraph1, paragraph2 ] = await editor.canvas
-			.getByRole( 'document', { name: 'Paragraph block' } )
+			.getByRole( 'document', { name: 'Block: Paragraph' } )
 			.all();
 
 		await paragraph1.hover();
@@ -466,7 +466,7 @@ test.describe( 'Multi-block selection', () => {
 		await page.keyboard.press( 'ArrowDown' );
 
 		const [ paragraph1, paragraph2 ] = await editor.canvas
-			.getByRole( 'document', { name: 'Paragraph block' } )
+			.getByRole( 'document', { name: 'Block: Paragraph' } )
 			.all();
 
 		await paragraph1.hover();
@@ -644,7 +644,7 @@ test.describe( 'Multi-block selection', () => {
 		}
 
 		const [ , paragraph2, paragraph3 ] = await editor.canvas
-			.getByRole( 'document', { name: 'Paragraph block' } )
+			.getByRole( 'document', { name: 'Block: Paragraph' } )
 			.all();
 
 		// Focus the last paragraph block and hide the block toolbar.
@@ -700,7 +700,7 @@ test.describe( 'Multi-block selection', () => {
 
 		const paragraph1 = editor.canvas
 			.getByRole( 'document', {
-				name: 'Paragraph block',
+				name: 'Block: Paragraph',
 			} )
 			.filter( { hasText: '1' } );
 		await paragraph1.click( {
@@ -803,7 +803,7 @@ test.describe( 'Multi-block selection', () => {
 		} );
 		// Focus the last paragraph block.
 		await editor.canvas
-			.getByRole( 'document', { name: 'Paragraph block' } )
+			.getByRole( 'document', { name: 'Block: Paragraph' } )
 			.nth( 1 )
 			.click();
 
@@ -1162,7 +1162,7 @@ test.describe( 'Multi-block selection', () => {
 
 		// Focus and move the caret to the right of the first paragraph.
 		await editor.canvas
-			.getByRole( 'document', { name: 'Paragraph block' } )
+			.getByRole( 'document', { name: 'Block: Paragraph' } )
 			.filter( { hasText: 'a' } )
 			.click();
 
@@ -1200,7 +1200,7 @@ test.describe( 'Multi-block selection', () => {
 		} );
 		// Focus and move the caret to the end.
 		await editor.canvas
-			.getByRole( 'document', { name: 'Paragraph block' } )
+			.getByRole( 'document', { name: 'Block: Paragraph' } )
 			.filter( { hasText: ']2' } )
 			.click();
 
@@ -1211,7 +1211,7 @@ test.describe( 'Multi-block selection', () => {
 		const strongBox = await strongText.boundingBox();
 		// Focus and move the caret to the end.
 		await editor.canvas
-			.getByRole( 'document', { name: 'Paragraph block' } )
+			.getByRole( 'document', { name: 'Block: Paragraph' } )
 			.filter( { hasText: '1[' } )
 			.click( {
 				// Ensure clicking on the right half of the element.
@@ -1296,7 +1296,7 @@ test.describe( 'Multi-block selection', () => {
 		await page.keyboard.press( 'ArrowUp' );
 
 		await editor.canvas
-			.getByRole( 'document', { name: 'Paragraph block' } )
+			.getByRole( 'document', { name: 'Block: Paragraph' } )
 			.hover();
 		await page.mouse.down();
 		await editor.canvas
diff --git a/test/e2e/specs/editor/various/toolbar-roving-tabindex.spec.js b/test/e2e/specs/editor/various/toolbar-roving-tabindex.spec.js
index d17cef9215f4a..17746bf95fe23 100644
--- a/test/e2e/specs/editor/various/toolbar-roving-tabindex.spec.js
+++ b/test/e2e/specs/editor/various/toolbar-roving-tabindex.spec.js
@@ -26,14 +26,14 @@ test.describe( 'Toolbar roving tabindex', () => {
 		await editor.insertBlock( { name: 'core/paragraph' } );
 		await page.keyboard.type( 'Paragraph' );
 		await ToolbarRovingTabindexUtils.testBlockToolbarKeyboardNavigation(
-			'Paragraph block',
+			'Block: Paragraph',
 			'Paragraph'
 		);
 		await ToolbarRovingTabindexUtils.wrapCurrentBlockWithGroup(
 			'Paragraph'
 		);
 		await ToolbarRovingTabindexUtils.testGroupKeyboardNavigation(
-			'Paragraph block',
+			'Block: Paragraph',
 			'Paragraph'
 		);
 
diff --git a/test/e2e/specs/editor/various/writing-flow.spec.js b/test/e2e/specs/editor/various/writing-flow.spec.js
index 44ffb33e7a00c..81bbcbbc758b9 100644
--- a/test/e2e/specs/editor/various/writing-flow.spec.js
+++ b/test/e2e/specs/editor/various/writing-flow.spec.js
@@ -385,7 +385,7 @@ test.describe( 'Writing Flow (@firefox, @webkit)', () => {
 		// Should navigate to the next block.
 		await page.keyboard.press( 'ArrowDown' );
 		await expect(
-			editor.canvas.locator( 'role=document[name="Paragraph block"i]' )
+			editor.canvas.locator( 'role=document[name="Block: Paragraph"i]' )
 		).toHaveClass( /is-selected/ );
 	} );
 
@@ -805,7 +805,7 @@ test.describe( 'Writing Flow (@firefox, @webkit)', () => {
 		await page.keyboard.press( 'ArrowUp' );
 
 		const paragraphBlock = editor.canvas
-			.locator( 'role=document[name="Paragraph block"i]' )
+			.locator( 'role=document[name="Block: Paragraph"i]' )
 			.first();
 		const paragraphRect = await paragraphBlock.boundingBox();
 		const x = paragraphRect.x + ( 2 * paragraphRect.width ) / 3;
@@ -870,7 +870,7 @@ test.describe( 'Writing Flow (@firefox, @webkit)', () => {
 <!-- /wp:image -->` );
 
 		const paragraphBlock = editor.canvas.locator(
-			'role=document[name="Paragraph block"i]'
+			'role=document[name="Block: Paragraph"i]'
 		);
 
 		// Find a point outside the paragraph between the blocks where it's
@@ -975,7 +975,7 @@ test.describe( 'Writing Flow (@firefox, @webkit)', () => {
 		await page.mouse.up();
 
 		await expect(
-			editor.canvas.locator( 'role=document[name="Paragraph block"i]' )
+			editor.canvas.locator( 'role=document[name="Block: Paragraph"i]' )
 		).toHaveClass( /is-selected/ );
 	} );
 
@@ -1037,7 +1037,7 @@ test.describe( 'Writing Flow (@firefox, @webkit)', () => {
 
 		// Expect the "." to be added at the start of the paragraph
 		await expect(
-			editor.canvas.locator( 'role=document[name="Paragraph block"i]' )
+			editor.canvas.locator( 'role=document[name="Block: Paragraph"i]' )
 		).toHaveText( /^\.a+$/ );
 	} );
 
@@ -1071,7 +1071,7 @@ test.describe( 'Writing Flow (@firefox, @webkit)', () => {
 
 		// Expect the "." to be added at the start of the paragraph
 		await expect(
-			editor.canvas.locator( 'role=document[name="Paragraph block"i]' )
+			editor.canvas.locator( 'role=document[name="Block: Paragraph"i]' )
 		).toHaveText( /^a+\.a$/ );
 	} );
 
@@ -1107,7 +1107,7 @@ test.describe( 'Writing Flow (@firefox, @webkit)', () => {
 		// Expect the "." to be added at the start of the paragraph
 		await expect(
 			editor.canvas.locator(
-				'role=document[name="Paragraph block"i] >> nth = 0'
+				'role=document[name="Block: Paragraph"i] >> nth = 0'
 			)
 		).toHaveText( /^.a+$/ );
 	} );
diff --git a/test/e2e/specs/site-editor/pages.spec.js b/test/e2e/specs/site-editor/pages.spec.js
index e6a0b7f266cbf..d1f32b9f209d7 100644
--- a/test/e2e/specs/site-editor/pages.spec.js
+++ b/test/e2e/specs/site-editor/pages.spec.js
@@ -190,7 +190,7 @@ test.describe( 'Pages', () => {
 		await templateOptionsButton.click();
 		const resetButton = page
 			.getByRole( 'menu', { name: 'Template options' } )
-			.getByText( 'Reset' );
+			.getByText( 'Use default template' );
 		await expect( resetButton ).toBeVisible();
 		await resetButton.click();
 		await expect( templateOptionsButton ).toHaveText( 'Single Entries' );
diff --git a/test/e2e/specs/site-editor/patterns.spec.js b/test/e2e/specs/site-editor/patterns.spec.js
new file mode 100644
index 0000000000000..6703deb0285fa
--- /dev/null
+++ b/test/e2e/specs/site-editor/patterns.spec.js
@@ -0,0 +1,115 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Patterns', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'emptytheme' );
+		await requestUtils.deleteAllBlocks();
+	} );
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'twentytwentyone' );
+	} );
+
+	test.afterEach( async ( { requestUtils } ) => {
+		await requestUtils.deleteAllBlocks();
+	} );
+
+	test( 'create a new pattern', async ( { page, editor, admin } ) => {
+		await admin.visitSiteEditor();
+
+		const navigation = page.getByRole( 'region', { name: 'Navigation' } );
+		const patternsContent = page.getByRole( 'region', {
+			name: 'Patterns content',
+		} );
+
+		await navigation.getByRole( 'button', { name: 'Patterns' } ).click();
+
+		await expect(
+			navigation.getByRole( 'heading', { name: 'Patterns', level: 1 } )
+		).toBeVisible();
+		await expect( patternsContent ).toContainText( 'No patterns found.' );
+
+		await navigation
+			.getByRole( 'button', { name: 'Create pattern' } )
+			.click();
+
+		const createPatternMenu = page.getByRole( 'menu', {
+			name: 'Create pattern',
+		} );
+		await expect(
+			createPatternMenu.getByRole( 'menuitem', {
+				name: 'Create pattern',
+			} )
+		).toBeFocused();
+		await createPatternMenu
+			.getByRole( 'menuitem', { name: 'Create pattern' } )
+			.click();
+
+		const createPatternDialog = page.getByRole( 'dialog', {
+			name: 'Create pattern',
+		} );
+		await createPatternDialog
+			.getByRole( 'textbox', { name: 'Name' } )
+			.fill( 'My pattern' );
+		await page.keyboard.press( 'Enter' );
+		await expect(
+			createPatternDialog.getByRole( 'button', { name: 'Create' } )
+		).toBeDisabled();
+
+		await expect( page ).toHaveTitle( /^My pattern/ );
+		await expect(
+			page
+				.getByRole( 'region', { name: 'Editor top bar' } )
+				.getByRole( 'heading', { name: 'My pattern', level: 1 } )
+		).toBeVisible();
+
+		await editor.canvas
+			.getByRole( 'button', { name: 'Add default block' } )
+			.click();
+		await page.keyboard.type( 'My pattern' );
+
+		await page
+			.getByRole( 'region', { name: 'Editor top bar' } )
+			.getByRole( 'button', { name: 'Save' } )
+			.click();
+		await page
+			.getByRole( 'region', { name: 'Save panel' } )
+			.getByRole( 'button', { name: 'Save' } )
+			.click();
+		await expect(
+			page.getByRole( 'button', { name: 'Dismiss this notice' } )
+		).toContainText( 'Site updated' );
+
+		await page.getByRole( 'button', { name: 'Open navigation' } ).click();
+		await navigation.getByRole( 'button', { name: 'Back' } ).click();
+		// TODO: await expect( page ).toHaveTitle( /^Patterns/ );
+
+		await expect(
+			navigation.getByRole( 'button', { name: 'All patterns' } )
+		).toContainText( '1' );
+		await expect(
+			navigation.getByRole( 'button', { name: 'My patterns' } )
+		).toContainText( '1' );
+		await expect(
+			navigation.getByRole( 'button', { name: 'Uncategorized' } )
+		).toContainText( '1' );
+
+		await expect(
+			patternsContent.getByRole( 'heading', {
+				name: 'All patterns',
+				level: 2,
+			} )
+		).toBeVisible();
+		const patternsList = patternsContent.getByRole( 'list', {
+			name: 'All patterns',
+		} );
+		await expect( patternsList.getByRole( 'listitem' ) ).toHaveCount( 1 );
+		await expect(
+			patternsList
+				.getByRole( 'heading', { name: 'My pattern' } )
+				.getByRole( 'button', { name: 'My pattern', exact: true } )
+		).toBeVisible();
+	} );
+} );
diff --git a/test/e2e/specs/widgets/customizing-widgets.spec.js b/test/e2e/specs/widgets/customizing-widgets.spec.js
index d51d5cffbebb2..e771c92fc24ee 100644
--- a/test/e2e/specs/widgets/customizing-widgets.spec.js
+++ b/test/e2e/specs/widgets/customizing-widgets.spec.js
@@ -147,7 +147,7 @@ test.describe( 'Widgets Customizer', () => {
 		// Go back to the widgets editor.
 		await backButton.click();
 		await expect( widgetsFooter1Heading ).toBeVisible();
-		await expect( inspectorHeading ).not.toBeVisible();
+		await expect( inspectorHeading ).toBeHidden();
 
 		await editor.clickBlockToolbarButton( 'Options' );
 		await showMoreSettingsButton.click();
@@ -161,7 +161,7 @@ test.describe( 'Widgets Customizer', () => {
 		// Go back to the widgets editor.
 		await expect( widgetsFooter1Heading ).toBeVisible();
 
-		await expect( inspectorHeading ).not.toBeVisible();
+		await expect( inspectorHeading ).toBeHidden();
 	} );
 
 	test( 'should handle the inserter outer section', async ( {
@@ -207,11 +207,11 @@ test.describe( 'Widgets Customizer', () => {
 		await expect( publishSettings ).toBeVisible();
 
 		// Expect the inserter outer section to be closed.
-		await expect( inserterHeading ).not.toBeVisible();
+		await expect( inserterHeading ).toBeHidden();
 
 		// Focus the block and start typing to hide the block toolbar.
 		// Shouldn't be needed if we automatically hide the toolbar on blur.
-		await page.focus( 'role=document[name="Paragraph block"i]' );
+		await page.focus( 'role=document[name="Block: Paragraph"i]' );
 		await page.keyboard.type( ' ' );
 
 		// Open the inserter outer section.
@@ -226,7 +226,7 @@ test.describe( 'Widgets Customizer', () => {
 		await page.click( 'role=button[name=/Back$/] >> visible=true' );
 
 		// Expect the inserter outer section to be closed.
-		await expect( inserterHeading ).not.toBeVisible();
+		await expect( inserterHeading ).toBeHidden();
 	} );
 
 	test( 'should move focus to the block', async ( {
@@ -262,7 +262,7 @@ test.describe( 'Widgets Customizer', () => {
 		await editParagraphWidget.click();
 
 		const firstParagraphBlock = page.locator(
-			'role=document[name="Paragraph block"i] >> text="First Paragraph"'
+			'role=document[name="Block: Paragraph"i] >> text="First Paragraph"'
 		);
 		await expect( firstParagraphBlock ).toBeFocused();
 
@@ -315,7 +315,7 @@ test.describe( 'Widgets Customizer', () => {
 			await page.click(
 				'role=heading[name="Customizing ▸ Widgets Footer #1"i][level=3]'
 			);
-			await expect( blockToolbar ).not.toBeVisible();
+			await expect( blockToolbar ).toBeHidden();
 
 			await paragraphBlock.focus();
 			await editor.showBlockToolbar();
@@ -324,7 +324,7 @@ test.describe( 'Widgets Customizer', () => {
 		// Expect clicking on the preview iframe should clear the selection.
 		{
 			await page.click( '#customize-preview' );
-			await expect( blockToolbar ).not.toBeVisible();
+			await expect( blockToolbar ).toBeHidden();
 
 			await paragraphBlock.focus();
 			await editor.showBlockToolbar();
@@ -339,7 +339,7 @@ test.describe( 'Widgets Customizer', () => {
 			const { x, y, width, height } = await editorContainer.boundingBox();
 			// Simulate Clicking on the empty space at the end of the editor.
 			await page.mouse.click( x + width / 2, y + height + 10 );
-			await expect( blockToolbar ).not.toBeVisible();
+			await expect( blockToolbar ).toBeHidden();
 		}
 	} );
 
@@ -460,7 +460,7 @@ test.describe( 'Widgets Customizer', () => {
 		// Expect pressing the Escape key to close the dropdown,
 		// but not close the editor.
 		await page.keyboard.press( 'Escape' );
-		await expect( optionsMenu ).not.toBeVisible();
+		await expect( optionsMenu ).toBeHidden();
 		await expect( paragraphBlock ).toBeVisible();
 
 		await paragraphBlock.focus();
@@ -496,7 +496,7 @@ test.describe( 'Widgets Customizer', () => {
 
 		// Refocus the paragraph block.
 		await page.focus(
-			'*role=document[name="Paragraph block"i] >> text="First Paragraph"'
+			'*role=document[name="Block: Paragraph"i] >> text="First Paragraph"'
 		);
 		await editor.clickBlockToolbarButton( 'Move to widget area' );
 
@@ -511,7 +511,7 @@ test.describe( 'Widgets Customizer', () => {
 
 		// The paragraph block should be moved to the new sidebar and have focus.
 		const movedParagraphBlock = page.locator(
-			'*role=document[name="Paragraph block"i] >> text="First Paragraph"'
+			'*role=document[name="Block: Paragraph"i] >> text="First Paragraph"'
 		);
 		await expect( movedParagraphBlock ).toBeVisible();
 		await expect( movedParagraphBlock ).toBeFocused();
@@ -528,7 +528,7 @@ test.describe( 'Widgets Customizer', () => {
 		// integrate the G sidebar inside the customizer.
 		await expect(
 			page.locator( 'role=heading[name=/Block Settings/][level=3]' )
-		).not.toBeVisible();
+		).toBeHidden();
 	} );
 
 	test( 'should stay in block settings after making a change in that area', async ( {
@@ -554,7 +554,7 @@ test.describe( 'Widgets Customizer', () => {
 		).toBeDisabled();
 
 		// Select the paragraph block
-		await page.focus( 'role=document[name="Paragraph block"i]' );
+		await page.focus( 'role=document[name="Block: Paragraph"i]' );
 
 		// Click the three dots button, then click "Show More Settings".
 		await editor.clickBlockToolbarButton( 'Options' );
diff --git a/test/performance/fixtures/index.js b/test/performance/fixtures/index.js
new file mode 100644
index 0000000000000..0f68fc5637f5a
--- /dev/null
+++ b/test/performance/fixtures/index.js
@@ -0,0 +1 @@
+export { PerfUtils } from './perf-utils';
diff --git a/test/performance/fixtures/perf-utils.ts b/test/performance/fixtures/perf-utils.ts
new file mode 100644
index 0000000000000..a61af86684e6b
--- /dev/null
+++ b/test/performance/fixtures/perf-utils.ts
@@ -0,0 +1,181 @@
+/**
+ * WordPress dependencies
+ */
+import { expect } from '@wordpress/e2e-test-utils-playwright';
+
+/**
+ * External dependencies
+ */
+import fs from 'fs';
+import path from 'path';
+import type { Locator, Page } from '@playwright/test';
+
+/**
+ * Internal dependencies
+ */
+import { readFile } from '../utils.js';
+
+type PerfUtilsConstructorProps = {
+	page: Page;
+};
+
+export class PerfUtils {
+	page: Page;
+
+	constructor( { page }: PerfUtilsConstructorProps ) {
+		this.page = page;
+	}
+
+	/**
+	 * Returns the locator for the editor canvas element. This supports both the
+	 * legacy and the iframed canvas.
+	 *
+	 * @return Locator for the editor canvas element.
+	 */
+	async getCanvas() {
+		return await Promise.any( [
+			( async () => {
+				const legacyCanvasLocator = this.page.locator(
+					'.wp-block-post-content'
+				);
+				await legacyCanvasLocator.waitFor( {
+					timeout: 120_000,
+				} );
+				return legacyCanvasLocator;
+			} )(),
+			( async () => {
+				const iframedCanvasLocator = this.page.frameLocator(
+					'[name=editor-canvas]'
+				);
+				await iframedCanvasLocator
+					.locator( 'body' )
+					.waitFor( { timeout: 120_000 } );
+				return iframedCanvasLocator;
+			} )(),
+		] );
+	}
+
+	/**
+	 * Saves the post as a draft and returns its URL.
+	 *
+	 * @return URL of the saved draft.
+	 */
+	async saveDraft() {
+		await this.page
+			.getByRole( 'button', { name: 'Save draft' } )
+			.click( { timeout: 60_000 } );
+		await expect(
+			this.page.getByRole( 'button', { name: 'Saved' } )
+		).toBeDisabled();
+
+		return this.page.url();
+	}
+
+	/**
+	 * Disables the editor autosave function.
+	 */
+	async disableAutosave() {
+		await this.page.evaluate( () => {
+			return window.wp.data
+				.dispatch( 'core/editor' )
+				.updateEditorSettings( {
+					autosaveInterval: 100000000000,
+					localAutosaveInterval: 100000000000,
+				} );
+		} );
+
+		const { autosaveInterval } = await this.page.evaluate( () => {
+			return window.wp.data.select( 'core/editor' ).getEditorSettings();
+		} );
+
+		expect( autosaveInterval ).toBe( 100000000000 );
+	}
+
+	/**
+	 * Enters the Site Editor's edit mode.
+	 *
+	 * @return Locator for the editor canvas element.
+	 */
+	async enterSiteEditorEditMode() {
+		const canvas = await this.getCanvas();
+
+		await canvas.locator( 'body' ).click();
+		await canvas
+			.getByRole( 'document', { name: /Block:( Post)? Content/ } )
+			.click();
+
+		return canvas;
+	}
+
+	/**
+	 * Loads blocks from the small post with containers fixture into the editor
+	 * canvas.
+	 */
+	async loadBlocksForSmallPostWithContainers() {
+		return await this.loadBlocksFromHtml(
+			path.join(
+				process.env.ASSETS_PATH!,
+				'small-post-with-containers.html'
+			)
+		);
+	}
+
+	/**
+	 * Loads blocks from the large post fixture into the editor canvas.
+	 */
+	async loadBlocksForLargePost() {
+		return await this.loadBlocksFromHtml(
+			path.join( process.env.ASSETS_PATH!, 'large-post.html' )
+		);
+	}
+
+	/**
+	 * Loads blocks from an HTML fixture with given path into the editor canvas.
+	 *
+	 * @param filepath Path to the HTML fixture.
+	 */
+	async loadBlocksFromHtml( filepath: string ) {
+		if ( ! fs.existsSync( filepath ) ) {
+			throw new Error( `File not found: ${ filepath }` );
+		}
+
+		return await this.page.evaluate( ( html: string ) => {
+			const { parse } = window.wp.blocks;
+			const { dispatch } = window.wp.data;
+			const blocks = parse( html );
+
+			blocks.forEach( ( block: any ) => {
+				if ( block.name === 'core/image' ) {
+					delete block.attributes.id;
+					delete block.attributes.url;
+				}
+			} );
+
+			dispatch( 'core/block-editor' ).resetBlocks( blocks );
+		}, readFile( filepath ) );
+	}
+
+	/**
+	 * Generates and loads a 1000 empty paragraphs into the editor canvas.
+	 */
+	async load1000Paragraphs() {
+		await this.page.evaluate( () => {
+			const { createBlock } = window.wp.blocks;
+			const { dispatch } = window.wp.data;
+			const blocks = Array.from( { length: 1000 } ).map( () =>
+				createBlock( 'core/paragraph' )
+			);
+			dispatch( 'core/block-editor' ).resetBlocks( blocks );
+		} );
+	}
+
+	async expectExpandedState( locator: Locator, state: 'true' | 'false' ) {
+		return await Promise.any( [
+			// eslint-disable-next-line playwright/missing-playwright-await
+			expect( locator ).toHaveAttribute( 'aria-expanded', state ),
+			// Legacy selector.
+			// eslint-disable-next-line playwright/missing-playwright-await
+			expect( locator ).toHaveAttribute( 'aria-pressed', state ),
+		] );
+	}
+}
diff --git a/test/performance/specs/front-end-block-theme.spec.js b/test/performance/specs/front-end-block-theme.spec.js
index 5cd05b79495ac..ca48535a21a46 100644
--- a/test/performance/specs/front-end-block-theme.spec.js
+++ b/test/performance/specs/front-end-block-theme.spec.js
@@ -1,7 +1,9 @@
+/* eslint-disable playwright/no-conditional-in-test, playwright/expect-expect */
+
 /**
  * WordPress dependencies
  */
-const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+import { test, Metrics } from '@wordpress/e2e-test-utils-playwright';
 
 const results = {
 	timeToFirstByte: [],
@@ -10,7 +12,12 @@ const results = {
 };
 
 test.describe( 'Front End Performance', () => {
-	test.use( { storageState: {} } ); // User will be logged out.
+	test.use( {
+		storageState: {}, // User will be logged out.
+		metrics: async ( { page }, use ) => {
+			await use( new Metrics( { page } ) );
+		},
+	} );
 
 	test.beforeAll( async ( { requestUtils } ) => {
 		await requestUtils.activateTheme( 'twentytwentythree' );
@@ -26,25 +33,22 @@ test.describe( 'Front End Performance', () => {
 
 	const samples = 16;
 	const throwaway = 0;
-	const rounds = samples + throwaway;
-	for ( let i = 0; i < rounds; i++ ) {
-		test( `Measure TTFB, LCP, and LCP-TTFB (${
-			i + 1
-		} of ${ rounds })`, async ( { page, metrics } ) => {
+	const iterations = samples + throwaway;
+	for ( let i = 1; i <= iterations; i++ ) {
+		test( `Measure TTFB, LCP, and LCP-TTFB (${ i } of ${ iterations })`, async ( {
+			page,
+			metrics,
+		} ) => {
 			// Go to the base URL.
 			// eslint-disable-next-line playwright/no-networkidle
 			await page.goto( '/', { waitUntil: 'networkidle' } );
 
 			// Take the measurements.
-			const lcp = await metrics.getLargestContentfulPaint();
 			const ttfb = await metrics.getTimeToFirstByte();
-
-			// Ensure the numbers are valid.
-			expect( lcp ).toBeGreaterThan( 0 );
-			expect( ttfb ).toBeGreaterThan( 0 );
+			const lcp = await metrics.getLargestContentfulPaint();
 
 			// Save the results.
-			if ( i >= throwaway ) {
+			if ( i > throwaway ) {
 				results.largestContentfulPaint.push( lcp );
 				results.timeToFirstByte.push( ttfb );
 				results.lcpMinusTtfb.push( lcp - ttfb );
@@ -52,3 +56,5 @@ test.describe( 'Front End Performance', () => {
 		} );
 	}
 } );
+
+/* eslint-enable playwright/no-conditional-in-test, playwright/expect-expect */
diff --git a/test/performance/specs/front-end-classic-theme.spec.js b/test/performance/specs/front-end-classic-theme.spec.js
index 68e833fe3f999..0b6c3ec22c046 100644
--- a/test/performance/specs/front-end-classic-theme.spec.js
+++ b/test/performance/specs/front-end-classic-theme.spec.js
@@ -1,7 +1,9 @@
+/* eslint-disable playwright/no-conditional-in-test, playwright/expect-expect */
+
 /**
  * WordPress dependencies
  */
-const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+import { test, Metrics } from '@wordpress/e2e-test-utils-playwright';
 
 const results = {
 	timeToFirstByte: [],
@@ -10,7 +12,12 @@ const results = {
 };
 
 test.describe( 'Front End Performance', () => {
-	test.use( { storageState: {} } ); // User will be logged out.
+	test.use( {
+		storageState: {}, // User will be logged out.
+		metrics: async ( { page }, use ) => {
+			await use( new Metrics( { page } ) );
+		},
+	} );
 
 	test.beforeAll( async ( { requestUtils } ) => {
 		await requestUtils.activateTheme( 'twentytwentyone' );
@@ -25,9 +32,9 @@ test.describe( 'Front End Performance', () => {
 
 	const samples = 16;
 	const throwaway = 0;
-	const rounds = samples + throwaway;
-	for ( let i = 1; i <= rounds; i++ ) {
-		test( `Report TTFB, LCP, and LCP-TTFB (${ i } of ${ rounds })`, async ( {
+	const iterations = samples + throwaway;
+	for ( let i = 1; i <= iterations; i++ ) {
+		test( `Measure TTFB, LCP, and LCP-TTFB (${ i } of ${ iterations })`, async ( {
 			page,
 			metrics,
 		} ) => {
@@ -36,15 +43,11 @@ test.describe( 'Front End Performance', () => {
 			await page.goto( '/', { waitUntil: 'networkidle' } );
 
 			// Take the measurements.
-			const lcp = await metrics.getLargestContentfulPaint();
 			const ttfb = await metrics.getTimeToFirstByte();
-
-			// Ensure the numbers are valid.
-			expect( lcp ).toBeGreaterThan( 0 );
-			expect( ttfb ).toBeGreaterThan( 0 );
+			const lcp = await metrics.getLargestContentfulPaint();
 
 			// Save the results.
-			if ( i >= throwaway ) {
+			if ( i > throwaway ) {
 				results.largestContentfulPaint.push( lcp );
 				results.timeToFirstByte.push( ttfb );
 				results.lcpMinusTtfb.push( lcp - ttfb );
@@ -52,3 +55,5 @@ test.describe( 'Front End Performance', () => {
 		} );
 	}
 } );
+
+/* eslint-enable playwright/no-conditional-in-test, playwright/expect-expect */
diff --git a/test/performance/specs/post-editor.spec.js b/test/performance/specs/post-editor.spec.js
index aa789f646516c..7f59033046527 100644
--- a/test/performance/specs/post-editor.spec.js
+++ b/test/performance/specs/post-editor.spec.js
@@ -1,26 +1,15 @@
-/**
- * WordPress dependencies
- */
-const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+/* eslint-disable playwright/no-conditional-in-test, playwright/expect-expect */
 
 /**
- * External dependencies
+ * WordPress dependencies
  */
-const path = require( 'path' );
+import { test, Metrics } from '@wordpress/e2e-test-utils-playwright';
 
 /**
  * Internal dependencies
  */
-const {
-	getTypingEventDurations,
-	getClickEventDurations,
-	getHoverEventDurations,
-	getSelectionEventDurations,
-	getLoadingDurations,
-	loadBlocksFromHtml,
-	load1000Paragraphs,
-	sum,
-} = require( '../utils' );
+import { PerfUtils } from '../fixtures';
+import { sum } from '../utils.js';
 
 // See https://github.com/WordPress/gutenberg/issues/51383#issuecomment-1613460429
 const BROWSER_IDLE_WAIT = 1000;
@@ -42,6 +31,15 @@ const results = {
 };
 
 test.describe( 'Post Editor Performance', () => {
+	test.use( {
+		perfUtils: async ( { page }, use ) => {
+			await use( new PerfUtils( { page } ) );
+		},
+		metrics: async ( { page }, use ) => {
+			await use( new Metrics( { page } ) );
+		},
+	} );
+
 	test.afterAll( async ( {}, testInfo ) => {
 		await testInfo.attach( 'results', {
 			body: JSON.stringify( results, null, 2 ),
@@ -49,358 +47,434 @@ test.describe( 'Post Editor Performance', () => {
 		} );
 	} );
 
-	test.beforeEach( async ( { admin, page } ) => {
-		await admin.createNewPost();
-		// Disable auto-save to avoid impacting the metrics.
-		await page.evaluate( () => {
-			window.wp.data.dispatch( 'core/editor' ).updateEditorSettings( {
-				autosaveInterval: 100000000000,
-				localAutosaveInterval: 100000000000,
-			} );
+	test.describe( 'Loading', () => {
+		let draftURL = null;
+
+		test( 'Setup the test post', async ( { admin, perfUtils } ) => {
+			await admin.createNewPost();
+			await perfUtils.loadBlocksForLargePost();
+			draftURL = await perfUtils.saveDraft();
 		} );
-	} );
 
-	test( 'Loading', async ( { browser, page } ) => {
-		// Turn the large post HTML into blocks and insert.
-		await loadBlocksFromHtml(
-			page,
-			path.join( process.env.ASSETS_PATH, 'large-post.html' )
-		);
-
-		// Save the draft.
-		await page
-			.getByRole( 'button', { name: 'Save draft' } )
-			.click( { timeout: 60_000 } );
-		await expect(
-			page.getByRole( 'button', { name: 'Saved' } )
-		).toBeDisabled();
-
-		// Get the URL that we will be testing against.
-		const draftURL = page.url();
-
-		// Start the measurements.
 		const samples = 10;
 		const throwaway = 1;
-		const rounds = throwaway + samples;
-		for ( let i = 0; i < rounds; i++ ) {
-			// Open a fresh page in a new context to prevent caching.
-			const testPage = await browser.newPage();
-
-			// Go to the test page URL.
-			await testPage.goto( draftURL );
-
-			// Get canvas (handles both legacy and iframed canvas).
-			const canvas = await Promise.any( [
-				( async () => {
-					const legacyCanvasLocator = testPage.locator(
-						'.wp-block-post-content'
-					);
-					await legacyCanvasLocator.waitFor( { timeout: 120_000 } );
-					return legacyCanvasLocator;
-				} )(),
-				( async () => {
-					const iframedCanvasLocator = testPage.frameLocator(
-						'[name=editor-canvas]'
+		const iterations = samples + throwaway;
+		for ( let i = 1; i <= iterations; i++ ) {
+			test( `Run the test (${ i } of ${ iterations })`, async ( {
+				page,
+				perfUtils,
+				metrics,
+			} ) => {
+				// Open the test draft.
+				await page.goto( draftURL );
+				const canvas = await perfUtils.getCanvas();
+
+				// Wait for the first block.
+				await canvas.locator( '.wp-block' ).first().waitFor( {
+					timeout: 120_000,
+				} );
+
+				// Get the durations.
+				const loadingDurations = await metrics.getLoadingDurations();
+
+				// Save the results.
+				if ( i > throwaway ) {
+					Object.entries( loadingDurations ).forEach(
+						( [ metric, duration ] ) => {
+							if ( metric === 'timeSinceResponseEnd' ) {
+								results.firstBlock.push( duration );
+							} else {
+								results[ metric ].push( duration );
+							}
+						}
 					);
-					await iframedCanvasLocator
-						.locator( 'body' )
-						.waitFor( { timeout: 120_000 } );
-					return iframedCanvasLocator;
-				} )(),
-			] );
-
-			await canvas.locator( '.wp-block' ).first().waitFor( {
-				timeout: 120_000,
+				}
 			} );
+		}
+	} );
+
+	test.describe( 'Typing', () => {
+		let draftURL = null;
+
+		test( 'Setup the test post', async ( { admin, perfUtils, editor } ) => {
+			await admin.createNewPost();
+			await perfUtils.loadBlocksForLargePost();
+			await editor.insertBlock( { name: 'core/paragraph' } );
+			draftURL = await perfUtils.saveDraft();
+		} );
+
+		test( 'Run the test', async ( { page, perfUtils, metrics } ) => {
+			await page.goto( draftURL );
+			await perfUtils.disableAutosave();
+			const canvas = await perfUtils.getCanvas();
+
+			const paragraph = canvas.getByRole( 'document', {
+				name: /Empty block/i,
+			} );
+
+			// The first character typed triggers a longer time (isTyping change).
+			// It can impact the stability of the metric, so we exclude it. It
+			// probably deserves a dedicated metric itself, though.
+			const samples = 10;
+			const throwaway = 1;
+			const iterations = samples + throwaway;
+
+			// Start tracing.
+			await metrics.startTracing();
+
+			// Type the testing sequence into the empty paragraph.
+			await paragraph.type( 'x'.repeat( iterations ), {
+				delay: BROWSER_IDLE_WAIT,
+				// The extended timeout is needed because the typing is very slow
+				// and the `delay` value itself does not extend it.
+				timeout: iterations * BROWSER_IDLE_WAIT * 2, // 2x the total time to be safe.
+			} );
+
+			// Stop tracing.
+			await metrics.stopTracing();
+
+			// Get the durations.
+			const [ keyDownEvents, keyPressEvents, keyUpEvents ] =
+				metrics.getTypingEventDurations();
 
 			// Save the results.
-			if ( i >= throwaway ) {
-				const loadingDurations = await getLoadingDurations( testPage );
-				Object.entries( loadingDurations ).forEach(
-					( [ metric, duration ] ) => {
-						results[ metric ].push( duration );
-					}
+			for ( let i = throwaway; i < iterations; i++ ) {
+				results.type.push(
+					keyDownEvents[ i ] + keyPressEvents[ i ] + keyUpEvents[ i ]
 				);
 			}
-
-			await testPage.close();
-		}
+		} );
 	} );
 
-	test( 'Typing', async ( { browser, page, editor } ) => {
-		// Load the large post fixture.
-		await loadBlocksFromHtml(
-			page,
-			path.join( process.env.ASSETS_PATH, 'large-post.html' )
-		);
-
-		// Append an empty paragraph.
-		await editor.insertBlock( { name: 'core/paragraph' } );
+	test.describe( 'Typing within containers', () => {
+		let draftURL = null;
 
-		// Start tracing.
-		await browser.startTracing( page, {
-			screenshots: false,
-			categories: [ 'devtools.timeline' ],
+		test( 'Set up the test post', async ( { admin, perfUtils } ) => {
+			await admin.createNewPost();
+			await perfUtils.loadBlocksForSmallPostWithContainers();
+			draftURL = await perfUtils.saveDraft();
 		} );
 
-		// The first character typed triggers a longer time (isTyping change).
-		// It can impact the stability of the metric, so we exclude it. It
-		// probably deserves a dedicated metric itself, though.
-		const samples = 10;
-		const throwaway = 1;
-		const rounds = samples + throwaway;
+		test( 'Run the test', async ( { page, perfUtils, metrics } ) => {
+			await page.goto( draftURL );
+			await perfUtils.disableAutosave();
+			const canvas = await perfUtils.getCanvas();
+
+			// Select the block where we type in.
+			const firstParagraph = canvas
+				.getByRole( 'document', {
+					name: /Paragraph block|Block: Paragraph/,
+				} )
+				.first();
+			await firstParagraph.click();
+
+			// The first character typed triggers a longer time (isTyping change).
+			// It can impact the stability of the metric, so we exclude it. It
+			// probably deserves a dedicated metric itself, though.
+			const samples = 10;
+			const throwaway = 1;
+			const iterations = samples + throwaway;
+
+			// Start tracing.
+			await metrics.startTracing();
+
+			// Start typing in the middle of the text.
+			await firstParagraph.type( 'x'.repeat( iterations ), {
+				delay: BROWSER_IDLE_WAIT,
+				// The extended timeout is needed because the typing is very slow
+				// and the `delay` value itself does not extend it.
+				timeout: iterations * BROWSER_IDLE_WAIT * 2, // 2x the total time to be safe.
+			} );
 
-		// Type the testing sequence into the empty paragraph.
-		await page.keyboard.type( 'x'.repeat( rounds ), {
-			delay: BROWSER_IDLE_WAIT,
-		} );
+			// Stop tracing.
+			await metrics.stopTracing();
 
-		// Stop tracing and save results.
-		const traceBuffer = await browser.stopTracing();
-		const traceResults = JSON.parse( traceBuffer.toString() );
-		const [ keyDownEvents, keyPressEvents, keyUpEvents ] =
-			getTypingEventDurations( traceResults );
+			// Get the durations.
+			const [ keyDownEvents, keyPressEvents, keyUpEvents ] =
+				metrics.getTypingEventDurations();
 
-		for ( let i = throwaway; i < rounds; i++ ) {
-			results.type.push(
-				keyDownEvents[ i ] + keyPressEvents[ i ] + keyUpEvents[ i ]
-			);
-		}
+			// Save the results.
+			for ( let i = throwaway; i < iterations; i++ ) {
+				results.typeContainer.push(
+					keyDownEvents[ i ] + keyPressEvents[ i ] + keyUpEvents[ i ]
+				);
+			}
+		} );
 	} );
 
-	test( 'Typing within containers', async ( { browser, page, editor } ) => {
-		await loadBlocksFromHtml(
-			page,
-			path.join(
-				process.env.ASSETS_PATH,
-				'small-post-with-containers.html'
-			)
-		);
-
-		// Select the block where we type in
-		await editor.canvas
-			.getByRole( 'document', {
-				name: /Paragraph block|Block: Paragraph/,
-			} )
-			.first()
-			.click();
-
-		await browser.startTracing( page, {
-			screenshots: false,
-			categories: [ 'devtools.timeline' ],
-		} );
+	test.describe( 'Selecting blocks', () => {
+		let draftURL = null;
 
-		const samples = 10;
-		// The first character typed triggers a longer time (isTyping change).
-		// It can impact the stability of the metric, so we exclude it. It
-		// probably deserves a dedicated metric itself, though.
-		const throwaway = 1;
-		const rounds = samples + throwaway;
-		await page.keyboard.type( 'x'.repeat( rounds ), {
-			delay: BROWSER_IDLE_WAIT,
+		test( 'Set up the test post', async ( { admin, perfUtils } ) => {
+			await admin.createNewPost();
+			await perfUtils.load1000Paragraphs();
+			draftURL = await perfUtils.saveDraft();
 		} );
 
-		const traceBuffer = await browser.stopTracing();
-		const traceResults = JSON.parse( traceBuffer.toString() );
-		const [ keyDownEvents, keyPressEvents, keyUpEvents ] =
-			getTypingEventDurations( traceResults );
+		test( 'Run the test', async ( { page, perfUtils, metrics } ) => {
+			await page.goto( draftURL );
+			await perfUtils.disableAutosave();
+			const canvas = await perfUtils.getCanvas();
 
-		for ( let i = throwaway; i < rounds; i++ ) {
-			results.typeContainer.push(
-				keyDownEvents[ i ] + keyPressEvents[ i ] + keyUpEvents[ i ]
-			);
-		}
-	} );
+			const paragraphs = canvas.getByRole( 'document', {
+				name: /Empty block/i,
+			} );
 
-	test( 'Selecting blocks', async ( { browser, page, editor } ) => {
-		await load1000Paragraphs( page );
-		const paragraphs = editor.canvas.locator( '.wp-block' );
+			const samples = 10;
+			const throwaway = 1;
+			const iterations = samples + throwaway;
+			for ( let i = 1; i <= iterations; i++ ) {
+				// Wait for the browser to be idle before starting the monitoring.
+				// eslint-disable-next-line no-restricted-syntax
+				await page.waitForTimeout( BROWSER_IDLE_WAIT );
 
-		const samples = 10;
-		const throwaway = 1;
-		const rounds = samples + throwaway;
-		for ( let i = 0; i < rounds; i++ ) {
-			// Wait for the browser to be idle before starting the monitoring.
-			// eslint-disable-next-line no-restricted-syntax
-			await page.waitForTimeout( BROWSER_IDLE_WAIT );
-			await browser.startTracing( page, {
-				screenshots: false,
-				categories: [ 'devtools.timeline' ],
-			} );
+				// Start tracing.
+				await metrics.startTracing();
 
-			await paragraphs.nth( i ).click();
+				// Click the next paragraph.
+				await paragraphs.nth( i ).click();
 
-			const traceBuffer = await browser.stopTracing();
+				// Stop tracing.
+				await metrics.stopTracing();
 
-			if ( i >= throwaway ) {
-				const traceResults = JSON.parse( traceBuffer.toString() );
-				const allDurations = getSelectionEventDurations( traceResults );
-				results.focus.push(
-					allDurations.reduce( ( acc, eventDurations ) => {
-						return acc + sum( eventDurations );
-					}, 0 )
-				);
+				// Get the durations.
+				const allDurations = metrics.getSelectionEventDurations();
+
+				// Save the results.
+				if ( i > throwaway ) {
+					results.focus.push(
+						allDurations.reduce( ( acc, eventDurations ) => {
+							return acc + sum( eventDurations );
+						}, 0 )
+					);
+				}
 			}
-		}
+		} );
 	} );
 
-	test( 'Opening persistent list view', async ( { browser, page } ) => {
-		await load1000Paragraphs( page );
-		const listViewToggle = page.getByRole( 'button', {
-			name: 'Document Overview',
+	test.describe( 'Opening persistent List View', () => {
+		let draftURL = null;
+
+		test( 'Set up the test page', async ( { admin, perfUtils } ) => {
+			await admin.createNewPost();
+			await perfUtils.load1000Paragraphs();
+			draftURL = await perfUtils.saveDraft();
 		} );
 
-		const samples = 10;
-		const throwaway = 1;
-		const rounds = samples + throwaway;
-		for ( let i = 0; i < rounds; i++ ) {
-			// Wait for the browser to be idle before starting the monitoring.
-			// eslint-disable-next-line no-restricted-syntax
-			await page.waitForTimeout( BROWSER_IDLE_WAIT );
-			await browser.startTracing( page, {
-				screenshots: false,
-				categories: [ 'devtools.timeline' ],
+		test( 'Run the test', async ( { page, perfUtils, metrics } ) => {
+			await page.goto( draftURL );
+			await perfUtils.disableAutosave();
+
+			const listViewToggle = page.getByRole( 'button', {
+				name: 'Document Overview',
 			} );
 
-			// Open List View
-			await listViewToggle.click();
+			const samples = 10;
+			const throwaway = 1;
+			const iterations = samples + throwaway;
+			for ( let i = 1; i <= iterations; i++ ) {
+				// Wait for the browser to be idle before starting the monitoring.
+				// eslint-disable-next-line no-restricted-syntax
+				await page.waitForTimeout( BROWSER_IDLE_WAIT );
 
-			const traceBuffer = await browser.stopTracing();
+				// Start tracing.
+				await metrics.startTracing();
 
-			if ( i >= throwaway ) {
-				const traceResults = JSON.parse( traceBuffer.toString() );
-				const [ mouseClickEvents ] =
-					getClickEventDurations( traceResults );
-				results.listViewOpen.push( mouseClickEvents[ 0 ] );
-			}
+				// Open List View.
+				await listViewToggle.click();
+				await perfUtils.expectExpandedState( listViewToggle, 'true' );
 
-			// Close List View
-			await listViewToggle.click();
-		}
+				// Stop tracing.
+				await metrics.stopTracing();
+
+				// Get the durations.
+				const [ mouseClickEvents ] = metrics.getClickEventDurations();
+
+				// Save the results.
+				if ( i > throwaway ) {
+					results.listViewOpen.push( mouseClickEvents[ 0 ] );
+				}
+
+				// Close List View
+				await listViewToggle.click();
+				await perfUtils.expectExpandedState( listViewToggle, 'false' );
+			}
+		} );
 	} );
 
-	test( 'Opening the inserter', async ( { browser, page } ) => {
-		await load1000Paragraphs( page );
-		const globalInserterToggle = page.getByRole( 'button', {
-			name: 'Toggle block inserter',
+	test.describe( 'Opening Inserter', () => {
+		let draftURL = null;
+
+		test( 'Set up the test page', async ( { admin, perfUtils } ) => {
+			await admin.createNewPost();
+			await perfUtils.load1000Paragraphs();
+			draftURL = await perfUtils.saveDraft();
 		} );
 
-		const samples = 10;
-		const throwaway = 1;
-		const rounds = samples + throwaway;
-		for ( let i = 0; i < rounds; i++ ) {
-			// Wait for the browser to be idle before starting the monitoring.
-			// eslint-disable-next-line no-restricted-syntax
-			await page.waitForTimeout( BROWSER_IDLE_WAIT );
-			await browser.startTracing( page, {
-				screenshots: false,
-				categories: [ 'devtools.timeline' ],
+		test( 'Run the test', async ( { page, perfUtils, metrics } ) => {
+			// Go to the test page.
+			await page.goto( draftURL );
+			await perfUtils.disableAutosave();
+			const globalInserterToggle = page.getByRole( 'button', {
+				name: 'Toggle block inserter',
 			} );
 
-			// Open Inserter.
-			await globalInserterToggle.click();
+			const samples = 10;
+			const throwaway = 1;
+			const iterations = samples + throwaway;
+			for ( let i = 1; i <= iterations; i++ ) {
+				// Wait for the browser to be idle before starting the monitoring.
+				// eslint-disable-next-line no-restricted-syntax
+				await page.waitForTimeout( BROWSER_IDLE_WAIT );
+
+				// Start tracing.
+				await metrics.startTracing();
+
+				// Open Inserter.
+				await globalInserterToggle.click();
+				await perfUtils.expectExpandedState(
+					globalInserterToggle,
+					'true'
+				);
 
-			const traceBuffer = await browser.stopTracing();
+				// Stop tracing.
+				await metrics.stopTracing();
 
-			if ( i >= throwaway ) {
-				const traceResults = JSON.parse( traceBuffer.toString() );
-				const [ mouseClickEvents ] =
-					getClickEventDurations( traceResults );
-				results.inserterOpen.push( mouseClickEvents[ 0 ] );
-			}
+				// Get the durations.
+				const [ mouseClickEvents ] = metrics.getClickEventDurations();
 
-			// Close Inserter.
-			await globalInserterToggle.click();
-		}
-	} );
+				// Save the results.
+				if ( i > throwaway ) {
+					results.inserterOpen.push( mouseClickEvents[ 0 ] );
+				}
 
-	test( 'Searching the inserter', async ( { browser, page } ) => {
-		await load1000Paragraphs( page );
-		const globalInserterToggle = page.getByRole( 'button', {
-			name: 'Toggle block inserter',
+				// Close Inserter.
+				await globalInserterToggle.click();
+				await perfUtils.expectExpandedState(
+					globalInserterToggle,
+					'false'
+				);
+			}
 		} );
+	} );
 
-		// Open Inserter.
-		await globalInserterToggle.click();
+	test.describe( 'Searching Inserter', () => {
+		let draftURL = null;
 
-		const samples = 10;
-		const throwaway = 1;
-		const rounds = samples + throwaway;
-		for ( let i = 0; i < rounds; i++ ) {
-			// Wait for the browser to be idle before starting the monitoring.
-			// eslint-disable-next-line no-restricted-syntax
-			await page.waitForTimeout( BROWSER_IDLE_WAIT );
-			await browser.startTracing( page, {
-				screenshots: false,
-				categories: [ 'devtools.timeline' ],
+		test( 'Set up the test page', async ( { admin, perfUtils } ) => {
+			await admin.createNewPost();
+			await perfUtils.load1000Paragraphs();
+			draftURL = await perfUtils.saveDraft();
+		} );
+
+		test( 'Run the test', async ( { page, perfUtils, metrics } ) => {
+			// Go to the test page.
+			await page.goto( draftURL );
+			await perfUtils.disableAutosave();
+			const globalInserterToggle = page.getByRole( 'button', {
+				name: 'Toggle block inserter',
 			} );
 
-			await page.keyboard.type( 'p' );
+			// Open Inserter.
+			await globalInserterToggle.click();
+			await perfUtils.expectExpandedState( globalInserterToggle, 'true' );
+
+			const samples = 10;
+			const throwaway = 1;
+			const iterations = samples + throwaway;
+			for ( let i = 1; i <= iterations; i++ ) {
+				// Wait for the browser to be idle before starting the monitoring.
+				// eslint-disable-next-line no-restricted-syntax
+				await page.waitForTimeout( BROWSER_IDLE_WAIT );
 
-			const traceBuffer = await browser.stopTracing();
+				// Start tracing.
+				await metrics.startTracing();
 
-			if ( i >= throwaway ) {
-				const traceResults = JSON.parse( traceBuffer.toString() );
-				const [ keyDownEvents, keyPressEvents, keyUpEvents ] =
-					getTypingEventDurations( traceResults );
-				results.inserterSearch.push(
-					keyDownEvents[ 0 ] + keyPressEvents[ 0 ] + keyUpEvents[ 0 ]
-				);
-			}
+				// Type to trigger search.
+				await page.keyboard.type( 'p' );
 
-			await page.keyboard.press( 'Backspace' );
-		}
+				// Stop tracing.
+				await metrics.stopTracing();
+
+				// Get the durations.
+				const [ keyDownEvents, keyPressEvents, keyUpEvents ] =
+					metrics.getTypingEventDurations();
+
+				// Save the results.
+				if ( i > throwaway ) {
+					results.inserterSearch.push(
+						keyDownEvents[ 0 ] +
+							keyPressEvents[ 0 ] +
+							keyUpEvents[ 0 ]
+					);
+				}
 
-		// Close Inserter.
-		await globalInserterToggle.click();
+				await page.keyboard.press( 'Backspace' );
+			}
+		} );
 	} );
 
-	test( 'Hovering Inserter Items', async ( { browser, page } ) => {
-		await load1000Paragraphs( page );
-		const globalInserterToggle = page.getByRole( 'button', {
-			name: 'Toggle block inserter',
+	test.describe( 'Hovering Inserter items', () => {
+		let draftURL = null;
+
+		test( 'Set up the test page', async ( { admin, perfUtils } ) => {
+			await admin.createNewPost();
+			await perfUtils.load1000Paragraphs();
+			draftURL = await perfUtils.saveDraft();
 		} );
-		const paragraphBlockItem = page.locator(
-			'.block-editor-inserter__menu .editor-block-list-item-paragraph'
-		);
-		const headingBlockItem = page.locator(
-			'.block-editor-inserter__menu .editor-block-list-item-heading'
-		);
 
-		// Open Inserter.
-		await globalInserterToggle.click();
+		test( 'Run the test', async ( { page, perfUtils, metrics } ) => {
+			// Go to the test page.
+			await page.goto( draftURL );
+			await perfUtils.disableAutosave();
 
-		const samples = 10;
-		const throwaway = 1;
-		const rounds = samples + throwaway;
-		for ( let i = 0; i < rounds; i++ ) {
-			// Wait for the browser to be idle before starting the monitoring.
-			// eslint-disable-next-line no-restricted-syntax
-			await page.waitForTimeout( BROWSER_IDLE_WAIT );
-			await browser.startTracing( page, {
-				screenshots: false,
-				categories: [ 'devtools.timeline' ],
+			const globalInserterToggle = page.getByRole( 'button', {
+				name: 'Toggle block inserter',
 			} );
+			const paragraphBlockItem = page.locator(
+				'.block-editor-inserter__menu .editor-block-list-item-paragraph'
+			);
+			const headingBlockItem = page.locator(
+				'.block-editor-inserter__menu .editor-block-list-item-heading'
+			);
+
+			// Open Inserter.
+			await globalInserterToggle.click();
+			await perfUtils.expectExpandedState( globalInserterToggle, 'true' );
+
+			const samples = 10;
+			const throwaway = 1;
+			const iterations = samples + throwaway;
+			for ( let i = 1; i <= iterations; i++ ) {
+				// Wait for the browser to be idle before starting the monitoring.
+				// eslint-disable-next-line no-restricted-syntax
+				await page.waitForTimeout( BROWSER_IDLE_WAIT );
 
-			// Hover Items.
-			await paragraphBlockItem.hover();
-			await headingBlockItem.hover();
+				// Start tracing.
+				await metrics.startTracing();
 
-			const traceBuffer = await browser.stopTracing();
+				// Hover Inserter items.
+				await paragraphBlockItem.hover();
+				await headingBlockItem.hover();
 
-			if ( i >= throwaway ) {
-				const traceResults = JSON.parse( traceBuffer.toString() );
+				// Stop tracing.
+				await metrics.stopTracing();
+
+				// Get the durations.
 				const [ mouseOverEvents, mouseOutEvents ] =
-					getHoverEventDurations( traceResults );
-				for ( let k = 0; k < mouseOverEvents.length; k++ ) {
-					results.inserterHover.push(
-						mouseOverEvents[ k ] + mouseOutEvents[ k ]
-					);
+					metrics.getHoverEventDurations();
+
+				// Save the results.
+				if ( i > throwaway ) {
+					for ( let k = 0; k < mouseOverEvents.length; k++ ) {
+						results.inserterHover.push(
+							mouseOverEvents[ k ] + mouseOutEvents[ k ]
+						);
+					}
 				}
 			}
-		}
-
-		// Close Inserter.
-		await globalInserterToggle.click();
+		} );
 	} );
 } );
+
+/* eslint-enable playwright/no-conditional-in-test, playwright/expect-expect */
diff --git a/test/performance/specs/site-editor.spec.js b/test/performance/specs/site-editor.spec.js
index 1a5c0a96b6846..21a739dfd5c12 100644
--- a/test/performance/specs/site-editor.spec.js
+++ b/test/performance/specs/site-editor.spec.js
@@ -1,21 +1,14 @@
-/**
- * WordPress dependencies
- */
-const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+/* eslint-disable playwright/no-conditional-in-test, playwright/expect-expect */
 
 /**
- * External dependencies
+ * WordPress dependencies
  */
-const path = require( 'path' );
+import { test, Metrics } from '@wordpress/e2e-test-utils-playwright';
 
 /**
  * Internal dependencies
  */
-const {
-	getTypingEventDurations,
-	getLoadingDurations,
-	loadBlocksFromHtml,
-} = require( '../utils' );
+import { PerfUtils } from '../fixtures';
 
 // See https://github.com/WordPress/gutenberg/issues/51383#issuecomment-1613460429
 const BROWSER_IDLE_WAIT = 1000;
@@ -36,9 +29,16 @@ const results = {
 	listViewOpen: [],
 };
 
-let testPageId;
-
 test.describe( 'Site Editor Performance', () => {
+	test.use( {
+		perfUtils: async ( { page }, use ) => {
+			await use( new PerfUtils( { page } ) );
+		},
+		metrics: async ( { page }, use ) => {
+			await use( new Metrics( { page } ) );
+		},
+	} );
+
 	test.beforeAll( async ( { requestUtils } ) => {
 		await requestUtils.activateTheme( 'emptytheme' );
 		await requestUtils.deleteAllTemplates( 'wp_template' );
@@ -56,156 +56,136 @@ test.describe( 'Site Editor Performance', () => {
 		await requestUtils.activateTheme( 'twentytwentyone' );
 	} );
 
-	test.beforeEach( async ( { admin, page } ) => {
-		// Start a new page.
-		await admin.createNewPost( { postType: 'page' } );
+	test.describe( 'Loading', () => {
+		let draftURL = null;
 
-		// Disable auto-save to avoid impacting the metrics.
-		await page.evaluate( () => {
-			window.wp.data.dispatch( 'core/editor' ).updateEditorSettings( {
-				autosaveInterval: 100000000000,
-				localAutosaveInterval: 100000000000,
+		test( 'Setup the test page', async ( { page, admin, perfUtils } ) => {
+			await admin.createNewPost( { postType: 'page' } );
+			await perfUtils.loadBlocksForLargePost();
+			await perfUtils.saveDraft();
+
+			await admin.visitSiteEditor( {
+				postId: new URL( page.url() ).searchParams.get( 'post' ),
+				postType: 'page',
 			} );
-		} );
-	} );
 
-	test( 'Loading', async ( { browser, page, admin } ) => {
-		// Load the large post fixture.
-		await loadBlocksFromHtml(
-			page,
-			path.join( process.env.ASSETS_PATH, 'large-post.html' )
-		);
-
-		// Save the draft.
-		await page
-			.getByRole( 'button', { name: 'Save draft' } )
-			.click( { timeout: 60_000 } );
-		await expect(
-			page.getByRole( 'button', { name: 'Saved' } )
-		).toBeDisabled();
-
-		// Get the ID of the saved page.
-		testPageId = new URL( page.url() ).searchParams.get( 'post' );
-
-		// Open the test page in Site Editor.
-		await admin.visitSiteEditor( {
-			postId: testPageId,
-			postType: 'page',
+			draftURL = page.url();
 		} );
 
-		// Get the URL that we will be testing against.
-		const draftURL = page.url();
-
-		// Start the measurements.
 		const samples = 10;
 		const throwaway = 1;
-		const rounds = samples + throwaway;
-		for ( let i = 0; i < rounds; i++ ) {
-			// Open a fresh page in a new context to prevent caching.
-			const testPage = await browser.newPage();
-
-			// Go to the test page URL.
-			await testPage.goto( draftURL );
-
-			// Wait for the first block.
-			await testPage
-				.frameLocator( 'iframe[name="editor-canvas"]' )
-				.locator( '.wp-block' )
-				.first()
-				.waitFor( { timeout: 120_000 } );
-
-			// Save the results.
-			if ( i >= throwaway ) {
-				const loadingDurations = await getLoadingDurations( testPage );
-				Object.entries( loadingDurations ).forEach(
-					( [ metric, duration ] ) => {
-						results[ metric ].push( duration );
-					}
-				);
-			}
-
-			await testPage.close();
+		const iterations = samples + throwaway;
+		for ( let i = 1; i <= iterations; i++ ) {
+			test( `Run the test (${ i } of ${ iterations })`, async ( {
+				page,
+				perfUtils,
+				metrics,
+			} ) => {
+				// Go to the test draft.
+				await page.goto( draftURL );
+				const canvas = await perfUtils.getCanvas();
+
+				// Wait for the first block.
+				await canvas.locator( '.wp-block' ).first().waitFor( {
+					timeout: 120_000,
+				} );
+
+				// Get the durations.
+				const loadingDurations = await metrics.getLoadingDurations();
+
+				// Save the results.
+				if ( i > throwaway ) {
+					Object.entries( loadingDurations ).forEach(
+						( [ metric, duration ] ) => {
+							if ( metric === 'timeSinceResponseEnd' ) {
+								results.firstBlock.push( duration );
+							} else {
+								results[ metric ].push( duration );
+							}
+						}
+					);
+				}
+			} );
 		}
 	} );
+	test.describe( 'Typing', () => {
+		let draftURL = null;
 
-	test( 'Typing', async ( { browser, page, admin, editor } ) => {
-		// Load the large post fixture.
-		await loadBlocksFromHtml(
+		test( 'Setup the test post', async ( {
 			page,
-			path.join( process.env.ASSETS_PATH, 'large-post.html' )
-		);
-
-		// Save the draft.
-		await page
-			.getByRole( 'button', { name: 'Save draft' } )
-			// Loading the large post HTML can take some time so we need a higher
-			// timeout value here.
-			.click( { timeout: 60_000 } );
-		await expect(
-			page.getByRole( 'button', { name: 'Saved' } )
-		).toBeDisabled();
-
-		// Get the ID of the saved page.
-		testPageId = new URL( page.url() ).searchParams.get( 'post' );
-
-		// Open the test page in Site Editor.
-		await admin.visitSiteEditor( {
-			postId: testPageId,
-			postType: 'page',
-		} );
+			admin,
+			editor,
+			perfUtils,
+		} ) => {
+			await admin.createNewPost( { postType: 'page' } );
+			await perfUtils.loadBlocksForLargePost();
+			await editor.insertBlock( { name: 'core/paragraph' } );
+			await perfUtils.saveDraft();
+
+			await admin.visitSiteEditor( {
+				postId: new URL( page.url() ).searchParams.get( 'post' ),
+				postType: 'page',
+			} );
 
-		// Wait for the first paragraph to be ready.
-		const firstParagraph = editor.canvas
-			.getByText( 'Lorem ipsum dolor sit amet' )
-			.first();
-		await firstParagraph.waitFor( { timeout: 60_000 } );
-
-		// Enter edit mode.
-		await editor.canvas.locator( 'body' ).click();
-		// Second click is needed for the legacy edit mode.
-		await editor.canvas
-			.getByRole( 'document', { name: /Block:( Post)? Content/ } )
-			.click();
-
-		// Append an empty paragraph.
-		// Since `editor.insertBlock( { name: 'core/paragraph' } )` is not
-		// working in page edit mode, we need to _manually_ insert a new
-		// paragraph.
-		await editor.canvas
-			.getByText( 'Quamquam tu hanc copiosiorem etiam soles dicere.' )
-			.last()
-			.click(); // Enters edit mode for the last post's element, which is a list item.
-
-		await page.keyboard.press( 'Enter' ); // Creates a new list item.
-		await page.keyboard.press( 'Enter' ); // Exits the list and creates a new paragraph.
-
-		// Start tracing.
-		await browser.startTracing( page, {
-			screenshots: false,
-			categories: [ 'devtools.timeline' ],
+			draftURL = page.url();
 		} );
+		test( 'Run the test', async ( { page, perfUtils, metrics } ) => {
+			await page.goto( draftURL );
+			await perfUtils.disableAutosave();
+
+			// Wait for the loader overlay to disappear. This is necessary
+			// because the overlay is still visible for a while after the editor
+			// canvas is ready, and we don't want it to affect the typing
+			// timings.
+			await page
+				.locator( '.edit-site-canvas-loader' )
+				.waitFor( { state: 'hidden', timeout: 120_000 } );
+
+			const canvas = await perfUtils.getCanvas();
+
+			// Enter edit mode (second click is needed for the legacy edit mode).
+			await canvas.locator( 'body' ).click();
+			await canvas
+				.getByRole( 'document', { name: /Block:( Post)? Content/ } )
+				.click();
+
+			const paragraph = canvas.getByRole( 'document', {
+				name: /Empty block/i,
+			} );
 
-		// The first character typed triggers a longer time (isTyping change).
-		// It can impact the stability of the metric, so we exclude it. It
-		// probably deserves a dedicated metric itself, though.
-		const samples = 10;
-		const throwaway = 1;
-		const rounds = samples + throwaway;
+			// The first character typed triggers a longer time (isTyping change).
+			// It can impact the stability of the metric, so we exclude it. It
+			// probably deserves a dedicated metric itself, though.
+			const samples = 10;
+			const throwaway = 1;
+			const iterations = samples + throwaway;
+
+			// Start tracing.
+			await metrics.startTracing();
+
+			// Type the testing sequence into the empty paragraph.
+			await paragraph.type( 'x'.repeat( iterations ), {
+				delay: BROWSER_IDLE_WAIT,
+				// The extended timeout is needed because the typing is very slow
+				// and the `delay` value itself does not extend it.
+				timeout: iterations * BROWSER_IDLE_WAIT * 2, // 2x the total time to be safe.
+			} );
 
-		// Type the testing sequence into the empty paragraph.
-		await page.keyboard.type( 'x'.repeat( rounds ), {
-			delay: BROWSER_IDLE_WAIT,
-		} );
+			// Stop tracing.
+			await metrics.stopTracing();
 
-		// Stop tracing and save results.
-		const traceBuffer = await browser.stopTracing();
-		const traceResults = JSON.parse( traceBuffer.toString() );
-		const [ keyDownEvents, keyPressEvents, keyUpEvents ] =
-			getTypingEventDurations( traceResults );
-		for ( let i = throwaway; i < rounds; i++ ) {
-			results.type.push(
-				keyDownEvents[ i ] + keyPressEvents[ i ] + keyUpEvents[ i ]
-			);
-		}
+			// Get the durations.
+			const [ keyDownEvents, keyPressEvents, keyUpEvents ] =
+				metrics.getTypingEventDurations();
+
+			// Save the results.
+			for ( let i = throwaway; i < iterations; i++ ) {
+				results.type.push(
+					keyDownEvents[ i ] + keyPressEvents[ i ] + keyUpEvents[ i ]
+				);
+			}
+		} );
 	} );
 } );
+
+/* eslint-enable playwright/no-conditional-in-test, playwright/expect-expect */
diff --git a/test/performance/utils.js b/test/performance/utils.js
index b86d09a10b301..e14ff71436d73 100644
--- a/test/performance/utils.js
+++ b/test/performance/utils.js
@@ -58,141 +58,3 @@ export function deleteFile( filePath ) {
 		unlinkSync( filePath );
 	}
 }
-
-function isEvent( item ) {
-	return (
-		item.cat === 'devtools.timeline' &&
-		item.name === 'EventDispatch' &&
-		item.dur &&
-		item.args &&
-		item.args.data
-	);
-}
-
-function isKeyDownEvent( item ) {
-	return isEvent( item ) && item.args.data.type === 'keydown';
-}
-
-function isKeyPressEvent( item ) {
-	return isEvent( item ) && item.args.data.type === 'keypress';
-}
-
-function isKeyUpEvent( item ) {
-	return isEvent( item ) && item.args.data.type === 'keyup';
-}
-
-function isFocusEvent( item ) {
-	return isEvent( item ) && item.args.data.type === 'focus';
-}
-
-function isFocusInEvent( item ) {
-	return isEvent( item ) && item.args.data.type === 'focusin';
-}
-
-function isClickEvent( item ) {
-	return isEvent( item ) && item.args.data.type === 'click';
-}
-
-function isMouseOverEvent( item ) {
-	return isEvent( item ) && item.args.data.type === 'mouseover';
-}
-
-function isMouseOutEvent( item ) {
-	return isEvent( item ) && item.args.data.type === 'mouseout';
-}
-
-function getEventDurationsForType( trace, filterFunction ) {
-	return trace.traceEvents
-		.filter( filterFunction )
-		.map( ( item ) => item.dur / 1000 );
-}
-
-export function getTypingEventDurations( trace ) {
-	return [
-		getEventDurationsForType( trace, isKeyDownEvent ),
-		getEventDurationsForType( trace, isKeyPressEvent ),
-		getEventDurationsForType( trace, isKeyUpEvent ),
-	];
-}
-
-export function getSelectionEventDurations( trace ) {
-	return [
-		getEventDurationsForType( trace, isFocusEvent ),
-		getEventDurationsForType( trace, isFocusInEvent ),
-	];
-}
-
-export function getClickEventDurations( trace ) {
-	return [ getEventDurationsForType( trace, isClickEvent ) ];
-}
-
-export function getHoverEventDurations( trace ) {
-	return [
-		getEventDurationsForType( trace, isMouseOverEvent ),
-		getEventDurationsForType( trace, isMouseOutEvent ),
-	];
-}
-
-export async function getLoadingDurations( page ) {
-	return await page.evaluate( () => {
-		const [
-			{
-				requestStart,
-				responseStart,
-				responseEnd,
-				domContentLoadedEventEnd,
-				loadEventEnd,
-			},
-		] = performance.getEntriesByType( 'navigation' );
-		const paintTimings = performance.getEntriesByType( 'paint' );
-		return {
-			// Server side metric.
-			serverResponse: responseStart - requestStart,
-			// For client side metrics, consider the end of the response (the
-			// browser receives the HTML) as the start time (0).
-			firstPaint:
-				paintTimings.find( ( { name } ) => name === 'first-paint' )
-					.startTime - responseEnd,
-			domContentLoaded: domContentLoadedEventEnd - responseEnd,
-			loaded: loadEventEnd - responseEnd,
-			firstContentfulPaint:
-				paintTimings.find(
-					( { name } ) => name === 'first-contentful-paint'
-				).startTime - responseEnd,
-			// This is evaluated right after Playwright found the block selector.
-			firstBlock: performance.now() - responseEnd,
-		};
-	} );
-}
-
-export async function loadBlocksFromHtml( page, filepath ) {
-	if ( ! existsSync( filepath ) ) {
-		throw new Error( `File not found (${ filepath })` );
-	}
-
-	return await page.evaluate( ( html ) => {
-		const { parse } = window.wp.blocks;
-		const { dispatch } = window.wp.data;
-		const blocks = parse( html );
-
-		blocks.forEach( ( block ) => {
-			if ( block.name === 'core/image' ) {
-				delete block.attributes.id;
-				delete block.attributes.url;
-			}
-		} );
-
-		dispatch( 'core/block-editor' ).resetBlocks( blocks );
-	}, readFile( filepath ) );
-}
-
-export async function load1000Paragraphs( page ) {
-	await page.evaluate( () => {
-		const { createBlock } = window.wp.blocks;
-		const { dispatch } = window.wp.data;
-		const blocks = Array.from( { length: 1000 } ).map( () =>
-			createBlock( 'core/paragraph' )
-		);
-		dispatch( 'core/block-editor' ).resetBlocks( blocks );
-	} );
-}