Hi!
I would like to insert a custom css for each gutenberg block.
How do I pass the values of some custom fields to the css file?
For example my css in the head should be type:
#<?php echo $id; ?> {
background: <?php the_field(‘background_color’); ?>;
color: <?php the_field(‘text_color’); ?>;
}
Thanks
Hi, @simow
I do not know any way to make CSS recognize PHP unless it uses some plugin or framework. For your problem I would recommend creating a <style> tag on the page or adding a "style" in the element.
Using the example of the <style> tag would look like this:
<style>
#<?php echo $id; ?> {
background: <?php the_field('background_color'); ?>;
color: <?php the_field('text_color'); ?>;
}
</style>
or creating a direct style in the element, something like this:
<?php
if(get_field('background_color') or get_field('text_color')) { $style = 'style="background:'. get_field('background_color') .'; color:'. get_field('text_color') .';"'; }
?>
<!-- Add style in my div -->
<div <?php echo $style; ?>>
lorem ipsum test
</div>
I hope it helps!
Hi rahelwilliam
Thanks for the reply!
I would like to add the style of the block to the theme’s head, not to the body. do you have a solution?
