v1.1.8 (#59)

Author: Log1x

assets/css/field.scss assets/field.css

@@ -25,9 +25,7 @@
         }
 
         svg {
-          position: absolute;
-          top: 2px;
-          left: 2px;
+          @apply absolute top-[2px] left-[2px];
         }
       }
     }

assets/js/field.js assets/field.js

@@ -0,0 +1,9 @@
+import type { Bud } from '@roots/bud'
+
+export default async (bud: Bud) => {
+  bud
+    .setPath('@src', 'assets')
+    .setPath('@dist', 'public')
+    .entry(['field.js', 'field.css'])
+    .hash()
+}

bud.config.ts

@@ -14,7 +14,7 @@
     "php": ">=7.2"
   },
   "require-dev": {
-    "squizlabs/php_codesniffer": "^3.5"
+    "squizlabs/php_codesniffer": "^3.10"
   },
   "autoload": {
     "psr-4": {

composer.json

@@ -2,19 +2,15 @@
   "name": "acf-editor-palette",
   "private": true,
   "scripts": {
-    "build": "npx mix",
-    "build:production": "npx mix --production",
-    "start": "npx mix watch"
-  },
-  "devDependencies": {
-    "autoprefixer": "^10.3.3",
-    "laravel-mix": "^6.0.28",
-    "postcss": "^8.3.6",
-    "sass": "^1.38.2",
-    "sass-loader": "^12.1.0",
-    "tailwindcss": "^2.2.9"
+    "build": "bud build"
   },
   "dependencies": {
     "tinycolor2": "^1.4.2"
+  },
+  "devDependencies": {
+    "@roots/bud": "^6.21.0",
+    "@roots/bud-postcss": "^6.21.0",
+    "@roots/bud-tailwindcss": "^6.21.0",
+    "tailwindcss": "^3.4.4"
   }
 }

composer.lock

@@ -4,7 +4,7 @@
  * Plugin Name: Advanced Custom Fields: Editor Palette Field
  * Plugin URI:  https://github.com/log1x/acf-editor-palette
  * Description: A Gutenberg-like editor palette color picker field for Advanced Custom Fields.
- * Version:     1.1.7
+ * Version:     1.1.8
  * Author:      Brandon Nifong
  * Author URI:  https://github.com/log1x
  */
@@ -13,7 +13,7 @@
 
 add_filter('after_setup_theme', new class
 {
-   /**
+    /**
      * The field label.
      *
      * @var string

package.json

@@ -0,0 +1,11 @@
+{
+  "field": {
+    "js": [
+      "js/runtime.b89547.js",
+      "js/field.563bb8.js"
+    ],
+    "css": [
+      "css/field.d1c65e.css"
+    ]
+  }
+}

plugin.php

@@ -0,0 +1,6 @@
+{
+  "field.css": "css/field.d1c65e.css",
+  "field.js": "js/field.563bb8.js",
+  "runtime.js": "js/runtime.b89547.js",
+  "entrypoints.json": "entrypoints.json"
+}

public/css/field.css

@@ -5,19 +5,53 @@
 trait Asset
 {
     /**
-     * Resolve an asset URI from Laravel Mix's manifest.
-     *
-     * @param  string $asset
-     * @return string
+     * The manifest.
      */
-    public function asset($asset = null)
+    public array $manifest = [];
+
+    /**
+     * Retrieve the URI of an asset.
+     */
+    public function asset(?string $asset = null): string
+    {
+        $asset = $this->manifest($asset);
+
+        return $this->uri . $asset;
+    }
+
+    /**
+     * Retrieve the content of an asset.
+     */
+    public function inlineAsset(string $asset): ?string
     {
-        if (! file_exists($manifest = $this->path . 'mix-manifest.json')) {
-            return $this->uri . $asset;
+        $path = $this->path . $this->manifest($asset);
+
+        if (! file_exists($path)) {
+            return null;
+        }
+
+        return file_get_contents($path);
+    }
+
+    /**
+     * Retrieve the manifest.
+     */
+    public function manifest(?string $asset = null): array|string
+    {
+        if ($this->manifest) {
+            return $asset
+                ? $this->manifest[$asset]
+                : $this->manifest;
+        }
+
+        if (! file_exists($manifest = $this->path . 'manifest.json')) {
+            return [];
         }
 
-        $manifest = json_decode(file_get_contents($manifest), true);
+        $this->manifest = json_decode(file_get_contents($manifest), true);
 
-        return $this->uri . ($manifest[$asset] ?? $asset);
+        return $asset
+            ? $this->manifest[$asset]
+            : $this->manifest;
     }
 }

public/css/field.d1c65e.css

@@ -7,7 +7,7 @@ trait Palette
     /**
      * Retrieve the editor color palette.
      *
-     * @param  string $color
+     * @param  string  $color
      * @return string[]
      */
     public function palette($color = null)
@@ -40,11 +40,11 @@ public function palette($color = null)
                 $value['slug'] => array_merge($value, [
                     'text' => sprintf('has-text-color has-%s-color', $value['slug']),
                     'background' => sprintf('has-background has-%s-background-color', $value['slug']),
-                ])
+                ]),
             ]);
         }
 
