Home Forums ACF PRO Blocks with inline styles Reply To: Blocks with inline styles

  • I’m grappling with this too. If we look at the core blocks and padding specifically, they use inline styles on the wrapper element for the block. For example this is a row/group with padding, where they add the presets from the native padding controls.

    <div class="wp-block-group has-white-color has-primary-offset-background-color has-text-color has-background is-nowrap is-layout-flex wp-container-7 wp-block-group-is-layout-flex" style="padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)">

    Frankly speaking I’m not sure this is good, in terms of performance etc… but I guess it’s the only way to support styling every block individually… if they added classes something like Tailwind utility classes (p-4) then the options would be limited to whatever utilities are available. This supports both the presets and custom, so if you used padding-top: 2rem it would output that, again in the element styles.

    I was searching for a WordPress core function that would take $block[‘style’] and give me back the list of styles, but according to ChatGPT nothing is available for that. Possibly core does this in React/JS code, or maybe there is a PHP function but it’s not shared for dev use.

    What I’ll probably do is make a PHP utility function like makeBlockStyles($styles), pass in $block[‘style’], have it form the styles attribute and return it. Then output my wrapper element like <div styles=”{styles}”>. Best thing I can think of so far.

    Let me know if you came up with a better approach?