Image and two columns of text

[alaczek]

<!-- wp:group {"align":"full"} -->
<div class="wp-block-group alignfull"><div class="wp-block-group__inner-container"><!-- wp:jetpack/layout-grid {"gutterSize":"none","addGutterEnds":false,"column1DesktopSpan":11,"column1TabletSpan":8,"column1MobileSpan":4,"column2DesktopOffset":5,"className":"column1-desktop-grid__span-11 column1-desktop-grid__row-1 column1-tablet-grid__span-8 column1-tablet-grid__row-1 column1-mobile-grid__span-4 column1-mobile-grid__row-1"} -->
<div class="wp-block-jetpack-layout-grid alignfull column1-desktop-grid__span-11 column1-desktop-grid__row-1 column1-tablet-grid__span-8 column1-tablet-grid__row-1 column1-mobile-grid__span-4 column1-mobile-grid__row-1 wp-block-jetpack-layout-gutter__nowrap wp-block-jetpack-layout-gutter__none"><!-- wp:jetpack/layout-grid-column -->
<div class="wp-block-jetpack-layout-grid-column wp-block-jetpack-layout-grid__padding-none"><!-- wp:image {"align":"full","id":261,"sizeSlug":"full"} -->
<figure class="wp-block-image alignfull size-full"><img src="https://gutenboardinghp2.files.wordpress.com/2020/03/kate-joie-mkt3dxonvtk-unsplash.jpg" alt="" class="wp-image-261"/></figure>
<!-- /wp:image --></div>
<!-- /wp:jetpack/layout-grid-column --></div>
<!-- /wp:jetpack/layout-grid --></div></div>
<!-- /wp:group -->

<!-- wp:spacer {"height":64} -->
<div style="height:64px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:jetpack/layout-grid {"column1DesktopSpan":6,"column1DesktopOffset":1,"column1TabletSpan":4,"column1MobileSpan":4,"column2DesktopSpan":4,"column2TabletSpan":4,"column2MobileSpan":4,"column3DesktopOffset":4,"className":"column1-desktop-grid__span-6 column1-desktop-grid__start-2 column1-desktop-grid__row-1 column2-desktop-grid__span-4 column2-desktop-grid__start-8 column2-desktop-grid__row-1 column1-tablet-grid__span-4 column1-tablet-grid__row-1 column2-tablet-grid__span-4 column2-tablet-grid__start-5 column2-tablet-grid__row-1 column1-mobile-grid__span-4 column1-mobile-grid__row-1 column2-mobile-grid__span-4 column2-mobile-grid__row-2"} -->
<div class="wp-block-jetpack-layout-grid alignfull column1-desktop-grid__span-6 column1-desktop-grid__start-2 column1-desktop-grid__row-1 column2-desktop-grid__span-4 column2-desktop-grid__start-8 column2-desktop-grid__row-1 column1-tablet-grid__span-4 column1-tablet-grid__row-1 column2-tablet-grid__span-4 column2-tablet-grid__start-5 column2-tablet-grid__row-1 column1-mobile-grid__span-4 column1-mobile-grid__row-1 column2-mobile-grid__span-4 column2-mobile-grid__row-2"><!-- wp:jetpack/layout-grid-column -->
<div class="wp-block-jetpack-layout-grid-column wp-block-jetpack-layout-grid__padding-none"><!-- wp:paragraph {"textColor":"primary","customFontSize":34} -->
<p style="font-size:34px" class="has-text-color has-primary-color"><strong>Daily photo blog, reviews, photography tips, gear buying guides, and more.</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph --></div>
<!-- /wp:jetpack/layout-grid-column -->

<!-- wp:jetpack/layout-grid-column -->
<div class="wp-block-jetpack-layout-grid-column wp-block-jetpack-layout-grid__padding-none"><!-- wp:paragraph {"customFontSize":18} -->
<p style="font-size:18px">About you. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:jetpack/layout-grid-column --></div>
<!-- /wp:jetpack/layout-grid -->

