Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Block patterns: create patterns to start populating the library #20345

Open
enriquesanchez opened this issue Feb 20, 2020 · 27 comments
Open

Block patterns: create patterns to start populating the library #20345

enriquesanchez opened this issue Feb 20, 2020 · 27 comments

Comments

@enriquesanchez
Copy link
Contributor

@enriquesanchez enriquesanchez commented Feb 20, 2020

Now that work has started on an MVP for Block patterns, we need to create a few patterns so we can start populating the library and have something to work with.

I suggest we come up with a few patterns that are common and/popular elsewhere. Ideally, these will be varied, so we can also start thinking about categorization.

To start with, I propose we create the following patterns:

  • Hero section 01
  • Hero section 02
  • Features/services 01
  • Features/services 02
  • Customer reviews
  • User profile card
  • Gallery 01
  • Gallery 02
  • Editorial layout 01
  • Editorial layout 02
  • Pricing table
  • Donation section
  • Footer (various)
  • Contact section

These should be created with available blocks in the Gutenberg editor and the HTML output included in the library.

Please share any patterns you'd like to see included.

@davipontesblog

This comment has been minimized.

Copy link

@davipontesblog davipontesblog commented Feb 22, 2020

Please share any patterns you'd like to see included.

From what we see in terms of requests from users here are a couple more we should consider:

  • Footer layouts
  • Testimonials (although this might be what you meant by "Customer reviews")
  • Contact section
@enriquesanchez

This comment has been minimized.

Copy link
Contributor Author

@enriquesanchez enriquesanchez commented Feb 24, 2020

thanks for these ideas @davipontesblog! I'll add them to the list.

@enriquesanchez

This comment has been minimized.

Copy link
Contributor Author

@enriquesanchez enriquesanchez commented Feb 24, 2020

Here's a first pass at a few of the patterns listed above. These were all made using the Gutenberg Starter Theme. Important note: images used are temporary.

Hero section 01

Screen Shot 2020-02-24 at 13 31 18

<!-- wp:group {"backgroundColor":"very-light-gray","align":"full"} -->
<div class="wp-block-group alignfull has-very-light-gray-background-color has-background"><div class="wp-block-group__inner-container"><!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"textColor":"very-dark-gray"} -->
<h2 class="has-very-dark-gray-color has-text-color">Lorem ipsum sit amet, consectetur adipiscing elit</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"textColor":"very-dark-gray","fontSize":"medium"} -->
<p class="has-text-color has-medium-font-size has-very-dark-gray-color">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"strong-blue","borderRadius":2} -->
<div class="wp-block-button"><a class="wp-block-button__link has-background has-strong-blue-background-color" style="border-radius:2px">Call to action</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":306,"width":512,"height":384,"sizeSlug":"large","className":"is-style-default"} -->
<figure class="wp-block-image size-large is-resized is-style-default"><img src="https://nrqsnchztest.blog/wp-content/uploads/2020/02/swinging-1024x768.png" alt="" class="wp-image-306" width="512" height="384"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div></div>
<!-- /wp:group -->

Hero section 02

Screen Shot 2020-02-24 at 13 08 38

<!-- wp:cover {"url":"https://nrqsnchztest.blog/wp-content/uploads/2020/02/blue-universe-956981-1.jpg","id":305,"dimRatio":80,"overlayColor":"strong-blue","align":"full"} -->
<div class="wp-block-cover alignfull has-background-dim-80 has-strong-blue-background-color has-background-dim" style="background-image:url(https://nrqsnchztest.blog/wp-content/uploads/2020/02/blue-universe-956981-1.jpg)"><div class="wp-block-cover__inner-container"><!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:image {"align":"center","id":312,"width":320,"height":240,"sizeSlug":"large"} -->
<div class="wp-block-image"><figure class="aligncenter size-large is-resized"><img src="https://i2.wp.com/nrqsnchztest.blog/wp-content/uploads/2020/02/levitate.png?fit=640%2C480&amp;ssl=1" alt="" class="wp-image-312" width="320" height="240"/></figure></div>
<!-- /wp:image -->

<!-- wp:group -->
<div class="wp-block-group"><div class="wp-block-group__inner-container"><!-- wp:heading {"align":"center"} -->
<h2 class="has-text-align-center">Lorem ipsum</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"align":"center","fontSize":"medium"} -->
<p class="has-text-align-center has-medium-font-size">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->

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

