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?
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
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 Privacy Policy. If you continue to use this site, you consent to our use of cookies.