includes/functions/_admin.php

@@ -192,6 +192,7 @@ function fictioneer_removable_args( $args ) {
   $args[] = 'failure';
   $args[] = 'fictioneer_nonce';
   $args[] = 'fictioneer-notice';
+  $args[] = 'fictioneer-role';
   return $args;
 }
 add_filter( 'removable_query_args', 'fictioneer_removable_args' );

includes/functions/_roles.php

@@ -60,8 +60,6 @@ function fictioneer_initialize_roles() {
   if ( $administrator && ! in_array( 'fcn_admin_panel_access', $administrator->capabilities ) ) {
     fictioneer_setup_roles();
   }
-
-  fictioneer_setup_roles();
 }
 add_action( 'init', 'fictioneer_initialize_roles' );
 

includes/functions/settings/_settings_actions.php

@@ -102,11 +102,7 @@ if ( ! defined( 'FICTIONEER_ADMIN_SETTINGS_NOTICES' ) ) {
       'fictioneer-fix-collections' => __( 'This function does currently not cover any issues.', 'fictioneer' ),
       'fictioneer-fix-pages' => __( 'This function does currently not cover any issues.', 'fictioneer' ),
       'fictioneer-fix-posts' => __( 'This function does currently not cover any issues.', 'fictioneer' ),
-      'fictioneer-updated-editor-caps' => __( 'Editor capabilities have been updated.', 'fictioneer' ),
-      'fictioneer-updated-author-caps' => __( 'Author capabilities have been updated.', 'fictioneer' ),
-      'fictioneer-updated-contributor-caps' => __( 'Contributor capabilities have been updated.', 'fictioneer' ),
-      'fictioneer-updated-fcn_moderator-caps' => __( 'Moderator capabilities have been updated.', 'fictioneer' ),
-      'fictioneer-updated-subscriber-caps' => __( 'Subscriber capabilities have been updated.', 'fictioneer' )
+      'fictioneer-updated-role-caps' => __( 'Role capabilities have been updated.', 'fictioneer' )
 		)
 	);
 }
@@ -727,9 +723,10 @@ function fictioneer_roles_update_role() {
   $role_name = $_POST['role'] ?? '';
   $role = get_role( $role_name );
 
-  // Role?
+  // Role not found?
   if ( empty( $role ) ) {
-    fictioneer_finish_tool_action( '', 'failure' );
+    wp_safe_redirect( add_query_arg( array( 'fictioneer-role' => $role_name ), wp_get_referer() ) );
+    exit();
   }
 
   // Update capabilities
@@ -741,10 +738,18 @@ function fictioneer_roles_update_role() {
     }
   }
 
-  // var_dump( ( $_POST['caps'] ?? [] ) );
+  // Redirect
+  wp_safe_redirect(
+    add_query_arg(
+      array(
+        'success' => "fictioneer-updated-role-caps",
+        'fictioneer-role' => $role_name
+      ),
+      wp_get_referer()
+    )
+  );
 
-  // Return
-  fictioneer_finish_tool_action( "fictioneer-updated-{$role_name}-caps" );
+  exit();
 }
 add_action( 'admin_post_fictioneer_roles_update_role', 'fictioneer_roles_update_role' );
 

includes/functions/settings/_settings_page_roles.php

@@ -16,7 +16,10 @@ $roles = wp_roles()->roles;
 // Remove administrators (do not touch them!)
 unset( $roles['administrator'] );
 
