Wordpress Edit Button not appearing for widget in customizer

Question

The pencil icon is not appearing above my widget in the customizer front-end view.

I registered the widget as follows:

function jwd_widgets_init()

{

for ($i = 1; $i <= 9; $i++) {
    register_sidebar(array(
      'name'          => esc_html__('Widget ' .$i, 'jwd'),
      'id'            => 'widget-' .$i,
      'description'   => esc_html__('Add widgets here.', 'jwd'),
      'before_widget' => '',
      'after_widget'  => '',
  ));
}

}

add_action('widgets_init', 'jwd_widgets_init');

In my PHP template, this is how I call the widget in question (widget-1)

<?php if (is_active_sidebar("widget-1")): ?>
  <?php dynamic_sidebar("widget-1") ?>
<?php endif; ?>

The widget itself works. I'm staring at it in the customizer. I can access it through the widgets menu in customizer, but it would be a lot more convenient to have that pencil icon as a shortcut, like with the nav menus. I'm using the underscores theme.

Answer 1

You must define a valid element for the before_widget/after_widget when you register a sidebar. In fact, I just a couple days ago added this to the theme handbook on Widgets: Opting-In To Selective Refresh:

Important: Selective refresh for widgets requires that the theme include a before_widget/after_widget wrapper element around each widget that contains the widget’s ID. Such wrappers are the default when you register_sidebar(). For example:

register_sidebar(
    array(
        'name'          => esc_html__( 'Sidebar', 'example' ),
        'id'            => 'sidebar-1',
        'description'   => esc_html__( 'Add widgets here.', 'example' ),
        'before_widget' => '<section id="%1$s" class="widget %2$s">', // <= Key for selective refresh.
        'after_widget'  => '</section>',
        'before_title'  => '<h2 class="widget-title">',
        'after_title'   => '</h2>',
    )
);