Support

Account

Home Forums Gutenberg Styling of ACF in Gutenberg blocks

Solving

Styling of ACF in Gutenberg blocks

    • alicam

    • December 5, 2018 at 9:20 am

    I’m using ACF’s new Gutenberg blocks, as per the demo. I’m using TwentyNineteen theme.

    I note that the styling of the ACF fields in the block edit view is INHERITED from the theme. That’s not really what should happen.

    Is there an “official” recommendation regarding standardizing the appearance of ACF when in the Gutenberg block editor?!

    (Sorry about the very complicated example below – I’m trying some crazy Bootstrap4 integration for the fun of it.)

    • alicam

    • December 5, 2018 at 10:00 am

    If there is nothing better, I propose something like this, for a start:

    
    add_action('admin_head', 'hb_acf_custom_fonts');
    function hb_acf_custom_fonts() {
      echo '  <style>
        .acf-block-body.is-edit {
          font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif !important;
        }
      </style>';
    }
    
    • alicam

    • December 5, 2018 at 11:43 am

    I feel like I’m having a lovely little conversation with myself, here!

    I’ve extended the CSS above and it’s seems enough for what I need now.

    Leaving it here in case it’s useful to someone else:

    
    add_action('admin_head', 'hb_acf_custom_fonts');
    function hb_acf_custom_fonts() {
      echo '  <style>
        .acf-block-body.is-edit {
          font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif !important;
          font-size: initial !important;
        }
        .acf-block-body.is-edit .acf-field, .acf-block-body.is-edit p {
          font-size: 13px !important;
          color: #555d66 !important;
        }
        .acf-block-body.is-edit label {
          font-size: 12px !important;
          color: #191e23 !important;
        }
        .acf-block-body .acf-fc-layout-handle {
          background: #f3f4f5 !important;
        }
        .acf-fc-layout-order {
          background-color: #11a0d2 !important;
          color: #fff !important;
        }
        a.acf-icon.-collapse {
          background-color: transparent !important;
        }
      </style>';
    }
    
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.