[wp-trac] [WordPress Trac] #48492: Add 'before_widgetcontent' and 'after_widgetcontent' attributes to register_sidebar

[WordPress Trac]

#48492: Add 'before_widgetcontent' and 'after_widgetcontent' attributes to
register_sidebar
-------------------------+-----------------------------
 Reporter:  stwnigel     |      Owner:  (none)
     Type:  enhancement  |     Status:  new
 Priority:  normal       |  Milestone:  Awaiting Review
Component:  Widgets      |    Version:
 Severity:  normal       |   Keywords:
  Focuses:               |
-------------------------+-----------------------------
 I want to address the widget HTML produced by WordPress which makes it
 unnecessarily difficult to write CSS rules targeted to content area in
 widgets.

 The following register_sidebar():


 {{{
     register_sidebar(array(
         'name' => esc_html__('Primary Sidebar','theme'),
         'id'   => 'theme_sidebar',
         'description' => esc_html__('Primary Sidebar will be shown on the
 right side of the site if widgets are added here.', 'theme'),
         'class'  => '',
         'before_widget' => '<div class="widget %2$s" id="%1$s">',
         'after_widget' => '</div>',
         'before_title' => '<h3 class="title">',
         'after_title' => '</h3>',
     ));
 }}}

 will  produce this HTML for Recent Posts widget:


 {{{
 <div class="widget widget_recent_entries" id="recent-posts-3">
 <h3 class="title">Recent Posts</h3>
 <ul>
 <li><a href="https://test-site.local/markup-html-tags-and-
 formatting/">Markup: HTML Tags and Formatting</a></li>
 <li><a href="https://test-site.local/markup-image-alignment/">Markup:
 Image Alignment</a></li>
 <li>
 <a href="https://test-site.local/markup-text-alignment/">Markup: Text
 Alignment</a></li>
 </ul>
 </div>
 }}}

 If we have to style widgets like shown in this screenshot

 [[Image(https://i.postimg.cc/D0c9LwTB/widget-style.jpg)]]

 **with consistent padding for widget content in all widgets in one go**,
 an obvious way is to wrap the widget content by adding opening and closing
 div in before_title and after_title respectively like following.

 {{{
     register_sidebar(array(
         'name' => esc_html__('Primary Sidebar','theme'),
         'id'   => 'theme_sidebar',
         'description' => esc_html__('Primary Sidebar will be shown on the
 right side of the site if widgets are added here.', 'theme'),
         'class'  => '',
         'before_widget' => '<div class="widget %2$s" id="%1$s">',
         'after_widget' => '</div></div>',
         'before_title' => '<h3 class="title">',
         'after_title' => '</h3><div class="widget-content">',
     ));
 }}}

 However, **this won't work nicely and will break the theme if user has not
 set a title for the widget**. Some WordPress widgets will show a default
 title even if user has not explicitly set a title which causes confusion
 among users.

 This is how Twenty Sixteen targeted styling specific to widget content
 area:

 {{{
 .widget-area > :last-child, .widget > :last-child
 {
 margin-bottom: 0;
 }
 }}}

 But **this fails to target Archives widget content when "Display as
 Dropdown" is selected** since the last child is a script element. **That's
 an inconsistency**.

 If WordPress could **introduce optional 'before_widgetcontent' and
 'after_widgetcontent' to register_sidebar(**), it will be possible to wrap
 the widget content and target the widget content area for all widget, with
 or without title in one go.

 {{{
     register_sidebar(array(
         'name' => esc_html__('Primary Sidebar','theme'),
         'id'   => 'theme_sidebar',
         'description' => esc_html__('Primary Sidebar will be shown on the
 right side of the site if widgets are added here.', 'theme'),
         'class'  => '',
         'before_widget' => '<div class="widget %2$s" id="%1$s">',
         'after_widget' => '</div></div>',
         'before_title' => '<h3 class="title">',
         'after_title' => '</h3>',
         'before_widgetcontent' => '<div class="widget-content">',
         'after_widgetcontent' => '</div>',
     ));
 }}}

 Developers can save their time from writing unnecessary complicated CSS
 code to get a consistent style ( padding in my case ) for the widget
 content area.


 == Relevant Stackoverflow question about this issue with complicated
 solutions:
 https://wordpress.stackexchange.com/questions/185294/add-before-content-
 and-after-content-to-register-sidebar
 https://wordpress.stackexchange.com/questions/74732/adding-a-div-to-wrap-
 widget-content-after-the-widget-title
 https://wordpress.stackexchange.com/questions/107814/sidebar-widgets-
 dynamic-css-problem-with-widget-title?rq=1
 https://wordpress.stackexchange.com/questions/128063/customizing-the-
 widget-content-markup?rq=1

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/48492>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform