html验证错误wp_json_encode

Question

So I am facing the html validation error.

Error: " in an unquoted attribute value. Probable causes: Attributes running together or a URL query string in an unquoted attribute value.

Making the array

$slider_options = [
  'items' => $item,
  'item_tab' => $item_tab,
  'arrows' => ('yes' === $settings['arrow']),
  'dots' => ('yes' === $settings['dot']),
  'auto' => ('yes' === $settings['auto']),
  'transition' => ('yes' === $settings['transition']),
  'center' => ('yes' === $settings['center']),
  'speed' => $settings['speed']['size'],                                      
 ];

Now echoing the out result.

echo '<div class="style-three" data-slick ='.wp_json_encode($slider_options).'>';

Which out put

<div class="style-three" data-slick ={"items":1,"item_tab":1,"arrows":true,"dots":true,"auto":false,"transition":true,"center":false,"speed":3050}>

Everything work fine but the only bug is the validation error.

Answer 1

from the HTML specification:

The attribute value can remain unquoted if it doesn’t contain spaces or any of " ' ` = < or >

you can try to use single quotes ' to wrap your attribute value (so that it doesn't conflict with your generated double quotes " inside your value):

echo '<div class="style-three" data-slick =\''.wp_json_encode($slider_options).'\'>';