Support

Account

Home Forums Gutenberg Styling of ACF in Gutenberg blocks

Solving

Styling of ACF in Gutenberg blocks

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

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