65683 list table view mode switcher

[afercia]

Trac ticket: https://core.trac.wordpress.org/ticket/65683
Trac ticket: https://core.trac.wordpress.org/ticket/65697

Work in progress to make the edia Library 'List view' and 'Grid view' labels visible.

Regarding rhe removed list views: This is exactly what we want to do: remove list/excerpt view modes and simplify. There will be only one view that shows all the information that was previously split in the two modes.

Currently, the two view modes show minimal differences.
As noted in the Trac ticket at https://core.trac.wordpress.org/ticket/65683#comment:6 I'd like to propose to entirely remove the switch view functionality from the Network Sites and the Network Users pages because it adds little value. The additional info could be shown by default.

Still to address: the 'active' state needs to be improved. Currently, it only uses color...

Screenshot so far:

Use of AI Tools

None

This Pull Request is for code review only. Please keep all other discussion in the Trac ticket. Do not merge this Pull Request. See GitHub Pull Requests for Code Review in the Core Handbook for more details.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Core Committers: Use this line as a base for the props when committing in SVN:

Props afercia.

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[github-actions]

Test using WordPress Playground

The changes in this pull request can previewed and tested using a WordPress Playground instance.

WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Some things to be aware of

• All changes will be lost when closing a tab with a Playground instance.
• All changes will be lost when refreshing the page.
• A fresh instance is created each time the link below is clicked.
• Every time this pull request is updated, a new ZIP file containing all changes is created. If changes are not reflected in the Playground instance,
  it's possible that the most recent build failed, or has not completed. Check the list of workflow runs to be sure.

For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation.

Test this pull request with WordPress Playground.

[Copilot]

Pull request overview

This PR updates the Media Library “view mode” switcher so the List/Grid labels are visually displayed (not screen-reader-only), and adds ARIA grouping for the switcher while adjusting related toolbar/list-table styling.

Changes:

• Make List/Grid switcher labels visible in both PHP-rendered list tables and the JS Media Grid toolbar template.
• Add ARIA role="group" / aria-label for the view switcher container (PHP + JS).
• Update Media Library toolbar/list-table CSS layout to accommodate visible labels.

Reviewed changes

Copilot reviewed 9 out of 9 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
src/wp-includes/media.php	Adds a new localized string for the view switcher ARIA label.
src/wp-includes/media-template.php	Changes the Media Grid view switcher template to display visible “List”/“Grid” labels.
src/wp-admin/includes/class-wp-ms-users-list-table.php	Removes multisite users list view-mode handling and related formatting (regression risk).
src/wp-admin/includes/class-wp-ms-sites-list-table.php	Removes multisite sites list view-mode handling and adds unconditional per-row blog switching (regression/perf risk).
src/wp-admin/includes/class-wp-media-list-table.php	Updates Media Library list table mode labels and toolbar wrapper class.
src/wp-admin/includes/class-wp-list-table.php	Adjusts base view switcher markup (role/label + visible label span).
src/wp-admin/css/media.css	Tweaks Media Library filter layout/margins and flex behavior.
src/wp-admin/css/list-tables.css	Updates view switcher layout for visible labels and Media Library toolbar spacing.
src/js/media/views/attachments/browser.js	Adds ARIA grouping and label to the Media Grid toolbar’s view switcher container.

Comments suppressed due to low confidence (6)

src/wp-admin/includes/class-wp-ms-users-list-table.php:177

• pagination() no longer outputs the view switcher at the top of the table, so users lose the UI to toggle compact/extended view modes.

	protected function pagination( $which ) {
		parent::pagination( $which );
	}

src/wp-admin/includes/class-wp-ms-users-list-table.php:334

• The registered date column now always uses the extended date+time format, ignoring the list table view mode. This is a behavior change from other list tables where compact mode shows a shorter date.

	public function column_registered( $user ) {
		$date = __( 'Y/m/d g:i:s a' );
		echo mysql2date( $date, $user->user_registered );
	}

src/wp-admin/includes/class-wp-ms-sites-list-table.php:314

• pagination() no longer outputs the view switcher at the top of the table, so users lose the UI to toggle compact/extended view modes.

	protected function pagination( $which ) {
		parent::pagination( $which );
	}

src/wp-admin/includes/class-wp-ms-sites-list-table.php:480

