Skip to content

Instantly share code, notes, and snippets.

@andrewserong
Created October 6, 2021 01:09
Show Gist options
  • Save andrewserong/4a312ca1ebf6bedb5e97cbca61a69c1b to your computer and use it in GitHub Desktop.
Save andrewserong/4a312ca1ebf6bedb5e97cbca61a69c1b to your computer and use it in GitHub Desktop.
Gutenberg markup: Two columns blocks with background colors for testing blockGap support
<!-- wp:paragraph -->
<p>A paragraph.</p>
<!-- /wp:paragraph -->
<!-- wp:columns {"style":{"spacing":{"margin":{"top":"10px","bottom":"10px"}}},"backgroundColor":"blue"} -->
<div class="wp-block-columns has-blue-background-color has-background" style="margin-top:10px;margin-bottom:10px"><!-- wp:column {"style":{"spacing":{"padding":{"top":"10px","right":"10px","bottom":"10px","left":"10px"}}},"backgroundColor":"purple"} -->
<div class="wp-block-column has-purple-background-color has-background" style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px"><!-- wp:paragraph -->
<p>Col A</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->
<!-- wp:column {"style":{"spacing":{"padding":{"top":"10px","right":"10px","bottom":"10px","left":"10px"}}},"backgroundColor":"purple"} -->
<div class="wp-block-column has-purple-background-color has-background" style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px"><!-- wp:paragraph -->
<p>Col B</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->
<!-- wp:column {"style":{"spacing":{"padding":{"top":"10px","right":"10px","bottom":"10px","left":"10px"}}},"backgroundColor":"purple"} -->
<div class="wp-block-column has-purple-background-color has-background" style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px"><!-- wp:paragraph -->
<p>Col C</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
<!-- wp:paragraph -->
<p><meta charset="utf-8">A paragraph.</p>
<!-- /wp:paragraph -->
<!-- wp:separator -->
<hr class="wp-block-separator"/>
<!-- /wp:separator -->
<!-- wp:paragraph -->
<p>Another paragraph.</p>
<!-- /wp:paragraph -->
<!-- wp:columns {"style":{"spacing":{"margin":{"top":"5px","bottom":"5px"},"blockGap":"25px"}},"backgroundColor":"blue"} -->
<div class="wp-block-columns has-blue-background-color has-background" style="margin-top:5px;margin-bottom:5px"><!-- wp:column {"style":{"spacing":{"padding":{"top":"10px","right":"10px","bottom":"10px","left":"10px"}}},"backgroundColor":"purple"} -->
<div class="wp-block-column has-purple-background-color has-background" style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px"><!-- wp:paragraph -->
<p>Col A</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->
<!-- wp:column {"style":{"spacing":{"padding":{"top":"10px","right":"10px","bottom":"10px","left":"10px"}}},"backgroundColor":"purple"} -->
<div class="wp-block-column has-purple-background-color has-background" style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px"><!-- wp:paragraph -->
<p>Col B</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
<!-- wp:paragraph -->
<p><meta charset="utf-8">A paragraph.</p>
<!-- /wp:paragraph -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment