Docs: add note about Block Supports

[mike-sheppard]

Note: popping this here until I have time to submit a PR (or someone else beats me to it 🙏 )

Didn't know this until reading it in this PR but ACF Blocks supports all native Block Supports including color, typography, spacing etc

...
    public $supports = [
        'align'         => true,
        'jsx'           => true,
        ...
        'color'         => [
            'text'       => true,
            'background' => true,
        ],
        'spacing'       => [
            'margin'  => true,
            'padding' => true,
        ],
    ];
...

[Log1x]

nice!

[squareone-jarrod]

Thanks for this! Been searching everywhere to see if it was possible.

[colinswinney]

After adding color support to your block.php file, how do you pass that into {{ $block->classes }}? I'm not seeing "has-primary-color" on the front end, though I do see it get added to the block when I inspect the editor.

[mike-sheppard]

hey @colinswinney it isn't currently handled by ACF Composer or ACF for that matter so you'll need to construct the class names with the slugs returned in $block->block->backgroundColor & $block->block->textColor

[mike-sheppard]

a very quick and dirty example to get you started, you'll need to check they exist etc

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

[colinswinney]

Fantastic, thanks @mike-sheppard! I appreciate it!

[daverobertson]

If it helps anyone, here's a method I've been using to prepare the text and background color classes for the block's view.

in the block's class file:

/**
 * 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);
}

send it to the view via the with() method:

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

and in the accompanying blade template, via the new-ish @class directive, we can simply use:

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

It would be neater just to append to $block->classes, but not sure how that could be done... or better yet, if ACF would just do it for us :) HTH!

[Log1x]

If anyone wants to do a PR adding these to the block stub $supports as well as using some of the logic from @daverobertson's post above to add the classes to $block->classes as needed it'd be super appreciated. ❤️

[Log1x]

145