Skip to content

Instantly share code, notes, and snippets.

@aaronrobertshaw
Created December 23, 2020 09:35
Show Gist options
  • Save aaronrobertshaw/861402fe1a809510c3ac0679941eb99e to your computer and use it in GitHub Desktop.
Save aaronrobertshaw/861402fe1a809510c3ac0679941eb99e to your computer and use it in GitHub Desktop.
Example Gutenberg block content containing custom gutter sizing
<!-- wp:columns {"gutterSize":2,"align":"wide"} -->
<div class="wp-block-columns alignwide" style="--columns-block-gutter-size:2px"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:group {"backgroundColor":"primary"} -->
<div class="wp-block-group has-primary-background-color has-background"><div class="wp-block-group__inner-container"><!-- wp:columns {"gutterSize":0} -->
<div class="wp-block-columns" style="--columns-block-gutter-size:0px"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:group {"backgroundColor":"subtle-background"} -->
<div class="wp-block-group has-subtle-background-background-color has-background"><div class="wp-block-group__inner-container"></div></div>
<!-- /wp:group --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:group {"backgroundColor":"background"} -->
<div class="wp-block-group has-background-background-color has-background"><div class="wp-block-group__inner-container"></div></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div></div>
<!-- /wp:group --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:group {"backgroundColor":"secondary"} -->
<div class="wp-block-group has-secondary-background-color has-background"><div class="wp-block-group__inner-container"><!-- wp:columns {"gutterSize":42} -->
<div class="wp-block-columns" style="--columns-block-gutter-size:42px"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:group {"backgroundColor":"background"} -->
<div class="wp-block-group has-background-background-color has-background"><div class="wp-block-group__inner-container"></div></div>
<!-- /wp:group --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:group {"backgroundColor":"background"} -->
<div class="wp-block-group has-background-background-color has-background"><div class="wp-block-group__inner-container"></div></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment