If you’re already read some of my other articles related to the Drupal way of creating a modern flexible content page builder with paragraphs module [[2023-01-18-Drupals-block-based-page-builder]] then you may now want to take it a step further with this article about paragraph blocks
Setup the paragraphs directory
1
2
3
| cd your_theme_folder
mkdir templates/paragraphs
cd templates/paragraphs
|
Use twig debug to check for filename overide suggestions
turn on twig debug
1
| touch paragraphs--twig-debug-suggestion.html.twig
|
Copy the existing module template into your custom theme
1
| cp modules/contrib/paragraphs/templates/paragraph.html.twig your_theme_folder/templates/paragraphs/paragraphs--twig-debug-suggestion.html.twig
|
Paragraph template initial code
code from modules/contrib/paragraphs/templates/paragraph.html.twig
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| {%
set classes = [
'paragraph',
'paragraph--id--' ~ paragraph.id(),
'paragraph--type--' ~ paragraph.bundle|clean_class,
view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
not paragraph.isPublished() ? 'paragraph--unpublished',
]
%}
{% block paragraph %}
<div{{ attributes.addClass(classes) }}>
{% block content %}
{{ content }}
{% endblock %}
</div>
{% endblock paragraph %}
|
Overide with your custom code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
| {%
set classes = [
'paragraph',
'paragraph--type--' ~ paragraph.bundle|clean_class,
view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
not paragraph.isPublished() ? 'paragraph--unpublished',
'my-webform-paragraph-module'
]
%}
{% block paragraph %}
<div{{ attributes.addClass(classes) }}>
{% block content %}
<div class="container">
<div class="row">
<div class="col-lg-8 bg-primary">
<div class="box">
{{content.field_form_title}}
{{ content.field_form_intro_text }}
</div>
</div>
<div class="col">
<div class="box">
{{content.field_webform}}
</div>
</div>
</div>
</div>
{% endblock %}
</div>
{% endblock paragraph %}
|