Sage 9 + Bulma + ACF: apply styles in ACF WYSIWYG editor

sage
1

Hi all,

I’m building a site using Bulma and ACF and found that while the Bulma styles are reflected as expected in the default page/post TinyMCE content editor, they were not reflected in the instances of the TinyMCE editor loaded by ACF’s WYSIWYG field type.

The reason is that the default editor has the class content on TinyMCE’s body, but the ACF field’s editor does not. This class causes a lot of Bulma styles to be applied to the contents (docs).

Fortunately, this class is pretty easy to add:

/**
 * Add Bulma 'content' class styles to ACF WYSIWYG editor
 */
add_filter('tiny_mce_before_init', function($settings) {
  $settings['body_class'] .= ' content';
  
  return $settings ;
});

Once you’ve added the above code, the contents of your ACF WYSIWYG fields should appear more as expected (fonts, margins, etc.).

Cheers,

– Matt

1 Like