[alaczek]

@iamtakashi are there any rules for how the blocks are constructed? For example, do you use spacers? Where should the images live? Do we have to clean up the code in any way?

[iamtakashi]

are there any rules for how the blocks are constructed?

I'm still figuring out as I go to be honest :) But some things for sure are that not to use a huge image straight from Unsplash. Like what we did for layouts, images are no more than 2000px (width or height), and we should reduce the size of the image with ImageOptim. This image is huge on both points :)

Let's avoid using "Lorem ipsum" at all from the patterns that we make. In my opinion, all the elements in a pattern should be designed intentionally and relate to each other to create a "story" around it.

For example, do you use spacers?

We should use anything when it makes sense.

Where should the images live? Do we have to clean up the code in any way?

After the conversation with @obenland and @ianstewart, p1584641583330800-dotcom-view-design-slack we've decided to have a dedicated site for patterns, and that's where we're going to compose patterns and store images used in them.

-- For this pattern specifically:

I didn't notice with the screenshot, but when I pasted the pattern on a test site, the line-height of the text on the left was too tall. If it's 34px, why not using one of the headings that likely have a tighter line-height.

I'm personally not too excited about the image :) It feels a bit too zoomed out and too tall as well. An image that is much shorter might work better.

Lastly, I can see an empty paragraph tag in the pattern.

[alaczek]

Thanks for the feedback -- here's the updated pattern. Let me know if this works, and I can add it to the master site.

<!-- wp:group {"align":"full"} -->
<div class="wp-block-group alignfull"><div class="wp-block-group__inner-container"><!-- wp:jetpack/layout-grid {"gutterSize":"none","addGutterEnds":false,"column1DesktopSpan":11,"column1TabletSpan":8,"column1MobileSpan":4,"column2DesktopOffset":5,"className":"column1-desktop-grid__span-11 column1-desktop-grid__row-1 column1-tablet-grid__span-8 column1-tablet-grid__row-1 column1-mobile-grid__span-4 column1-mobile-grid__row-1"} -->
<div class="wp-block-jetpack-layout-grid alignfull column1-desktop-grid__span-11 column1-desktop-grid__row-1 column1-tablet-grid__span-8 column1-tablet-grid__row-1 column1-mobile-grid__span-4 column1-mobile-grid__row-1 wp-block-jetpack-layout-gutter__nowrap wp-block-jetpack-layout-gutter__none"><!-- wp:jetpack/layout-grid-column -->
<div class="wp-block-jetpack-layout-grid-column wp-block-jetpack-layout-grid__padding-none"><!-- wp:image {"align":"full","id":283,"sizeSlug":"large"} -->
<figure class="wp-block-image alignfull size-large"><img src="https://gutenboardinghp2.files.wordpress.com/2020/03/sherman-yang-tfq2yz8qirq-unsplash-2.jpg?w=1024" alt="" class="wp-image-283"/></figure>
<!-- /wp:image -->

<!-- /wp:jetpack/layout-grid-column --></div>
<!-- /wp:jetpack/layout-grid --></div></div>
<!-- /wp:group -->