-function fictioneer_role_card( $role ) {
+// Current selection
+$selected_role = ( $_GET['fictioneer-role'] ?? 0 ) ?: array_keys( $roles )[0];
+
+function fictioneer_role_card( $role, $selected_role ) {
   // Setup
   $admin_nonce = wp_nonce_field( 'fictioneer_roles_update_role', 'fictioneer_nonce', true, false );
 
@@ -136,11 +139,21 @@ function fictioneer_role_card( $role ) {
   );
 
   // Start HTML ---> ?>
-  <div class="card">
-    <div class="card-wrapper">
-      <h3 class="card-header"><?php echo $role['name']; ?></h3>
-      <div class="card-content">
-        <form method="post" action="<?php echo admin_url('admin-post.php'); ?>">
+  <form
+    method="post"
+    class="<?php echo $selected_role == $role['type'] ? '' : 'hidden'; ?>"
+    action="<?php echo admin_url( 'admin-post.php' ); ?>"
+    data-sidebar-target="<?php echo $role['type']; ?>"
+  >
+
+    <input type="hidden" name="action" value="fictioneer_roles_update_role">
+    <input type="hidden" name="role" value="<?php echo $role['type']; ?>">
+    <?php echo $admin_nonce; ?>
+
+    <div class="card">
+      <div class="card-wrapper">
+        <h3 class="card-header"><?php echo $role['name']; ?></h3>
+        <div class="card-content">
           <input type="hidden" name="action" value="fictioneer_roles_update_role">
           <input type="hidden" name="role" value="<?php echo $role['type']; ?>">
           <?php echo $admin_nonce; ?>
@@ -257,18 +270,17 @@ function fictioneer_role_card( $role ) {
             ?>
           </div>
 
-          <hr>
-
-          <div class="row flex wrap gap-6">
-            <button type="submit" class="button button--secondary">
-              <?php printf( _x( 'Update %s', 'Update {Role}', 'fictioneer' ), $role['name'] ); ?>
-            </button>
-          </div>
-
-        </form>
+        </div>
       </div>
     </div>
-  </div>
+
+    <div class="flex wrap" style="margin-top: var(--32bp);">
+      <button type="submit" class="button button--secondary">
+        <?php printf( _x( 'Update %s', 'Update {Role}', 'fictioneer' ), $role['name'] ); ?>
+      </button>
+    </div>
+
+  </form>
   <?php // <--- End HTML
 }
 
@@ -290,15 +302,27 @@ function fictioneer_capability_checkbox( $cap, $name, $set = false ) {
 
 	<div class="fictioneer-settings__content">
     <div class="tab-content">
-      <div class="single-columns-layout">
-        <?php
+      <div class="sidebar-layout">
 
-          foreach ( $roles as $key => $role ) {
-            $role['type'] = $key;
-            fictioneer_role_card( $role );
-          }
+        <ul class="sidebar-layout__side">
+          <?php
+            foreach ( $roles as $key => $role ) {
+              $role['type'] = $key;
+              $class = $selected_role == $key ? 'class="current"' : '';
+              echo '<li ' . $class . ' data-sidebar-click="' . $key . '">' . $role['name'] . '</li>';
+            }
+          ?>
+        </ul>
+
+        <div class="sidebar-layout__content">
+          <?php
+            foreach ( $roles as $key => $role ) {
+              $role['type'] = $key;
+              fictioneer_role_card( $role, $selected_role );
+            }
+          ?>
+        </div>
 
-        ?>
       </div>
     </div>
   </div>

src/js/admin.js

@@ -432,3 +432,32 @@ _$('.fictioneer-settings')?.addEventListener('click', event => {
       break;
   }
 });
+
+// =============================================================================
+// SIDEBAR LAYOUT
+// =============================================================================
+
+_$('.fictioneer-settings')?.addEventListener('click', event => {
+  const clickTarget = event.target.closest('[data-sidebar-click]');
+
+  if (!clickTarget) {
+    return;
+  }
+
+  const target = _$(`[data-sidebar-target="${clickTarget.dataset.sidebarClick}"]`);
+
+  if (!target) {
+    return;
+  }
+
+  _$$('[data-sidebar-target]').forEach(element => {
+    element.classList.add('hidden');
+  });
+
+  _$$('[data-sidebar-click]').forEach(element => {
+    element.classList.remove('current');
+  });
+
+  target.classList.remove('hidden');
+  clickTarget.classList.add('current');
+});

src/scss/admin/_layout.scss

@@ -1,7 +1,45 @@
 & {
-  .single-columns-layout {
-    display: grid;
+  .sidebar-layout {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
     gap: var(--32bp);
+
+    @include bp(768px) {
+      flex-direction: row;
+    }
+
+    &__side {
+      flex-shrink: 0;
+      margin: 0;
+
+      li {
+        user-select: none;
+        cursor: pointer;
+        display: grid;
+        place-content: center;
+        background: white;
+        color: var(--text-700);
+        font-size: var(--fs-xs);
+        line-height: 1;
+        padding: 0 16px;
+        border-radius: var(--large-border-radius);
+        height: 32px;
+
+        &:not(.current):hover {
+          background: var(--bg-300);
+        }
+      }
+
+      .current {
+        background: var(--bg-900);
+        color: var(--text-50);
+      }
+    }
+
+    &__content {
+      flex-grow: 1;
+    }
   }
 
   .columns-layout {