Custom style dropdown (without auto-generated list)

[JorisDebonnet]

I am using SilverStripe 4.2 at the moment.

I seems to be impossible to create a custom style dropdown without also automatically putting all classes from content_css into that dropdown. The documentation even explicitly says that:

style_formats won't be applied if you do not enable importcss_append.

What? Why?

I want my website's CSS to be applied to the content in the editor, but I do not want all useless classes to be imported into that style dropdown. Most of those classes are for layout, header, menu, footer, ... there's no reason for those in the styles dropdown. I still want the full stylesheet to be applied though because some of those classes can actually be used in the content on some special pages, but I don't want them in the dropdown because they're too complicated (e.g. they need to be edited via html source).

In 3.x it used to be possible to use the theme_advanced_styles option to just have a simple custom list, but it seems to be ignored. I also tried with style_formats but that only works if the auto-generated list also appears. I'll just expose those classes for now, but it doesn't look very professional...

[kinglozzer]

Does this option help?

$config->setOptions([
    'style_formats' => [
        [
            'title' => 'Button',
            'selector' => 'a',
            'classes' => 'button'
        ]
    ],
    'style_formats_autohide' => true
]);

[maxime-rainville]

Following the example as in the tutorial this is what I get.

If I add @kinglozzer's suggestion this is what I get.

@JorisDebonnet Are you importing your entire frontend CSS file into the editor_css? My assumption reading the tutorial is that you should have a dedicated editor.css file that's only use for styling the WYSIWYG.

[JorisDebonnet]

I haven't found a solution yet. I feel like I tried all suggestions... suppose I'll have to retry with a fresh installation and debug from there. Going on a vacation in 5 hours though, so I'll get some sleep and retry this when I get back.

[tobedamobe]

Are there any solutions yet? Hope your vacation was fine @JorisDebonnet and i hope you found a Solution ;)

[JorisDebonnet]

Are there any solutions yet? Hope your vacation was fine @JorisDebonnet and i hope you found a Solution ;)

Hi @tobedamobe, I'm afraid I did not really find a solution. My _config.php still includes the following comment line:

// 'theme_advanced_styles' => $css_classes // doesn't work anymore... :(

I ended up creating a separate editor.css, which luckily was doable because I work with scss, so it just compiles "most but not all" css classes. Not as good as manually being able to state the list of css classes that should be available to the user, but better than nothing. (I did not yet try finding a solution from a fresh install)

[prij]

I was able to achieve this by adding an arbitrary non-matched value for the following property: 'importcss_selector_filter' => 'hideEditorStyles',

As per @derralf's config: https://gist.github.com/derralf/1b1c0318695320748b8db41802211103

[lerni]

Or just disable the import plugin $config->disablePlugins(['importcss']);