Support

Account

Register Login

Home › Forums › ACF PRO › Blocks with inline styles

Solving

Blocks with inline styles

  • For ACF blocks, do we have to add <style> tags in the block template if we want inline styles, or is there a way to use wp_add_inline_style() or something similar?

    For example, in the ACF block page, the following code appears in the template:

    <style type="text/css">
#<?php echo $id; ?> {
    background: <?php echo $background_color; ?>;
    color: <?php echo $text_color; ?>;
}
</style>

    Now that might work, but aren’t we supposed to add inline styles to the <head> of a page when feasible, using the function wp_add_inline_style()?

    If so, how the heck do we do this? I can’t seem to get it to work.

    Thank you for any help!

  • 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?

  • Blocks or not blocks, when it comes to performance the best way to add small style chunks is to add them inline using <style> tags. Style tags embedded in the page has been something browsers can do for quite some time.

    You cannot retroactively add inline styles to the header, unless you want the styles loaded on every page whether or not they are used. Adding styles that are not used is bad for performance.

    The same can be said for a separate style sheet file. It is better to not include many separate css files or to include a massive file with CSS that is not used.

    I’ve commented on this is the past. Like I said above, for performance reasons it is best to include styles inline only when they are needed. You will still find many stating that this is not the best practice, my opinion is that they are wrong. This also extends to using inline JS for small chunks of code.

    And yes, style attributes in elements is best when that style will only apply to that specific element on the page.

    For performance
    1) Include code only when needed
    2) Load as few external files as possible

    The HTML source might look like crap, but people aren’t looking that the HTML, they are only looking at the results.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.