De Paragraphs-module geldt binnen Drupal al vele jaren als belangrijke speler om content binnen aantrekkelijke en flexibele layouts te presenteren. Aantrekkelijk en flexibel wil echter nog niet zeggen dat de werking voor de redacteur gebruiksvriendelijk is. Er vindt gelukkig actieve doorontwikkeling plaats in het Paragraphs-ecosysteem en het is goed dit af en toe te checken. Mijn laatste ontdekking is Layout Paragraphs. Met deze module is page building op basis van paragrafen stukken intuïtiever geworden.
Page building kan toch met Layout Builder?
Drupal kent sinds 2018 een page-builder-functionaliteit die de redacteur in staat stelt om op basis van drag-and-drop variërende layouts te maken binnen Drupal: Layout Builder. De module deed zijn intrede toen wij bij Finalist al enkele jaren het Paragraphs-pad bewandelden voor datzelfde doel. En dat is tot op heden niet veranderd. Niet omdat het een of het ander beter is, daar zijn genoeg blogs over gescheven. Maar Layout Builder heeft ons ook niet voldoende overtuigd. Zo voelt bijvoorbeeld de UI weinig modern aan, met de eenvoudige sidebar met opties in tekst weergegeven. Layout Builder lijkt simpelweg niet de grensverleggende ‘must’ die we moeten aanbieden aan redacteuren. Wel flexibel, maar niet intuïtief genoeg om mij van mijn geliefde Paragraphs af te halen.
Gutenberg
Eigenlijk trof ik echt verbeterde intuïtiviteit pas aan bij het van Wordpress afkomstige Gutenberg. De gebruiksvriendelijkheid van de editor is naar mijn idee vooralsnog ongeëvenaard. Er vindt helaas beperkt doorontwikkeling plaats. Zo wordt de opgemaakte layout als 1 bonk HTML in het Body-veld opgeslagen, in plaats van netjes gestructureerd in losse entiteiten en velden zoals Paragraphs. Deze benadering past slecht in een headless of progressively decoupled strategie om een omnichannel landschap te bedienen. Voor blogjes of (nieuws)artikelen nog steeds heel bruikbaar, maar niet de gedroomde oplossing waarmee je de toekomst instapt. Gutenberg is vooral een wysiwyg-editor on steroids.
Layout Paragraphs
En dus houden wij nog even vast aan Paragraphs. Van tijd tot tijd worden er bovendien uitstekende modules tegen Paragraphs aangeschreven, die de module steeds krachtiger maken. Op het vlak van gebruiksvriendelijkheid ontdekte ik onlangs ‘Layout Paragraphs’. Deze module, die overigens gebaseerd is op de Layout API die ook ‘onder’ Layout Builder zit, biedt een drag-and-drop-ervaring voor paragrafen. Net als met Layout Builder kunnen regions worden gemaakt waarin een indeling op basis van rijen en kolommen kan worden gemaakt. Ook kunnen die paragraphs soepel verplaatst worden van de ene naar de andere kolom of rij en kun je de indeling naar wens wijzigen, ook als de paragrafen al gemaakt zijn. Gecombineerd met de iconen die per paragraaftype kunnen worden ingevoerd, is het mogelijk de redacteur een page-building-ervaring op basis van paragrafen te bieden die gebruiksvriendelijk is. De basisstyling (de regions) wordt toegepast op de back-end en op de front-end.
Hoe werkt het (Drupal 9)?
Layout Paragraphs gebruiken het concept van nested paragraphs: paragrafen binnen paragrafen. De layout paragraphs fungeren hierbij als container. Binnen die containers, die zich presenteren als rijen met een of meer kolommen, kun je andere paragrafen plaatsen.
- Om de module na installatie werkend te krijgen, maak je een nieuw paragraaftype aan. Dit wordt je container. Geef deze een logische naam: bijvoorbeeld ‘Layout’ of ‘Meerdere kolommen’. Het is voor je containerparagraaf niet nodig om velden in te stellen, maar het kan wel. Zo kun je bijvoorbeeld een Classy-Paragraphs-veld instellen, zodat je redacteur een stijl kan toepassen op zowel de container als op de geneste paragrafen. Vink onder Behaviors ‘Layout Paragraphs’ aan. De module zeurt misschien dat je hiervoor ‘EXPERIMENTAL paragraphs widget’ nodig hebt. Sla hier geen acht op, want deze Behavior is essentieel om dit werkend te krijgen. In het uitklapvenster dat volgt kun je vervolgens selecteren welke layouts je wilt gebruiken: one column, two column etc. Kies er meerdere al naar gelang de mogelijkheden die je wilt bieden. Meer is er voor dit paragraaftype niet nodig.
- Maak ook overige paragraaftypes voor de échte content: de tekst, afbeeldingen, lijstjes etc. die de redacteur nodig heeft. Anders valt er weinig te kiezen, Layout Paragraphs is tenslotte enkel de container. Binnen de container kun je straks deze ‘normale’ paragrafen indelen in rijen en kolommen (regions). Let op: bij deze paragrafen staat onder Behaviors eveneens de optie Layout Paragraphs, maar voor je normale paragrafen moet je dit niet aanvinken, enkel voor je containerparagraaf.
- Maak in het content-type waarin je de Layout Paragraphs wilt toepassen een Paragraphs-veld aan, zoals dit normaal werkt voor Paragraphs, en vink bij de veldinstellingen, naast alle ‘normale’ paragrafen ook de containerparagraaf aan.
- Stel in de tab voor de Formulierweergave (manage form display) van het content-type de widget in op ‘Layout Paragraphs’ (en dus niet op Paragraphs EXPERIMENTAL of klassiek).
- Stel in de tab voor de Weergave van het content-type (manage display) eveneens ‘Layout Paragraphs’ in. Het lijkt misschien logisch om onder Opties voor Lay-out aan te vinken dat je de Layout Builder wilt gebruiken, maar vink dit juist niet aan.
En dat is het. Bij het aanmaken van content verschijnt op de plaats van het paragraafveld een +-icoon. Deze toont na klikken de verschillende paragrafen. Kies de naam van de containerparagraaf om Layout Paragraphs te gebruiken. Vervolgens verschijnt een keuze voor layout. Kies een layout. Hierna verschijnen de normale paragrafen als optie en is de containerparagraaf niet meer aanwezig.
Nog een tip: Door de iconen-optie te gebruiken (ook toepasbaar op de container) ogen je paragrafen voor de redactie direct een stuk professioneler!
