How can I whitelist a class in a theme?

I have a working carousel which I would like to package as a theme:

I’ve been trying to figure out how to whitelist a class or attribute for the script to target that would work with under a theme.

I’ve read:


Whitelist all the code inside of a div tag?

But these topics cover plugin structure and I could not get any of the methods to work in a theme.

I’ve used the [dir] attribute - white-listed by default - in another theme here

However, that won’t work for two reasons:

1- the Next and Previous buttons will be mixed up based on the text direction
2- The slides can contain text like so:

and I’d really rather not go down that rabbit hole where I override the text direction with CSS - that’s just too hacky even for me.

I’m pretty much stuck here :sweat_smile:

The current selector I’m using to initialize the script on the container is:


So my question is:

How can I while-list a class or attribute for a div in a theme?


Oh you can not do that yet, what I would like to do is just have .theme-[a-z]+ automatically whitelisted, but it requires fiddling with the whitelister a bit.

Assigning this to me, but may take a few weeks to get around to it.

If @angus or @david feel like giving it a shot, be my guest.


No worries @sam :sunflower:

Thank you for taking this on - no rush at all I’m sure your plate is full :sweat_smile:

I have one last followup question.

Does defining new tags like:

// slides

to be later converted into

<div class="foo">
// slides

in the cooked output also require a plugin for now?

Yeah if you are trying to amend the markdown pipeline I think you need a plugin. One thing that is good security wise with themes is that they are not allowed to run on the server, this would change it.

I spent a bit more time trying out different things and here's what I found

1- <div dir="foo"></div> is not filtered out even if the value does not match rtl or ltr
2- <div dir></div> is also not filtered out

This line has can be selected with [dir="foo"]
This line can be selected with div[dir=""]

So I can technically make
<div dir="carousel"> 
// slides

work but I have a feeling that you might be interested in preventing this behavior. I will wait and see what you think.

1 Like

Wow, this looks fantastic. Really hoping this sees the light of day.

1 Like

I wonder if we could adopt this somehow

Maybe under a site setting or a plugin.

1 Like

In general we do blocks in bbcode, so it gets a bit confusing to add another pattern.

The issue here is the whitelister per:

But our DSL is a bit too limited atm to add theme-* as a whitelisted class so we need to fix that.

<aside data-carousel="true"></aside>

Would also work.


And unlike

<div dir="foo"></div>
<div dir></div>

<aside data-carousel="true"></aside> is valid html

Still feels a bit unorthodox though :no_mouth:


Oh, I can add data-* to div quite easily, does that help?


Yes! :fire:

I think that would work and pretty much cover everything.

attribute selectors work with jQuery and CSS just fine. :wine_glass:


Perhaps data-custom-* or data-c-* – you don’t want to get stuff confused with data-lazyYT


yes and AFAIK it doesn’t have any noticeable performance hit


Sure then, can you do a PR to add data-theme-* on DIV, I think it makes good sense and will not clash.


This is great news! :star_struck:

Well I tried anyway :sweat_smile:

PR submitted


Can we use data-theme-* for the p tags?