-        return ! empty($color) ? (
+        return ! empty($color) && is_string($color) ? (
             $colors[$color] ?? null
         ) : $colors;
     }

public/entrypoints.json

@@ -21,9 +21,6 @@ class Field extends \acf_field
 
     /**
      * Create a new Field instance.
-     *
-     * @param  callable $plugin
-     * @return void
      */
     public function __construct(callable $plugin)
     {
@@ -39,13 +36,14 @@ public function __construct(callable $plugin)
     /**
      * The rendered field type.
      *
-     * @param  array $field
+     * @param  array  $field
      * @return void
      */
     public function render_field($field)
     {
         if (empty($palette = $this->palette())) {
             echo __('The theme editor palette is empty.', 'acf-editor-palette');
+
             return;
         }
 
@@ -55,7 +53,6 @@ public function render_field($field)
             });
         }
 
-
         if (! empty($allowed = $field['allowed_colors']) && is_array($allowed)) {
             $palette = array_filter($palette, function ($color) use ($allowed) {
                 return in_array($color['slug'], $allowed);
@@ -64,6 +61,7 @@ public function render_field($field)
 
         if (empty($palette)) {
             echo __('There are no colors available.', 'acf-editor-palette');
+
             return;
         }
 
@@ -124,7 +122,7 @@ class="components-button components-circular-option-picker__option acf-js-toolti
         echo '</ul>';
 
         echo '<div class="components-circular-option-picker__custom-clear-wrapper">' .
-            '<button type="button" class="components-button components-circular-option-picker__clear is-secondary is-small">' . // phpcs:ignore
+            '<button type="button" class="components-button components-circular-option-picker__clear is-secondary is-small">'. // phpcs:ignore
                 __('Clear', 'acf-editor-palette') .
             '</button>' .
         '</div>';
@@ -135,7 +133,7 @@ class="components-button components-circular-option-picker__option acf-js-toolti
     /**
      * The rendered field type settings.
      *
-     * @param  array $field
+     * @param  array  $field
      * @return void
      */
     public function render_field_settings($field)
@@ -214,9 +212,9 @@ public function render_field_settings($field)
     /**
      * The formatted field value.
      *
-     * @param  mixed $value
-     * @param  int   $post_id
-     * @param  array $field
+     * @param  mixed  $value
+     * @param  int  $post_id
+     * @param  array  $field
      * @return mixed
      */
     public function format_value($value, $post_id, $field)
@@ -235,9 +233,9 @@ public function format_value($value, $post_id, $field)
      * it is valid and can be saved.
      *
      * @param  bool  $valid
-     * @param  mixed $value
-     * @param  array $field
-     * @param  array $input
+     * @param  mixed  $value
+     * @param  array  $field
+     * @param  array  $input
      * @return bool
      */
     public function validate_value($valid, $value, $field, $input)
@@ -256,9 +254,9 @@ public function validate_value($valid, $value, $field, $input)
     /**
      * The field value before saving to the database.
      *
-     * @param  mixed $value
-     * @param  int   $post_id
-     * @param  array $field
+     * @param  mixed  $value
+     * @param  int  $post_id
+     * @param  array  $field
      * @return mixed
      */
     public function update_value($value, $post_id, $field)
@@ -279,8 +277,9 @@ public function update_value($value, $post_id, $field)
      */
     public function input_admin_enqueue_scripts()
     {
-        wp_enqueue_style($this->name, $this->asset('css/field.css'), ['wp-components'], null);
-        wp_enqueue_script($this->name, $this->asset('js/field.js'), [], null, true);
+        wp_enqueue_style($this->name, $this->asset('field.css'), ['wp-components'], null);
+        wp_enqueue_script($this->name, $this->asset('field.js'), [], null, true);
+        wp_add_inline_script($this->name, $this->inlineAsset('runtime.js'));
     }
 
     /**

public/js/field.563bb8.js

@@ -1,11 +1,3 @@
 module.exports = {
-  purge: false,
-  darkMode: false, // or 'media' or 'class'
-  theme: {
-    extend: {},
-  },
-  variants: {
-    extend: {},
-  },
-  plugins: [],
+  content: ['./src/**/*.php', './assets/field.js'],
 }