About: Overlap Images With Paragraph

[shail-mehta]

About: Overlap Images With Paragraph

Screenshot:

For Images License: License is already added in readme.txt so not included license again

Fixes: #64

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: shail-mehta <[email protected]>
Co-authored-by: juanfra <[email protected]>
Co-authored-by: carolinan <[email protected]>
Co-authored-by: beafialho <[email protected]>
Co-authored-by: hanneslsm <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[carolinan]

For Images License: License is already added in readme.txt so not included license again

If both images are already in the theme, why does a new image need to be added? If two different formats really are needed, both files need to be mentioned under the same declaration.

[carolinan]

I don't think the overlap or width is correct, here is a screenshot from the block editor:

[carolinan]

I think the columns block just needs to be set to wide?

[beafialho]

Thank you @shail-mehta for you work on this one!

The columns block needs to be set to wide, yes.

I checked the pattern and it wasn't looking good on mobile. Here's a recording:

overlappingimagesmobile.mp4

So I had to do some trial and error to see how to make it look best across screen sizes. Here's how it turned out:

<!-- wp:group {"metadata":{"categories":["about","media","text"],"patternName":"twentytwentyfive/overlap-images-and-paragraph","name":"Overlap images and paragraph on right"},"align":"full","className":"is-style-section-5","style":{"spacing":{"padding":{"top":"var:preset|spacing|80","bottom":"var:preset|spacing|80","left":"var:preset|spacing|50","right":"var:preset|spacing|50"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull is-style-section-5" style="padding-top:var(--wp--preset--spacing--80);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--80);padding-left:var(--wp--preset--spacing--50)"><!-- wp:columns {"align":"wide","style":{"spacing":{"blockGap":{"top":"var:preset|spacing|80","left":"var:preset|spacing|80"}}}} -->
<div class="wp-block-columns alignwide"><!-- wp:column {"width":"45%","style":{"spacing":{"padding":{"right":"var:preset|spacing|50"}}}} -->
<div class="wp-block-column" style="padding-right:var(--wp--preset--spacing--50);flex-basis:45%"><!-- wp:image {"sizeSlug":"full"} -->
<figure class="wp-block-image size-full"><img src="http://tt5.local/wp-content/themes/twentytwentyfive/assets/images/image-from-rawpixel-id-8799471.webp" alt="Photography close up of a red flower."/></figure>
<!-- /wp:image -->

<!-- wp:group {"style":{"spacing":{"margin":{"top":"-12vw"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="margin-top:-12vw"><!-- wp:image {"width":"202px","sizeSlug":"full","align":"right","className":"is-resized","style":{"spacing":{"margin":{"right":"-5vw","left":"-5vw"}}}} -->
<figure class="wp-block-image alignright size-full is-resized" style="margin-right:-5vw;margin-left:-5vw"><img src="http://tt5.local/wp-content/themes/twentytwentyfive/assets/images/grid-flower-2.webp" alt="Black and white photography close up of a flower." style="width:202px"/></figure>
<!-- /wp:image --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center","width":"50%","style":{"spacing":{"padding":{"left":"0","right":"0"}}}} -->
<div class="wp-block-column is-vertically-aligned-center" style="padding-right:0;padding-left:0;flex-basis:50%"><!-- wp:group {"layout":{"type":"flex","orientation":"vertical"}} -->
<div class="wp-block-group"><!-- wp:heading {"className":"is-style-pill"} -->
<h2 class="wp-block-heading is-style-pill">About Us</h2>
<!-- /wp:heading --></div>
<!-- /wp:group -->

<!-- wp:paragraph {"style":{"typography":{"lineHeight":"1.2"}},"fontSize":"x-large"} -->
<p class="has-x-large-font-size" style="line-height:1.2"><strong>Fleurs</strong> is a flower delivery and subscription business. Based in the EU, our mission is not only to deliver stunning flower arrangements across but also foster knowledge and enthusiasm on the beautiful gift of nature: flowers.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

[juanfra]

Thanks for working on this @shail-mehta! It looks really well, nice trick with the images and the negative margins.

I left a few comments for you to look at, apart from the ones that Carolina mentioned about the license and the width of the columns block.

Thanks again!

[juanfra]

The columns block should be set to align wide so that it takes the right width of the layout, and let's remove the is-style-default.

[juanfra]

In theory, this should be 28px, but with x-large it is set to 32px. I'll defer to @beafialho.

[juanfra]

I believe that with so much padding on the sides, the mobile layout looks a bit narrow. I'll defer to @beafialho.

We could use empty columns on the side to make it look good on desktop and mobile, like we did here.

Screen.Recording.2024-09-10.at.12.21.21.mov

[juanfra]

@shail-mehta do you think we can work on the iterations to fix the issues raised in the reviews?