<!-- wp:spacer {"height":64} -->
<div style="height:64px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:jetpack/layout-grid {"column1DesktopSpan":5,"column1DesktopOffset":1,"column1TabletSpan":4,"column1MobileSpan":4,"column2DesktopSpan":5,"column2TabletSpan":4,"column2MobileSpan":4,"column3DesktopOffset":8,"className":"column1-desktop-grid__span-5 column1-desktop-grid__start-2 column1-desktop-grid__row-1 column2-desktop-grid__span-5 column2-desktop-grid__start-7 column2-desktop-grid__row-1 column1-tablet-grid__span-4 column1-tablet-grid__row-1 column2-tablet-grid__span-4 column2-tablet-grid__start-5 column2-tablet-grid__row-1 column1-mobile-grid__span-4 column1-mobile-grid__row-1 column2-mobile-grid__span-4 column2-mobile-grid__row-2"} -->
<div class="wp-block-jetpack-layout-grid alignfull column1-desktop-grid__span-5 column1-desktop-grid__start-2 column1-desktop-grid__row-1 column2-desktop-grid__span-5 column2-desktop-grid__start-7 column2-desktop-grid__row-1 column1-tablet-grid__span-4 column1-tablet-grid__row-1 column2-tablet-grid__span-4 column2-tablet-grid__start-5 column2-tablet-grid__row-1 column1-mobile-grid__span-4 column1-mobile-grid__row-1 column2-mobile-grid__span-4 column2-mobile-grid__row-2"><!-- wp:jetpack/layout-grid-column -->
<div class="wp-block-jetpack-layout-grid-column wp-block-jetpack-layout-grid__padding-none"><!-- wp:heading {"level":3} -->
<h3><strong>Your website is just the beginning</strong>.</h3>
<!-- /wp:heading --></div>
<!-- /wp:jetpack/layout-grid-column -->

<!-- wp:jetpack/layout-grid-column -->
<div class="wp-block-jetpack-layout-grid-column wp-block-jetpack-layout-grid__padding-none"><!-- wp:paragraph {"customFontSize":18} -->
<p style="font-size:18px">One of the wonderful things about blogs is how they constantly evolve as we learn, grow, and interact with one another.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:jetpack/layout-grid-column --></div>
<!-- /wp:jetpack/layout-grid -->

[iamtakashi]

I've tried to copy and paste the markup, but I've got an error for some reason.

Could you double-check the markup?

[alaczek]

Sigh... not sure what happened there. Let's try this again:

<!-- wp:group {"align":"full"} -->
<div class="wp-block-group alignfull"><div class="wp-block-group__inner-container"><!-- wp:jetpack/layout-grid {"addGutterEnds":false,"column1DesktopSpan":11,"column1TabletSpan":8,"column1MobileSpan":4,"column2DesktopOffset":1} -->
<div class="wp-block-jetpack-layout-grid alignfull column1-desktop-grid__span-11 column1-desktop-grid__row-1 column1-tablet-grid__span-8 column1-tablet-grid__row-1 column1-mobile-grid__span-4 column1-mobile-grid__row-1 wp-block-jetpack-layout-gutter__nowrap"><!-- wp:jetpack/layout-grid-column -->
<div class="wp-block-jetpack-layout-grid-column wp-block-jetpack-layout-grid__padding-none"><!-- wp:image {"align":"full","id":257,"sizeSlug":"large"} -->
<figure class="wp-block-image alignfull size-large"><img src="https://gutenbaordinghp.files.wordpress.com/2020/03/sherman-yang-tfq2yz8qirq-unsplash.jpg?w=1024" alt="" class="wp-image-257"/></figure>
<!-- /wp:image --></div>
<!-- /wp:jetpack/layout-grid-column --></div>
<!-- /wp:jetpack/layout-grid --></div></div>
<!-- /wp:group -->

<!-- wp:spacer {"height":64} -->
<div style="height:64px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:jetpack/layout-grid {"column1DesktopSpan":5,"column1DesktopOffset":1,"column1TabletSpan":4,"column1MobileSpan":4,"column2DesktopSpan":5,"column2TabletSpan":4,"column2MobileSpan":4,"column3DesktopOffset":8,"className":"column1-desktop-grid__span-5 column1-desktop-grid__start-2 column1-desktop-grid__row-1 column2-desktop-grid__span-5 column2-desktop-grid__start-7 column2-desktop-grid__row-1 column1-tablet-grid__span-4 column1-tablet-grid__row-1 column2-tablet-grid__span-4 column2-tablet-grid__start-5 column2-tablet-grid__row-1 column1-mobile-grid__span-4 column1-mobile-grid__row-1 column2-mobile-grid__span-4 column2-mobile-grid__row-2"} -->
<div class="wp-block-jetpack-layout-grid alignfull column1-desktop-grid__span-5 column1-desktop-grid__start-2 column1-desktop-grid__row-1 column2-desktop-grid__span-5 column2-desktop-grid__start-7 column2-desktop-grid__row-1 column1-tablet-grid__span-4 column1-tablet-grid__row-1 column2-tablet-grid__span-4 column2-tablet-grid__start-5 column2-tablet-grid__row-1 column1-mobile-grid__span-4 column1-mobile-grid__row-1 column2-mobile-grid__span-4 column2-mobile-grid__row-2"><!-- wp:jetpack/layout-grid-column -->
<div class="wp-block-jetpack-layout-grid-column wp-block-jetpack-layout-grid__padding-none"><!-- wp:heading {"level":3} -->
<h3><strong>Your website is just the beginning</strong>.</h3>
<!-- /wp:heading --></div>
<!-- /wp:jetpack/layout-grid-column -->

