Feat/capabilities filter search

admin/class-cap-tabs.php

@@ -195,6 +195,18 @@ public function display() { ?>
 
 			<div class="inside">
 
+				<div class="members-cap-filter">
+					<label for="members-cap-filter-input" class="screen-reader-text"><?php esc_html_e( 'Filter capabilities', 'members' ); ?></label>
+					<input
+						type="search"
+						id="members-cap-filter-input"
+						class="members-cap-filter-input"
+						placeholder="<?php esc_attr_e( 'Filter capabilities&hellip;', 'members' ); ?>"
+						autocomplete="off"
+					/>
+					<span class="members-cap-filter-count" aria-live="polite"></span>
+				</div><!-- .members-cap-filter -->
+
 				<div class="members-cap-tabs">
 					<?php $this->tab_nav(); ?>
 					<div class="members-tab-wrap"></div>

admin/functions-admin.php

@@ -50,16 +50,29 @@ function members_admin_register_scripts() {
 
 	$edit_role_file = members_plugin()->dir . "js/edit-role{$min}.js";
 	$edit_role_ver  = file_exists( $edit_role_file ) ? filemtime( $edit_role_file ) : false;
-	wp_register_script( 'members-edit-role', members_plugin()->uri . "js/edit-role{$min}.js", array( 'postbox', 'wp-util' ), $edit_role_ver, true );
+	wp_register_script( 'members-edit-role', members_plugin()->uri . "js/edit-role{$min}.js", array( 'postbox', 'wp-util', 'wp-i18n' ), $edit_role_ver, true );
+
+	// Load JSON translations for `wp.i18n._n()` / `wp.i18n.__()` calls used by
+	// the capability filter. Strings still translated via PHP `__()` continue to
+	// flow through `wp_localize_script()` below for backward compatibility.
+	if ( function_exists( 'wp_set_script_translations' ) ) {
+		wp_set_script_translations( 'members-edit-role', 'members' );
+	}
 
 	// Localize our script with some text we want to pass in.
 	$i18n = array(
-		'button_role_edit' => esc_html__( 'Edit',                'members' ),
-		'button_role_ok'   => esc_html__( 'OK',                  'members' ),
-		'label_grant_cap'  => esc_html__( 'Grant %s capability', 'members' ),
-		'label_deny_cap'   => esc_html__( 'Deny %s capability',  'members' ),
-		'ays_delete_role'  => esc_html__( 'Are you sure you want to delete this role? This is a permanent action and cannot be undone.', 'members' ),
-		'hidden_caps'      => members_get_hidden_caps(),
+		'button_role_edit'       => esc_html__( 'Edit',                'members' ),
+		'button_role_ok'         => esc_html__( 'OK',                  'members' ),
+		'label_grant_cap'        => esc_html__( 'Grant %s capability', 'members' ),
+		'label_deny_cap'         => esc_html__( 'Deny %s capability',  'members' ),
+		'ays_delete_role'        => esc_html__( 'Are you sure you want to delete this role? This is a permanent action and cannot be undone.', 'members' ),
+		'hidden_caps'            => members_get_hidden_caps(),
+		'cap_filter_no_results'         => esc_html__( 'No capabilities match your filter.', 'members' ),
+		'cap_filter_no_results_on_tab'  => esc_html__( 'No capabilities match your filter on this tab.', 'members' ),
+		'cap_filter_elsewhere_one'      => esc_html__( '%d capability matches on other tabs.', 'members' ),
+		'cap_filter_elsewhere_other'    => esc_html__( '%d capabilities match on other tabs.', 'members' ),
+		'cap_filter_match'              => esc_html__( '%d match', 'members' ),
+		'cap_filter_matches'            => esc_html__( '%d matches', 'members' ),
 	);
 
 	wp_localize_script( 'members-edit-role', 'members_i18n', $i18n );

css/admin.css

@@ -1145,6 +1145,43 @@ body.admin_page_members-about #wpbody-content {
 	padding: 0;
 }
 
+/* Capability filter (search) input above the tabs. */
+
+.members-cap-filter {
+	display: flex;
+	align-items: center;
+	gap: 12px;
+	padding: 10px 12px;
+	background: #fff;
+	border-bottom: 1px solid #e5e5e5;
+}
+
+.members-cap-filter .members-cap-filter-input {
+	flex: 1 1 auto;
+	width: 100%;
+	height: 32px;
+	line-height: 1;
+	padding: 0 10px;
+	box-sizing: border-box;
+}
+
+.members-cap-filter .members-cap-filter-count {
+	color: #666;
+	font-size: 12px;
+	font-style: italic;
+}
+
+.members-cap-filter-empty td {
+	padding: 16px 12px;
+	color: #666;
+	font-style: italic;
+	text-align: center;
+}
+
+.members-cap-filter-empty {
+	background: transparent;
+}
+
 /* Tabs wrapper. */
 
 .members-cap-tabs,
@@ -1415,7 +1452,7 @@ body.admin_page_members-about #wpbody-content {
 	vertical-align: middle;
 }
 
-.members-roles-select tbody tr:nth-child(even) {
+.members-roles-select tbody tr.members-cap-row-alt {
 	background: #f2f2f2;
 }