enriquesanchez commented 4 years ago

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:

[x] Hero section 01
[x] Hero section 02
[x] Features/services 01
[x] 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 commented 4 years ago

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 commented 4 years ago

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

enriquesanchez commented 4 years ago

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

<!-- 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

<!-- 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

<!-- 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

<!-- 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 commented 4 years ago

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

<!-- 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

Big Title

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

Sea id autem nominavi deseruisse


**Item jumble**

<img width="2020" alt="3 - Item Jumble" src="https://user-images.githubusercontent.com/1204802/75240822-440b8180-57c5-11ea-891e-c4501008925e.png">

Sea id autem nominavi deseruisse

Big Title

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.

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.

mapk commented 4 years ago

Hero Pattern

<!-- 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 commented 4 years ago

Centered simple footer

<!-- 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 commented 4 years ago

4 column footer

<!-- 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 commented 4 years ago

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 commented 4 years ago

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 https://github.com/WordPress/gutenberg/blob/64a93e2bbf3122006aaa60a92ea0f87ca49d13dc/lib/client-assets.php#L724

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 commented 4 years ago

@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 commented 4 years ago

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

mapk commented 4 years ago

Contact Us

<!-- 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 commented 4 years ago

Here's my first PR for an alternative testimonial pattern: https://github.com/WordPress/gutenberg/pull/20519

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 commented 4 years ago

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 commented 4 years ago

@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 commented 4 years ago

COVER

<!-- 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 commented 4 years ago

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 commented 4 years ago

Natural Columns

<!-- 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 commented 4 years ago

Cover text on white

<!-- 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 commented 4 years ago

Cat dog

<!-- 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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

@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 commented 4 years ago

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

carolinan commented 4 years ago

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 commented 4 years ago

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:

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).
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 :-)

StevenDufresne commented 4 years ago

Thinking out loud....and outside the scope of this issue :) but ....

How can we have these patterns make sense within the theme and its color palette? Some of these patterns are great but the opinionated colors would be distracting since they don't match the theme I chose and the end goal I have in mind (even though I know I could change the colors).

johnstonphilip commented 4 years ago

@StevenDufresne I agree this is a interesting problem that will likely need solving. The separation of design and content is pretty blurry right now, even in light of Global Styles, maybe even especially in light of them.

carolinan commented 4 years ago

Thinking out loud....and outside the scope of this issue :) but ....

How can we have these patterns make sense within the theme and its color palette? Some of these patterns are great but the opinionated colors would be distracting since they don't match the theme I chose and the end goal I have in mind (even though I know I could change the colors).

Perhaps use the color names "primary" and "secondary"? Not all themes has adopted this of course, but if authors knew the colors used in the patterns, they could take advantage of that.

CreativeDive commented 4 years ago

Hey, is there a way to remove the default Gutenberg pattern examples, like a remove_pattern() function?

22455

mapk commented 4 years ago

@CreativeDive that's an interesting proposal. We currently have the Block Manager that allows users to hide certain blocks, maybe we can incorporate patterns into it? (the name may have to change). Can you create a new issue with that idea?

carolinan commented 4 years ago

What about a traditional left or right sidebar? A two column pattern where the sidebar is already populated with the most common "widgets" search, recent posts, latest comments.

Or is that something that you feel would need to be removed when full site editing can handle the sidebar and main content as separate template parts?

enriquesanchez commented 4 years ago

A two column pattern where the sidebar is already populated with the most common "widgets" search, recent posts, latest comments.

Or is that something that you feel would need to be removed when full site editing can handle the sidebar and main content as separate template parts?

Yep, I think this where the lines between patterns and template parts start to get blurry and we need to define what belongs where.

I do see this example as FSE territory, particularly if this layout is intended to be used across multiple pages. What do you think?

carolinan commented 4 years ago

Short term I believe there is a gap to fill, because selecting a traditional page template or a customizer option to add a sidebar, if a theme supports it, makes it more difficult to see how the sidebar works with the content.

johnstonphilip commented 4 years ago

I feel like patterns would be useful to spin up new template parts. Am I understanding that wrong?

carolinan commented 4 years ago

I think such a template part would be only the sidebar or the content, not both. So a sidebar only pattern could be considered when FSE is in.

jasmussen commented 4 years ago

I feel like patterns would be useful to spin up new template parts. Am I understanding that wrong?

Just like you can use blocks inside a template parts, so can you use patterns. I think it's very important to not think of block patterns as anything other than "a collection of blocks". I.e. when you insert a pattern you just insert multiple blocks at once, that are pre-configured. There's no other magic going on.

Edit: made a typo.

itsjusteileen commented 4 years ago

@jasmussen does it also apply that you can use patterns inside of block templates? My experiments have not worked. So far, the primary distinguishing difference between templates and patterns is the ability in templates to lock the blocks used. Patterns don't allow locking, so when used in template parts would they retain the functionality to be deleted?

jasmussen commented 4 years ago

does it also apply that you can use patterns inside of block templates?

Yes.

I think it's very important to remember that a pattern is just a group of blocks. As soon as you insert it, it stops being a pattern, because you just inserted multiple blocks at once.

Compare it to LEGO bricks; you pick up a single brick and start building a house. Maybe you find part of a previous build with a door and a window already put together, and it's a good shortcut. In the end, it's all blocks put together.

Blocks and patterns are the same. It's just blocks.

enriquesanchez commented 4 years ago

Closing now that patterns are merged and slated for the 5.5 release.

StaggerLeee commented 4 years ago

Everyone will be able to build websites now. :) I could never imagine I would see something like that in WordPress.

It is huge, very huge. Good work.

We are dinosaurus now. People will need us only for some work with custom fields. And for FTP transfer, database import.

Waseemghafoor474 commented 3 years ago

I think patterns would be helpful. Good work. Also please tell us about WordPress image, when I put image ,wordpress show very large image on my site https://stainely.com/ i don't use any plugin. kindly share how to resolve this issue .

WordPress / gutenberg

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

Hero section 01

Hero section 02

Features/services 01

Features/services 02

Hero Pattern

Centered simple footer

4 column footer

Contact Us

COVER

Media + Text

Natural Columns

Cover text on white

Cat dog

22455