WordPress.org
Get WordPress

Plugin Directory

Changeset 3405041


Ignore:
Timestamp:
11/28/2025 10:36:48 AM (4 months ago)
Author:
jonkastonka
Message:

Now also adds the defined colors to the customizer

Location:
color-sync-for-acf/trunk
Files:
4 edited

Legend:

Unmodified
Added
Removed

  • color-sync-for-acf/trunk/color-sync-for-acf.php

    r3296485 r3405041  
    55 * Description: Instead of having to define your colors twice; once in your theme, and once in custom ACF code, just use this plugin to get all defined colors from your theme to the ACF color picker automatically.
    66 * Short Description: Automatically get all colors from your theme to the ACF color picker
    7  * Version: 1.0.3
     7 * Version: 1.0.4
    88 * Requires at least: 6.0
    99 * Requires PHP: 8.0
    … …  
    1616**/
    1717
    18 defined( 'ABSPATH' ) or die( 'No script kiddies please!' );
     18defined( 'ABSPATH' ) || exit;
    1919
    20 define( 'COLOR_SYNC_FOR_ACF_VERSION', '1.0.2' );
     20define( 'COLOR_SYNC_FOR_ACF_VERSION', '1.0.4' );
    2121
    2222$color_sync_for_acf_dir = plugin_dir_path( __FILE__ );
    2323
    24 add_action( 'acf/input/admin_enqueue_scripts', 'color_sync_for_acf_scripts' );
    25 function color_sync_for_acf_scripts() {
    26     // Load custom script to modify ACF color pickers
    27     wp_enqueue_script(
     24/**
     25 * Get plugin version.
     26 *
     27 * @return string
     28 */
     29function color_sync_for_acf_get_plugin_version() : string {
     30    return defined( 'COLOR_SYNC_FOR_ACF_VERSION' )
     31        ? COLOR_SYNC_FOR_ACF_VERSION
     32        : '1.0.0';
     33}
     34
     35/**
     36 * Get theme colors from theme.json via wp_get_global_settings().
     37 *
     38 * @return array[]
     39 */
     40function color_sync_for_acf_get_theme_colors() : array {
     41    $colors = array();
     42
     43    if ( function_exists( 'wp_get_global_settings' ) ) {
     44        $settings = wp_get_global_settings();
     45
     46        $theme_palette  = isset( $settings['color']['palette']['theme'] )
     47            ? (array) $settings['color']['palette']['theme']
     48            : array();
     49
     50        $custom_palette = isset( $settings['color']['palette']['custom'] )
     51            ? (array) $settings['color']['palette']['custom']
     52            : array();
     53
     54        $palette = array_merge( $theme_palette, $custom_palette );
     55
     56        foreach ( $palette as $color ) {
     57            if ( ! empty( $color['name'] ) && ! empty( $color['color'] ) ) {
     58                $colors[] = array(
     59                    'name'  => $color['name'],
     60                    'color' => $color['color'],
     61                );
     62            }
     63        }
     64    }
     65
     66    return $colors;
     67}
     68
     69/**
     70 * Register shared assets (JS + CSS) for admin & Customizer.
     71 */
     72add_action( 'init', 'color_sync_for_acf_register_assets' );
     73function color_sync_for_acf_register_assets() {
     74
     75    if ( ! is_admin() && ! is_customize_preview() ) {
     76        return;
     77    }
     78   
     79    $plugin_url = plugin_dir_url( __FILE__ );
     80
     81    wp_register_script(
    2882        'color-sync-for-acf',
    29         plugin_dir_url(__FILE__) . '/js/color-sync-for-acf.js',
    30         ['acf-input'],
     83        $plugin_url . 'js/color-sync-for-acf.js',
     84        array( 'jquery', 'wp-color-picker' ),
    3185        color_sync_for_acf_get_plugin_version(),
    3286        true
    3387    );
    34     // Get theme colors from theme.json
    35     $colors = [];
    36     if ( function_exists( 'wp_get_global_settings' ) ) {
    37         $settings = wp_get_global_settings();
    38         $theme_colors = array_merge(
    39             $settings['color']['palette']['theme'] ?? [],
    40             $settings['color']['palette']['custom'] ?? []
    41         );
    42         foreach ( $theme_colors as $color ) {
    43             if ( !empty( $color['name']) && !empty($color['color'] ) ) {
    44                 $colors[] = [
    45                     'name' => $color['name'],
    46                     'color' => $color['color'],
    47                 ];
    48             }
    49         }
    50     }
    51     wp_localize_script( 'color-sync-for-acf', 'colorSyncForACFThemeColors', $colors );
    52 }
    5388
    54 add_action( 'admin_enqueue_scripts', 'color_sync_for_acf_styles' );
    55 function color_sync_for_acf_styles() {
    56     wp_enqueue_style(
    57         'color-sync-for-acf',
    58         plugin_dir_url(__FILE__) . '/css/style.css',
    59         '',
    60         color_sync_for_acf_get_plugin_version()
     89    wp_register_style(
     90        'color-sync-for-acf',
     91        $plugin_url . 'css/style.css',
     92        array( 'wp-color-picker' ),
     93        color_sync_for_acf_get_plugin_version()
    6194    );
    6295}
    6396
    64 function color_sync_for_acf_get_plugin_version() {
    65     return COLOR_SYNC_FOR_ACF_VERSION;
     97
     98/**
     99 * Enqueue assets + pass theme colors for ACF admin screens.
     100 */
     101add_action( 'acf/input/admin_enqueue_scripts', 'color_sync_for_acf_enqueue_acf_assets' );
     102function color_sync_for_acf_enqueue_acf_assets() {
     103    wp_enqueue_script( 'color-sync-for-acf' );
     104    wp_enqueue_style( 'color-sync-for-acf' );
     105
     106    wp_localize_script(
     107        'color-sync-for-acf',
     108        'colorSyncForACFThemeColors',
     109        color_sync_for_acf_get_theme_colors()
     110    );
    66111}
    67112
    68 // For testing
     113/**
     114 * Enqueue assets + pass theme colors for Customizer controls.
     115 */
     116add_action( 'customize_controls_enqueue_scripts', 'color_sync_for_acf_enqueue_customizer_assets' );
     117function color_sync_for_acf_enqueue_customizer_assets() {
     118    wp_enqueue_script( 'color-sync-for-acf' );
     119    wp_enqueue_style( 'color-sync-for-acf' );
     120
     121    wp_localize_script(
     122        'color-sync-for-acf',
     123        'colorSyncForACFThemeColors',
     124        color_sync_for_acf_get_theme_colors()
     125    );
     126}
     127
     128// For testing includes in the future.
    69129// include_once( $color_sync_for_acf_dir . 'inc/custom-blocks.php' );

  • color-sync-for-acf/trunk/inc/custom-blocks.php

    r3296471 r3405041  
    88       
    99        acf_register_block_type( array(
    10             'name'              => 'Test Color Picker',
     10            'name'              => 'test-color-picker',
    1111            'title'             => __( 'Test Color Picker', 'color-sync-for-acf' ),
    1212            'description'       => __( 'Mostly to text color picker', 'color-sync-for-acf' ),

  • color-sync-for-acf/trunk/js/color-sync-for-acf.js

    r3296471 r3405041  
    1 (function($) {
    2     if (typeof acf === 'undefined' || typeof colorSyncForACFThemeColors === 'undefined') return;
     1(function ($) {
     2    'use strict';
    33
    4     acf.add_filter('color_picker_args', function(args, field) {
    5         args.palettes = colorSyncForACFThemeColors.map(color => color.color);
     4    // Build a simple palette array from the localized data.
     5    function getPalettes() {
     6        if (!Array.isArray(window.colorSyncForACFThemeColors)) {
     7            return null;
     8        }
    69
    7         // Wait for the color picker to initialize, then add tooltips
    8         setTimeout(() => {
    9             $('.wp-picker-holder .iris-palette-container').each(function() {
    10                 const $container = $(this);
    11                 const $swatches = $container.find('.iris-palette');
     10        return window.colorSyncForACFThemeColors
     11            .map(function (item) { return item && item.color ? item.color : null; })
     12            .filter(function (color) { return !!color; });
     13    }
    1214
    13                 $swatches.each(function(index) {
    14                     const colorInfo = colorSyncForACFThemeColors[index];
    15                     if (colorInfo && colorInfo.name) {
    16                         $(this).attr('title', colorInfo.name);
    17                     }
    18                 });
     15    // Add title tooltips based on the original color info.
     16    function addTooltips($container) {
     17        if (!Array.isArray(window.colorSyncForACFThemeColors)) {
     18            return;
     19        }
     20
     21        var $swatches = $container.find('.iris-palette');
     22
     23        $swatches.each(function (index) {
     24            var info = window.colorSyncForACFThemeColors[index];
     25            if (info && info.name) {
     26                $(this).attr('title', info.name);
     27            }
     28        });
     29    }
     30
     31    var palettes = getPalettes();
     32    if (!palettes || !palettes.length) {
     33        return;
     34    }
     35
     36    // Inject our palettes into a single wp-color-picker instance.
     37    function enhancePicker($input) {
     38        if (!$input.length || $input.data('colorSyncApplied')) {
     39            return;
     40        }
     41
     42        function applyPalettes() {
     43            try {
     44                $input.iris('option', 'palettes', palettes);
     45            } catch (e) {
     46                return false;
     47            }
     48
     49            $input.data('colorSyncApplied', true);
     50
     51            var $holder = $input
     52                .closest('.wp-picker-container')
     53                .find('.iris-palette-container');
     54
     55            if ($holder.length) {
     56                addTooltips($holder);
     57            }
     58
     59            return true;
     60        }
     61
     62        // Try immediately, otherwise retry once shortly after.
     63        if (!applyPalettes()) {
     64            setTimeout(applyPalettes, 100);
     65        }
     66    }
     67
     68    // Enhance all current pickers.
     69    function scanPickers() {
     70        $('.wp-color-picker').each(function () {
     71            enhancePicker($(this));
     72        });
     73    }
     74
     75    $(function () {
     76        // Initial pass – wait a bit so WP/ACF/Customizer can init their pickers.
     77        setTimeout(scanPickers, 300);
     78
     79        // Watch for dynamically added pickers (Customizer loads controls on demand).
     80        if (window.MutationObserver) {
     81            new MutationObserver(scanPickers).observe(document.body, {
     82                childList: true,
     83                subtree: true
    1984            });
    20         }, 300); // delay to let the color picker render
     85        }
     86    });
    2187
    22         return args;
    23     });
    2488})(jQuery);

  • color-sync-for-acf/trunk/readme.txt

    r3297031 r3405041  
    77Tested up to: 6.8
    88Requires PHP: 8.0
    9 Stable tag: 1.0.3
     9Stable tag: 1.0.4
    1010License: GPLv2 or later
    1111License URI: http://www.gnu.org/licenses/gpl-2.0.html
    … …  
    1515== Description ==
    1616
    17 Automatically get all colors from your theme to the ACF color picker
     17Automatically get all colors from your theme to the ACF color picker and the customizer color picker.
    1818 
    1919Instead of having to define your colors twice; once in your theme, and once in custom ACF code, just use this plugin to get all defined colors from your theme to the ACF color picker automatically.
    … …  
    3535== Changelog ==
    3636
     37= 1.0.4 =
     38
     39* Now also adds the defined colors to the customizer
     40
    3741= 1.0.3 =
    3842
Note: See TracChangeset for help on using the changeset viewer.