So after about 1hr of work, I have created a BBC clone template to help you get some more inspiration and learn how the Site Editor works within Popcorn Theme & WordPress.
Please bear in mind, this is for educational purposes only, If you were to use this in production, you should review all blocks including query loops.
You can copy and paste the code below into the Code Editor in Gutenberg.
<!-- wp:group {"tagName":"header","backgroundColor":"popcorn-quinary-color","layout":{"type":"default"}} -->
<header class="wp-block-group has-popcorn-quinary-color-background-color has-background"><!-- wp:group {"layout":{"type":"constrained","contentSize":"1200px"}} -->
<div class="wp-block-group"><!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
<div class="wp-block-group"><!-- wp:image {"id":245,"width":150,"height":50,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized"><img src="https://demo.popcorntheme.com/wp-content/uploads/2023/06/B-C-B.png" alt="" class="wp-image-245" width="150" height="50"/></figure>
<!-- /wp:image -->
<!-- wp:navigation {"ref":138} /-->
<!-- wp:search {"label":"Search","showLabel":false,"placeholder":"Search BCB","buttonText":"Search","buttonPosition":"no-button","backgroundColor":"popcorn-quaternary-color"} /--></div>
<!-- /wp:group --></div>
<!-- /wp:group --></header>
<!-- /wp:group -->
<!-- wp:group {"style":{"spacing":{"margin":{"top":"0","bottom":"0"},"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30"}},"border":{"top":{"color":"#dcdcdc","width":"2px"}}},"backgroundColor":"popcorn-quinary-color","layout":{"type":"constrained","contentSize":"1200px"}} -->
<div class="wp-block-group has-popcorn-quinary-color-background-color has-background" style="border-top-color:#dcdcdc;border-top-width:2px;margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30)"><!-- wp:heading {"level":1,"fontSize":"popcorn-font-l"} -->
<h1 class="wp-block-heading has-popcorn-font-l-font-size">Welcome to the BCB</h1>
<!-- /wp:heading --></div>
<!-- /wp:group -->
<!-- wp:group {"layout":{"type":"constrained","contentSize":"1200px"}} -->
<div class="wp-block-group"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"33.33%","backgroundColor":"popcorn-quinary-color","className":"popcorn-full-height"} -->
<div class="wp-block-column popcorn-full-height has-popcorn-quinary-color-background-color has-background" style="flex-basis:33.33%"><!-- wp:query {"queryId":14,"query":{"perPage":"1","pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"exclude","inherit":false},"displayLayout":{"type":"list"}} -->
<div class="wp-block-query"><!-- wp:post-template -->
<!-- wp:group {"style":{"spacing":{"padding":{"bottom":"var:preset|spacing|50"}},"dimensions":{"minHeight":"435px"}},"backgroundColor":"popcorn-quinary-color","className":"popcorn-full-height","layout":{"type":"constrained"}} -->
<div class="wp-block-group popcorn-full-height has-popcorn-quinary-color-background-color has-background" style="min-height:435px;padding-bottom:var(--wp--preset--spacing--50)"><!-- wp:post-featured-image /-->
<!-- wp:group {"style":{"spacing":{"padding":{"top":"0","bottom":"0","left":"var:preset|spacing|30","right":"var:preset|spacing|30"}}},"layout":{"type":"flex","orientation":"vertical","verticalAlignment":"space-between"}} -->
<div class="wp-block-group" style="padding-top:0;padding-right:var(--wp--preset--spacing--30);padding-bottom:0;padding-left:var(--wp--preset--spacing--30)"><!-- wp:post-title {"isLink":true,"style":{"elements":{"link":{":hover":{"color":{"text":"#a23c39"}},"color":{"text":"var:preset|color|popcorn-tertiary-color"}}}},"fontSize":"popcorn-font-m"} /--></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
<!-- /wp:post-template --></div>
<!-- /wp:query --></div>
<!-- /wp:column -->
<!-- wp:column {"width":"66.66%"} -->
<div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"66.66%"} -->
<div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:query {"queryId":55,"query":{"perPage":"4","pages":0,"offset":"1","postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false},"displayLayout":{"type":"flex","columns":2}} -->
<div class="wp-block-query"><!-- wp:post-template -->
<!-- wp:group {"backgroundColor":"popcorn-quinary-color","className":"popcorn-full-height","layout":{"type":"constrained"}} -->
<div class="wp-block-group popcorn-full-height has-popcorn-quinary-color-background-color has-background"><!-- wp:post-featured-image {"height":"150px"} /-->
<!-- wp:group {"style":{"spacing":{"padding":{"top":"0","right":"var:preset|spacing|30","bottom":"var:preset|spacing|30","left":"var:preset|spacing|30"},"blockGap":"0"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="padding-top:0;padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)"><!-- wp:post-title {"isLink":true,"style":{"elements":{"link":{"color":{"text":"var:preset|color|popcorn-tertiary-color"}}}},"fontSize":"popcorn-font-b"} /--></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
<!-- /wp:post-template --></div>
<!-- /wp:query --></div>
<!-- /wp:column -->
<!-- wp:column {"width":"33.33%"} -->
<div class="wp-block-column" style="flex-basis:33.33%"><!-- wp:query {"queryId":55,"query":{"perPage":"4","pages":0,"offset":"5","postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"exclude","inherit":false},"displayLayout":{"type":"list","columns":2}} -->
<div class="wp-block-query"><!-- wp:post-template -->
<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|50","right":"var:preset|spacing|30","bottom":"var:preset|spacing|30","left":"var:preset|spacing|30"}},"dimensions":{"minHeight":"83px"}},"backgroundColor":"popcorn-quinary-color","className":"popcorn-full-height","layout":{"type":"constrained"}} -->
<div class="wp-block-group popcorn-full-height has-popcorn-quinary-color-background-color has-background" style="min-height:83px;padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)"><!-- wp:group {"style":{"spacing":{"padding":{"top":"0","right":"var:preset|spacing|30","bottom":"var:preset|spacing|30","left":"var:preset|spacing|30"},"blockGap":"0"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="padding-top:0;padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)"><!-- wp:post-title {"isLink":true,"style":{"elements":{"link":{"color":{"text":"var:preset|color|popcorn-tertiary-color"}}}},"fontSize":"popcorn-font-b"} /--></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
<!-- /wp:post-template --></div>
<!-- /wp:query --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->
<!-- wp:group {"layout":{"type":"constrained","contentSize":"1200px"}} -->
<div class="wp-block-group"><!-- wp:query {"queryId":5,"query":{"perPage":"1","pages":0,"offset":"10","postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"exclude","inherit":false},"displayLayout":{"type":"list"}} -->
<div class="wp-block-query"><!-- wp:post-template -->
<!-- wp:cover {"useFeaturedImage":true,"dimRatio":50,"contentPosition":"center left","isDark":false} -->
<div class="wp-block-cover is-light has-custom-content-position is-position-center-left"><span aria-hidden="true" class="wp-block-cover__background has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph {"align":"left","placeholder":"Write title…","style":{"typography":{"textTransform":"uppercase"}},"textColor":"popcorn-quinary-color","fontSize":"popcorn-font-b"} -->
<p class="has-text-align-left has-popcorn-quinary-color-color has-text-color has-popcorn-font-b-font-size" style="text-transform:uppercase"><strong>Featured post</strong></p>
<!-- /wp:paragraph -->
<!-- wp:post-title {"isLink":true,"style":{"elements":{"link":{"color":{"text":"var:preset|color|popcorn-quinary-color"}}},"typography":{"lineHeight":"0.9"}}} /-->
<!-- wp:post-excerpt {"textColor":"popcorn-quinary-color"} /--></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div></div>
<!-- /wp:cover -->
<!-- /wp:post-template --></div>
<!-- /wp:query --></div>
<!-- /wp:group -->
<!-- wp:group {"layout":{"type":"constrained","contentSize":"1200px"}} -->
<div class="wp-block-group"><!-- wp:heading {"style":{"spacing":{"padding":{"bottom":"0"}},"typography":{"lineHeight":"1"}},"fontSize":"popcorn-font-m"} -->
<h2 class="wp-block-heading has-popcorn-font-m-font-size" style="padding-bottom:0;line-height:1">Buyers Guides ></h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"var:preset|spacing|30","right":"var:preset|spacing|30","bottom":"var:preset|spacing|30","left":"var:preset|spacing|30"}}}} -->
<p style="margin-top:var(--wp--preset--spacing--30);margin-right:var(--wp--preset--spacing--30);margin-bottom:var(--wp--preset--spacing--30);margin-left:var(--wp--preset--spacing--30)">You should look at all of the choices and pick the one that appeals to you the most.</p>
<!-- /wp:paragraph -->
<!-- wp:query {"queryId":16,"query":{"perPage":"4","pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"exclude","inherit":false},"displayLayout":{"type":"flex","columns":4}} -->
<div class="wp-block-query"><!-- wp:post-template -->
<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20"},"dimensions":{"minHeight":"270px"}},"backgroundColor":"popcorn-quinary-color","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-popcorn-quinary-color-background-color has-background" style="min-height:270px"><!-- wp:post-featured-image {"height":"200px"} /-->
<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|30","right":"var:preset|spacing|30","bottom":"var:preset|spacing|30","left":"var:preset|spacing|30"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)"><!-- wp:post-title {"fontSize":"popcorn-font-b"} /--></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
<!-- /wp:post-template --></div>
<!-- /wp:query --></div>
<!-- /wp:group -->
<!-- wp:group {"style":{"elements":{"link":{"color":{"text":"var:preset|color|popcorn-primary-color"}}},"spacing":{"padding":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|40"}},"border":{"bottom":{"color":"var:preset|color|popcorn-quaternary-color","width":"2px"}}},"backgroundColor":"popcorn-senary-color","textColor":"popcorn-quinary-color","layout":{"type":"constrained","contentSize":"1200px"}} -->
<div class="wp-block-group has-popcorn-quinary-color-color has-popcorn-senary-color-background-color has-text-color has-background has-link-color" style="border-bottom-color:var(--wp--preset--color--popcorn-quaternary-color);border-bottom-width:2px;padding-top:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40)"><!-- wp:heading {"textColor":"popcorn-quinary-color","fontSize":"popcorn-font-m"} -->
<h2 class="wp-block-heading has-popcorn-quinary-color-color has-text-color has-popcorn-font-m-font-size">The best of popcorn 🍿</h2>
<!-- /wp:heading -->
<!-- wp:query {"queryId":17,"query":{"perPage":"4","pages":0,"offset":"4","postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"exclude","inherit":false},"displayLayout":{"type":"flex","columns":4}} -->
<div class="wp-block-query"><!-- wp:post-template -->
<!-- wp:group {"style":{"dimensions":{"minHeight":"280px"}},"backgroundColor":"popcorn-tertiary-color","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-popcorn-tertiary-color-background-color has-background" style="min-height:280px"><!-- wp:post-featured-image {"isLink":true,"height":"200px"} /-->
<!-- wp:group {"style":{"spacing":{"padding":{"left":"var:preset|spacing|30","right":"var:preset|spacing|30"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="padding-right:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)"><!-- wp:post-title {"isLink":true,"style":{"elements":{"link":{"color":{"text":"var:preset|color|popcorn-quinary-color"}}}},"fontSize":"popcorn-font-b"} /--></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
<!-- /wp:post-template --></div>
<!-- /wp:query --></div>
<!-- /wp:group -->
<!-- wp:group {"tagName":"footer","style":{"elements":{"link":{"color":{"text":"var:preset|color|popcorn-quinary-color"}}},"spacing":{"margin":{"top":"0","bottom":"0"},"padding":{"bottom":"var:preset|spacing|50"}}},"backgroundColor":"popcorn-tertiary-color","textColor":"popcorn-quinary-color","layout":{"type":"constrained","contentSize":"1200px"}} -->
<footer class="wp-block-group has-popcorn-quinary-color-color has-popcorn-tertiary-color-background-color has-text-color has-background has-link-color" style="margin-top:0;margin-bottom:0;padding-bottom:var(--wp--preset--spacing--50)"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"style":{"spacing":{"padding":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|40"}}}} -->
<div class="wp-block-column" style="padding-top:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40)"><!-- wp:group {"style":{"border":{"right":{"color":"var:preset|color|popcorn-quaternary-color","width":"2px"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="border-right-color:var(--wp--preset--color--popcorn-quaternary-color);border-right-width:2px"><!-- wp:paragraph -->
<p><a href="#">Link</a></p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p><a href="#">Link</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->
<!-- wp:column {"style":{"spacing":{"padding":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|40"}}}} -->
<div class="wp-block-column" style="padding-top:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40)"><!-- wp:group {"style":{"border":{"right":{"color":"var:preset|color|popcorn-quaternary-color","width":"2px"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="border-right-color:var(--wp--preset--color--popcorn-quaternary-color);border-right-width:2px"><!-- wp:paragraph -->
<p><a href="#">Link</a></p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p><a href="#">Link</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->
<!-- wp:column {"style":{"spacing":{"padding":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|40"}}}} -->
<div class="wp-block-column" style="padding-top:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40)"><!-- wp:group {"style":{"border":{"right":{"color":"var:preset|color|popcorn-quaternary-color","width":"2px"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="border-right-color:var(--wp--preset--color--popcorn-quaternary-color);border-right-width:2px"><!-- wp:paragraph -->
<p><a href="#">Link</a></p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p><a href="#">Link</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->
<!-- wp:column {"style":{"spacing":{"padding":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|40"}}}} -->
<div class="wp-block-column" style="padding-top:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40)"><!-- wp:group {"style":{"border":{"right":{"color":"var:preset|color|popcorn-quaternary-color","width":"2px"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="border-right-color:var(--wp--preset--color--popcorn-quaternary-color);border-right-width:2px"><!-- wp:paragraph -->
<p><a href="#">Link</a></p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p><a href="#">Link</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->
<!-- wp:column {"style":{"spacing":{"padding":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|40"}}}} -->
<div class="wp-block-column" style="padding-top:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40)"><!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph -->
<p><a href="#">Link</a></p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p><a href="#">Link</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
<div class="wp-block-group"><!-- wp:paragraph -->
<p><strong><a href="#">Link</a></strong></p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p><strong><a href="#">Link</a></strong></p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p><strong><a href="#">Link</a></strong></p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p><strong><a href="#">Link</a></strong></p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p><strong><a href="#">Link</a></strong></p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p><strong><a href="#">Link</a></strong></p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p><strong><a href="#">Link</a></strong></p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p><strong><a href="#">Link</a></strong></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
<!-- wp:paragraph {"fontSize":"popcorn-font-s"} -->
<p class="has-popcorn-font-s-font-size">© 2023 Popcorn Theme. The BCB is an affiliate for lots of companies. 💰</p>
<!-- /wp:paragraph --></footer>
<!-- /wp:group -->Reverting or restoring template parts back
In block themes you can easily revert or clear any configurations back to defaults.
Open any template or template part that has been changed, and clear customizations (1).
Alternatively you can clear customizations without opening the template in Manage All Templates.
You can also easily see where you have made changes (2).
Click Clear Customizations (3).
Restore from a different revision
You can also restore to a different revision (4) if you want to go back a couple of steps.
Leave a Reply