CSS for partial as <style> block on page? Or a better way?

sage
1

The project setup with Sage is quite new to me and just figuring things out and looking for a little advice on best practice.

I’ve investigated Gutenberg blocks with ACF which seems great! This isn’t appropriate in this instance as the element I’m making is not to appear within the page content. But looking at this neat ACF solution sage-acf-gutenberg-blocks I noticed that the style for the block is just rendered with the block.

<blockquote data-{{ $block['id'] }} class="{{ $block['classes'] }}">
<p>{{ get_field('testimonial') }}</p>
<cite>
  <span>{{ get_field('author') }}</span>
</cite>

<style type="text/css">
  [data-{{$block['id']}}] {
    background: {{ get_field('background_color') }};
    color: {{ get_field('text_color') }};
  }
</style>

In my implementation, I’m making partials that are used at the bottom of certain page templates. Is this also what you would do for CSS in this instance? Or is there another, better way? I’ve just been experimenting with adding .js files and I like the way these can use DOM based routing based on the body class and wonder if there is a similar type of thing for CSS. Advice much appreciated!

2

So these are variables. Then you can use an element class (for a fixed set of colors that doesn’t change with theme (e.g. Gutenberg editor fixed theme palette)), data-attribute or inlined CSS variables, just for the background- and text-color. Everything else is in the main/an external stylesheet and uses the data- attribute and/or the inlined CSS variables (of that element). This decouples the data/values from the styles.



1 Like
3

This topic was automatically closed after 42 days. New replies are no longer allowed.