Real-time collaboration: Remove block client IDs from Awareness, fix "Show Template" view (WordPress#75590)

* Use relative position .parent traversal instead of block client ID when sharing and drawing awareness information

* Fix "Show Template" mode by mapping remote positions into absolute block paths

* Add tests for block resolution for post-editor-awareness

* Remove inner blockPathResolver, use getBlockPathForLocalClientId utility funciton

* Make utility function naming a bit easier to follow - change "getAbsolutePositionIndex()" to "convertSelectionStateToAbsolute()", have it return "localClientId" instead of "blockClientId"

* Move block lookup functions into block-lookup utils file, improve types

* Remove EditorStoreBlock from exported types

* Compare relative positions with Yjs built-in function

* Replace areSelectionsStatesEqual() relative position comparison with compareRelativePositions() as well

* Fix types and tests from crdt-user-selections

* Add a guard to avoid getting blocks when path is empty

* Rename "useConvertSelectionStateToAbsolute" to "useResolvedSelection"

* Add unit tests for getBlockPathInYdoc, resolveBlockClientIdByPath, avoid exporting inner helper functions

Author: alecgeatches

.eslintrc.js

@@ -436,6 +436,16 @@ module.exports = {
 			plugins: [ 'ssr-friendly' ],
 			extends: [ 'plugin:ssr-friendly/recommended' ],
 		},
+		{
+			files: [ 'packages/components/src/**' ],
+			excludedFiles: [ 'packages/components/src/**/@(test|stories)/**' ],
+			rules: {
+				// Disallow usage of Design System token CSS custom properties (`--wpds-*`)
+				// because the fallback injection in the build process is not compatible with Emotion files.
+				// Can be removed when there are no more Emotion files in the package.
+				'@wordpress/no-ds-tokens': 'error',
+			},
+		},
 		{
 			files: [
 				'packages/block-editor/src/**',

.github/workflows/end2end-test.yml

@@ -68,6 +68,14 @@ jobs:
                   path: artifacts/test-results
                   if-no-files-found: ignore
 
+            - name: Archive blob reports (HTML)
+              uses: actions/upload-artifact@330a01c490aca151604b8cf639adc76d48f6c5d4 # v5.0.0
+              if: ${{ !cancelled() }}
+              with:
+                  name: blob-reports--${{ matrix.part }}
+                  path: blob-report
+                  if-no-files-found: ignore
+
             - name: Archive flaky tests report
               uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6.0.0
               if: ${{ !cancelled() }}
@@ -81,10 +89,19 @@ jobs:
         if: ${{ !cancelled() }}
         needs: [e2e-playwright]
         runs-on: 'ubuntu-24.04'
-        permissions: {}
+        permissions:
+            contents: read
         outputs:
             has-flaky-test-report: ${{ !!steps.merge-flaky-tests-reports.outputs.artifact-id }}
         steps:
+            - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+              with:
+                  show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
+                  persist-credentials: false
+
+            - name: Setup Node.js and install dependencies
+              uses: ./.github/setup-node
+
             - name: Merge failures artifacts
               uses: actions/upload-artifact/merge@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6.0.0
               # Don't fail the job if there aren't any artifacts to merge.
@@ -104,6 +121,33 @@ jobs:
                   pattern: flaky-tests-report*
                   delete-merged: true
 
+            - name: Merge blob reports
+              uses: actions/upload-artifact/merge@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6.0.0
+              continue-on-error: true
+              with:
+                  name: blob-reports-merged
+                  pattern: blob-reports--*
+                  delete-merged: true
+
+            - name: Download merged blob reports
+              uses: actions/download-artifact@018cc2cf5baa6db3ef3c5f8a56943fffe632ef53 # v6.0.0
+              continue-on-error: true
+              with:
+                  name: blob-reports-merged
+                  path: all-blob-reports
+
+            - name: Merge blob reports into HTML report
+              run: npx playwright merge-reports --reporter html ./all-blob-reports
+              continue-on-error: true
+
+            - name: Upload merged HTML report
+              uses: actions/upload-artifact@330a01c490aca151604b8cf639adc76d48f6c5d4 # v5.0.0
+              continue-on-error: true
+              with:
+                  name: html-report--attempt-${{ github.run_attempt }}
+                  path: playwright-report
+                  if-no-files-found: ignore
+
     report-to-issues:
         name: Report to GitHub
         needs: [merge-artifacts]

backport-changelog/7.0/11049.md

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

backport-changelog/7.1/11000.md

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

changelog.txt

@@ -77,6 +77,42 @@ elements to which it should be applied.
 }
 ```
 
+## Custom CSS selector
+
+The `css` selector controls which selector is used when generating a block's
+custom CSS rules set via Global Styles. This maps to the
+`styles.blocks.<block-type>.css` property in theme.json.
+
+If not set, the block's root selector is used.
+
+### Examples
+
+As a string:
+
+```json
+{
+	...
+	"selectors": {
+		"root": ".my-custom-block-selector",
+		"css": ".my-custom-block-selector > .inner-wrapper"
+	}
+}
+```
+
+As an object with a `root` key:
+
+```json
+{
+	...
+	"selectors": {
+		"root": ".my-custom-block-selector",
+		"css": {
+			"root": ".my-custom-block-selector > .inner-wrapper"
+		}
+	}
+}
+```
+
 ## Shorthand
 
 Rather than specify a CSS selector for every subfeature, you can set a single

docs/reference-guides/block-api/block-selectors.md

@@ -5,7 +5,7 @@
  * Description: Printing since 1440. This is the development plugin for the block editor, site editor, and other future WordPress core functionality.
  * Requires at least: 6.8
  * Requires PHP: 7.4
- * Version: 22.6.0-rc.3
+ * Version: 22.6.0
  * Author: Gutenberg Team
  * Text Domain: gutenberg
  *

gutenberg.php

@@ -3215,7 +3215,12 @@ static function ( $pseudo_selector ) use ( $selector ) {
 
 		// 7. Generate and append any custom CSS rules.
 		if ( isset( $node['css'] ) && ! $is_root_selector ) {
-			$block_rules .= $this->process_blocks_custom_css( $node['css'], $selector );
+			$css_feature_selector = $block_metadata['selectors']['css'] ?? null;
+			if ( is_array( $css_feature_selector ) ) {
+				$css_feature_selector = $css_feature_selector['root'] ?? null;
+			}
+			$css_selector = is_string( $css_feature_selector ) ? $css_feature_selector : $selector;
+			$block_rules .= $this->process_blocks_custom_css( $node['css'], $css_selector );
 		}
 
 		return $block_rules;
@@ -4537,9 +4542,9 @@ protected function get_feature_declarations_for_node( $metadata, &$node ) {
 		$settings = $this->theme_json['settings'] ?? null;
 
 		foreach ( $metadata['selectors'] as $feature => $feature_selectors ) {
-			// Skip if this is the block's root selector or the block doesn't
-			// have any styles for the feature.
-			if ( 'root' === $feature || empty( $node[ $feature ] ) ) {
+			// Skip if this is the block's root selector, the custom CSS
+			// selector, or the block doesn't have any styles for the feature.
+			if ( 'root' === $feature || 'css' === $feature || empty( $node[ $feature ] ) ) {
 				continue;
 			}
 

lib/class-wp-theme-json-gutenberg.php

@@ -55,10 +55,18 @@ function gutenberg_modify_wp_template_part_post_type_args_7_0( $args ) {
  * @return array Modified array of template part area definitions.
  */
 function gutenberg_register_overlay_template_part_area( $areas ) {
+	foreach ( $areas as $area ) {
+		if ( isset( $area['area'] ) && 'navigation-overlay' === $area['area'] ) {
+			return $areas;
+		}
+	}
+
 	$areas[] = array(
 		'area'        => 'navigation-overlay',
 		'label'       => __( 'Navigation Overlay', 'gutenberg' ),
-		'description' => __( 'Custom overlay area for navigation overlays.', 'gutenberg' ),
+		'description' => __(
+			'The Navigation Overlay template defines an overlay area that typically contains navigation links and can be toggled open and closed.'
+		),
 		'icon'        => 'navigation-overlay',
 		'area_tag'    => 'div',
 	);