VLSuite Headings menu block adjustments

Created on 27 January 2025, 28 days ago

Problem/Motivation

When using "VLSuite Headings menu block" there are some use cases where tree is not correct, all those use cases have something in common: after first deeper heading tag, it goes back just one level always:

  • h2 - h3 - h4 - h3: ok
  • h2 - h3 - h4 - h2: ko

Steps to reproduce

  • Enable "vlsuite_block_headings_menu" & allow into your landing content layout builder customizable display as allowed block (/admin/structure/types/manage/vlsuite_landing/display/full if installed by demo module).
  • Create a landing content with vlsuite two cols section (first region add headings menu block, and second region add text block for example with provided markup*). Note in reverse way, it won't generate tree as headings block must be in first region @see VLSuiteLayoutTwoCols::build().

*Demo markup:

<h2>
    Lorem ipsum dolor sit amet
</h2>
<p>
    Consectetur adipiscing elit. Nulla accumsan dignissim rutrum. Quisque varius eleifend auctor. Etiam dapibus porta risus, ac fermentum elit fringilla iaculis. Donec egestas nibh nibh, tincidunt placerat neque porttitor et. Phasellus aliquet risus eu nibh venenatis, sit amet dapibus erat aliquet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sed eros nulla. Suspendisse eu facilisis nisl, ac commodo mi. Nullam sem metus, pulvinar eu neque ut, vehicula imperdiet dolor.
</p>
<h3>
    In at ipsum sed ex placerat hendrerit
</h3>
<p>
    Nam mattis egestas orci, in sollicitudin magna interdum at. Aliquam erat volutpat. Aliquam at semper risus. Etiam eu bibendum leo. Donec dapibus neque vitae lacus bibendum, ut consectetur orci posuere. Nullam tempus dapibus quam quis pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus sollicitudin nisi sed arcu iaculis vulputate. Nulla luctus laoreet arcu. Donec aliquam tellus non consequat semper. Suspendisse dolor enim, facilisis eget tempor ut, porta quis neque. In vitae enim arcu. Praesent id sapien ut libero commodo porttitor. Ut rhoncus risus erat, id tristique ante facilisis sit amet.
</p>
<h4>
    Donec felis tellus
</h4>
<p>
    Facilisis in sapien quis, rutrum luctus enim. Suspendisse suscipit mi quis feugiat cursus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.&nbsp;
</p>
<h5>
    Praesent magna nisl
</h5>
<p>
    Molestie nec turpis a, dictum faucibus massa. Nullam vel purus ut felis viverra tincidunt laoreet vel justo. Nullam eget neque metus. Ut sit amet arcu imperdiet, fringilla sapien id, luctus diam.&nbsp;
</p>
<h3>
    Maecenas dignissim enim
</h3>
<p>
    Sed efficitur, felis ut eleifend vestibulum, lacus quam lacinia metus, at tempus nisi justo et sem. Aliquam nec maximus sem. Nullam pretium, mi quis maximus fringilla, quam mauris dictum lorem, a porttitor ligula nibh sit amet diam.&nbsp;
</p>
<h4>
    Curabitur blandit velit non ultrices vehicula
</h4>
<p>
    Donec sit amet sodales mi. Mauris commodo elit enim, sit amet aliquam tellus consequat eu. Phasellus luctus dapibus facilisis.
</p>
<p>
    Suspendisse semper sed est sed iaculis. Nulla consectetur lacus cursus leo sollicitudin iaculis. Aenean eu orci odio. Nullam eleifend scelerisque lorem tristique laoreet. Vestibulum sed commodo quam, quis porta purus. Aenean a ultricies tortor, vitae viverra neque. Integer vitae massa eu purus ultricies elementum id at sem. Nunc semper massa vitae magna ornare, id pulvinar purus facilisis. Proin pharetra fringilla metus, sed laoreet justo suscipit a. Sed tortor lacus, consequat ut tortor vel, sodales sollicitudin orci. Suspendisse sit amet placerat turpis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur odio nibh, iaculis quis nisl eu, aliquam laoreet tortor. Fusce pharetra, ligula id molestie commodo, erat arcu accumsan leo, a lobortis ante est eu eros. Vestibulum vehicula consectetur urna, ac laoreet velit.
</p>
<h2>
    Vestibulum dui lorem
</h2>
<p>
    Praesent nisl velit, ultricies a ligula a, pulvinar congue mi. Sed sed facilisis lorem. Pellentesque blandit ex molestie, elementum urna ut, consequat augue. Nulla pretium purus sit amet urna sollicitudin, vitae lobortis eros vestibulum. Ut orci nulla, maximus in diam ut, porta lobortis mi. Praesent faucibus turpis ut justo placerat, a commodo erat luctus.
</p>
<h3>
    Vivamus eget ante nibh
</h3>
<p>
    In hendrerit sapien et orci imperdiet, ut fermentum nulla molestie. Ut congue massa ac orci facilisis, ac mollis nulla dictum. Sed vitae massa suscipit, efficitur enim pharetra, bibendum odio.&nbsp;
</p>
<h4>
    Sed finibus dictum nisl
</h4>
<p>
    Nec vulputate lorem molestie eu. Donec pulvinar nibh quis quam interdum feugiat. Suspendisse tincidunt, odio nec blandit interdum, sapien velit gravida turpis, fermentum condimentum eros risus sed tellus. Quisque eros enim, dictum vitae porta in, pulvinar rutrum metus. Praesent molestie sed ex dictum mollis. Duis et tempus mi, eu semper tortor. Vivamus eget dignissim arcu. Suspendisse potenti. Sed facilisis eros eget sem suscipit, et dictum dui dictum.
</p>
<h3>
    Aenean vel elit eros
</h3>
<p>
    Maecenas tempor elementum sodales. Cras est nunc, consectetur vitae gravida eget, vestibulum pharetra ligula. Donec scelerisque sit amet odio vel posuere. Fusce a ipsum pharetra erat lacinia ultrices nec a ipsum. Cras id turpis ac mauris euismod lobortis. Morbi massa lacus, pretium eu varius eu, luctus a ligula.
</p>
<h2>
    Integer id sem tristique
</h2>
<p>
    Nam sed ultricies ante. Nunc sit amet metus nisi. Etiam euismod justo sit amet ligula bibendum laoreet. Aenean vel ipsum eleifend, vestibulum justo id, dictum dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam gravida lectus mi, eu sagittis urna tempor non. Curabitur vel est at urna consequat auctor ac sit amet tellus.&nbsp;
</p>
<h3>
    Sed vel nunc et arcu rutrum suscipit id eu quam
</h3>
<p>
    Vestibulum non placerat arcu. Morbi dapibus turpis a magna suscipit, ut mattis tortor malesuada. Maecenas rhoncus interdum ex, non tristique urna maximus ut. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec convallis elit id est commodo bibendum ut tincidunt erat. Proin bibendum ante ac diam sodales, ac aliquam velit varius. Quisque nec consequat enim.
</p>
<h2>
    Donec gravida ante ut rhoncus tristique
</h2>
<p>
    Vivamus vitae nibh non leo bibendum convallis. Curabitur commodo nisl vel mi sodales, quis rutrum ex semper. Duis imperdiet tempor magna. Mauris ut gravida lorem. Curabitur congue leo vel quam bibendum consequat. Sed sagittis ex dictum, tincidunt felis viverra, vehicula lacus. Interdum et malesuada fames ac ante ipsum primis in faucibus.
</p>
<h2>
    Quisque egestas mauris
</h2>
<p>
    Vestibulum sit amet fringilla leo. In nec massa efficitur urna tincidunt molestie nec ac odio. Vestibulum luctus, nisi ac varius dictum, quam magna vehicula ante, vitae tempor sapien odio non dolor. Sed eu venenatis dui, at scelerisque erat. Suspendisse eros eros, sagittis vitae dignissim sit amet, sodales quis ante. Sed facilisis magna vitae lectus efficitur, non auctor erat cursus. Vestibulum viverra dapibus arcu. Nunc et justo vel massa cursus luctus. Mauris varius tempor orci. Phasellus rutrum lorem elit.
</p>

Expected auto generated menu tree with that markup:

Current:

Proposed resolution

Manage that use cases taking into account headings difference instead always pop just one item (read problem/motivation).

Extra: also adjust to have that block ready to use with vlsuite demo installation.
Extra: include info about it in readme?

Remaining tasks

-

User interface changes

-

API changes

-

Data model changes

-

🐛 Bug report
Status

Active

Version

2.3

Component

Content blocks

Created by

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

Production build 0.71.5 2024