A simple style guide for Gutenberg FSE theme development

Gutenberg Style Guide

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

<!-- wp:group {"align":"wide","layout":{"inherit":false}} -->
<div class="wp-block-group alignwide"><!-- wp:columns {"verticalAlignment":"center"} -->
<div class="wp-block-columns are-vertically-aligned-center"><!-- wp:column {"verticalAlignment":"center","style":{"spacing":{"padding":{"top":"3rem","right":"1rem","bottom":"3rem","left":"1rem"}},"border":{"width":"1px"}},"backgroundColor":"contrast","className":"has-border-color has-black-border-color"} -->
<div class="wp-block-column is-vertically-aligned-center has-border-color has-black-border-color has-contrast-background-color has-background" style="border-width:1px;padding-top:3rem;padding-right:1rem;padding-bottom:3rem;padding-left:1rem"><!-- wp:paragraph {"textColor":"base","fontSize":"small"} -->
<p class="has-base-color has-text-color has-small-font-size">Contrast</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center","style":{"spacing":{"padding":{"top":"3rem","right":"1rem","bottom":"3rem","left":"1rem"}},"border":{"width":"1px"}},"backgroundColor":"base","className":"has-border-color has-black-border-color"} -->
<div class="wp-block-column is-vertically-aligned-center has-border-color has-black-border-color has-base-background-color has-background" style="border-width:1px;padding-top:3rem;padding-right:1rem;padding-bottom:3rem;padding-left:1rem"><!-- wp:paragraph {"textColor":"contrast","fontSize":"small"} -->
<p class="has-contrast-color has-text-color has-small-font-size">Background</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center","style":{"spacing":{"padding":{"top":"3rem","right":"1rem","bottom":"3rem","left":"1rem"}},"border":{"width":"1px"}},"backgroundColor":"primary","className":"has-border-color has-black-border-color"} -->
<div class="wp-block-column is-vertically-aligned-center has-border-color has-black-border-color has-primary-background-color has-background" style="border-width:1px;padding-top:3rem;padding-right:1rem;padding-bottom:3rem;padding-left:1rem"><!-- wp:paragraph {"textColor":"secondary","fontSize":"small"} -->
<p class="has-secondary-color has-text-color has-small-font-size">Primary</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center","style":{"spacing":{"padding":{"top":"3rem","right":"1rem","bottom":"3rem","left":"1rem"}},"border":{"width":"1px"}},"backgroundColor":"secondary","className":"has-border-color has-black-border-color"} -->
<div class="wp-block-column is-vertically-aligned-center has-border-color has-black-border-color has-secondary-background-color has-background" style="border-width:1px;padding-top:3rem;padding-right:1rem;padding-bottom:3rem;padding-left:1rem"><!-- wp:paragraph {"textColor":"primary","fontSize":"small"} -->
<p class="has-primary-color has-text-color has-small-font-size">Secondary</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center","style":{"spacing":{"padding":{"top":"3rem","right":"1rem","bottom":"3rem","left":"1rem"}},"border":{"width":"1px"}},"backgroundColor":"tertiary","className":"has-border-color has-black-border-color"} -->
<div class="wp-block-column is-vertically-aligned-center has-border-color has-black-border-color has-tertiary-background-color has-background" style="border-width:1px;padding-top:3rem;padding-right:1rem;padding-bottom:3rem;padding-left:1rem"><!-- wp:paragraph {"textColor":"contrast","fontSize":"small"} -->
<p class="has-contrast-color has-text-color has-small-font-size">Tertiary</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

<!-- wp:group {"align":"wide","layout":{"inherit":true}} -->
<div class="wp-block-group alignwide"><!-- wp:heading -->
<h2>Headings</h2>
<!-- /wp:heading -->

<!-- wp:heading {"level":1} -->
<h1>Heading One</h1>
<!-- /wp:heading -->

<!-- wp:heading -->
<h2>Heading Two</h2>
<!-- /wp:heading -->

<!-- wp:heading {"level":3} -->
<h3>Heading Three</h3>
<!-- /wp:heading -->

<!-- wp:heading {"level":4} -->
<h4>Heading Four</h4>
<!-- /wp:heading -->

<!-- wp:heading {"level":5} -->
<h5>Heading Five</h5>
<!-- /wp:heading -->

<!-- wp:heading {"level":6} -->
<h6>Heading Six</h6>
<!-- /wp:heading --></div>
<!-- /wp:group -->

<!-- wp:group -->
<div class="wp-block-group"><!-- wp:paragraph {"fontSize":"small"} -->
<p class="has-small-font-size">Sit laborum culpa cillum. Officia nulla pariatur dolore anim sed non. Aute consectetur dolore amet dolore qui commodo. Duis consectetur id nulla deserunt laborum eu adipiscing, dolor qui fugiat cupidatat. Ad amet consequat quis est quis minim, sed sint nostrud pariatur cillum occaecat pariatur eu. Proident laborum sed occaecat magna sit et consectetur. Enim do est incididunt amet, commodo nostrud cupidatat aute.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Mollit exercitation non ea sunt. Laboris et laboris incididunt irure. Mollit nulla <a href="#">consectetur eu reprehenderit cillum</a>. Elit dolor excepteur commodo amet elit, et aute incididunt aliquip cupidatat laborum id non. Minim sint excepteur ullamco laboris magna et. Velit aliqua sed minim sint aute. Dolore nulla mollit amet laboris. Anim eu fugiat ex do est. Exercitation aliqua exercitation ex eiusmod aliqua.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"fontSize":"medium"} -->
<p class="has-medium-font-size">Incididunt occaecat cupidatat eiusmod ad laborum proident eu. Veniam consequat anim commodo minim. Labore dolor aliqua ex. Est cupidatat irure ex cillum irure quis, sit in mollit reprehenderit fugiat excepteur. <a href="#">Pariatur velit minim deserunt consequat</a> laboris consequat, irure anim laborum voluptate reprehenderit nostrud occaecat amet. Excepteur ullamco in ut, laborum in do magna ex velit laboris, in magna nulla excepteur.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"fontSize":"large"} -->
<p class="has-large-font-size">Ad ex laborum veniam pariatur anim ullamco. Sint sunt irure culpa velit aliqua proident qui, do consequat est magna anim tempor. Aliquip laborum ullamco reprehenderit. Id voluptate deserunt cillum velit aliquip ut consectetur. Ea non ipsum occaecat, irure ea qui aliqua.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"fontSize":"x-large"} -->
<p class="has-x-large-font-size">Mollit minim laborum deserunt sint irure. Aute exercitation ipsum ullamco cupidatat. Eiusmod est laborum aliquip dolore. Cupidatat dolor reprehenderit dolore irure exercitation. Aliqua eiusmod velit nostrud ex voluptate laboris aliquip, deserunt esse quis officia aute officia quis est. Aliquip voluptate qui eu tempor.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group -->
<div class="wp-block-group"><!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link">Click Me</a></div>
<!-- /wp:button -->

