prep build 3/25

Author: bph

backport-changelog/7.0/11325.md

@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/11325
+
+* https://github.com/WordPress/gutenberg/pull/76779

backport-changelog/7.1/11272.md

@@ -1,3 +1,5 @@
 https://github.com/WordPress/wordpress-develop/pull/11272
 
 * https://github.com/WordPress/gutenberg/pull/76573
+* https://github.com/WordPress/gutenberg/pull/76734
+* https://github.com/WordPress/gutenberg/pull/76622

changelog.txt

@@ -1,6 +1,6 @@
 == Changelog ==
 
-= 22.8.0-rc.1 =
+= 22.8.0 =
 
 ## Changelog
 
@@ -87,8 +87,6 @@
 - Add a limit for the default provider. ([76437](https://github.com/WordPress/gutenberg/pull/76437))
 
 #### Content Guidelines
-- Add block guidelines management. ([76187](https://github.com/WordPress/gutenberg/pull/76187))
-- Guidelines: Add actions for Import, Export and Revisions of guidelines. ([76155](https://github.com/WordPress/gutenberg/pull/76155))
 - Rename route and use the right `Notice` component. ([76427](https://github.com/WordPress/gutenberg/pull/76427))
 
 #### Block Editor
@@ -275,11 +273,6 @@ high loading priority. ([76302](https://github.com/WordPress/gutenberg/pull/7630
 - Sync some post list changes with Extensible Site Editor. ([76243](https://github.com/WordPress/gutenberg/pull/76243))
 
 
-
-#### Content Guidelines
-- Add UX for site, copy, image, and additional guidelines. ([75420](https://github.com/WordPress/gutenberg/pull/75420))
-
-
 ### Documentation
 
 - Add Client-Side Navigation documentation to manifest and table of contents.
@@ -391,7 +384,6 @@ The following PRs were merged by first-time contributors:
 
 
 - @apermo: Fix: Use add_filter() for get_block_type_variations hook. ([76297](https://github.com/WordPress/gutenberg/pull/76297))
-- @aswasif007: Content Guidelines: Add UX for site, copy, image, and additional guidelines. ([75420](https://github.com/WordPress/gutenberg/pull/75420))
 - @chubes4: API Fetch: Respect caller-provided Content-Type in httpV1 middleware. ([76285](https://github.com/WordPress/gutenberg/pull/76285))
 - @iamchughmayank: Guidelines: Add actions for Import, Export and Revisions of guidelines. ([76155](https://github.com/WordPress/gutenberg/pull/76155))
 - @kannan-ravi: Add word-break property to visually hidden styles to prevent screen reader issues. ([75539](https://github.com/WordPress/gutenberg/pull/75539))
@@ -407,6 +399,8 @@ The following contributors merged PRs in this release:
 @aaronrobertshaw @adamsilverstein @aduth @alecgeatches @alexstine @Aljullu @andrewserong @annezazu @apermo @aswasif007 @CGastrell @chriszarate @chubes4 @ciampo @Copons @dabowman @desrosj @dhasilva @dlind1 @ellatrix @enejb @getdave @gigitux @gziolo @hbhalodia @huzaifaalmesbah @iamchughmayank @im3dabasia @ingeniumed @jameskoster @jasmussen @jeryj @jorgefilipecosta @jsnajdr @juanmaguitar @kannan-ravi @kraftbj @MaggieCabrera @Mamaduka @manzoorwanijk @markusfoo @mattgrshaw @maxschmeling @mcsf @mikachan @mikejolley @mirka @Mustafabharmal @ntsekouras @oandregal @ockham @pkevan @ramonjd @retrofox @sagarjadhav @scruffian @sgomes @shekharnwagh @shimotmk @simison @smithjw1 @t-hamano @talldan @westonruter @wwahammy @youknowriad @yuliyan
 
 
+
+
 = 22.7.1 =
 
 ## Changelog

docs/contributors/code/e2e/README.md

@@ -79,7 +79,9 @@ It's slow to set states manually before or after tests, especially when they're
 
 ### Avoid global variables
 
-Previously in our Jest + Puppeteer E2E tests, `page` and `browser` are exposed as global variables. This makes it harder to work with when we have multiple pages/tabs in the same test, or if we want to run multiple tests in parallel. `@playwright/test` has the concept of [fixtures](https://playwright.dev/docs/test-fixtures) which allows us to inject `page`, `browser`, and other parameters into the tests.
+In the previous E2E setup, `page` and `browser` were global variables, which made working with multiple pages or parallel tests harder.
+
+`@playwright/test` uses fixtures to inject `page`, `browser`, and other parameters into tests.
 
 ### Make explicit assertions
 

docs/contributors/code/testing-overview.md

@@ -506,9 +506,7 @@ There is an ongoing effort to add integration tests to the native mobile project
 
 ## End-to-end testing
 
-Most existing End-to-end tests currently use [Puppeteer](https://github.com/puppeteer/puppeteer) as a headless Chromium driver to run the tests in `packages/e2e-tests`, and are otherwise still run by a [Jest](https://jestjs.io/) test runner.
-
-There's an ongoing [project](https://github.com/WordPress/gutenberg/issues/38851) to migrate them from Puppeteer to Playwright. **It's recommended to write new e2e tests in Playwright whenever possible**. The sections below mostly apply to the old Jest + Puppeteer framework. See the dedicated [guide](/docs/contributors/code/e2e/README.md) if you're writing tests with Playwright.
+End-to-end tests use [Playwright](https://playwright.dev/) as the testing framework. See the dedicated [End-to-End Testing guide](/docs/contributors/code/e2e/README.md) for best practices and detailed instructions.
 
 ### Using wp-env
 
@@ -521,46 +519,14 @@ npm run test:e2e
 or interactively
 
 ```bash
-npm run test:e2e:watch
-```
-
-Sometimes it's useful to observe the browser while running tests. Then, use this command:
-
-```bash
-npm run test:e2e:watch -- --puppeteer-interactive
-```
-
-You can control the speed of execution with `--puppeteer-slowmo`:
-
-```bash
-npm run test:e2e:watch -- --puppeteer-interactive --puppeteer-slowmo=200
-```
-
-You can additionally have the devtools automatically open for interactive debugging in the browser:
-
-```bash
-npm run test:e2e:watch -- --puppeteer-devtools
-```
-
-### Using alternate environment
-
-If using a different setup than `wp-env`, you first need to symlink the e2e test plugins to your test site, from your site's plugins directory run:
-
-```bash
-ln -s gutenberg/packages/e2e-tests/plugins/* .
-```
-
-Then to run the tests, specify the base URL, username, and passwords for your site. For example, if your test site is at `http://wp.test`, use:
-
-```bash
-WP_BASE_URL=http://wp.test npm run test:e2e -- --wordpress-username=admin --wordpress-password=password
+npm run test:e2e -- --ui
 ```
 
 ### Scenario testing
 
 If you find that end-to-end tests pass when run locally, but fail in GitHub Actions, you may be able to isolate a CPU- or network-bound race condition by simulating a slow CPU or network:
 
-```
+```bash
 THROTTLE_CPU=4 npm run test:e2e
 ```
 

docs/explanations/README.md

@@ -7,6 +7,6 @@
 -   [Modularity and WordPress Packages](/docs/explanations/architecture/modularity.md).
 -   [Block Editor Performance](/docs/explanations/architecture/performance.md).
 -   What are the design decisions behind the Data Module?
--   [Why is Puppeteer the tool of choice for end-to-end tests?](/docs/explanations/architecture/automated-testing.md)
+-   [Why is Playwright the tool of choice for end-to-end tests?](/docs/explanations/architecture/automated-testing.md)
 -   [What’s the difference between the different editor packages? What’s the purpose of each package?](/docs/explanations/architecture/modularity.md#whats-the-difference-between-the-different-editor-packages-whats-the-purpose-of-each-package)
 -   [Template and template parts flows](/docs/explanations/architecture/full-site-editing-templates.md)

docs/explanations/architecture/README.md

@@ -15,4 +15,5 @@ Let’s look at the big picture and the architectural and UX principles of the b
 
 -   [Modularity and WordPress Packages](/docs/explanations/architecture/modularity.md).
 -   [Understand the repository folder structure](/docs/contributors/folder-structure.md).
--   **Outdated!** [Why is Puppeteer the tool of choice for end-to-end tests?](/docs/explanations/architecture/automated-testing.md).
+-   [Why is Playwright the tool of choice for end-to-end tests?](/docs/explanations/architecture/automated-testing.md).
+

docs/explanations/architecture/automated-testing.md

@@ -1,20 +1,14 @@
 # Automated Testing
 
-## Why is Puppeteer the tool of choice for end-to-end tests?
+## Why is Playwright the tool of choice for end-to-end tests?
 
-There exists a rich ecosystem of tooling available for web-based end-to-end automated testing. Thus, it's a common question: "Why does Gutenberg use [Puppeteer](https://developers.google.com/web/tools/puppeteer/) instead of ([Cypress](https://cypress.io/), [Selenium](https://www.selenium.dev/), [Playwright](https://github.com/microsoft/playwright), etc)?". Given some historical unreliability of the build results associated with end-to-end tests, it's especially natural to weigh this question in considering whether our tools are providing more value than the effort required in maintaining them. While we should always be comfortable in reevaluating earlier decisions, there were and continue to be many reasons that Puppeteer is the best compromise of the options available for end-to-end testing.
+There exists a rich ecosystem of tooling available for web-based end-to-end automated testing. Gutenberg uses [Playwright](https://playwright.dev/) as its end-to-end testing framework. The project previously used [Puppeteer](https://pptr.dev/) but has since fully migrated to Playwright. Here are the reasons Playwright was chosen:
 
-These include:
+-   **Multi-browser support**. Playwright supports Chromium, Firefox, and WebKit out of the box, providing broader browser coverage compared to Puppeteer's Chrome-only approach.
+-   **Built-in test runner**. `@playwright/test` provides a powerful test runner with parallel execution, [fixtures](https://playwright.dev/docs/test-fixtures), and auto-waiting, reducing flakiness and improving developer experience.
+-   **Auto-waiting and web-first assertions**. Playwright automatically waits for elements to be actionable before performing actions, reducing the need for manual `waitFor*` calls while still surfacing legitimate performance issues that affect users.
+-   **Better debugging tools**. Playwright offers a [trace viewer](https://playwright.dev/docs/trace-viewer), [UI mode](https://playwright.dev/docs/test-ui-mode), and a built-in [inspector](https://playwright.dev/docs/debug#playwright-inspector) for step-by-step debugging.
+-   **Fixtures over global variables**. Playwright's fixture model injects `page`, `browser`, and other parameters into tests, making it easier to work with multiple pages or tabs and to run tests in parallel.
+-   **Page Object Model**. Playwright encourages the [Page Object Model](https://playwright.dev/docs/pom) pattern for reusable utility functions, improving test readability and maintainability.
 
--   **Interoperability with existing testing framework**. Puppeteer is "just" a tool for controlling a Chrome browser, and makes no assumptions about how it's integrated into a testing environment. While this requires some additional effort in ensuring the test environment is available, it also allows for cohesion in how it integrates with an existing setup. Gutenberg is able to consistently use Jest for both unit testing and end-to-end testing. This is contrasted with other solutions like Cypress, which provide their own testing framework and assertion library as part of an all-in-one solution.
--   **An expressive but predictable API**. Puppeteer strikes a nice balance between low-level access to browser behavior, while retaining an expressive API for issuing and awaiting responses to those commands using modern JavaScript [`async` and `await` syntax](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Async_await). This is contrasted with other solutions, which either don't support or leverage native language async functionality, don't expose direct access to the browser, or leverage custom domain-specific language syntaxes for expressing browser commands and assertions. The fact that Puppeteer largely targets the Chrome browser is non-ideal in how it does not provide full browser coverage. On the other hand, the limited set of browser targets offers more consistent results and stronger guarantees about how code is evaluated in the browser environment.
--   **Surfacing bugs, not obscuring them**. Many alternative solutions offer options to automatically await settled network requests or asynchronous appearance of elements on the page. While this can serve as a convenience in accounting for unpredictable delays, it can also unknowingly cause oversight of legitimate user-facing issues. For example, if an element will only appear on the page after some network request or computation has completed, it may be easy to overlook that these delays can cause unpredictable and frustrating behavior for users ([example](https://github.com/WordPress/gutenberg/pull/11287)). Given that developers often test on high-end hardware and stable network connections, consideration of resiliency on low-end hardware or spotty network availability is not always on the forefront of one's considerations. Puppeteer forces us to acknowledge these delays with explicit `waitFor*` expressions, putting us in much greater alignment with the real-world experience of an end-user.
--   **Debugging**. It's important that in that case that a test fails, there should be straight-forward means to diagnose and resolve the issue. While its offerings are rather simplistic relative to the competition, Puppeteer does expose options to run tests as "headful" (with the browser visible) and with delayed actions. Combined with the fact that it interoperates well with native language / runtime features (e.g. debugger statements or breakpoints), this provides developers with sufficient debugging access.
-
-For more context, refer to the following resources:
-
--   [Testing Overview: End-to-End Testing](/docs/contributors/code/testing-overview.md#end-to-end-testing)
--   [Testing: Experiment with Puppeteer for E2E testing](https://github.com/WordPress/gutenberg/pull/5618)
-    -   In early iterations, the contributing team opted to use Cypress for end-to-end testing. This pull request outlines problems with the approach, and proposed the initial transition to Puppeteer.
--   [JavaScript Chat Summary: January 28, 2020](https://make.wordpress.org/core/2020/02/04/javascript-chat-summary-january-28-2020/)
-    -   Playwright is a new offering created by many of the original contributors to Puppeteer. It offers increased browser coverage and improved reliability of tests. While still early in development at the time of this writing, there has been some interest in evaluating it for future use as an end-to-end testing solution.
+For more details on writing end-to-end tests, see the [End-to-End Testing guide](/docs/contributors/code/e2e/README.md).

lib/compat/wordpress-7.0/class-wp-sync-post-meta-storage.php

@@ -32,15 +32,15 @@ class WP_Sync_Post_Meta_Storage implements WP_Sync_Storage {
 		 * @since 7.0.0
 		 * @var string
 		 */
-		const AWARENESS_META_KEY = 'wp_sync_awareness';
+		const AWARENESS_META_KEY = 'wp_sync_awareness_state';
 
 		/**
 		 * Meta key for sync updates.
 		 *
 		 * @since 7.0.0
 		 * @var string
 		 */
-		const SYNC_UPDATE_META_KEY = 'wp_sync_update';
+		const SYNC_UPDATE_META_KEY = 'wp_sync_update_data';
 
 		/**
 		 * Cache of cursors by room.
@@ -71,36 +71,68 @@ class WP_Sync_Post_Meta_Storage implements WP_Sync_Storage {
 		 *
 		 * @since 7.0.0
 		 *
+		 * @global wpdb $wpdb WordPress database abstraction object.
+		 *
 		 * @param string $room   Room identifier.
 		 * @param mixed  $update Sync update.
 		 * @return bool True on success, false on failure.
 		 */
 		public function add_update( string $room, $update ): bool {
+			global $wpdb;
+
 			$post_id = $this->get_storage_post_id( $room );
 			if ( null === $post_id ) {
 				return false;
 			}
 
-			$meta_id = add_post_meta( $post_id, self::SYNC_UPDATE_META_KEY, $update, false );
-
-			return (bool) $meta_id;
+			// Use direct database operation to avoid cache invalidation performed by
+			// post meta functions (`wp_cache_set_posts_last_changed()` and direct
+			// `wp_cache_delete()` calls).
+			return (bool) $wpdb->insert(
+				$wpdb->postmeta,
+				array(
+					'post_id'    => $post_id,
+					'meta_key'   => self::SYNC_UPDATE_META_KEY,
+					'meta_value' => wp_json_encode( $update ),
+				),
+				array( '%d', '%s', '%s' )
+			);
 		}
 
 		/**
 		 * Gets awareness state for a given room.
 		 *
 		 * @since 7.0.0
 		 *
+		 * @global wpdb $wpdb WordPress database abstraction object.
+		 *
 		 * @param string $room Room identifier.
 		 * @return array<int, mixed> Awareness state.
 		 */
 		public function get_awareness_state( string $room ): array {
+			global $wpdb;
+
 			$post_id = $this->get_storage_post_id( $room );
 			if ( null === $post_id ) {
 				return array();
 			}
 
-			$awareness = get_post_meta( $post_id, self::AWARENESS_META_KEY, true );
+			// Use direct database operation to avoid updating the post meta cache.
+			// ORDER BY meta_id DESC ensures the latest row wins if duplicates exist
+			// from a past race condition in set_awareness_state().
+			$meta_value = $wpdb->get_var(
+				$wpdb->prepare(
+					"SELECT meta_value FROM $wpdb->postmeta WHERE post_id = %d AND meta_key = %s ORDER BY meta_id DESC LIMIT 1",
+					$post_id,
+					self::AWARENESS_META_KEY
+				)
+			);
+
+			if ( null === $meta_value ) {
+				return array();
+			}
+
+			$awareness = json_decode( $meta_value, true );
 
 			if ( ! is_array( $awareness ) ) {
 				return array();
@@ -114,19 +146,54 @@ public function get_awareness_state( string $room ): array {
 		 *
 		 * @since 7.0.0
 		 *
+		 * @global wpdb $wpdb WordPress database abstraction object.
+		 *
 		 * @param string            $room      Room identifier.
 		 * @param array<int, mixed> $awareness Serializable awareness state.
 		 * @return bool True on success, false on failure.
 		 */
 		public function set_awareness_state( string $room, array $awareness ): bool {
+			global $wpdb;
+
 			$post_id = $this->get_storage_post_id( $room );
 			if ( null === $post_id ) {
 				return false;
 			}
 
-			// update_post_meta returns false if the value is the same as the existing value.
-			update_post_meta( $post_id, self::AWARENESS_META_KEY, $awareness );
-			return true;
+			// Use direct database operation to avoid cache invalidation performed by
+			// post meta functions (`wp_cache_set_posts_last_changed()` and direct
+			// `wp_cache_delete()` calls).
+			//
+			// If two concurrent requests both see no row and both INSERT, the
+			// duplicate is harmless: get_awareness_state() reads the latest row
+			// (ORDER BY meta_id DESC).
+			$meta_id = $wpdb->get_var(
+				$wpdb->prepare(
+					"SELECT meta_id FROM $wpdb->postmeta WHERE post_id = %d AND meta_key = %s ORDER BY meta_id DESC LIMIT 1",
+					$post_id,
+					self::AWARENESS_META_KEY
+				)
+			);
+
+			if ( $meta_id ) {
+				return (bool) $wpdb->update(
+					$wpdb->postmeta,
+					array( 'meta_value' => wp_json_encode( $awareness ) ),
+					array( 'meta_id' => $meta_id ),
+					array( '%s' ),
+					array( '%d' )
+				);
+			}
+
+			return (bool) $wpdb->insert(
+				$wpdb->postmeta,
+				array(
+					'post_id'    => $post_id,
+					'meta_key'   => self::AWARENESS_META_KEY,
+					'meta_value' => wp_json_encode( $awareness ),
+				),
+				array( '%d', '%s', '%s' )
+			);
 		}
 
 		/**
@@ -170,6 +237,8 @@ private function get_storage_post_id( string $room ): ?int {
 					'post_status'    => 'publish',
 					'name'           => $room_hash,
 					'fields'         => 'ids',
+					'orderby'        => 'ID',
+					'order'          => 'ASC',
 				)
 			);
 
@@ -220,6 +289,8 @@ public function get_update_count( string $room ): int {
 		 *
 		 * @since 7.0.0
 		 *
+		 * @global wpdb $wpdb WordPress database abstraction object.
+		 *
 		 * @param string $room   Room identifier.
 		 * @param int    $cursor Return updates after this cursor (meta_id).
 		 * @return array<int, mixed> Sync updates.
@@ -269,7 +340,10 @@ public function get_updates_after_cursor( string $room, int $cursor ): array {
 
 			$updates = array();
 			foreach ( $rows as $row ) {
-				$updates[] = maybe_unserialize( $row->meta_value );
+				$decoded = json_decode( $row->meta_value, true );
+				if ( null !== $decoded ) {
+					$updates[] = $decoded;
+				}
 			}
 
 			return $updates;
@@ -280,6 +354,8 @@ public function get_updates_after_cursor( string $room, int $cursor ): array {
 		 *
 		 * @since 7.0.0
 		 *
+		 * @global wpdb $wpdb WordPress database abstraction object.
+		 *
 		 * @param string $room   Room identifier.
 		 * @param int    $cursor Remove updates with meta_id < this cursor.
 		 * @return bool True on success, false on failure.