Log1x / acf-composer

Compose ACF Fields, Blocks, Widgets, and Option Pages with ACF Builder on Sage 10.
https://github.com/Log1x/acf-composer
MIT License
413 stars 56 forks source link

Which block supports are supported? :) #139

Closed aitormendez closed 1 year ago

aitormendez commented 1 year ago

I've been trying some supports like spacing:

'spacing' => [
    'margin' => true,
    'padding' => true,
    'blockGap' => true,
],

But only padding works. Why?

Captura de pantalla 2022-11-16 a las 11 03 26

The same with typography:

'typography' => [
    'lineHeight' => true,
    'fontSize' => true,
]

Just font size is working.

Captura de pantalla 2022-11-16 a las 11 03 45

mike-sheppard commented 1 year ago

Might be more of a Q for the ACF folks https://github.com/AdvancedCustomFields/acf/issues/602#issuecomment-1027763520 I'm pretty sure they just pass these through to WP/Gutenberg, but maybe something else needs adding?

aitormendez commented 1 year ago

By the way, If it helps anyone I made a method to deal with block paddings.

/**
 * Return padding styles.
 *
 * @return string
 */
public function paddingStyles()
{
    if (property_exists($this->block, 'style') ) {
        if (array_key_exists('padding', $this->block->style['spacing'])) {
            $padding = $this->block->style['spacing']['padding'];
            $styles = array_map(function($val) {
                if (str_starts_with($val, 'var:preset|spacing|') ) {
                    return 'var(--wp--preset--spacing--' . substr($val, -2) . ')';
                };

                return $val; // return custom val if there is no preset
            }, array_values($padding));
        }
    } else {
        $styles = [
            0 => '',
            1 => '',
            2 => '',
            3 => '',
        ];
    }

    return $styles;
}

Then:

public function with()
{
    return [
        'padding' => $this->paddingStyles(),
    ];
}

And, in the view:

<div  style="padding-top:{{ $padding[0] }};padding-right:{{ $padding[1] }};padding-bottom:{{ $padding[2] }};padding-left:{{ $padding[3] }}">
aitormendez commented 1 year ago

Closing