Reply To: Styling of ACF in Gutenberg blocks

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