ArticlePage StreamField Template Consideration and Cleanup

[KalobTaulien]

File(s) or components

The streamfield blocks around article_page.html need some consideration and possible cleanup. This issue stems from #5075

Reason for cleanup

The stream blocks for article_page.html often break out of the grid. For instance, paragraphs have a width of about 80% the normal container with floating images to the sides. And there are other streamfields that break out of the normal "Article Container (.container)" and require the old container to be closed, code added, and then optionally re-open the original container to content stays in line.

See article_full_width_image_block.html for a full example where the top closes the original container, the middle source is the code we want to use, and if its not the last block in the streamfield re-open the original container at the end.

[KalobTaulien]

Two options have come up, and I've used both before.

Option #1

We can break out of the bigger container like we current are, with something like this in the stram block templates:

        </div>
    </div>
    <div class="my stuff here">....</div>
    <div class="container">
        <div class="row"> ....

Option 2

We leverage as much CSS as we can by either writing our own .container class (a different one, not one to overwrite bootstraps .container class) with three modifiers for the small, medium and full-width containers. And instead of breaking out of the parent container for the full-width block we simply write more CSS than HTML/Bootstrap.

---

These were the 2 options that came up in the Wagtail Slack when I asked. These are also the only two methods I know of (and have tried).

Personally, I like using more HTML than CSS and leveraging Bootstraps grid framework as much as possible. It feels a lot less "magic" from a developer/maintenance point of view. Though I'm always up for a discussion around this.

@Pomax and @mmmavis what are your thoughts?

[Pomax]

how urgent is this? My immediate thoughts right now are "let's discuss this after PNI has launched"

[KalobTaulien]

This is not urgent. I think the way we're doing it now is the way everyone else is handling this same scenario. @Pomax – I think we're good to close this, or icebox it for a later date.

[Pomax]

I'll move this to stretch for now