<!-- wp:jetpack/layout-grid-column -->
<div class="wp-block-jetpack-layout-grid-column wp-block-jetpack-layout-grid__padding-none"><!-- wp:paragraph {"customFontSize":18} -->
<p style="font-size:18px">One of the wonderful things about blogs is how they constantly evolve as we learn, grow, and interact with one another.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:jetpack/layout-grid-column --></div>
<!-- /wp:jetpack/layout-grid -->

[alaczek]

Also, for the screenshots, which theme and what font should we use for those? Or will the screenshots come from the https://dotcompatterns.wordpress.com/ site?

[iamtakashi]

Thanks for updating the markup. It now works for me. However, I'm not sure if we need the transparent group block wrapping the Layout Grid block. What was the intention with it?

Also, for the screenshots, which theme and what font should we use for those?

The preview in Gutenberg is dynamic, and the screenshot is just for here on the issue, so it doesn't really matter much.

[alaczek]

Ah, nope, we don't need the group wrapper!

<!-- wp:jetpack/layout-grid {"addGutterEnds":false,"column1DesktopSpan":11,"column1TabletSpan":8,"column1MobileSpan":4,"column2DesktopOffset":1,"className":"column1-desktop-grid__span-11 column1-desktop-grid__row-1 column1-tablet-grid__span-8 column1-tablet-grid__row-1 column1-mobile-grid__span-4 column1-mobile-grid__row-1"} -->
<div class="wp-block-jetpack-layout-grid alignfull column1-desktop-grid__span-11 column1-desktop-grid__row-1 column1-tablet-grid__span-8 column1-tablet-grid__row-1 column1-mobile-grid__span-4 column1-mobile-grid__row-1 wp-block-jetpack-layout-gutter__nowrap"><!-- wp:jetpack/layout-grid-column -->
<div class="wp-block-jetpack-layout-grid-column wp-block-jetpack-layout-grid__padding-none"><!-- wp:image {"align":"full","id":257,"sizeSlug":"large"} -->
<figure class="wp-block-image alignfull size-large"><img src="https://gutenbaordinghp.files.wordpress.com/2020/03/sherman-yang-tfq2yz8qirq-unsplash.jpg?w=1024" alt="" class="wp-image-257"/></figure>
<!-- /wp:image --></div>
<!-- /wp:jetpack/layout-grid-column --></div>
<!-- /wp:jetpack/layout-grid -->

