1173 caption max width

[benlk]

Changes

This pull request makes the following changes:

• Makes the content of figcaption on alignwide and alignfull images have the same width as the main-column text.

<!-- wp:paragraph -->
<p><a href="https://github.com/INN/largo/issues/1773">https://github.com/INN/largo/issues/1773</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vel 
scelerisque ante, vel accumsan lacus. Vivamus aliquet tellus lacus, eget
 convallis risus vestibulum vel. Etiam erat lacus, fringilla sed arcu 
vitae, elementum tincidunt augue. Orci varius natoque penatibus et 
magnis dis parturient montes, nascetur ridiculus mus. Aliquam convallis 
elit orci, at eleifend risus molestie id. Sed finibus mauris consequat 
ex sagittis sagittis. Vivamus varius nisl et maximus condimentum. Fusce 
in urna eget mi facilisis finibus vitae vitae lectus.
</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"full","id":130245,"sizeSlug":"large"} -->
<figure class="wp-block-image alignfull size-large"><img src="http://mstoday.test/wp-content/uploads/2020/01/pdNDZPU-771x434.jpg" alt="Space" class="wp-image-130245"/><figcaption><p class="wp-media-credit"><a href="https://example.org/credit">Media Credit / Organization</a></p>Full. Duis aliquam est iaculis eros imperdiet, sit amet iaculis nisl  vulputate. Aliquam erat volutpat. Phasellus metus dolor, pulvinar vitae  convallis in, dictum vel mauris. Praesent at nunc dolor. Nam dictum  blandit diam sit amet vestibulum. Etiam vitae pretium dolor. Morbi et  suscipit leo. Donec finibus ex lacinia laoreet feugiat. </figcaption></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Duis aliquam est iaculis eros imperdiet, sit amet iaculis nisl  vulputate. Aliquam erat volutpat. Phasellus metus dolor, pulvinar vitae  convallis in, dictum vel mauris. Praesent at nunc dolor. Nam dictum  blandit diam sit amet vestibulum. Etiam vitae pretium dolor. Morbi et  suscipit leo. Donec finibus ex lacinia laoreet feugiat. Vestibulum  fermentum risus enim, sed pellentesque tellus gravida vitae. Curabitur a  nulla eu massa auctor lacinia. Lorem ipsum dolor sit amet, consectetur  adipiscing elit. Sed mollis metus sed lectus condimentum, vel tristique  ipsum condimentum. Fusce fringilla interdum accumsan. Fusce tristique,  quam nec placerat aliquet, sem dolor fringilla velit, non hendrerit  velit ligula nec dui. Maecenas vel erat non augue gravida consequat. </p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"wide","id":130245,"sizeSlug":"large"} -->
<figure class="wp-block-image alignwide size-large"><img src="http://mstoday.test/wp-content/uploads/2020/01/pdNDZPU-771x434.jpg" alt="Space" class="wp-image-130245"/><figcaption><p class="wp-media-credit"><a href="https://example.org/credit">Media Credit / Organization</a></p>Wide. Duis aliquam est iaculis eros imperdiet, sit amet iaculis nisl  vulputate. Aliquam erat volutpat. Phasellus metus dolor, pulvinar vitae  convallis in, dictum vel mauris. Praesent at nunc dolor. Nam dictum  blandit diam sit amet vestibulum. Etiam vitae pretium dolor. Morbi et  suscipit leo. Donec finibus ex lacinia laoreet feugiat. </figcaption></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>
Nulla facilisi. Sed tempor diam sit amet turpis tristique hendrerit sit 
amet et elit. Nam euismod sagittis purus, eu condimentum nisl ornare ac.
 Mauris varius efficitur auctor. In tristique scelerisque justo vel 
iaculis. Suspendisse potenti. Pellentesque placerat gravida nisi, nec 
semper enim. In tempor magna eget aliquam scelerisque. Duis vel arcu 
dui. Nulla placerat massa vitae turpis commodo malesuada. Donec id velit
 ut tellus viverra commodo eget ut orci.
