Color support in acf-composer

Using acf-composer I added support to color like this

public $supports = [
   'color' => true

Learned from this issue that acf nor acf-composer handles the colors so I need to construct the class names with the slugs returned in $block->block->backgroundColor and $block->block->textColor

Something like this

<div class="has-{{ $block->block->backgroundColor }}-background-color has-background">

However I can’t access backgroundColor in my Blade views

From the same thread I also tried to add this to my block’s class file, but the same problem:

 * Assembles the block's text and background color classes
 * @return string
public function getColorClasses()
    // No need to generate them if we're inside the Editor:
    if ($this->preview) {
        return '';

    $classes = [];

    $bgColor = $this->block->backgroundColor ?? null;
    if (!empty($bgColor)) {
        $classes[] = sprintf('has-background has-%s-background-color', $bgColor);

    $textColor = $this->block->textColor ?? null;
    if (!empty($textColor)) {
        $classes[] = sprintf('has-%s-color', $textColor);

    return implode(' ', $classes);


public function with()
    return [
        /* ... */
        'colorClasses' => $this->getColorClasses(),

In the view:

<div @class([$block->classes, $colorClasses])>

What am I missing?

Never mind. The function I added to my block’s class file is working, but I had to change the above in my blade view to

<div class="{{ $block->classes }} {{$colorClasses}}">
1 Like

worth looking at get_block_wrapper_attributes() | Function | WordPress Developer Resources

1 Like