Listing component - minor change for consistency

[woowoowoo]

There are a number of listing styles which use: <section class="navigation-block-listing">

There are two variations which use a class on the <ul> to change apppearance: wide|narrow. A third variant, however, uses an extra class on the section <section class="navigation-block-listing stacked">

It would be nice if there was consistency so that it's easier to implement these variants in wysiwyg applications such as matrix and wordpress.

I think it would be ideal if all the text based listings were controlled from the section tag, but as long as the behaviour was consistent, it would be helpful.

<section class="[navigation-text-listing|navigation-block-listing] (narrow|wide)">

Maintaining the legacy class for the current implementations should be relatively straightforward.

[woowoowoo]

Actually, I've just stumbled upon more problems with this component.

In some situations, there are examples of an optional heading and descriptive paragraph as part of the component.

As these are nested in a <section> the use of an <h1> is OK, I believe, but then, in the case of the NAVIGATIONAL BLOCK LISTING WITH LINKED HEADER, it jumps from the H1 to H3s. I don't think that's great.

Furthermore, there is the optional class="aligned-title" to apply to the H1, but nothing for the paragraph.

I believe two changes need to be made.

1. Either demote the H1 to an H2, or promote the H3s to H2s.
2. Add an optional class to the section which aligns both heading and paragraph consistently. eg: <section class="navigation-block-listing wide aligned">

This would mean that the same markup applied to all listings consistently and the markup was interchangeable.

[woowoowoo]

Going further with this - I've just realised that the only markup differences between the first three image based listings are:

1. the addition of the <figure><img…></figure> elements - which is good
2. use of <strong> instead of <h3> - which is puzzling

So, continuing with my theme so far, it would be great if headings were used instead, or at least styled the same as <strong> to bring these into line with the other text based listings.

[dkevey]

This example page shows the Listing content template that we have in MCE https://resources.web.unimelb.edu.au/controlled-environment/content-templates/listing/options/listing-component-options/_recache

In order to wrap listings in alt class for grey background we need to include heading and paragraph inside section, so would be good to have CSS consistent across all layouts.

[waitingallday]

See #747