JavaScript error in theme customizer a specific value of before_widget

[martin.krcho]

I just came across an issue with the theme customizer. It is failing with the following JavaScript error

Uncaught Error: Syntax error, unrecognized expression: SECTION.widget.widget-%2$s,SECTION.widget.widget-%2$s,SECTION.widget.widget-%2$s,SECTION.widget.widget-%2$s,SECTION.widget.widget-%2$s,SECTION.widget.widget-%2$s

I tracked this issue down to the function buildWidgetSelectors in customize-preview-widgets.min.js, specififcally to this bit of code:

d.before_widget.replace("%1$s", "").replace("%2$s", "")

I am using theme called Bearded that defines the "before_widget" as follows:

<section id="%1$s" class="widget %2$s widget-%2$s">

A possible fix would be to make both of the replace actions mentioned above replace ALL occurencies of the pattern:

d.before_widget.replace(/%1\$s/g, "").replace(/%2\$s/g, "")

[westonruter]

The code for buildWidgetSelectors has been in place since 3.9.

@martin.krcho could you please share the register_sidebar() calls that the theme has?

You're right that a problem here is that String.replace() will only replace the first instance if the replacement arg is a string instead of a regular expression. So changing the pattern it to be a regular expression instead of string should do it, but I want to see how the sidebars are registered to see what is going on.

[martin.krcho]

@westonruter, the code is available on GitHub here:
​https://github.com/bonfirelab/bearded/blob/master/library/functions/sidebars.php

[westonruter]

Thanks. OK, that confirms it. It registers a sidebar with:

'before_widget' => '<section id="%1$s" class="widget %2$s widget-%2$s">',

Only the first instance of %2$s is getting replaced, so implementing the regex global replacement will do the trick.

[westonruter]

In 37322:

Customize: Remove format placeholders from widget templates and selectors, fixing a jQuery selector syntax error and the broken highlight/shift-click behaviors.

The issues occur in themes that register sidebars that reference a single format placeholder (%1$s and %2$s) multiple times, such as in the id and class attributes for $before_widget.

Props martin.krcho, westonruter.
Fixes #36473.