<!-- wp:button {"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link">No, Click me!</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group -->

<!-- wp:group -->
<div class="wp-block-group"><!-- wp:quote -->
<blockquote class="wp-block-quote"><p>Ad sit esse aliquip duis incididunt officia mollit enim enim cupidatat ex aliqua deserunt cupidatat pariatur in aute voluptate in in dolore.</p><cite>Tom Waits</cite></blockquote>
<!-- /wp:quote -->

<!-- wp:pullquote -->
<figure class="wp-block-pullquote"><blockquote><p>Irure est est ipsum anim in lorem ex cupidatat duis fugiat adipiscing nisi aliqua ipsum id.</p><cite>Beck Hansen</cite></blockquote></figure>
<!-- /wp:pullquote --></div>
<!-- /wp:group -->

<!-- wp:group {"align":"full"} -->
<div class="wp-block-group alignfull"><!-- wp:heading -->
<h2>Duotone tests</h2>
<!-- /wp:heading -->

<!-- wp:columns {"verticalAlignment":"center"} -->
<div class="wp-block-columns are-vertically-aligned-center"><!-- wp:column {"verticalAlignment":"center","style":{"spacing":{"padding":{"top":"3rem","right":"1rem","bottom":"3rem","left":"1rem"}},"border":{"width":"1px"}},"className":"has-border-color has-black-border-color"} -->
<div class="wp-block-column is-vertically-aligned-center has-border-color has-black-border-color" style="border-width:1px;padding-top:3rem;padding-right:1rem;padding-bottom:3rem;padding-left:1rem"><!-- wp:image {"id":47,"sizeSlug":"large","linkDestination":"none","style":{"color":{"duotone":["#000000","#7f7f7f"]}}} -->
<figure class="wp-block-image size-large"><img src="https://images.unsplash.com/photo-1659613446106-2ed9bd0e9568?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1674&q=80" alt="" class="wp-image-47"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph {"textColor":"contrast","fontSize":"small"} -->
<p class="has-contrast-color has-text-color has-small-font-size">Contrast and base</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center","style":{"spacing":{"padding":{"top":"3rem","right":"1rem","bottom":"3rem","left":"1rem"}},"border":{"width":"1px"}},"className":"has-border-color has-black-border-color"} -->
<div class="wp-block-column is-vertically-aligned-center has-border-color has-black-border-color" style="border-width:1px;padding-top:3rem;padding-right:1rem;padding-bottom:3rem;padding-left:1rem"><!-- wp:image {"id":47,"sizeSlug":"large","linkDestination":"none","style":{"color":{"duotone":["#000000","#ffffff"]}}} -->
<figure class="wp-block-image size-large"><img src="https://images.unsplash.com/photo-1659613446106-2ed9bd0e9568?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1674&q=80" alt="" class="wp-image-47"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph {"textColor":"contrast","fontSize":"small"} -->
<p class="has-contrast-color has-text-color has-small-font-size">Contrast and secondary</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center","style":{"spacing":{"padding":{"top":"3rem","right":"1rem","bottom":"3rem","left":"1rem"}},"border":{"width":"1px"}},"className":"has-border-color has-black-border-color"} -->
<div class="wp-block-column is-vertically-aligned-center has-border-color has-black-border-color" style="border-width:1px;padding-top:3rem;padding-right:1rem;padding-bottom:3rem;padding-left:1rem"><!-- wp:image {"id":47,"sizeSlug":"large","linkDestination":"none","style":{"color":{"duotone":["#8c00b7","#fcff41"]}}} -->
<figure class="wp-block-image size-large"><img src="https://images.unsplash.com/photo-1659613446106-2ed9bd0e9568?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1674&q=80" alt="" class="wp-image-47"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph {"textColor":"contrast","fontSize":"small"} -->
<p class="has-contrast-color has-text-color has-small-font-size">Contrast and tertiary</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"verticalAlignment":"center"} -->
<div class="wp-block-columns are-vertically-aligned-center"><!-- wp:column {"verticalAlignment":"center","style":{"spacing":{"padding":{"top":"3rem","right":"1rem","bottom":"3rem","left":"1rem"}},"border":{"width":"1px"}},"className":"has-border-color has-black-border-color"} -->
<div class="wp-block-column is-vertically-aligned-center has-border-color has-black-border-color" style="border-width:1px;padding-top:3rem;padding-right:1rem;padding-bottom:3rem;padding-left:1rem"><!-- wp:image {"id":47,"sizeSlug":"large","linkDestination":"none","style":{"color":{"duotone":["#000097","#ff4747"]}}} -->
<figure class="wp-block-image size-large"><img src="https://images.unsplash.com/photo-1659613446106-2ed9bd0e9568?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1674&q=80" alt="" class="wp-image-47"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph {"textColor":"contrast","fontSize":"small"} -->
<p class="has-contrast-color has-text-color has-small-font-size">Primary and base</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center","style":{"spacing":{"padding":{"top":"3rem","right":"1rem","bottom":"3rem","left":"1rem"}},"border":{"width":"1px"}},"className":"has-border-color has-black-border-color"} -->
<div class="wp-block-column is-vertically-aligned-center has-border-color has-black-border-color" style="border-width:1px;padding-top:3rem;padding-right:1rem;padding-bottom:3rem;padding-left:1rem"><!-- wp:image {"id":47,"sizeSlug":"large","linkDestination":"none","style":{"color":{"duotone":["#000000","#00a5ff"]}}} -->
<figure class="wp-block-image size-large"><img src="https://images.unsplash.com/photo-1659613446106-2ed9bd0e9568?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1674&q=80" alt="" class="wp-image-47"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph {"textColor":"contrast","fontSize":"small"} -->
<p class="has-contrast-color has-text-color has-small-font-size">Primary and secondary</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center","style":{"spacing":{"padding":{"top":"3rem","right":"1rem","bottom":"3rem","left":"1rem"}},"border":{"width":"1px"}},"className":"has-border-color has-black-border-color"} -->
<div class="wp-block-column is-vertically-aligned-center has-border-color has-black-border-color" style="border-width:1px;padding-top:3rem;padding-right:1rem;padding-bottom:3rem;padding-left:1rem"><!-- wp:image {"id":47,"sizeSlug":"large","linkDestination":"none","style":{"color":{"duotone":["#c7005a","#fff278"]}}} -->
<figure class="wp-block-image size-large"><img src="https://images.unsplash.com/photo-1659613446106-2ed9bd0e9568?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1674&q=80" alt="" class="wp-image-47"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph {"textColor":"contrast","fontSize":"small"} -->
<p class="has-contrast-color has-text-color has-small-font-size">Primary and tertiary</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

