[wp-trac] [WordPress Trac] #35395: Provide a better gateway for code-based theme customizations with the Customizer

[WordPress Trac]

#35395: Provide a better gateway for code-based theme customizations with the
Customizer
-------------------------------------------------+-------------------------
 Reporter:  celloexpressions                     |       Owner:  johnregan3
     Type:  feature request                      |      Status:  assigned
 Priority:  normal                               |   Milestone:  4.7
Component:  Customize                            |     Version:
 Severity:  normal                               |  Resolution:
 Keywords:  has-screenshots needs-patch dev-     |     Focuses:
  feedback                                       |
-------------------------------------------------+-------------------------

Comment (by folletto):

 I attached i2, a fairly advanced proposal for the CSS panel, however, it's
 also designed to be modular, so the end vision could be built over time.

 Assuming the screenshot posted above as the current i1 reference, here are
 the notes about i2:

 1. Full height — it's super important that any scrolling happening in the
 sidebar is strictly the scrolling of the editor area. This is one of the
 main frustrations of having fixed height boxes and having the sidebar with
 an additional scrollbar.
 2. Code Highlight — Ideally the editor is visual, in the sense that
 highlights the right tokens, and shows row number. The use of an
 highlighted such as CodeMirror makes simple CSS way easier to understand
 for beginners, since the color acts as an implicit validation. We might
 tweak CodeMirror to be even more geared to this "learning" and avoiding
 errors approach.
 3. Line number — it is very useful in support, in this way we'll be able
 to effectively support not just individual developers helping out clients,
 but also people learning in groups ("See there on line 5?") and even
 remote technical support.
 4. "Site wide" and "This page" — the tabs at the top (design borrowed from
 the Plugins info UI in wp-admin since there's no equivalent in Customizer)
 is a split that can be incredibly helpful for both beginners and advanced
 users. Having a CSS that gets applied to all the site, and one that is
 applied only on the specific page the user is previewing, makes this
 simple tool less error-prone and keeps the CSS down in complexity for
 everyone.
 5. "History" — it is a very powerful tool, and given the flexibility of
 CSS can be very useful, especially for multi-user sites where changes can
 be applied by different people. Reverting and previewing there can be a
 life saver, and something that will build more trust in the tool.
 6. "Pop out" — this button makes editing more flexible. Reusing the hooks
 modern browsers have to pop out a window and detect when it gets closed,
 we can provide a full page preview and at the same time a floating panel
 that applies CSS, live refreshing.
 7. "Inspect" — the inspector is something every user refers to when they
 have to pinpoint a piece on the page they want to change, this is true for
 beginners and pro users as well. Would be thus amazing if with only one
 click the selector got added to the CSS list, ready to be customized. This
 would avoid all the complexity of learning the inspector, and would make
 the whole operation just two clicks apart.
 8. SCSS — would be also amazing if this panel processed SCSS instead of
 CSS. It's a transparent feature since it's a superset of CSS, so it's very
 effective to provide features to both beginners and advanced users. Given
 the limited space, this could be very powerful, and with appropriate
 filters, themes would also be able to provide easy to user variables that
 match their internal working dynamically, and even the other way around in
 the future. But that's really long term thinking.
 9. "Additional CSS" — this is a more accurate label. "Custom" doesn't add
 any information to the user. They have already clicked on "customize" and
 they are already "customizing". "Additional" instead gives the correct
 meaning and scope of this tool: adding more CSS to the page. Also
 "additional" has a slight implication of extra, so something that one
 usually won't do, which is another slight semantic nudge.
 10. Help — the help has been reduced to just the top icon. If someone
 doesn't know how to use this, a few lines of text don't really add
 anything, and after reading these once, they become just visual noise.
 Plus, it's very likely that someone getting there will ask help
 beforehand. Both beginners and more advanced users will instead benefit
 for the full page used properly to edit it, as space is critical, and it's
 very easy to frustrate people. If we feel strongly that an introduction is
 needed beyond the help button at the top, we can explore alternatives that
 still will get the best of both scenarios, but I'd like to start exploring
 this approach before we start exploring.

 Now, this is a lot, I understand.

 Thus, the design as mentioned is modular. Each of the advanced features
 can be removed with zero or minimal UI change, in a very intuitive way:

 * "History" — it's just a sub-panel activated by a button in the bottom
 bar. Removing the button can be done, and the bar stays with no problems.
 Zero other UI changes.
 * "Inspect" — similarly to history, this can be absent until built in a
 future version. Zero other UI changes. If both "History" and the inspector
 icons are missing, the entire bar disappears, so the editor goes edge to
 edge.
 * "Pop out" — the button can just be removed to build the feature at a
 later time. Zero other UI changes.
 * Code Highlight — if we can't have CodeMirror or any other highlighted
 and row number, at the beginning this can be just a normal monospaced
 (courier) text area.
 * Site wide" and "This page" — they can be removed to leave at the
 beginning just the site wide CSS. Zero other UI changes. If however the
 "Pop out" button is missing too, the entire row collapses and the editor
 area goes again edge to edge.

 Without all the above, the page gets fairly simple, but it's still useful,
 and most importantly, will still allow all the pieces to be added one by
 one in future releases.

 I hope this helps. :)

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