RTC: Fix stuck "Join" link in post list when lock expires

backport-changelog/7.0/11346.md

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

lib/compat/wordpress-7.0/collaboration.php

@@ -233,7 +233,8 @@ function gutenberg_filter_locked_posts_heartbeat_for_rtc( $response ) {
  *
  * Also re-enables checkboxes and row actions that WordPress core hides for
  * locked posts, since collaborative editing means the post is not exclusively
- * locked.
+ * locked. Toggles "Edit" / "Join" action link text via the
+ * `.wp-collaborative-editing` class that the heartbeat already manages.
  */
 function gutenberg_post_list_collaboration_styles() {
 	?>
@@ -253,14 +254,31 @@ function gutenberg_post_list_collaboration_styles() {
 		/*
 		 * Re-enable controls that core hides for locked posts,
 		 * since RTC allows collaborative editing.
+		 * Must use `tr.wp-locked` to match core's specificity in
+		 * list-tables.css and actually override its `display: none`.
 		 */
-		.wp-locked .check-column label,
-		.wp-locked .check-column input[type="checkbox"] {
+		tr.wp-locked .check-column label,
+		tr.wp-locked .check-column input[type="checkbox"] {
 			display: revert;
 		}
-		.wp-locked .row-actions .inline {
+		tr.wp-locked .row-actions .inline {
 			display: revert;
 		}
+		/*
+		 * Toggle "Edit" / "Join" action link text based on lock state.
+		 * The heartbeat adds/removes .wp-locked on locked rows. This
+		 * CSS only runs when RTC is enabled, so .wp-locked here always
+		 * means collaborative editing, not exclusive locking.
+		 */
+		.join-action-text {
+			display: none;
+		}
+		.wp-locked .edit-action-text {
+			display: none;
+		}
+		.wp-locked .join-action-text {
+			display: inline;
+		}
 	</style>
 	<?php
 }
@@ -288,30 +306,51 @@ function gutenberg_filter_locked_post_text_for_rtc( $translation, $text, $domain
 }
 
 /**
- * Filters post row actions to change "Edit" to "Join" for locked posts
+ * Filters post row actions to render both "Edit" and "Join" link text
  * when real-time collaboration is enabled.
  *
+ * Both labels are always present in the markup; CSS toggles visibility
+ * based on the `.wp-collaborative-editing` class the heartbeat manages.
+ * This ensures the link text updates when the lock state changes without
+ * requiring a page reload.
+ *
  * @param string[] $actions An array of row action links.
  * @param WP_Post  $post    The post object.
  * @return string[] Modified row action links.
  */
 function gutenberg_post_list_collaboration_row_actions( $actions, $post ) {
-	if ( ! function_exists( 'wp_check_post_lock' ) ) {
-		require_once ABSPATH . 'wp-admin/includes/post.php';
-	}
-
-	$lock_holder = wp_check_post_lock( $post->ID );
-	if ( ! $lock_holder ) {
+	if ( ! isset( $actions['edit'] ) ) {
 		return $actions;
 	}
 
-	if ( isset( $actions['edit'] ) ) {
-		$actions['edit'] = preg_replace(
-			'/>Edit</',
-			'>' . esc_html__( 'Join', 'gutenberg' ) . '<',
-			$actions['edit']
-		);
-	}
+	$title = _draft_or_post_title( $post->ID );
+
+	/*
+	 * Both "Edit" and "Join" labels are rendered. The visible label is
+	 * toggled by CSS based on the row's `wp-collaborative-editing` class,
+	 * which is added or removed by inline-edit-post.js in response to
+	 * heartbeat ticks.
+	 */
+	$actions['edit'] = sprintf(
+		'<a href="%1$s">'
+		. '<span class="edit-action-text">'
+		. '<span aria-hidden="true">%2$s</span>'
+		. '<span class="screen-reader-text">%3$s</span>'
+		. '</span>'
+		. '<span class="join-action-text">'
+		. '<span aria-hidden="true">%4$s</span>'
+		. '<span class="screen-reader-text">%5$s</span>'
+		. '</span>'
+		. '</a>',
+		get_edit_post_link( $post->ID ),
+		__( 'Edit' ),
+		/* translators: %s: Post title. */
+		sprintf( __( 'Edit &#8220;%s&#8221;' ), $title ),
+		/* translators: Action link text for a singular post in the post list. Can be any type of post. */
+		_x( 'Join', 'post list', 'gutenberg' ),
+		/* translators: %s: Post title. */
+		sprintf( __( 'Join editing &#8220;%s&#8221;', 'gutenberg' ), $title )
+	);
 
 	return $actions;
 }