Add skins interface to admin

ACTIONS.md

@@ -87,6 +87,7 @@ Fires within the Fictioneer user profile section in the WordPress `wp-admin/prof
 * `fictioneer_admin_profile_fields_fingerprint( $profile_user )` – User fingerprint field. Priority 5.
 * `fictioneer_admin_profile_fields_flags( $profile_user )` – User flags. Priority 6.
 * `fictioneer_admin_profile_fields_oauth( $profile_user )` – User OAuth connections. Priority 7.
+* `fictioneer_admin_profile_fields_skins( $profile_user )` – Local custom CSS skins. Priority 7.
 * `fictioneer_admin_profile_fields_data_nodes( $profile_user )` – User data nodes. Priority 8.
 * `fictioneer_admin_profile_post_unlocks( $profile_user )` - Unlock password-protected posts. Priority 9.
 * `fictioneer_admin_profile_patreon( $profile_user )` – User Patreon membership data (if any). Priority 10.

includes/functions/_setup-admin.php

@@ -102,6 +102,16 @@ function fictioneer_admin_scripts( $hook_suffix ) {
     true
   );
 
+  if ( $hook_suffix === 'profile.php' || $hook_suffix === 'user-edit.php' ) {
+    wp_enqueue_script(
+      'fictioneer-css-skins',
+      get_template_directory_uri() . '/js/css-skins.min.js',
+      ['jquery', 'fictioneer-utility-scripts'],
+      FICTIONEER_VERSION,
+      true
+    );
+  }
+
   wp_localize_script(
     'fictioneer-admin-script',
     'fictioneer_ajax',

includes/functions/users/_admin-profile.php

@@ -1267,6 +1267,47 @@ if ( get_option( 'fictioneer_enable_oauth' ) ) {
   add_action( 'fictioneer_admin_user_sections', 'fictioneer_admin_profile_fields_oauth', 7 );
 }
 
+// =============================================================================
+// CUSTOM CSS SKINS
+// =============================================================================
+
+/**
+ * Renders HTML for the CSS Skins section in the wp-admin user profile
+ *
+ * @since 5.2.5
+ *
+ * @param WP_User $profile_user  The profile user object. Not necessarily the one
+ *                               currently editing the profile!
+ */
+
+function fictioneer_admin_profile_fields_skins( $profile_user ) {
+  // Start HTML ---> ?>
+  <tr class="user-fictioneer-skins-wrap">
+    <th><?php _e( 'Skins', 'fictioneer' ); ?></th>
+    <td>
+      <p style="margin: 0.35em 0 1em !important;"><?php
+        _e( 'You can upload up to three custom CSS skins (max. 200 KB each), with one active at a time. These skins apply only to your current device and browser (and may vanish at any time), but you can sync them up and down with your account. Be cautious about which skin you trust, as they can mess up the site.', 'fictioneer' );
+      ?></p>
+      <p style="margin: 0.35em 0 1em !important;"><?php
+        printf(
+          __( 'To create your own skin, <a href="%s" download>download this template</a>.', 'fictioneer' ),
+          esc_url( get_template_directory_uri() . '/css/skin-template.css' )
+        );
+      ?></p>
+      <input name="fictioneer_nonce" type="hidden" value="<?php echo wp_create_nonce( 'fictioneer_nonce' ); ?>">
+      <script type="text/javascript" data-jetpack-boost="ignore" data-no-optimize="1" data-no-defer="1" data-no-minify="1">var fcn_skinTranslations = <?php echo json_encode( fictioneer_get_skin_translations() ); ?>;</script>
+      <fieldset><?php
+        fictioneer_render_skin_interface();
+      ?></fieldset>
+    </td>
+  </tr>
+  <?php // <--- End HTML
+}
+
+if ( get_option( 'fictioneer_enable_css_skins' ) ) {
+  add_action( 'fictioneer_admin_user_sections', 'fictioneer_admin_profile_fields_skins', 7 );
+}
+
 // =============================================================================
 // SHOW DATA NODES
 // =============================================================================

partials/account/_skins.php

@@ -30,7 +30,7 @@ $current_user = $args['user'];
 <h3 class="profile__skins-headline"><?php _e( 'Skins', 'fictioneer' ); ?></h3>
 
 <p class="profile__description"><?php
-  _e( 'You can add up to three custom CSS skins (max. 200 KB each), with one active at a time. These skins apply only to your current device and browser (and may vanish at any time), but you can manually sync them up and down with your account. Be cautious about which skin you trust, as they can mess up the site.', 'fictioneer' );
+  _e( 'You can upload up to three custom CSS skins (max. 200 KB each), with one active at a time. These skins apply only to your current device and browser (and may vanish at any time), but you can sync them up and down with your account. Be cautious about which skin you trust, as they can mess up the site.', 'fictioneer' );
 ?></p>
 
 <p class="profile__description"><?php

src/js/admin.js

@@ -1303,3 +1303,21 @@ _$$('[data-click-action="fictioneer_ajax_recount_words"]').forEach(button => {
     }
   });
 });
+
+// =============================================================================
+// NOTIFICATIONS
+// =============================================================================
+
+/**
+ * Show notification that will vanish after a while.
+ *
+ * @since 5.26.0
+ * @param {String} message - The message to display.
+ * @param {Number} [duration=] - Seconds the message will be visible. Default 3.
+ * @param {String} [type=] - Type of the message. Default 'base'.
+ */
+
+function fcn_showNotification(message, duration = 3, type = 'base') {
+  // This is currently a dummy
+  return;
+}

src/js/css-skins.js

@@ -126,8 +126,8 @@ function fcn_deleteSkin(target) {
 function fcn_applySkin() {
   const fingerprint = fcn_getCookie('fcnLoggedIn');
 
-  // Ensure the theme login check is passed
-  if (!fingerprint) {
+  // Ensure user is logged-in and not inside admin panel
+  if (!fingerprint || _$('body.wp-admin')) {
     return;
   }
 

src/scss/_profile.scss

@@ -266,10 +266,6 @@
     background: var(--button-background-active);
     border: var(--button-border-active);
 
-    input[type=checkbox]:checked {
-      background: transparent;
-    }
-
     .custom-skin__toggle .off {
       display: none;
     }

src/scss/admin/admin.scss

@@ -9,47 +9,56 @@
 body {
   --fcn-bg-primary: #1d2327;
   --fcn-bg-secondary: #2c3337;
+  --fcn-bg-tertiary: #2271b1;
   --fcn-fg-color: #fff;
 
   &.admin-color-coffee {
     --fcn-bg-primary: #59524c;
     --fcn-bg-secondary: #46403b;
+    --fcn-bg-tertiary: #c7a589;
   }
 
   &.admin-color-light {
     --fcn-bg-primary: #e5e5e5;
     --fcn-bg-secondary: #fff;
+    --fcn-bg-tertiary: #888;
     --fcn-fg-color: #333;
   }
 
   &.admin-color-modern {
     --fcn-bg-primary: #1e1e1e;
     --fcn-bg-secondary: #0c0c0c;
+    --fcn-bg-tertiary: #3858e9;
   }
 
   &.admin-color-blue {
     --fcn-bg-primary: #53accc;
     --fcn-bg-secondary: #4896b3;
+    --fcn-bg-tertiary: #096484;
   }
 
   &.admin-color-ectoplasm {
     --fcn-bg-primary: #523f6d;
     --fcn-bg-secondary: #413256;
+    --fcn-bg-tertiary: #a3b745;
   }
 
   &.admin-color-midnight {
     --fcn-bg-primary: #363b3f;
     --fcn-bg-secondary: #25282b;
+    --fcn-bg-tertiary: #e14d43;
   }
 
   &.admin-color-ocean {
     --fcn-bg-primary: #738e96;
     --fcn-bg-secondary: #627c83;
+    --fcn-bg-tertiary: #9ebaa0;
   }
 
   &.admin-color-sunrise {
     --fcn-bg-primary: #cf4944;
     --fcn-bg-secondary: #b43c38;
+    --fcn-bg-tertiary: #dd823b;
   }
 }
 
@@ -1078,6 +1087,117 @@ td.fictioneer_patreon_lock_amount {
   }
 }
 
+.custom-skin-list {
+  display: grid;
+  gap: 1rem;
+
+  &:not(:empty) {
+    margin-bottom: 1rem;
+  }
+}
+
+.custom-skin {
+  box-sizing: border-box;
+  flex: 1 1 100%;
+  display: flex;
+  align-items: center;
+  background: #fff;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 18px;
+  padding: 8px;
+  border: 1px solid #c3c4c7;
+  width: 100%;
+  max-width: 500px;
+
+  &._upload {
+    position: relative;
+    background: none;
+    border-style: dashed;
+    padding: 0;
+    height: 42.5px;
+
+    &:not(:hover) .fa-plus {
+      opacity: .4;
+    }
+
+    input {
+      cursor: pointer;
+      height: 100%;
+      width: 100%;
+      opacity: 0;
+    }
+
+    .fa-plus {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      pointer-events: none;
+      text-align: center;
+      transition: opacity .2s;
+      transform: translate(-50%, -50%);
+    }
+  }
+
+  &.active {
+    color: #fff;
+    background: var(--fcn-bg-tertiary, var(--fcn-bg-secondary));
+    border: 1px solid var(--fcn-bg-tertiary, var(--fcn-bg-secondary));
+
+    .custom-skin__toggle .off {
+      display: none;
+    }
+  }
+
+  &:not(.active) {
+    .custom-skin__toggle .on {
+      display: none;
+    }
+  }
+
+  &__info {
+    flex: 1 1 auto;
+  }
+
+  &__toggle {
+    padding: 4px 16px 4px 4px;
+  }
+
+  &__spacer {
+    &::after {
+      content: '|';
+      margin: 0 4px;
+      opacity: .6;
+    }
+  }
+
+  &__version,
+  &__author {
+    opacity: .6;
+  }
+
+  &__delete {
+    padding: 4px 4px 4px 16px;
+    transition: opacity .2s;
+
+    &:not(:hover) {
+      opacity: .3;
+    }
+  }
+
+  button {
+    cursor: pointer;
+    appearance: none;
+    background: none;
+    color: inherit;
+    border: none;
+  }
+}
+
+.custom-skin-actions {
+  margin-top: 16px;
+}
+
 .unlock-posts {
   &__unlocked-posts,
   &__search-results {