[UX] Add help text and improve the UI to clarify things around layout templates

[klonos]

This is similar to #6309 but for the layouts UI.

While for most of us "chronic" Backdrop users certain things are obvious, they may not be that obvious to people new to our CMS. See discussion in this thread in Zulip for more context: https://backdrop.zulipchat.com/#narrow/stream/218635-Backdrop/topic/Flexible.20layouts/near/392081383

Lets add some help text that a minimum indicates that if none of the available templates is suitable, more can be added either from the "Install new layout templates" tab (ready-made), or from the "Layout templates" tab (create new templates with custom number of rows rows and region widths).

[klonos]

Here's a suggestion for the text to get us started:

If none of the above templates is suitable for your needs, you can search for more and add them to your site from the "Install new layout templates" tab above, or even try creating your own custom ones in the "Layout templates" tab next to it.

[stpaultim]

I may have expanded a tiny bit on the original mission.

I added this line of help text. I think it helps expose people to the option of creating their own flexible layout template, which is otherwise a bit hidden.

I added this line of help text, but would like to move this above the "Add flexible layout template" link, but I don't know how .

I added this line, because I think it's easy to arrive at this page and think you are in the wrong place, because there is no place to build a template here. Short text is intended to let people know that the good part is coming up after naming your template.

[klonos]

Thanks @stpaultim 🙏🏼 ...here's a few thoughts/ideas (some could or should be separate issues):

• We need to be careful when adding links to help text: if that is in a form where there is user input, clicking the link will take people to a different page, and that can lead to data loss (hitting the back button on the browser doesn't retain your previously-entered data). One way to avoid that is to have the links open in another browser tab, by adding target="_blank" to the properties of the <a> HTML tag. Alternatively in our case, since the elements that we want to refer to are present and visible, we can refer to them ("click the XYZ tab above").
• I don't think that it would be easy to move any help text above any "+ add" link. These are called "action links" (they are menu items of type MENU_LOCAL_ACTION) and are treated specially: they are always printed right after the primary/secondary tabs section (see core/modules/system/templates/page-components.tpl.php) ...so I don't mind leaving them where they are now. Perhaps add the help text in a "What are flexible layout templates" fieldset, like we have done in admin/structure/layouts/settings with the "How layouts work" fieldset.
• I think that the verb "build" is a better fit for drag-drop interfaces. In Drupal they are already using it in "layout builder", but I think that that is a broadly-user term and I think that it is one of those things that (in English at least) is intuitive, self-explanatory when it comes to similarly-behaving UIs, and simply make sense to use. I think that we already refer to the "Manage blocks" UI in admin/structure/layouts/manage/% as "Layout builder" (which is good for people coming from Drupal-land I believe), so perhaps we should start referring to the UI in admin/structure/layouts/settings/flexible-template/%/configure as "Layout template builder" or just "Template builder".
• Related to the previous point, perhaps change the help text in admin/structure/layouts/settings to something like:

  There are two types of layout templates when it comes to the way they are created:

  • Flexible layout templates can be created and edited via the Template builder, an interface that allows building layout templates with custom regions via drag and drop.
  • Standard layout templates are written in PHP code, and some are already provided by Backdrop CMS core. Additional community-provided templates can be installed from the "Install new layout templates" tab above, or custom-coded templates can be developed and added in the layouts directory of your site.

  Both types of templates are listed below. You can limit which of them will be available when creating layouts by enabling/disabling them.

• With regards to the help text added to the "Add template" dialog, I like it and find it useful, but wondering if while at it we bring some consistency to it and use the same "save and do something" UI pattern we are already using when adding views, vocabularies, and content types. So:

  • Rename the "Save and configure" primary button to "Save and configure regions"
  • Add a plain "Save template" secondary button
  • Make the current "Cancel" button a link instead

  If we did the above points, would the help text still be needed, or would the "Save and configure regions" primary button suffice?