[wp-trac] [WordPress Trac] #34391: Harden panel/section UI code by removing contents from being logically nested (read: goodbye margin-top hacks)

[WordPress Trac]

#34391: Harden panel/section UI code by removing contents from being logically
nested (read: goodbye margin-top hacks)
------------------------------+--------------------------------------------
 Reporter:  westonruter       |       Owner:  delawski
     Type:  defect (bug)      |      Status:  assigned
 Priority:  normal            |   Milestone:  4.6
Component:  Customize         |     Version:  4.0
 Severity:  normal            |  Resolution:
 Keywords:  needs-patch       |     Focuses:  ui, accessibility, javascript
  4.6-early                   |
------------------------------+--------------------------------------------

Comment (by delawski):

 I have worked on the issue today:
 * fixed issues related to focusing on controls (particularly when shift-
 clicking on widgets in the preview)
 * fixed bugs in Themes section.

 I still have to test new panel/section UI on various browsers/devices and
 clean up the CSS.

 The progress on this ticket is tracked in the following PR:
 https://github.com/xwp/wordpress-develop/pull/150

 Today I've also checked two free themes (''Zerif Lite'' and ''Sydney'')
 and how they work with the new UI. The only major issue I've noticed was
 with ''Zerif Lite''. In short, here's the issue: ''Zerif'' prepends its
 own special {{{<li>}}} element to ''any'' {{{<ul>}}} element that is child
 of {{{#customize-theme-controls}}} container. In current hierarchical
 implementation, there is only one child {{{<ul>}}} element. After
 flattening panels/section markup, each section and panel is a child of
 {{{#customize-theme-controls}}} container and so all of them get the
 special {{{<li>}}} which is unintended.

 It is a quick fix (the selector could be changed to {{{ul:first}}} or
 {{{.customize-pane-parent}}}, however I imagine there might be more themes
 and plugins that rely on current markup.

--
Ticket URL: <https://core.trac.wordpress.org/ticket/34391#comment:12>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform