Customize: use calc() to set textarea height for custom CSS

[michaelarestad]

The custom CSS module is pretty rad, but right now the height is just fixed at 553px. I think we can do better by making it as large as it can be in the visible space.

The method I propose uses a combination of the calc() function and vh, a viewport unit. If the browser doesn't support either calc() or vh, it will gracefully fall back to whatever we set the fallback height to.

My first patch fills as much space as possible. I have a minor concern that when other plugins enhance this editor (Jetpack), that the controls for it will be below and might be lost because it is filling the space. That said, those plugins could just override the height.

[michaelarestad]

I changed the textarea to resize: none since it's not possible to resize when a height is set. If we used min-height, it would be resizable, but if it's as large as can be on a screen, I'm not sure why it would be necessary.

[westonruter]

@michaelarestad good idea. However, as you can see in scrollbar.png​, the scrollbars are still appearing. Shouldn't they be hidden entirely in the normal case?

[michaelarestad]

@westonruter good catch. Looking into it.

[michaelarestad]

@westonruter I think I got rid of the scrollbar in the latest patch until the textarea gets full and then it's a normal scrollbar. Can you confirm?

It's also responsive, now.

[westonruter]

@michaelarestad yeah, I can confirm that the scrollbars don't show up normally now. However, I see one defect and one possible improvement: the padding in the section heading now seems to be cut at the top now in the Custom CSS section whereas it has the expected amount of whitespace (more) in the other sections.

Also, do you think the margin at the bottom could be removed?

Also, thinking about integrating with Jetpack where it will add additional controls to this section (see #38672, cc @georgestephanis), how about if the margin at the bottom is removed if it is the last item in the list, for example: li.customize-control-custom_css:last-child { margin-bottom: 0; }

And also, the full-section height of the textarea should likewise probably only be done if there is only one control in the section. So instead of the #sub-accordion-section-custom_css textarea selector, what about: .customize-section-description-container + #customize-control-custom_css:last-child. This will ensure it is the first and last control in the section.

[georgestephanis]

We're hiding the original input, regardless. The Codemirror element just syncs its content back and forth with the hidden original input -- so whatever core does to its styling shouldn't bother us much.

[westonruter]

​https://github.com/xwp/wordpress-develop/commit/f29a50d

[westonruter]

@michaelarestad how does 38755.4.diff​ look? It should address my feedback.

[celloexpressions]

As with any customizer section, the CSS section cannot assume that there are no non-core controls added. We definitely need to only auto-size to the full size when the core control is the only one in the section; and even then, I'm not sure that showing a larger textarea provides usability benefits. The area auto-resizes based on its contents (at least, last time I checked), and an overly large input may imply that it's intended to contain much more CSS than it reasonably might for the average user, causing a level of intimidation. It could be a nice enhancement, but I'm not convinced yet. I'm certainly skeptical of this sort of change at this point in the release cycle.

Also, for any changes to this feature and extensibility considerations, do remember that there are hundreds of CSS plugins and even more CSS options in themes and plugins that will need to integrate with the new core option, in addition to Jetpack.

[westonruter]

Replying to celloexpressions:

As with any customizer section, the CSS section cannot assume that there are no non-core controls added.

Did you try 38755.4.diff​? It specifically only does the full-height behavior if the section only has the one control.

[delawski]

@westonruter I have reviewed the patch and it looks great. I've tested it out locally in both cases:

• when there is only the CSS editor, and
• when there is some other control besides of the editor.

The patch works as expected in either scenario. I think it's ready to merge.

[westonruter]

In 39229:

Customize: Maximize height of Custom CSS textarea without causing doubled scrollbars.

Textarea will fill vertical height of Custom CSS section for browsers that support calc() and when plugins don't add other controls to the section. Also run CSS autoprefixer.

Props michaelarestad, westonruter.
See #35395.
Fixes #38755.