<!-- wp:buttons {"align":"center"} -->
<div class="wp-block-buttons aligncenter"><!-- wp:button {"backgroundColor":"very-dark-gray","borderRadius":2} -->
<div class="wp-block-button"><a class="wp-block-button__link has-background has-very-dark-gray-background-color" style="border-radius:2px">Call to action A</a></div>
<!-- /wp:button -->

<!-- wp:button {"backgroundColor":"very-light-gray","textColor":"very-dark-gray","borderRadius":2,"align":"center"} -->
<div class="wp-block-button aligncenter"><a class="wp-block-button__link has-text-color has-very-dark-gray-color has-background has-very-light-gray-background-color" style="border-radius:2px">Call to action B</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

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

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->

Features/services 01

Screen Shot 2020-02-24 at 13 08 47

<!-- wp:group {"backgroundColor":"very-light-gray","align":"full"} -->
<div class="wp-block-group alignfull has-very-light-gray-background-color has-background"><div class="wp-block-group__inner-container"><!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"align":"center","id":317,"width":320,"height":240,"sizeSlug":"large"} -->
<div class="wp-block-image"><figure class="aligncenter size-large is-resized"><img src="https://i1.wp.com/nrqsnchztest.blog/wp-content/uploads/2020/02/meditating.png?fit=640%2C480&amp;ssl=1" alt="" class="wp-image-317" width="320" height="240"/></figure></div>
<!-- /wp:image -->

<!-- wp:heading {"align":"center"} -->
<h2 class="has-text-align-center">Feature 01</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<!-- /wp:paragraph -->

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

<!-- wp:buttons {"align":"center"} -->
<div class="wp-block-buttons aligncenter"><!-- wp:button {"backgroundColor":"very-dark-gray","borderRadius":2} -->
<div class="wp-block-button"><a class="wp-block-button__link has-background has-very-dark-gray-background-color" style="border-radius:2px">Call to action 01</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"align":"center","id":319,"width":320,"height":240,"sizeSlug":"large"} -->
<div class="wp-block-image"><figure class="aligncenter size-large is-resized"><img src="https://i1.wp.com/nrqsnchztest.blog/wp-content/uploads/2020/02/reading.png?fit=640%2C480&amp;ssl=1" alt="" class="wp-image-319" width="320" height="240"/></figure></div>
<!-- /wp:image -->

<!-- wp:heading {"align":"center"} -->
<h2 class="has-text-align-center">Feature 02</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<!-- /wp:paragraph -->

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

<!-- wp:buttons {"align":"center"} -->
<div class="wp-block-buttons aligncenter"><!-- wp:button {"backgroundColor":"very-dark-gray","customTextColor":"#ffffff","borderRadius":2,"className":"is-style-fill"} -->
<div class="wp-block-button is-style-fill"><a class="wp-block-button__link has-text-color has-background has-very-dark-gray-background-color" style="color:#ffffff;border-radius:2px">Call to action 02</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"align":"center","id":322,"width":320,"height":240,"sizeSlug":"large"} -->
<div class="wp-block-image"><figure class="aligncenter size-large is-resized"><img src="https://i2.wp.com/nrqsnchztest.blog/wp-content/uploads/2020/02/unboxing.png?fit=640%2C480&amp;ssl=1" alt="" class="wp-image-322" width="320" height="240"/></figure></div>
<!-- /wp:image -->

<!-- wp:heading {"align":"center"} -->
<h2 class="has-text-align-center">Feature 03</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<!-- /wp:paragraph -->

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

<!-- wp:buttons {"align":"center"} -->
<div class="wp-block-buttons aligncenter"><!-- wp:button {"backgroundColor":"very-dark-gray","customTextColor":"#ffffff","borderRadius":2} -->
<div class="wp-block-button"><a class="wp-block-button__link has-text-color has-background has-very-dark-gray-background-color" style="color:#ffffff;border-radius:2px">Call to action 03</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div></div>
<!-- /wp:group -->

Features/services 02

Screen Shot 2020-02-24 at 13 24 11

