CODEWITHSUNDEEP
drupaldrupal-8
SheppardDigital
SheppardDigital

Reputation: 3255

Drupal 8 How do you wrap blocks in their own HTML without exposing the HTML in the editor

I have a site where I've created a footer region. This will consist of two blocks, one aligned to the left of the footer, and the other aligned to the right. I'm using Bootstrap and as a result each block is wrapped in the necessary HTML to describe the two columns.

My question is, how can I wrap specific blocks in their own HTML without exposing this within the block editor in Drupal (to avoid users deleting the HTML).

Here's an example of my HTML;

<!-- Start: Footer -->
<footer>
    <div class="container">
        <!-- {{ content }} would be inserted here -->

        <!-- Start: Footer menu -->
        <div class="col-xs-12 col-sm-8">
            <img src="/images/logo.png" class="logo">
            <ul class="links">
                <li><a href="#">FAQS</a></li>
                <li><a href="#">RESOURCES</a></li>
                <li><a href="#">RETURN TO MAIN SITE</a></li>
            </ul>
        </div>
        <!-- End: Footer menu -->
        <!-- Start: Social media links block -->
        <div class="col-xs-12 col-sm-4">
            <p>Connect with us:</p>
            <ul class="social">
                <li><a href="#"><span class="fa fa-twitter"></span></a></li>
                <li><a href="#"><span class="fa fa-facebook"></span></a></li>
                <li><a href="#"><span class="fa fa-linkedin"></span></a></li>
                <li><a href="#"><span class="fa fa-google-plus"></span></a></li>
            </ul>
        </div>
        <!-- End: Social media block -->
    </div>
</footer>
<!-- End: Footer -->

Upvotes: 1

Views: 901

Answers (1)

OPTASY
OPTASY

Reputation: 126

If you activate twig debug in your development.services.yml, you can see exactly what template name each block has. So you can override the template for one (or more) specific block(s) and add the wrappers there

Upvotes: 1

Related Questions