<!-- wp:group {"align":"full"} -->
<div class="wp-block-group alignfull"><!-- wp:heading -->
<h2>Gradient tests</h2>
<!-- /wp:heading -->

<!-- wp:columns {"verticalAlignment":"center"} -->
<div class="wp-block-columns are-vertically-aligned-center"><!-- wp:column {"verticalAlignment":"center","style":{"spacing":{"padding":{"top":"3rem","right":"1rem","bottom":"3rem","left":"1rem"}},"border":{"width":"1px"}},"gradient":"vertical-secondary-to-tertiary","className":"has-border-color has-black-border-color"} -->
<div class="wp-block-column is-vertically-aligned-center has-border-color has-black-border-color has-vertical-secondary-to-tertiary-gradient-base has-background" style="border-width:1px;padding-top:3rem;padding-right:1rem;padding-bottom:3rem;padding-left:1rem"><!-- wp:paragraph {"textColor":"contrast","fontSize":"small"} -->
<p class="has-contrast-color has-text-color has-small-font-size">Vertical secondary to tertiary</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center","style":{"spacing":{"padding":{"top":"3rem","right":"1rem","bottom":"3rem","left":"1rem"}},"border":{"width":"1px"}},"gradient":"vertical-secondary-to-base","className":"has-border-color has-black-border-color"} -->
<div class="wp-block-column is-vertically-aligned-center has-border-color has-black-border-color has-vertical-secondary-to-base-gradient-background has-background" style="border-width:1px;padding-top:3rem;padding-right:1rem;padding-bottom:3rem;padding-left:1rem"><!-- wp:paragraph {"textColor":"contrast","fontSize":"small"} -->
<p class="has-contrast-color has-text-color has-small-font-size">Vertical secondary to background</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center","style":{"spacing":{"padding":{"top":"3rem","right":"1rem","bottom":"3rem","left":"1rem"}},"border":{"width":"1px"}},"gradient":"vertical-tertiary-to-base","className":"has-border-color has-black-border-color"} -->
<div class="wp-block-column is-vertically-aligned-center has-border-color has-black-border-color has-vertical-tertiary-to-base-gradient-background has-background" style="border-width:1px;padding-top:3rem;padding-right:1rem;padding-bottom:3rem;padding-left:1rem"><!-- wp:paragraph {"textColor":"contrast","fontSize":"small"} -->
<p class="has-contrast-color has-text-color has-small-font-size">Vertical tertiary to base</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center","style":{"spacing":{"padding":{"top":"3rem","right":"1rem","bottom":"3rem","left":"1rem"}},"border":{"width":"1px"}},"gradient":"diagonal-primary-to-contrast","className":"has-border-color has-black-border-color"} -->
<div class="wp-block-column is-vertically-aligned-center has-border-color has-black-border-color has-diagonal-primary-to-contrast-gradient-background has-background" style="border-width:1px;padding-top:3rem;padding-right:1rem;padding-bottom:3rem;padding-left:1rem"><!-- wp:paragraph {"textColor":"contrast","fontSize":"small"} -->
<p class="has-contrast-color has-text-color has-small-font-size">Diagonal primary to contrast</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"verticalAlignment":"center"} -->
<div class="wp-block-columns are-vertically-aligned-center"><!-- wp:column {"verticalAlignment":"center","style":{"spacing":{"padding":{"top":"3rem","right":"1rem","bottom":"3rem","left":"1rem"}},"border":{"width":"1px"}},"gradient":"diagonal-secondary-to-base","className":"has-border-color has-black-border-color"} -->
<div class="wp-block-column is-vertically-aligned-center has-border-color has-black-border-color has-diagonal-secondary-to-base-gradient-background has-background" style="border-width:1px;padding-top:3rem;padding-right:1rem;padding-bottom:3rem;padding-left:1rem"><!-- wp:paragraph {"textColor":"tertiary","fontSize":"small"} -->
<p class="has-tertiary-color has-text-color has-small-font-size">Diagonal secondary to base</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center","style":{"spacing":{"padding":{"top":"3rem","right":"1rem","bottom":"3rem","left":"1rem"}},"border":{"width":"1px"}},"gradient":"diagonal-base-to-secondary","className":"has-border-color has-black-border-color"} -->
<div class="wp-block-column is-vertically-aligned-center has-border-color has-black-border-color has-diagonal-base-to-secondary-gradient-background has-background" style="border-width:1px;padding-top:3rem;padding-right:1rem;padding-bottom:3rem;padding-left:1rem"><!-- wp:paragraph {"textColor":"tertiary","fontSize":"small"} -->
<p class="has-tertiary-color has-text-color has-small-font-size">Diagonal base to secondary</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center","style":{"spacing":{"padding":{"top":"3rem","right":"1rem","bottom":"3rem","left":"1rem"}},"border":{"width":"1px"}},"gradient":"diagonal-tertiary-to-base","className":"has-border-color has-black-border-color"} -->
<div class="wp-block-column is-vertically-aligned-center has-border-color has-black-border-color has-diagonal-tertiary-to-base-gradient-background has-background" style="border-width:1px;padding-top:3rem;padding-right:1rem;padding-bottom:3rem;padding-left:1rem"><!-- wp:paragraph {"textColor":"contrast","fontSize":"small"} -->
<p class="has-contrast-color has-text-color has-small-font-size">Diagonal tertiary to base</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center","style":{"spacing":{"padding":{"top":"3rem","right":"1rem","bottom":"3rem","left":"1rem"}},"border":{"width":"1px"}},"gradient":"diagonal-base-to-tertiary","className":"has-border-color has-black-border-color"} -->
<div class="wp-block-column is-vertically-aligned-center has-border-color has-black-border-color has-diagonal-base-to-tertiary-gradient-background has-background" style="border-width:1px;padding-top:3rem;padding-right:1rem;padding-bottom:3rem;padding-left:1rem"><!-- wp:paragraph {"textColor":"contrast","fontSize":"small"} -->
<p class="has-contrast-color has-text-color has-small-font-size">Diagonal base to tertiary</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

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

Be sure to replace the images in Duotone section with something on your local drive.