<!-- wp:spacer {"height":64} -->
<div style="height:64px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:jetpack/layout-grid {"column1DesktopSpan":5,"column1DesktopOffset":1,"column1TabletSpan":4,"column1MobileSpan":4,"column2DesktopSpan":5,"column2TabletSpan":4,"column2MobileSpan":4,"column3DesktopOffset":8,"className":"column1-desktop-grid__span-5 column1-desktop-grid__start-2 column1-desktop-grid__row-1 column2-desktop-grid__span-5 column2-desktop-grid__start-7 column2-desktop-grid__row-1 column1-tablet-grid__span-4 column1-tablet-grid__row-1 column2-tablet-grid__span-4 column2-tablet-grid__start-5 column2-tablet-grid__row-1 column1-mobile-grid__span-4 column1-mobile-grid__row-1 column2-mobile-grid__span-4 column2-mobile-grid__row-2"} -->
<div class="wp-block-jetpack-layout-grid alignfull column1-desktop-grid__span-5 column1-desktop-grid__start-2 column1-desktop-grid__row-1 column2-desktop-grid__span-5 column2-desktop-grid__start-7 column2-desktop-grid__row-1 column1-tablet-grid__span-4 column1-tablet-grid__row-1 column2-tablet-grid__span-4 column2-tablet-grid__start-5 column2-tablet-grid__row-1 column1-mobile-grid__span-4 column1-mobile-grid__row-1 column2-mobile-grid__span-4 column2-mobile-grid__row-2"><!-- wp:jetpack/layout-grid-column -->
<div class="wp-block-jetpack-layout-grid-column wp-block-jetpack-layout-grid__padding-none"><!-- wp:heading {"level":3} -->
<h3><strong>Your website is just the beginning</strong>.</h3>
<!-- /wp:heading --></div>
<!-- /wp:jetpack/layout-grid-column -->

<!-- wp:jetpack/layout-grid-column -->
<div class="wp-block-jetpack-layout-grid-column wp-block-jetpack-layout-grid__padding-none"><!-- wp:paragraph {"customFontSize":18} -->
<p style="font-size:18px">One of the wonderful things about blogs is how they constantly evolve as we learn, grow, and interact with one another.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:jetpack/layout-grid-column --></div>
<!-- /wp:jetpack/layout-grid -->

[iamtakashi]

Thanks for updating the markup. I don't feel like the image is very appropriate with the text though. It's showing a road that takes you back to the direction you came :)

Maybe, we should make the whole thing more concrete and feel a real example of the pattern instead.

[alaczek]

You're killing me Takashi :)

Maybe, we should make the whole thing more concrete and feel a real example of the pattern instead.

Real example as in pick a vertical and fill with actual content?

I was loosely following your three columns and image pattern, with the cool aerial image.

[iamtakashi]

You're killing me Takashi :)

Sorry 😀

I was loosely following your three columns and image pattern, with the cool aerial image.

It's fine to use an aerial image, but I just think all the elements in a pattern should make sense together. A block pattern should look like a piece from a real website.

Real example as in pick a vertical and fill with actual content?

As we discussed yesterday, let's stay away from text that is inspirational or aspirational as per the feedback from Matias. We could pick a vertical and makeup something, or another option is to use public domain text such as Project Gutenberg to make something a little abstract.

[ianstewart]

A block pattern should look like a piece from a real website.

This is a good sentence. Going back up to the top …

It feels a bit too zoomed out and too tall as well. An image that is much shorter might work better.

Maybe we can try a different photography photo?

[iamtakashi]

It'd be great if we can ship this pattern with a better image and text as we use this pattern in Edison.

[alaczek]

What do you think about using that exact image then?

As a sie note Edison uses a lot of lorem ipsum content, is this something that we're gonna re-write?

[iamtakashi]

I think the height of the image is spot on. I suppose you spent a good amount of time hunting the image?

As a sie note Edison uses a lot of lorem ipsum content, is this something that we're gonna re-write?

I think we definitely should. I think we'd need some help from other teams or Boon though.

[ianstewart]

Would be good to request some help from editorial or even take a pass ourselves by adapting some existing about text.

For example,

Hi, I’m Michael, a dad of two, passionate about photography, travel, gear, and urban environments. This is my home for the best in photography — and I hope it can be yours too. If this is your first time to the site: Start here. I hope you'll join me in levelling up skills and knowledge in photography!

Which I just cribbed from the Bowen starter design …

Hi, I’m Jane, a mom of two, passionate about photography, home decor, and travel. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

First time to the site? Start here

We could improve our lorem-ey ipsum-ey text pattern by pattern in our layouts.

[alaczek]

I don't think this pattern is relevant anymore, I'm going to close it.