</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":130245,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="http://mstoday.test/wp-content/uploads/2020/01/pdNDZPU-771x434.jpg" alt="Space" class="wp-image-130245"/><figcaption><p class="wp-media-credit"><a href="https://example.org/credit">Media Credit / Organization</a></p>Normal. Duis aliquam est iaculis eros imperdiet, sit amet iaculis nisl  vulputate. Aliquam erat volutpat. Phasellus metus dolor, pulvinar vitae  convallis in, dictum vel mauris. Praesent at nunc dolor. Nam dictum  blandit diam sit amet vestibulum. Etiam vitae pretium dolor. Morbi et  suscipit leo. Donec finibus ex lacinia laoreet feugiat. </figcaption></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>
Mauris molestie orci vel lectus viverra euismod. Nulla a sem egestas, 
auctor turpis a, facilisis dolor. Aenean sit amet augue condimentum, 
aliquet quam ut, vehicula purus. Proin et magna ullamcorper, luctus 
lacus in, dapibus dolor. Duis hendrerit consequat nulla, a suscipit 
lorem placerat ac. Vestibulum nec ante elit. Aliquam non tortor 
elementum, bibendum dolor tempus, pulvinar mauris. Duis facilisis magna 
justo, in tincidunt nulla aliquet in. Interdum et malesuada fames ac 
ante ipsum primis in faucibus. Curabitur arcu metus, malesuada quis nisl
 in, congue luctus orci. Nunc vitae pulvinar lacus, eget ornare ipsum. 
Morbi commodo ipsum risus, ut dictum nisl blandit nec. Mauris est quam, 
commodo viverra convallis at, sollicitudin vitae dui. In id dolor sed 
tellus ornare auctor quis sed libero. Etiam ornare urna sit amet ipsum 
mollis pellentesque.
</p>
<!-- /wp:paragraph -->

Why

Fixes #1173

Testing/Questions

Features that this PR affects:

Questions that need to be answered before merging:

• Is this PR targeting the correct branch in this repository?
• What templates and conditions does this need to be tested under?
• How does the presence or absence of media credits via Navis Media Credit affect this?

Steps to test this PR:

[joshdarby]

@benlk 0d90b91 updates the styling so that the image is the only portion of the image group being modified, leaving all other elements in the group to inherit the width of the template layout. Do you see anything wrong with this solution?

One column:

Two column:

Full width:

Expanded:

Mobile:

[benlk]

With the post content I've put at the end of this comment, I'm seeing alignment weirdness with wide-aligned images on the two-column and full-width templates:

Full-width, the image is wider than the viewport:

Two-column, the caption is not constrained:

Also, if the caption is shorter than the page width, the background collapses:

