Initial commit

.github/FUNDING.yml

@@ -0,0 +1 @@
+github: Log1x

.gitignore

@@ -0,0 +1,4 @@
+/node_modules
+/vendor
+npm-debug.log
+yarn-error.log

LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Brandon Nifong
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,144 @@
+# Modern ACF Options
+
+![Latest Stable Version](https://img.shields.io/packagist/v/log1x/modern-acf-options?style=flat-square)
+![Total Downloads](https://img.shields.io/packagist/dt/log1x/modern-acf-options?style=flat-square)
+
+Here lives a simple `mu-plugin` to modernize and brand theme options created with ACF. No admin panels, no bloat – just a simple filter to optionally customize the CSS properties with your color palette.
+
+![Screenshot](https://i.imgur.com/2ULki9H.png)
+
+## Requirements
+
+- [PHP](https://secure.php.net/manual/en/install.php) >= 7.1
+- [Composer](https://getcomposer.org/download/)
+
+## Installation
+
+### Bedrock
+
+Install via Composer:
+
+```bash
+$ composer require log1x/modern-acf-options
+```
+
+### Manual
+
+Download the release `.zip` and install into `wp-content/plugins`.
+
+## Usage
+
+The styling for Modern ACF Options requires the usage of `seamless` mode and tabs with their placement set to `left`.
+
+### Example using ACF Builder
+
+```php
+use StoutLogic\AcfBuilder\FieldsBuilder;
+
+acf_add_options_page([
+    'page_title' => get_bloginfo('name'),
+    'menu_title' => 'Theme Options',
+    'menu_slug' => 'theme-options',
+    'update_button' => 'Update Options',
+    'capability' => 'edit_theme_options',
+    'position' => '999',
+    'autoload' => true,
+]);
+
+$options = new FieldsBuilder('theme_options', [
+    'style' => 'seamless',
+]);
+
+$options
+    ->setLocation('options_page', '==', 'theme-options');
+
+$options
+    ->addTab('general')
+        ->setConfig('placement', 'left')
+
+        ->addAccordion('customization')
+          ->addImage('logo')
+
+        ->addAccordion('tracking')
+            ->addText('gtm')
+                ->setConfig('label', 'Google Tag Manager')
+        ->addAccordion('tracking_end')->endpoint()
+
+    ->addTab('advanced')
+        ->setConfig('placement', 'left')
+
+        ->addTrueFalse('debug')
+          ->setConfig('ui', '1');
+
+acf_add_local_field_group($options->build());
+```
+
+## Customization
+
+To customize the color palette, simply pass an array containing one or more of the colors you would like to change to the `acf_color_palette` filter:
+
+```php
+add_filter('acf_color_palette', function () {
+    return [
+        'brand' => '#0073aa',
+        'trim' => '#181818',
+    ];
+});
+```
+
+### Disabling Screen Options Tab
+
+```php
+use Illuminate\Support\Str;
+
+/**
+ * Disable Screen Options on the theme options page.
+ *
+ * @param  bool       $show
+ * @param  \WP_Screen $screen
+ * @return bool
+ */
+add_filter('screen_options_show_screen', function ($show, $screen) {
+    if (is_a($screen, 'WP_Screen') && Str::contains($screen->base, 'theme-options')) {
+        return false;
+    }
+}, 1, 2);
+```
+
+### Remove Admin Footer Text
+
+```php
+/**
+ * Remove admin footer text.
+ *
+ * @return bool
+ */
+add_filter('admin_footer_text', '__return_false', 100);
+```
+
+## Development
+
+Modern ACF Options is built using TailwindCSS and compiled with Laravel Mix.
+
+```bash
+$ yarn install
+$ yarn run start
+```
+
+### Todo
+
+- Continue optimizing/cleaning up existing styles.
+- Add styles for ACF switches, input fields (focus, hover), buttons, etc.
+- Reimplement saving spinner with CSS.
+
+## Bug Reports
+
+If you discover a bug in Modern ACF Options, please [open an issue](https://github.com/log1x/modern-acf-options/issues).
+
+## Contributing
+
+Contributing whether it be through PRs, reporting an issue, or suggesting an idea is encouraged and appreciated.
+
+## License
+
+Modern ACF Options is provided under the [MIT License](https://github.com/log1x/modern-acf-options/blob/master/LICENSE.md).

assets/css/acf.css

@@ -0,0 +1,120 @@
+.acf-settings-wrap {
+  @apply .shadow .border-black .border-2;
+
+  h1 {
+    @apply .bg-brand .text-white .text-2xl .font-semibold .p-20;
+
+    &::after {
+      @apply .block .text-base .font-thin .opacity-50;
+
+      content: var(--acf-subtitle, 'Theme Options');
+    }
+  }
+
+  .notice {
+    @apply .m-0;
+  }
+
+  br.clear {
+    @apply .hidden;
+  }
+
+  #poststuff {
+    @apply .p-0;
+
+    #post-body {
+      @apply .flex .flex-col .flex-wrap .items-start .m-0 .w-full;
+
+      .postbox-container {
+        @apply .w-full .float-none .m-0;
+
+        .meta-box-sortables {
+          @apply .min-h-0 .h-full .min-w-full;
+
+          .handlediv,
+          .hndle {
+            @apply .hidden;
+          }
+        }
+      }
+    }
+  }
+
+  #postbox-container-2 {
+    .acf-postbox.seamless {
+      @apply .bg-white .m-0 .relative;
+
+      .inside {
+        @apply .m-0 .p-4 .pl-0;
+
+        &.acf-fields.-sidebar {
+          @apply .py-5 .pr-5 .pl-40 .-mb-4 !important;
+
+          &::before {
+            @apply .bg-trim .border-none .py-4 .w-38;
+          }
+
+          .acf-tab-wrap.-left {
+            @apply .p-0 .m-0;
+
+            .acf-tab-group {
+              @apply .border-none .mt-0 .w-38;
+
+              li {
+                @apply .m-0;
+
+                a {
+                  @apply .text-white .bg-trim .px-6 .py-5 .mr-0 .rounded-none .border-none;
+                }
+
+                &.active a,
+                &:hover a,
+                &:focus a {
+                  @apply .text-white .bg-brand;
+                }
+              }
+            }
+          }
+
+          > .acf-field {
+            @apply .shadow .py-5 .px-3 .bg-white .border .border-solid .border-gray-300 .mb-4 .mr-4 .min-h-0 .w-full;
+
+            &:last-of-type {
+              @apply .mb-0;
+            }
+
+            .acf-label label {
+              @apply .font-semibold .mb-0;
+            }
+          }
+
+          .acf-field-accordion {
+            @apply .shadow .ml-0 .border-gray-300;
+          }
+        }
+      }
+    }
+  }
+
+  #postbox-container-1 {
+    @apply .order-2;
+
+    .postbox {
+      @apply .border-none .max-w-full .min-w-0 .bg-trim .mb-0;
+
+      #major-publishing-actions {
+        @apply .bg-transparent .border-none;
+
+        .button {
+          @apply .bg-brand .border-none .shadow-none .outline-none;
+
+          &:hover,
+          &:focus {
+            @apply .bg-brand;
+          }
+        }
+      }
+    }
+  }
+}
+

composer.json

@@ -0,0 +1,29 @@
+{
+  "name": "log1x/modern-acf-options",
+  "type": "wordpress-muplugin",
+  "description": "A modern take on ACF Theme Options",
+  "keywords": [
+    "wordpress",
+    "wp-admin",
+    "acf",
+    "theme-options"
+  ],
+  "require": {
+    "php": ">=7.1.3"
+  },
+  "require-dev": {
+    "squizlabs/php_codesniffer": "^3.5"
+  },
+  "scripts": {
+    "lint": [
+      "phpcs --ignore=vendor --extensions=php --standard=PSR12 ."
+    ]
+  },
+  "config": {
+    "optimize-autoloader": true,
+    "preferred-install": "dist",
+    "sort-packages": true
+  },
+  "minimum-stability": "dev",
+  "prefer-stable": true
+}