Support

Account

Home Forums Feature Requests Add slug for custom color picker to increase compatibility with Gutenberg

Unread

Add slug for custom color picker to increase compatibility with Gutenberg

  • The problem I’m trying to solve: Making ACF Gutenberg blocks use, or reflect the functionality of, the native Gutenberg color palette/picker.

    In native Gutenberg blocks – like buttons, paragraphs etc your theme can register some custom colors to be loaded into the color picker. They each have a slug (e.g. primary, secondary) and when you assign them to a block, it doesn’t add in inline HEX value, it adds a class like ‘.has-primary-background’ – so you can style the colors yourself. And if your branding ever changes, you just need to update the colors in your CSS file.

    Gutenberg method for registering custom colors:

    // Adds support for editor color palette.
    add_theme_support( 'editor-color-palette', array(
    	array(
    		'name'  => __( 'Primary Colour', 'my-theme' ),
    		'slug'  => 'primary',
    		'color'	=> '#2c3e50',
    	),
    	array(
    		'name'  => __( 'Secondary colour', 'my-theme' ),
    		'slug'  => 'secondary',
    		'color' => '#E74C3C',
    	), etc

    and in ACF you register the color palette like this

    <script type="text/javascript">
    acf.add_filter('color_picker_args', function( args, $field ){
    	// do something to args
    	args.palettes = ['#2C3E50', '#E74C3C', '#2980B9', '#ECF0F1', '#000000', '#FFFFFF' ]
    	// return
    	return args;
    });
    </script>

    Possible solutions

    1. Have an ACF field which basically uses the Gutenberg color picker and can access the slugs/names that have been registered along with those colors

    2. Extend the ACF color picker (though I’m sure backwards compatibility would be a killer issue)
    The ACF color field currently returns a HEX value, but I was wondering if it could be an array with hex value and corresponding slug. So in ACF I could, like in Gutenberg, associate #2C3E50 with the value of ‘primary’. Then in my templates I could have the choice of either outputting the HEX value, or using the slug in a CSS class (like the way native Gutenberg blocks do).

    3. The easiest (but less client friendly) is to just use a Select or Radio field for the client to select which color they want (e.g. primary, secondary) and then you can easily return the value for that in the appropriate CSS class output.

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.