[UX] Provide a hint that classes can be added to the inner wrapper of a region.

[klonos]

I have noticed this small UX problem while posting a comment in #682 (comment) ...

So by default, when one clicks the "Configure region" option of any region in the "Manage blocks" page:

...they see this:

What is not clear, is that if you select any option other than the default "no inner wrapper", you get a "CSS classes for inner wrapper" field, that allows you to add classes:

This is a very useful feature, but we are hiding it away from the user. I see 2 options that would help improve the situation:

1. Add some help text while the select option in the dropdown is "no inner wrapper". Something very simple like:

   Selecting an inner wrapper would allow you to specify custom classes for it, which you can then use to help you theme your site.

   Here's how this would look:

   

2. "CSS classes for inner wrapper" field be rendered all the time, instead of being hidden via #states, but have it be disabled (with an explanation as to why), until the user has selected an option other than "no inner wrapper". Something like this:

   

Thoughts?

---

PR by @klonos: backdrop/backdrop#2527

[klonos]

...I personally like the 2nd option, because... nobody reads help text unfortunately 😞

[quicksketch]

Yeah second option is better. We can use #states to set enabled/disabled, but it doesn't have the ability to directly set description text. We could hide/show description text by making it a separate element, but it wouldn't be pretty, either in markup or in the UI due to extra margins. Though we could perhaps use a description like "If an inner wrapper is added, specify classes separated by spaces."

[klonos]

So yeah, turns out that '#type' => 'help' does not support #states or #attributes (or if meant to, then it doesn't work: #3569). So this does not work:

  $form['help'] = array(
    '#type' => 'help',
    '#markup' => t('Separate multiple classes with spaces.'),
    '#attributes' => array('class' => array('description')),
    '#states' => array(
      'invisible' => array(
        ':input[name="element"]' => array('value' => ''),
      ),
    ),
  );

...in that the class is not added, and the #states functionality never kicks in.

Anyway, I went with what @quicksketch has suggested for the help text, which is a much simpler change too. Not perfect/ideal, but solves the UX/discoverability issue at hand:

Suggesting 1.12.4 milestone.

[quicksketch]

Merged backdrop/backdrop#2527 into 1.x and 1.12.x. Thanks @klonos and @herbdool!