Home Forums Gutenberg Custom css for Gutenberg Block


Custom css for Gutenberg Block

    • simow

    • April 1, 2019 at 3:19 am

    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!

    • simow

    • April 14, 2019 at 7:24 pm

    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)

You must be logged in to reply to this topic.

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 Cookie Policy. If you continue to use this site, you consent to our use of cookies.