Home Forums Gutenberg Custom css for Gutenberg Block


Custom css for Gutenberg Block

  • 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’); ?>;


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

    #<?php echo $id; ?> {
    background: <?php the_field('background_color'); ?>;
    color: <?php the_field('text_color'); ?>;

    or creating a direct style in the element, something like this:

    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

    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?

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

The topic ‘Custom css for Gutenberg Block’ is closed to new replies.