Block Patterns - Project Layout

[juanfra]

Description

🛠️ The goal of this issue is to track the implementation of the"Project Layout" pattern.
🎨 Figma

[maurodf0]

Working on this one

[beafialho]

Hey, I saw your message on Figma @maurodf0. I tried to build it in the editor and the design wasn't looking neat on mobile so I made some adjustments to pattern.

I used custom spacing so that likely needs adjustment to use the theme's spacing presets.

Before	After

pattern.mp4

<!-- wp:cover {"customOverlayColor":"#181818","minHeight":100,"minHeightUnit":"vh","style":{"spacing":{"padding":{"top":"6vw","right":"6vw","bottom":"6vw","left":"6vw"}},"elements":{"link":{"color":{"text":"#fffffffc"}}},"color":{"text":"#fffffffc"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-cover has-text-color has-link-color" style="color:#fffffffc;padding-top:6vw;padding-right:6vw;padding-bottom:6vw;padding-left:6vw;min-height:100vh"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-100 has-background-dim" style="background-color:#181818"></span><div class="wp-block-cover__inner-container"><!-- wp:columns {"align":"full"} -->
<div class="wp-block-columns alignfull"><!-- wp:column {"width":"50%"} -->
<div class="wp-block-column" style="flex-basis:50%"><!-- wp:group {"style":{"dimensions":{"minHeight":"100%"}},"layout":{"type":"flex","orientation":"vertical","verticalAlignment":"space-between","justifyContent":"stretch"}} -->
<div class="wp-block-group" style="min-height:100%"><!-- wp:image {"id":106,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://tt4portfolio.mystagingwebsite.com/wp-content/uploads/2023/08/project-layout-image-1-787x1024.jpg" alt="" class="wp-image-106"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph {"style":{"typography":{"fontSize":"0.8rem"}}} -->
<p style="font-size:0.8rem">1. Queste basi mi hanno permesso di affrontare la sessione con un profondo apprezzamento per l'identità dell'hotel e una chiara visione della storia che volevo raccontare attraverso il mio obiettivo.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"12%"} -->
<div class="wp-block-column" style="flex-basis:12%"><!-- wp:spacer -->
<div aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"33%"} -->
<div class="wp-block-column" style="flex-basis:33%"><!-- wp:group {"layout":{"type":"flex","orientation":"vertical","verticalAlignment":"space-between","justifyContent":"stretch"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"typography":{"lineHeight":"1.2","fontSize":"1.4rem"}}} -->
<p style="font-size:1.4rem;line-height:1.2"><strong>La mia missione era tradurre la miscela unica di arte, artigianato e bellezza naturale dell'hotel in una raccolta di fotografie evocative che risuonassero con gli spettatori e trasmettessero lo spirito di questa incantevole destinazione. Mi sono avvicinato all'incarico con l'obiettivo di catturare il carattere dell'hotel nella sua interezza. Ogni fotografia è diventata una testimonianza della fusione tra arte e natura, celebrando l'impegno dell'hotel per l'autenticità e la sua armoniosa convivenza con il paesaggio circostante.</strong></p>
<!-- /wp:paragraph -->

<!-- wp:group {"style":{"spacing":{"padding":{"top":"4vh"}}},"layout":{"type":"default"}} -->
<div class="wp-block-group" style="padding-top:4vh"><!-- wp:paragraph {"style":{"typography":{"fontSize":"0.8rem"}}} -->
<p style="font-size:0.8rem">2. Un racconto visivo di un ritiro intriso di arte, immagini che trascendono il regno delle semplici immagini.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":107,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://tt4portfolio.mystagingwebsite.com/wp-content/uploads/2023/08/project-layout-image-2-650x1024.jpg" alt="" class="wp-image-107"/></figure>
<!-- /wp:image --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div></div>
<!-- /wp:cover -->

[maurodf0]

Hey, I saw your message on Figma @maurodf0. I tried to build it in the editor and the design wasn't looking neat on mobile so I made some adjustments to pattern.

I used custom spacing so that likely needs adjustment to use the theme's spacing presets.

Ok i see, you used the cover block to set a full height block and delete the problem with the space between the column.
A beginner in the Editor (like me ahahah) didn't think about this solution.

I'll edit to night (Italian hours) the pattern trying to enable the theme's spacing preset.

Thank u so much.

[beafialho]

No problem, now you know another way 🙂 Some layouts can get tricky in the editor and sometimes a design adjustment is needed.

[maurodf0]

I added some edit to @beafialho code and make a pull request here: #183

Hope is ok.