<!-- wp:paragraph -->
<p>Normal:</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":324,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://largo.test/wp-content/uploads/2018/11/24496652921_1108fff3b7_h-771x514.jpg" alt="Alt Text Two fencers go at it." class="wp-image-324"/><figcaption>Caption: Two fencers go at it.</figcaption></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Curabitur congue cursus risus, sit amet laoreet sem scelerisque at. Mauris luctus, eros ut suscipit accumsan, velit eros ultricies risus, a pulvinar nisi enim ac quam. In iaculis pellentesque nisi vel congue. Sed rhoncus dignissim efficitur. Vivamus ornare nec felis sit amet dapibus. Maecenas bibendum nunc facilisis dui luctus tempor. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec iaculis, neque sed consequat dictum, diam ligula ornare justo, non dictum sapien turpis iaculis nibh. Sed molestie mattis diam a dictum. Aliquam sit amet enim at lacus vulputate sodales. Mauris vulputate ligula eu sollicitudin interdum. Quisque pellentesque, nisi eu feugiat bibendum, nulla libero condimentum ligula, et mollis orci dui ut metus. Suspendisse consequat metus mauris, ac congue elit placerat ac. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Aligned left:</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"left","id":324,"width":386,"height":257,"sizeSlug":"large"} -->
<div class="wp-block-image"><figure class="alignleft size-large is-resized"><img src="https://largo.test/wp-content/uploads/2018/11/24496652921_1108fff3b7_h-771x514.jpg" alt="Alt Text Two fencers go at it." class="wp-image-324" width="386" height="257"/><figcaption>Caption: Two fencers go at it.</figcaption></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Curabitur congue cursus risus, sit amet laoreet sem scelerisque at. Mauris luctus, eros ut suscipit accumsan, velit eros ultricies risus, a pulvinar nisi enim ac quam. In iaculis pellentesque nisi vel congue. Sed rhoncus dignissim efficitur. Vivamus ornare nec felis sit amet dapibus. Maecenas bibendum nunc facilisis dui luctus tempor. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec iaculis, neque sed consequat dictum, diam ligula ornare justo, non dictum sapien turpis iaculis nibh. Sed molestie mattis diam a dictum. Aliquam sit amet enim at lacus vulputate sodales. Mauris vulputate ligula eu sollicitudin interdum. Quisque pellentesque, nisi eu feugiat bibendum, nulla libero condimentum ligula, et mollis orci dui ut metus. Suspendisse consequat metus mauris, ac congue elit placerat ac. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Aligned right:</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"right","id":324,"width":386,"height":257,"sizeSlug":"large"} -->
<div class="wp-block-image"><figure class="alignright size-large is-resized"><img src="https://largo.test/wp-content/uploads/2018/11/24496652921_1108fff3b7_h-771x514.jpg" alt="Alt Text Two fencers go at it." class="wp-image-324" width="386" height="257"/><figcaption>Caption: Two fencers go at it.</figcaption></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Curabitur congue cursus risus, sit amet laoreet sem scelerisque at. Mauris luctus, eros ut suscipit accumsan, velit eros ultricies risus, a pulvinar nisi enim ac quam. In iaculis pellentesque nisi vel congue. Sed rhoncus dignissim efficitur. Vivamus ornare nec felis sit amet dapibus. Maecenas bibendum nunc facilisis dui luctus tempor. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec iaculis, neque sed consequat dictum, diam ligula ornare justo, non dictum sapien turpis iaculis nibh. Sed molestie mattis diam a dictum. Aliquam sit amet enim at lacus vulputate sodales. Mauris vulputate ligula eu sollicitudin interdum. Quisque pellentesque, nisi eu feugiat bibendum, nulla libero condimentum ligula, et mollis orci dui ut metus. Suspendisse consequat metus mauris, ac congue elit placerat ac. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Aligned wide:</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"wide","id":324,"sizeSlug":"large"} -->
<figure class="wp-block-image alignwide size-large"><img src="https://largo.test/wp-content/uploads/2018/11/24496652921_1108fff3b7_h-771x514.jpg" alt="Alt Text Two fencers go at it." class="wp-image-324"/><figcaption>Caption: Two fencers go at it.</figcaption></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Curabitur congue cursus risus, sit amet laoreet sem scelerisque at. Mauris luctus, eros ut suscipit accumsan, velit eros ultricies risus, a pulvinar nisi enim ac quam. In iaculis pellentesque nisi vel congue. Sed rhoncus dignissim efficitur. Vivamus ornare nec felis sit amet dapibus. Maecenas bibendum nunc facilisis dui luctus tempor. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec iaculis, neque sed consequat dictum, diam ligula ornare justo, non dictum sapien turpis iaculis nibh. Sed molestie mattis diam a dictum. Aliquam sit amet enim at lacus vulputate sodales. Mauris vulputate ligula eu sollicitudin interdum. Quisque pellentesque, nisi eu feugiat bibendum, nulla libero condimentum ligula, et mollis orci dui ut metus. Suspendisse consequat metus mauris, ac congue elit placerat ac. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Aligned full:</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"full","id":324,"sizeSlug":"large"} -->
<figure class="wp-block-image alignfull size-large"><img src="https://largo.test/wp-content/uploads/2018/11/24496652921_1108fff3b7_h-771x514.jpg" alt="Alt Text Two fencers go at it." class="wp-image-324"/><figcaption>Caption: Two fencers go at it.</figcaption></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Curabitur congue cursus risus, sit amet laoreet sem scelerisque at. Mauris luctus, eros ut suscipit accumsan, velit eros ultricies risus, a pulvinar nisi enim ac quam. In iaculis pellentesque nisi vel congue. Sed rhoncus dignissim efficitur. Vivamus ornare nec felis sit amet dapibus. Maecenas bibendum nunc facilisis dui luctus tempor. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec iaculis, neque sed consequat dictum, diam ligula ornare justo, non dictum sapien turpis iaculis nibh. Sed molestie mattis diam a dictum. Aliquam sit amet enim at lacus vulputate sodales. Mauris vulputate ligula eu sollicitudin interdum. Quisque pellentesque, nisi eu feugiat bibendum, nulla libero condimentum ligula, et mollis orci dui ut metus. Suspendisse consequat metus mauris, ac congue elit placerat ac. </p>
<!-- /wp:paragraph -->

[joshdarby]

@benlk I have a hunch that's coming from some leftover styles adding left/right margins to alignwide that I didn't remove.

[benlk]

I haven't checked, but there may be position rules as well.

[joshdarby]

For when we come back to this, 96fc6a4 should have all of the updates needed for the issues mentioned above, except for the .alignwide image overflowing on mobile.