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.)

Screen-Shot-....png

• 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>';
}