• column_blogname() now always calls switch_to_blog() and reads blog options for every row. Previously this extra per-site work only ran in the extended (excerpt) mode; doing it unconditionally can be a significant performance hit on large networks.

		<?php
		switch_to_blog( $blog['blog_id'] );
		echo '<p>';
		printf(
			/* translators: 1: Site title, 2: Site tagline. */

src/wp-admin/includes/class-wp-ms-sites-list-table.php:498

• The last updated column now always uses the extended date+time format, ignoring the list table view mode. This is a behavior change from other list tables where compact mode shows a shorter date.

	public function column_lastupdated( $blog ) {
		$date = __( 'Y/m/d g:i:s a' );

src/wp-admin/includes/class-wp-ms-sites-list-table.php:515

• The registered column now always uses the extended date+time format, ignoring the list table view mode. This is a behavior change from other list tables where compact mode shows a shorter date.

	public function column_registered( $blog ) {
		$date = __( 'Y/m/d g:i:s a' );

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[afercia]

This is still a todo.

[Copilot]

Pull request overview

Copilot reviewed 9 out of 9 changed files in this pull request and generated 4 comments.

Comments suppressed due to low confidence (7)

src/wp-admin/includes/class-wp-list-table.php:810

• The aria-label attribute for the view switcher contains an extra apostrophe, which results in invalid HTML and can break assistive-technology parsing of the control’s label.

		<div class="view-switch" role="group" aria-label="<?php esc_attr_e( 'View mode' ); ?>'">

src/wp-admin/includes/class-wp-ms-users-list-table.php:26

• This docblock refers to “sites”, but this list table is for network users. The incorrect description can mislead future maintenance.

	 * Prepares the list of sites for display.

src/wp-admin/includes/class-wp-ms-users-list-table.php:36

• The list table view mode handling was removed, which drops the existing list/excerpt mode support and stops persisting the user setting (network_users_list_mode). This appears unrelated to the Media Library view switcher work and is a functional regression for Network Admin > Users.

	public function prepare_items() {
		global $usersearch, $role;

		$usersearch = isset( $_REQUEST['s'] ) ? wp_unslash( trim( $_REQUEST['s'] ) ) : '';

src/wp-admin/includes/class-wp-ms-sites-list-table.php:73

• The list table view mode handling was removed, which drops the existing list/excerpt mode support and stops persisting the user setting (sites_list_mode). This change is not mentioned in the PR description (which focuses on Media Library view/grid labels) and looks like an unintended regression for Network Admin > Sites.

	public function prepare_items() {
		global $s, $wpdb;

src/wp-admin/css/list-tables.css:817

• With labels now visible, the active view state is still indicated only by icon color (via :before). To avoid relying on color alone, add a non-color visual cue (e.g., font-weight) for the current mode’s text label.

.view-switch-label {
	font-size: 11px;
}

src/wp-admin/includes/class-wp-ms-sites-list-table.php:504

• This now always uses the date+time format, which changes the Sites list table output in list mode. If excerpt/list mode remains supported, keep the existing behavior (date-only in list mode; date+time in excerpt mode).

This issue also appears on line 513 of the same file.

	public function column_lastupdated( $blog ) {
		$date = __( 'Y/m/d g:i:s a' );

		if ( '0000-00-00 00:00:00' === $blog['last_updated'] ) {
			_e( 'Never' );
		} else {
			echo mysql2date( $date, $blog['last_updated'] );
		}
	}

src/wp-admin/includes/class-wp-ms-sites-list-table.php:520

• This now always uses the date+time format, which changes the Sites list table output in list mode. If excerpt/list mode remains supported, keep the existing behavior (date-only in list mode; date+time in excerpt mode).

	public function column_registered( $blog ) {
		$date = __( 'Y/m/d g:i:s a' );

		if ( '0000-00-00 00:00:00' === $blog['registered'] ) {
			echo '—';
		} else {
			echo mysql2date( $date, $blog['registered'] );
		}

[afercia]

I'mm going to mark this PR as a draft so it is clear it's a Work In Progress.

[Copilot]

Pull request overview

Copilot reviewed 9 out of 9 changed files in this pull request and generated no new comments.

Comments suppressed due to low confidence (7)

src/wp-includes/media-template.php:341

• This outputs translated text with e() into visible HTML. Use escaping (esc_html_e/esc_html_) to prevent translation-supplied markup from being rendered.

				_e( 'Grid' );

src/wp-admin/includes/class-wp-ms-users-list-table.php:177

• This override now only calls parent::pagination() and no longer adds any custom behavior. Consider removing the method entirely so future pagination changes in WP_List_Table automatically apply here.

	protected function pagination( $which ) {
		parent::pagination( $which );
	}

src/wp-admin/includes/class-wp-ms-sites-list-table.php:314

• This override now only calls parent::pagination() and no longer adds any custom behavior. Consider removing the method entirely so future pagination changes in WP_List_Table automatically apply here.

	protected function pagination( $which ) {
		parent::pagination( $which );
	}

src/wp-admin/includes/class-wp-list-table.php:810

• The aria-label string "View mode" is ambiguous for translators; use a context-aware translation function so it can be translated appropriately in different admin contexts.

		<div class="view-switch" role="group" aria-label="<?php esc_attr_e( 'View mode' ); ?>">

src/wp-includes/media-template.php:333

• This outputs translated text with e() into visible HTML. Use escaping (esc_html_e/esc_html_) to prevent translation-supplied markup from being rendered.

This issue also appears on line 341 of the same file.

				_e( 'List' );

src/wp-includes/media.php:5192

• The new l10n string is used as an ARIA label; add a translators comment to clarify its purpose (similar to other accessibility strings in this l10n array).

		'viewSwitcherAriaLabel'       => __( 'View mode' ),

src/wp-admin/includes/class-wp-list-table.php:813

• $title comes from translations and is printed into HTML; since the label is now visible text, it should be escaped to prevent translation-supplied markup from being rendered.

		foreach ( $this->modes as $mode => $title ) {
			$classes      = array( 'view-' . $mode );

[github-actions]

A commit was made that fixes the Trac ticket referenced in the description of this pull request.

SVN changeset: 62976
GitHub commit: aea966d

This PR will be closed, but please confirm the accuracy of this and reopen if there is more work to be done.