1

Using stable as a base theme, I'm building a theme that will provide styles for paragraph items.

The default output (without any templates affecting this area) seems weird to me, though. Take a look at this simplified version (stripped of data--classes):

<div>
    <div>
        <div class="paragraph">
            <!-- paragraph content -->
        </div>
    </div>
    <div>
        <div class="paragraph">
            <!-- paragraph content -->
        </div>
    </div>
</div>

As you can see, the wrapping element around all paragraphs, as well as the element wrapping each paragraph lack any classes and are therefore quite useless. Furthermore, for the indivudual paragraph, another div inside them has a class that would actually be useful, but it's too far down the document hierarchy to be actually useful in styling.

Attempting to remedy this by myself by modifying paragraph.html.twig, I can get to the div currently holding the .paragraph class, but nothing above that.

I assume all has it's purpose, but I also think this is a weird default behavior, as there is no apparent need for two nested divs for each individual paragraph in any normal use case. Am I missing something?

  • Did you try twig debug? You should be able to remove all div's if you know, in which twig the div is located. – 4k4 Aug 4 '16 at 12:26
  • I did - the outermost container is labelled with field--entity-reference-revisions.html.twig, field.html.twig (plus variations based on the machine name), but the direct child to that doesn't have any debug output whatsoever. – TheThirdMan Aug 4 '16 at 12:30
3

In the theme stable the field twig has two div's, one overall and one for each item. This would match what you have provided as html markup.

So this should work, copy field.html.twig from stable to field--entity-reference-revisions.html.twig in your theme and remove the div's from there.

That the div's are useless is not correct for all circumstances, because there may be different configurations or modules, which use the attributes of the div's. So if you remove them, you might loose some of that functionality.

  • Yeah, I can see how they might be useful in certain cases, but I would think the parent div should have the paragraph class at least, not the nested child, but this might just be an oversight on my end. Thanks for your help! – TheThirdMan Aug 4 '16 at 13:25
  • The outer div can't get the class paragraph automatically, because the reference field does not necessarily contain only paragraphs. You could use classy as base theme. Then you get classes from the field. As you know yourself that you have configured the field only for paragraphs you have all what you need. – 4k4 Aug 4 '16 at 19:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.