<!-- wp:group {"backgroundColor":"very-light-gray","align":"full"} -->
<div class="wp-block-group alignfull has-very-light-gray-background-color has-background"><div class="wp-block-group__inner-container"><!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":33.33} -->
<div class="wp-block-column" style="flex-basis:33.33%"><!-- wp:image {"id":343,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://i2.wp.com/nrqsnchztest.blog/wp-content/uploads/2020/02/meditating-1.png?fit=640%2C480&amp;ssl=1" alt="" class="wp-image-343"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column {"width":66.66} -->
<div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:heading -->
<h2>Service 01</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"borderRadius":2,"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link" style="border-radius:2px">Call to action 01</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":33.33} -->
<div class="wp-block-column" style="flex-basis:33.33%"><!-- wp:image {"id":322,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://nrqsnchztest.blog/wp-content/uploads/2020/02/unboxing-1024x768.png" alt="" class="wp-image-322"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"width":66.66} -->
<div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:heading -->
<h2>Service 02</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"textColor":"very-dark-gray","borderRadius":2,"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-text-color has-very-dark-gray-color" style="border-radius:2px">Call to action 02</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":33.33} -->
<div class="wp-block-column" style="flex-basis:33.33%"><!-- wp:image {"id":319,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://nrqsnchztest.blog/wp-content/uploads/2020/02/reading-1024x768.png" alt="" class="wp-image-319"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"width":66.66} -->
<div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:heading -->
<h2>Service 03</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"textColor":"very-dark-gray","borderRadius":2,"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-text-color has-very-dark-gray-color" style="border-radius:2px">Call to action 03</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":33.33} -->
<div class="wp-block-column" style="flex-basis:33.33%"><!-- wp:image {"id":306,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://nrqsnchztest.blog/wp-content/uploads/2020/02/swinging-1024x768.png" alt="" class="wp-image-306"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column {"width":66.66} -->
<div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:heading -->
<h2>Service 04</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"textColor":"very-dark-gray","borderRadius":2,"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-text-color has-very-dark-gray-color" style="border-radius:2px">Call to action 04</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":33.33} -->
<div class="wp-block-column" style="flex-basis:33.33%"><!-- wp:image {"id":350,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://i2.wp.com/nrqsnchztest.blog/wp-content/uploads/2020/02/plant.png?fit=640%2C480&amp;ssl=1" alt="" class="wp-image-350"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"width":66.66} -->
<div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:heading -->
<h2>Service 05</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"textColor":"very-dark-gray","borderRadius":2,"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-text-color has-very-dark-gray-color" style="border-radius:2px">Call to action 05</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":33.33} -->
<div class="wp-block-column" style="flex-basis:33.33%"><!-- wp:image {"id":351,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://i2.wp.com/nrqsnchztest.blog/wp-content/uploads/2020/02/dancing.png?fit=640%2C480&amp;ssl=1" alt="" class="wp-image-351"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"width":66.66} -->
<div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:heading -->
<h2>Service 06</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"textColor":"very-dark-gray","borderRadius":2,"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-text-color has-very-dark-gray-color" style="border-radius:2px">Call to action 06</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div></div>
<!-- /wp:group -->
@jasmussen

This comment has been minimized.

Copy link
Contributor

@jasmussen jasmussen commented Feb 25, 2020

I created some patterns too, of a more aspirational nature. They leverage features not yet in the block editor:

  • line-height
  • font-weight of headings and dropcaps
  • adjustment of dropcap size
  • ability to color separators & other using theme swatches

To enable these patterns, in other words, separate PRs are necessary to address the above, but I'm sharing them here to hopefully help inform efforts like global styles.

One other meta-goal of creating these patterns, was to create some patterns that were really interesting, hard to re-create, and stood out visually. For that reason I started by establishing a sort of "visual identity":

Identity-Collage

These 3 spot colors should likely take from the theme itself. But collecting a bunch of images that feel coherent among a common pattern is a good way for a block pattern to stand out.

Text Columns

1 - Text Columns Pattern

<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph {"fontSize":"huge"} -->
<p class="has-huge-font-size"><strong>Sea id autem nominavi deseruisse</strong></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

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

<!-- wp:separator {"className":"is-style-wide"} -->
<hr class="wp-block-separator is-style-wide"/>
<!-- /wp:separator --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Loem ipsum dolor sit amet, ferri vidisse nam eu, ad nec copiosae mnesarchum vituperatoribus. Te brute dicunt sea, ut vis omnium menandri, ut sumo aliquam has. Eum aperiam interpretaris at, sea et recusabo expetenda, omnis tibique mea no. Pri suas partem ea, ius sonet numquam offendit cu, ad simul admodum pri. Eum cu unum choro albucius.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Loem ipsum dolor sit amet, ferri vidisse nam eu, ad nec copiosae mnesarchum vituperatoribus. Te brute dicunt sea, ut vis omnium menandri, ut sumo aliquam has. Eum aperiam interpretaris at, sea et recusabo expetenda, omnis tibique mea no. Pri suas partem ea, ius sonet numquam offendit cu, ad simul admodum pri. Eum cu unum choro albucius.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

Item columns

2 - Item Columns

Big Title


Loem ipsum dolor sit amet, ferri vidisse nam eu, ad nec copiosae mnesarchum vituperatoribus.

Sea id autem nominavi deseruisse

```

Item jumble

3 - Item Jumble

<!-- wp:group {"align":"wide"} -->
<div class="wp-block-group alignwide"><div class="wp-block-group__inner-container"><!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Sea id autem nominavi deseruisse</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"fontSize":"huge"} -->
<p class="has-huge-font-size"><strong>Big Title</strong></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column {"width":33.38} -->
<div class="wp-block-column" style="flex-basis:33.38%"><!-- wp:paragraph -->
<p>Loem ipsum dolor sit amet, ferri vidisse nam eu, ad nec copiosae mnesarchum vituperatoribus. Te brute dicunt sea, ut vis omnium menandri, ut sumo aliquam has. Eum aperiam interpretaris at, sea et recusabo expetenda, omnis tibique mea no. Pri suas partem ea, ius sonet numquam offendit cu, ad simul admodum pri. Eum cu unum choro albucius.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

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

<!-- wp:image {"id":14,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="http://localhost:8889/wp-content/uploads/2019/09/pic6-1024x684.jpg" alt="" class="wp-image-14"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column {"width":33.62} -->
<div class="wp-block-column" style="flex-basis:33.62%"><!-- wp:image {"id":20,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="http://localhost:8889/wp-content/uploads/2019/09/portrait1-684x1024.jpg" alt="" class="wp-image-20"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"verticalAlignment":null,"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column {"width":67} -->
<div class="wp-block-column" style="flex-basis:67%"><!-- wp:image {"align":"right","id":17,"width":587,"height":440,"sizeSlug":"large"} -->
<div class="wp-block-image"><figure class="alignright size-large is-resized"><img src="http://localhost:8889/wp-content/uploads/2019/09/pic9-1024x768.jpg" alt="" class="wp-image-17" width="587" height="440"/></figure></div>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center","width":33} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:33%"><!-- wp:paragraph -->
<p>Eu integre accusata prodesset est, sed te impetus gubergren conceptam, ex sed wisi nostrum ocurreret. Esse velit omittantur ius te, alii dissentias ei vis. At sed unum veritus fabellas. Te volutpat appellantur duo. Ad natum fuisset intellegebat eam, causae invidunt usu id, et vis impetus appetere.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div></div>
<!-- /wp:group -->
@mapk

This comment has been minimized.

Copy link
Contributor

@mapk mapk commented Feb 27, 2020

Hero Pattern

Screen Shot 2020-02-27 at 12 34 04 PM

<!-- wp:group {"align":"full"} -->
<div class="wp-block-group alignfull"><div class="wp-block-group__inner-container"><!-- wp:cover {"url":"http://localhost:8888/wp-content/uploads/2020/02/4F836F07-8BB4-43AC-A636-0E9A07883E49.jpeg","id":1809,"overlayColor":"very-light-gray","align":"full"} -->
<div class="wp-block-cover alignfull has-very-light-gray-background-color has-background-dim" style="background-image:url(http://localhost:8888/wp-content/uploads/2020/02/4F836F07-8BB4-43AC-A636-0E9A07883E49.jpeg)"><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%"></div>
<!-- /wp:column -->

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

<!-- wp:heading {"textColor":"very-dark-gray"} -->
<h2 class="has-very-dark-gray-color has-text-color">To improve the humor</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"textColor":"very-dark-gray"} -->
<p class="has-text-color has-very-dark-gray-color">An infusion of cockney flippancy and facetiousness, an impertinence like larding a sirloin of prize beef, but an absolute falsification of the spirit of the book.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"very-light-gray","textColor":"very-dark-gray","className":"is-style-fill"} -->
<div class="wp-block-button is-style-fill"><a class="wp-block-button__link has-text-color has-very-dark-gray-color has-background has-very-light-gray-background-color">Learn more</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div></div>
<!-- /wp:cover --></div></div>
<!-- /wp:group -->
@MichaelArestad

This comment has been minimized.

Copy link

@MichaelArestad MichaelArestad commented Feb 27, 2020

Centered simple footer

image

<!-- wp:group {"align":"full"} -->
<div class="wp-block-group alignfull"><div class="wp-block-group__inner-container"><!-- wp:navigation {"itemsJustification":"center","align":"full"} -->
<!-- wp:navigation-link {"label":"Home","url":"/"} /-->

<!-- wp:navigation-link {"label":"Features","id":2,"url":"http://localhost:8889/?page_id=2"} /-->

<!-- wp:navigation-link {"label":"News","url":"#"} /-->

<!-- wp:navigation-link {"label":"Terms of service","url":"#"} /-->

<!-- wp:navigation-link {"label":"Privacy Policy","url":"#"} /-->
<!-- /wp:navigation -->

<!-- wp:image {"align":"center","id":53,"width":20,"height":20,"sizeSlug":"large"} -->
<div class="wp-block-image"><figure class="aligncenter size-large is-resized"><img src="http://localhost:8889/wp-content/uploads/2020/02/wordpress.jpg" alt="" class="wp-image-53" width="20" height="20"/></figure></div>
<!-- /wp:image --></div></div>
<!-- /wp:group -->
@MichaelArestad

This comment has been minimized.

Copy link

@MichaelArestad MichaelArestad commented Feb 27, 2020

4 column footer

image

<!-- wp:group {"backgroundColor":"very-dark-gray","textColor":"very-light-gray","align":"full"} -->
<div class="wp-block-group alignfull has-very-dark-gray-background-color has-very-light-gray-color has-text-color has-background"><div class="wp-block-group__inner-container"><!-- wp:columns {"align":"full"} -->
<div class="wp-block-columns alignfull"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:list -->
<ul><li><a href="http://localhost:8889/wp-admin/post.php?post=33&amp;action=edit#"><span class="has-inline-color has-very-light-gray-color">Home</span></a></li><li><a href="http://localhost:8889/wp-admin/post.php?post=33&amp;action=edit#"><span class="has-inline-color has-very-light-gray-color">Features</span></a></li><li><a href="http://localhost:8889/wp-admin/post.php?post=33&amp;action=edit#"><span class="has-inline-color has-very-light-gray-color">Pricing</span></a></li><li><a href="http://localhost:8889/wp-admin/post.php?post=33&amp;action=edit#"><span class="has-inline-color has-very-light-gray-color">News</span></a></li></ul>
<!-- /wp:list --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:list -->
<ul><li><a href="http://localhost:8889/wp-admin/post.php?post=33&amp;action=edit#"><span class="has-inline-color has-very-light-gray-color">Support</span></a></li><li><a href="http://localhost:8889/wp-admin/post.php?post=33&amp;action=edit#"><span class="has-inline-color has-very-light-gray-color">Developers</span></a></li><li><a href="http://localhost:8889/wp-admin/post.php?post=33&amp;action=edit#"><span class="has-inline-color has-very-light-gray-color">Get Involved</span></a></li></ul>
<!-- /wp:list --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:list -->
<ul><li><a href="http://localhost:8889/wp-admin/post.php?post=33&amp;action=edit#"><span class="has-inline-color has-very-light-gray-color">Terms of Service</span></a></li><li><a href="http://localhost:8889/wp-admin/post.php?post=33&amp;action=edit#"><span class="has-inline-color has-very-light-gray-color">Privacy Polidcy</span></a></li></ul>
<!-- /wp:list --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:social-links {"className":"is-style-logos-only"} -->
<ul class="wp-block-social-links is-style-logos-only"><!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->

<!-- wp:social-link {"url":"#","service":"twitter"} /-->

<!-- wp:social-link {"url":"#","service":"instagram"} /-->

<!-- wp:social-link {"url":"#","service":"soundcloud"} /--></ul>
<!-- /wp:social-links --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div></div>
<!-- /wp:group -->
@karmatosed

This comment has been minimized.

Copy link
Member

@karmatosed karmatosed commented Feb 27, 2020

A simple contact section with a background:

tacos1

<div class="wp-block-group has-very-light-gray-background-color has-background"><div class="wp-block-group__inner-container"><!-- wp:heading -->
<h2>Terrific Tacos</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"fontSize":"normal"} -->
<p class="has-normal-font-size"><strong>Address:</strong> Taco truck, taco car park, tacoland!</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"fontSize":"normal"} -->
<p class="has-normal-font-size"><strong>Telephone:</strong> 0097 123456</p>
<!-- /wp:paragraph -->

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

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"textColor":"very-dark-gray","className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-text-color has-very-dark-gray-color" href="www.mywebsite.com">Get in touch!</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div></div>
<!-- /wp:group -->
@youknowriad

This comment has been minimized.

Copy link
Contributor

@youknowriad youknowriad commented Feb 27, 2020

Can we maybe start adding these in PRs

It's as simple as:

1- Adding a pattern file in this folder https://github.com/WordPress/gutenberg/tree/master/lib/patterns
2- Referencing that file in this array

$block_patterns = [

The issue we'll have is where to store the images, we'll have to use external images (URLs) and probably store them in wp.org CDN (like the examples). So a meta trac ticket is needed for these. We can also reuse the images used in the block examples as a start.

@enriquesanchez

This comment has been minimized.

Copy link
Contributor Author

@enriquesanchez enriquesanchez commented Feb 27, 2020

@youknowriad do you want us to create a separate PR for each pattern? one PR per group of related patterns (hero sections, contact forms, etc.)?

@youknowriad

This comment has been minimized.

Copy link
Contributor

@youknowriad youknowriad commented Feb 27, 2020

I don't have strong opinions, I feel a separate one per pattern would make merging those PRs easier though.

@mapk

This comment has been minimized.

Copy link
Contributor

@mapk mapk commented Feb 27, 2020

Contact Us

Screen Shot 2020-02-27 at 1 41 41 PM

<!-- wp:group {"align":"wide"} -->
<div class="wp-block-group alignwide"><div class="wp-block-group__inner-container"><!-- wp:media-text {"mediaId":667,"mediaLink":"https://wpuxtesting.com/?attachment_id=667","mediaType":"image","mediaWidth":33} -->
<div class="wp-block-media-text alignwide is-stacked-on-mobile" style="grid-template-columns:33% auto"><figure class="wp-block-media-text__media"><img src="https://wpuxtesting.com/wp-content/uploads/2020/02/Screen-Shot-2020-02-27-at-1.20.28-PM-623x1024.png" alt="" class="wp-image-667"/></figure><div class="wp-block-media-text__content"><!-- wp:heading -->
<h2>Contact us</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>We would like to hear from you. Get in touch.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Address:</strong><br>North Beach Road Lt 35, <br>77710 Akumal, Q.R.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Tel:</strong> 984 875 9061<br><strong>Email:</strong> info@akumal.com</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:media-text --></div></div>
<!-- /wp:group -->
@alaczek

This comment has been minimized.

Copy link

@alaczek alaczek commented Feb 28, 2020

Here's my first PR for an alternative testimonial pattern: #20519

testimonial02


Shall we follow any specific naming convention for multiple variants of the same content pattern (for both the file and the block name)? With this one I named the file 'testimonial02' , but left the block name as "Testimonial". Happy to make any required changes.

@alaczek

This comment has been minimized.

Copy link

@alaczek alaczek commented Feb 28, 2020

Are we going to establish some sort of guidelines around reusing images and text (especially with different variants of the same content) so that we have some basic consistency?

@mapk

This comment has been minimized.

Copy link
Contributor

@mapk mapk commented Feb 28, 2020

@alaczek, yes we should work toward some consistency there. And thanks for your first PR on this!!! ❤️

@enriquesanchez is going to be porting all these ideas to respective PRs in the next few days. Just FYI.

@mapk

This comment has been minimized.

Copy link
Contributor

@mapk mapk commented Feb 28, 2020

COVER

Screen Shot 2020-02-28 at 12 10 18 PM

<!-- wp:group {"customBackgroundColor":"#0e0e0c","align":"full"} -->
<div class="wp-block-group alignfull has-background" style="background-color:#0e0e0c"><div class="wp-block-group__inner-container"><!-- wp:cover {"url":"https://wpuxtesting.com/wp-content/uploads/2020/02/IMG_8844-scaled.jpeg","id":681,"dimRatio":40} -->
<div class="wp-block-cover has-background-dim-40 has-background-dim" style="background-image:url(https://wpuxtesting.com/wp-content/uploads/2020/02/IMG_8844-scaled.jpeg)"><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","customFontSize":115} -->
<p style="font-size:115px" class="has-text-align-center">Beautiful</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover --></div></div>
<!-- /wp:group -->
@mapk

This comment has been minimized.

Copy link
Contributor

@mapk mapk commented Feb 28, 2020

Media + Text

crisscrossapplesauce

<!-- wp:group {"align":"full"} -->
<div class="wp-block-group alignfull"><div class="wp-block-group__inner-container"><!-- wp:media-text {"align":"full","mediaId":682,"mediaLink":"https://wpuxtesting.com/?attachment_id=682","mediaType":"image"} -->
<div class="wp-block-media-text alignfull is-stacked-on-mobile"><figure class="wp-block-media-text__media"><img src="https://wpuxtesting.com/wp-content/uploads/2020/02/E5FDB9E9-A370-4738-B59C-948C80B83954-1024x768.jpeg" alt="" class="wp-image-682"/></figure><div class="wp-block-media-text__content"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":10} -->
<div class="wp-block-column" style="flex-basis:10%"></div>
<!-- /wp:column -->

<!-- wp:column {"width":60} -->
<div class="wp-block-column" style="flex-basis:60%"><!-- wp:paragraph {"customFontSize":52} -->
<p style="font-size:52px">Deserts</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>The canyons are vast and memorable. The air is dry and hot. It is the desert and rarely inviting.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"width":10} -->
<div class="wp-block-column" style="flex-basis:10%"></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div></div>
<!-- /wp:media-text --></div></div>
<!-- /wp:group -->
@MichaelArestad

This comment has been minimized.

Copy link

@MichaelArestad MichaelArestad commented Feb 28, 2020

Natural Columns

image

<!-- wp:group {"align":"full"} -->
<div class="wp-block-group alignfull"><div class="wp-block-group__inner-container"><!-- wp:columns {"align":"full"} -->
<div class="wp-block-columns alignfull"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":83,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="http://localhost:8889/wp-content/uploads/2020/02/DSC01532-631x1024.jpeg" alt="" class="wp-image-83"/></figure>
<!-- /wp:image -->

<!-- wp:image {"id":89,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="http://localhost:8889/wp-content/uploads/2020/02/IMG_8075-1024x768.jpeg" alt="" class="wp-image-89"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":84,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="http://localhost:8889/wp-content/uploads/2020/02/IMG_0661-455x1024.jpeg" alt="" class="wp-image-84"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":90,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="http://localhost:8889/wp-content/uploads/2020/02/IMG_8403-768x1024.jpeg" alt="" class="wp-image-90"/></figure>
<!-- /wp:image -->

<!-- wp:image {"id":86,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="http://localhost:8889/wp-content/uploads/2020/02/IMG_3098-1024x768.jpeg" alt="" class="wp-image-86"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":85,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="http://localhost:8889/wp-content/uploads/2020/02/IMG_2653-433x1024.jpeg" alt="" class="wp-image-85"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:paragraph {"align":"center","customFontSize":140} -->
<p style="font-size:140px" class="has-text-align-center"><strong>Breath</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">Here's a short paragraph about nature and how being outside is a breath of fresh air. A little air is good for the mind and body.</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->
@mapk

This comment has been minimized.

Copy link
Contributor

@mapk mapk commented Feb 28, 2020

Cover text on white

Screen Shot 2020-02-28 at 12 52 53 PM

<!-- wp:group {"align":"full"} -->
<div class="wp-block-group alignfull"><div class="wp-block-group__inner-container"><!-- wp:cover {"url":"https://wpuxtesting.com/wp-content/uploads/2020/02/IMG_7510-scaled.jpeg","id":687} -->
<div class="wp-block-cover has-background-dim" style="background-image:url(https://wpuxtesting.com/wp-content/uploads/2020/02/IMG_7510-scaled.jpeg)"><div class="wp-block-cover__inner-container"><!-- wp:spacer {"height":150} -->
<div style="height:150px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column {"width":100} -->
<div class="wp-block-column" style="flex-basis:100%"><!-- wp:paragraph {"align":"center","textColor":"very-dark-gray","customBackgroundColor":"#ffffff","fontSize":"huge"} -->
<p style="background-color:#ffffff" class="has-text-color has-background has-text-align-center has-huge-font-size has-very-dark-gray-color">What if <strong>roads</strong> were <strong>canals</strong>?</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"width":0} -->
<div class="wp-block-column" style="flex-basis:0%"></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:spacer {"height":150} -->
<div style="height:150px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div></div>
<!-- /wp:cover --></div></div>
<!-- /wp:group -->
@MichaelArestad

This comment has been minimized.

Copy link

@MichaelArestad MichaelArestad commented Feb 28, 2020

Cat dog

image

<!-- wp:group {"customBackgroundColor":"#2c4855","customTextColor":"#ffffff","align":"full"} -->
<div class="wp-block-group alignfull has-text-color has-background" style="background-color:#2c4855;color:#ffffff"><div class="wp-block-group__inner-container"><!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:media-text {"mediaId":94,"mediaLink":"http://localhost:8889/?attachment_id=94","mediaType":"image"} -->
<div class="wp-block-media-text alignwide is-stacked-on-mobile"><figure class="wp-block-media-text__media"><img src="http://localhost:8889/wp-content/uploads/2020/02/IMG_9444-768x1024.jpeg" alt="" class="wp-image-94"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","customFontSize":80} -->
<p style="font-size:80px"><strong>Dog</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>My dog loves laser pointers. Actually, love might not be a strong enough word. You see, some animals, like cats, chase after laser pointers with conviction. And it makes sense. They come from a long line of predators with lightning-fast reflexes. My dog, however, is quite slow. That said, my dog will devastate a room in a burst of zeal he rarely shows at the sight of a red dot on the floor.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"align":"left"} -->
<div class="wp-block-buttons alignleft"><!-- wp:button {"textColor":"very-dark-gray","customBackgroundColor":"#ffd152","borderRadius":0} -->
<div class="wp-block-button"><a class="wp-block-button__link has-text-color has-very-dark-gray-color has-background no-border-radius" style="background-color:#ffd152">Read this</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div></div>
<!-- /wp:media-text -->

<!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div></div>
<!-- /wp:group -->
@munirkamal

This comment has been minimized.

Copy link
Contributor

@munirkamal munirkamal commented Mar 4, 2020

This is interesting.

I've also prepared about 100 Gutenberg templates which I released today as a Gutenberg Template Library at GutenbergHub.

The concept I used is also similar to patterns. In this library, I let the users copy the templates (which copies the Blocks pattern/code) and then they may paste it in the editor.

The only thing I found missing was the ability to use custom CSS code. For that, I used a 3rd party plugin Block CSS.

You may use any templates from there if you wish to.
https://templates.gutenberghub.com/

@johnstonphilip

This comment has been minimized.

Copy link
Contributor

@johnstonphilip johnstonphilip commented Mar 4, 2020

Would a "header" pattern be useful? Something that includes a logo/text and the navigation block, with options for "fixed/scroll" and "overlap"? Or would this type of control belong more with template parts?

@enriquesanchez

This comment has been minimized.

Copy link
Contributor Author

@enriquesanchez enriquesanchez commented Mar 6, 2020

Would a "header" pattern be useful? Something that includes a logo/text and the navigation block, with options for "fixed/scroll" and "overlap"? Or would this type of control belong more with template parts?

Hey @johnstonphilip! That is a great question. I think you're right in assuming that a header pattern will most likely belong with template parts. That being said, I think it's too early to know for sure of something like that wouldn't also work for block patterns. If you have something in mind and want to share it, please do!

@timhibberd

This comment has been minimized.

Copy link

@timhibberd timhibberd commented Mar 11, 2020

@enriquesanchez - would it be reasonable for you to reach out to the 2020 team and coordinate a 2020 upgrade release based on the patterns when they are eventually migrated into core?

It strikes me that it would be useful if the native WordPress theme evolved to being 100% native Gutenberg-core. That is...when the dust has settled...and the New Improved WordPress is in place in the core in all it's glory (i.e full-page editing)...the 2020 theme itself would be nothing more than a style file and a functions file.

I would think there would be good feedback loop value in having 2020 theme and all future "Twenty" themes be constrained to the core templates.

Just a thought :-)

@carolinan

This comment has been minimized.

Copy link

@carolinan carolinan commented Mar 18, 2020

@timhibberd Did you mean the next default theme, not Twenty Twenty?
IMO existing default themes has to keep their backwards compatibility.

@carolinan

This comment has been minimized.

Copy link

@carolinan carolinan commented Mar 18, 2020

Also please remember that the plugin (and PR's) is licensed as GPL, images must be compatible with this license as the code is distributed. License, copyright and source information for images must be included.

https://make.wordpress.org/themes/handbook/review/resources/#gpl-compatible-imagelicenses

@timhibberd

This comment has been minimized.

Copy link

@timhibberd timhibberd commented Mar 25, 2020

Hi @carolinan , consider my reference to the Twenty-Twenty theme to being a reference to a new Twenty-TwentyOne theme based on a fork of the Twenty-Twenty theme.

There seem to be two challenges related to Block patterns that has not been discussed here and perhaps should be:

  1. How do we specify a constraint on the minimum set of core-included block patterns to: minimise core bloat, minimise ongoing core maintenance load, minimise unnecessary dilution of the supporting 3rd-party add-on community (free and paid).
  2. How do we guide the 3rd-party theme marketplace in evolving their themes to the new Gutenberg world.

There is a whole world of legacy theme developers who are trying to decide on a path forward. It struck me, as one of those legacy theme maintainers, that a fork of the Twenty-Twenty theme upgraded to use block patterns would kill two birds with one stone (ignore the terrible cliche phrase...I mean who would want to kill birds!).

The block patterns for the Twenty-TwentyOne theme would represent the minimal set of block patterns maintained by the core moving forward. Otherwise what will constrain the number of core-included block patterns...there has to be a limit. Nothing like a real-world example like a deployed theme to ensure that the minimal set of core-included block patterns is useful and relevant to the masses.

Just one man's two-cents worth :-)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Block Patterns
  
To do
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
You can’t perform that action at this time.