How to enable “shift-click to edit this widget” functionality on a custom widget?

I have created several custom widgets, modeled from the default widgets’ code. The widgets all work fine, and I’ve been using them in production for awhile.

I’ve been working with the new Customizer API, and I just discovered the “shift-click to edit” functionality. However, none of my custom widgets work properly with this feature.

I’m aware of the current limitation of needing the widgets panel to be open for the clicked widget to properly bring focus in the panel: the default widgets are working as they should.

I’ve been scouring over source to try and figure out how this works, with no luck.

What controls this behavior when registering a widget?

1 Answer
1

In my custom widgets, I had omitted adding the ID to ‘before_widget’ markup, as I wasn’t using the IDs for styling. Turns out this is what the Customizer JS is using to target the widgets. (duh)

So, including the proper ID in the widget output makes everything work as it should.

Leave a Comment