Skip to content

Instantly share code, notes, and snippets.

View bobmatyas's full-sized avatar

Bob Matyas bobmatyas

View GitHub Profile
@colorful-tones
colorful-tones / Gutenberg Style Guide
Last active November 28, 2023 11:02
A simple style guide for Gutenberg FSE theme development
<!-- 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>