Support

Account

Home Forums Feature Requests Combine color picker swatches with theme.json

Solving

Combine color picker swatches with theme.json

  • The palettes in the color-picker can be overridden by using the color_picker_args JavaScript-filter.

    But with the coming changes for Full Site Editing, it feels like it’s pretty disconnected from the color palette that can be configured in the the theme.json file (see: https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json/).

    How about overriding the default color palette for the color-picker through the theme.json file?

  • Hey @proxxim, thanks for the suggestion.

    You could do this now using getEditorSettings which includes the color palette, so something like the following js filter:

    acf.addFilter('color_picker_args', function (args) {
    
        const settings = wp.data.select( "core/editor" ).getEditorSettings();
        let colors = settings.colors.map(x => x.color);
    
        args.palettes = colors;
        return args;
    
    });
    
  • Hi @lgladdy,

    When I add your code to a Javascript file that loads on the admin pages, I get the following error: ‘ReferenceError: Can’t find variable: acf’, which probably means that it’s running too early.

    When I wrap is with jQuery(function () { ...your code... }, I’m seeing different colors but not the ones that I added to the theme.json file.

    Also: I need this for a colorpicker field on a term page. Should that code work there as well? I suspect it’s only working for pages where the block editor is being loaded.

  • Hey @proxxim ,

    in case you’re still wondering, I could easily just put it in a enqueued JS file that loads in the backend, and the colour picker only offers up theme colours which are defined for Gutenberg via theme.json. No need to wrap the code above, and you can easily enqueue the JS like normal (the CSS file is not needed though):

    function load_admin_stuff() {
    	wp_enqueue_style( 'admin_css', get_stylesheet_directory_uri() . '/css/admin.min.css', false, '' );
        wp_enqueue_script( 'admin', get_template_directory_uri() . '/js/admin.min.js', array(), '', true );
    };
    
    add_action( 'admin_enqueue_scripts', 'load_admin_stuff' );

    Can’t help you with the terms stuff, though I would suppose ACF just reads the values from Gutenberg, but doesn’t necessarily need Gutenberg to be loaded.

  • This reply has been marked as private.
Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.