Data Attributes JSON Object

Do single quotes work?

{'slidesToShow': 4, 'slidesToScroll': 4}

Do no quotes work?

{slidesToShow: 4, slidesToScroll: 4}

You can’t use normal quotes as they are already encasing the whole attribute value.
If data-slick="{"slidesToShow": 4, "slidesToScroll": 4}" worked the value of data-slick would be {.

@websevendev what a quick response, awesome! You’re faster than lightning!

But to answer your question: unfortunately not. I’ve tried it, but it doesn’t work. I have created a codepen to show you the non-working and working example.

As you can see I need to use the following format: data-slick='{"slidesToShow": 4, "slidesToScroll": 4}'.

Is this possible with your plugin?

Yeah looks like it’s not possible then, as the attribute values will definitely be wrapped in " as opposed to '.

Here’s a hack you can use maybe:

Prepend eval: and use no quotes/single quotes like this: eval:{slidesToShow: 4, slidesToScroll: 4} producing data-slick="eval:{slidesToShow: 4, slidesToScroll: 4}".
Then add additional JS before initializing the slider:

$('.slider[data-slick*="eval:"]').each(function() {
  eval('var data = ' + $(this).data('slick').replace('eval:', ''));
  $(this).data('slick', data);
});
$('.slider').slick();

This will evaluate the {slidesToShow: 4, slidesToScroll: 4} as it’s a valid JS object and assign it as the data-slick value. Alternatively you can use a similar method to “fix” the {"slidesToShow": 4, "slidesToScroll": 4} HTML entities with JS as well probably.

Thanks a lot mate! This works great!!

One thing that doesn’t work yet is the following code: eval:{slidesToShow: 4, slidesToScroll: 4, centerMode: true, centerPadding: '60px' }. Because in this situation there are stil quotes around the 60px. But when I try to add the following without the quotations around the 60px, it is also not working: eval:{slidesToShow: 4, slidesToScroll: 4, centerMode: true, centerPadding: 60px }.

Do you also have a last suggestion how I could work around this? ?? ??

For me this seems to happen only for dynamic blocks (aka blocks that are rendered server side by PHP not directly with JS). For core/paragraph block eval:{centerPadding:'60px'} works, but adding the same attribute to core/latest-comments for example the quotes are escaped by the esc_attr() function.

Try adding this line to your child theme’s functions.php:

remove_filter('afb_sanitize_attribute_value', 'esc_attr');

Then the value should remain unescaped for dynamic blocks as well.
Removing it is technically less secure, but the only risks I can think of are authenticated users of your site who can edit posts in the first place but have malicious intent. If you’re the only user of your site then it shouldn’t really matter.

• This reply was modified 2 years, 1 month ago by websevendev.
• This reply was modified 2 years, 1 month ago by websevendev.

Not all hero’s wear capes (or maybe you do)! But this is truly fantastic mate, it works!! Thanks a lot!! ?? ??

One last question. This site has multiple users (so I’m not the only one using the site). What are the possible treats then with this filter:

remove_filter('afb_sanitize_attribute_value', 'esc_attr');

Honestly, I don’t think it opens up more possibilities than users with editor permissions already have. Worst case scenario they add some JavaScript that, when you visit the page, will send them your login cookie, granting them admin access.
They could add a well-crafted attribute that does it using this plugin, but they can just as well add the Custom HTML block to do that. So removing the filter only opens attack vectors when you have previously closed the earlier ones, which I doubt is the case.

Anyone that has unfiltered_html permissions needs to be trusted basically. It’s like giving someone keys to your house.

Thanks for the explanation! ?? And thanks again for your awesome support! I’ll give the plugin 5 stars, for the support and for the working of the plugin. It’s a really cool plugin!

The issue is resolved.