0

I'm playing around with ACF to try to create my own rudimentary page-builder. One thing I'm trying to accomplish is using it with Gutenberg to create somewhat of a WYSIWYG. I'm not sure the best practice way of loading my styles inline in a <style> tag in the head, without inlining the CSS attributes in each individual HTML element.

Here's my code so far:

if (function_exists('get_field')) : 

    if (have_rows('row')) : 

       //Set variable to hold the CSS to add to the Stylesheet
       $css;

        while ( have_rows('row') ) : the_row();
            //Row options
            $id = uniqid('row-');
            $fluid = get_sub_field('full_width');
            $row_margin = get_sub_field('row_margin');
            $row_padding = get_sub_field('row_padding'); 

            $css .= '#'.$id . ' {
                margin: ' . $row_margin . 'px 0px;
                padding: ' . $row_padding . 'px 0px;
            }';

        ?>
            <div class="container<?php if ($fluid){
                echo "-fluid";
            } ?>">
                <div class="row" id="<?php echo $id?>">
                    <?php echo "Returning" ?>
                </div>
            </div>
        <?php 
        endwhile; 
        wp_add_inline_style('understrap-styles', $css);
     endif; 
endif;

This isn't working. What I'd also like to accomplish is having the styles appear in the backend as well without reloading the page, but I'm not sure the best way to inject styles into its own <style> tag as opposed to using wp_add_inline_style to append to an existing stylesheet.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.