search

Automattic / blockpatterns

Repo of block patterns to work with
7 stars 2 forks source link

People List 02 - Block Pattern #9

Open davemart-in opened 4 years ago

davemart-in commented 4 years ago

Design Mockup

people-list-02

Background

Photos

Icons

Gutenberg Editor Preview

people-list-02-gutenberg

Gutenberg Code

<!-- wp:cover {"url":"https://lessbloat.files.wordpress.com/2020/02/background.png","id":1346,"customOverlayColor":"#1d1e20","align":"full"} -->
<div class="wp-block-cover alignfull has-background-dim" style="background-image:url(https://lessbloat.files.wordpress.com/2020/02/background.png);background-color:#1d1e20"><div class="wp-block-cover__inner-container"><!-- wp:jetpack/layout-grid {"column1DesktopSpan":4,"column1TabletSpan":4,"column1MobileSpan":4,"column2DesktopSpan":4,"column2TabletSpan":4,"column2MobileSpan":4,"column3DesktopSpan":4,"column3TabletSpan":8,"column3MobileSpan":4} -->
<div class="wp-block-jetpack-layout-grid alignfull column1-desktop-grid__span-4 column1-desktop-grid__row-1 column2-desktop-grid__span-4 column2-desktop-grid__start-5 column2-desktop-grid__row-1 column3-desktop-grid__span-4 column3-desktop-grid__start-9 column3-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 column3-tablet-grid__span-8 column3-tablet-grid__row-2 column1-mobile-grid__span-4 column1-mobile-grid__row-1 column2-mobile-grid__span-4 column2-mobile-grid__row-2 column3-mobile-grid__span-4 column3-mobile-grid__row-3"><!-- wp:jetpack/layout-grid-column -->
<div class="wp-block-jetpack-layout-grid-column wp-block-jetpack-layout-grid__padding-none"><!-- wp:image {"id":1347,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://lessbloat.files.wordpress.com/2020/02/person-1.png?w=650" alt="" class="wp-image-1347"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph {"customFontSize":36} -->
<p style="font-size:36px">Rick Johnson</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"customFontSize":18} -->
<p style="font-size:18px">Co-owner/CEO</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"left","id":1351,"sizeSlug":"large"} -->
<div class="wp-block-image"><figure class="alignleft size-large"><img src="https://lessbloat.files.wordpress.com/2020/02/twitter.png?w=36" alt="" class="wp-image-1351"/></figure></div>
<!-- /wp:image --></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:image {"id":1348,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://lessbloat.files.wordpress.com/2020/02/person-2.png?w=650" alt="" class="wp-image-1348"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph {"customFontSize":36} -->
<p style="font-size:36px">Susan Ireland</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"customFontSize":18} -->
<p style="font-size:18px">Co-owner/CTO</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"left","id":1352,"sizeSlug":"large"} -->
<div class="wp-block-image"><figure class="alignleft size-large"><img src="https://lessbloat.files.wordpress.com/2020/02/twitter-1.png?w=36" alt="" class="wp-image-1352"/></figure></div>
<!-- /wp:image --></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:image {"id":1349,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://lessbloat.files.wordpress.com/2020/02/person-3.png?w=853" alt="" class="wp-image-1349"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph {"customFontSize":36} -->
<p style="font-size:36px">Rebeccah Hall</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"customFontSize":18} -->
<p style="font-size:18px">Owner</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"left","id":1353,"sizeSlug":"large"} -->
<div class="wp-block-image"><figure class="alignleft size-large"><img src="https://lessbloat.files.wordpress.com/2020/02/twitter-2.png?w=36" alt="" class="wp-image-1353"/></figure></div>
<!-- /wp:image -->

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

Published Front-end Preview

people-list-02-frontend

Gutenberg limitations

iamtakashi commented 4 years ago

Padding & Margin - Inability to tweak padding between columns of layout grid.

It looks like we're going to have the gutter setting! https://github.com/Automattic/block-experiments/issues/29 https://github.com/Automattic/block-experiments/issues/30