Custom Paragraph Blocks Drupal

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

cd your_theme_folder
mkdir templates/paragraphs
cd templates/paragraphs

Use twig debug to check for filename overide suggestions

turn on twig debug

touch paragraphs--twig-debug-suggestion.html.twig

Copy the existing module template into your custom theme

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

{%
  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

{%
  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 %}