Broken CSS for custom widget wrapper

[alexsanford]

When using Course Progress with a theme that customizes the wrapper class for widgets, the CSS is broken. It assumes a class of widget (the default).

This problem exists when using the plugin with the Divi theme and its page builder. It changes the class to et_pb_widget.

To reproduce, use the Twenty Sixteen theme and add the following code snippet to the side:

function register_my_sidebar() {
  	register_sidebar( array(
		'name'          => __( 'Sidebar', 'twentysixteen' ),
		'id'            => 'sidebar-1',
		'description'   => __( 'Add widgets here to appear in your sidebar.', 'twentysixteen' ),
		'before_widget' => '<section id="%1$s" class="my-widget %2$s">',
		'after_widget'  => '</section>',
		'before_title'  => '<h2 class="widget-title">',
		'after_title'   => '</h2>',
	) );
}
add_action( 'widgets_init', 'register_my_sidebar', 99 );

Note the class of my-widget in the before_widget string. When loading a page now with the Course Progress Widget, the CSS will not work.

[donnapep]

@alexsanford Is this related to Automattic/sensei#2205 (comment)? Will we need to ship a fix for this when Sensei 1.12.0 is released, or is it unrelated to theme compat?

[alexsanford]

This is unrelated. I found it when testing with the Divi theme, which makes the change to before_widget explained above. I suppose you could consider it to be a "theme compatibility issue" for this widget, but it is not a blocker for Automattic/sensei#2205