Style Guide Gutenberg

style-guide.php

<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50","left":"var:preset|spacing|40","right":"var:preset|spacing|40"},"blockGap":"var:preset|spacing|40"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--40)"><!-- wp:heading {"level":1} -->
<h1 class="wp-block-heading">Style Guide</h1>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent luctus ut massa ac tempor. Etiam cursus auctor sem, non gravida metus faucibus at. Quisque a sagittis leo, vel venenatis lorem. Quisque accumsan finibus mauris vel feugiat. Nullam in dictum quam, eget fermentum eros. Nunc non faucibus felis. Aenean non lorem id urna convallis eleifend sed et sapien. In suscipit erat malesuada nisl tempor, pulvinar commodo odio rhoncus. Vestibulum sed blandit urna, cursus fermentum nulla. Ut aliquet tortor sed mi auctor, nec molestie lacus placerat. Phasellus varius venenatis bibendum. Nullam faucibus varius erat, non ornare arcu rhoncus dapibus. Donec sagittis dui id venenatis maximus. Etiam at mauris neque. Sed elit sapien, pharetra et nisl sed, lobortis rutrum libero.
</p>
<!-- /wp:paragraph -->

<!-- wp:separator {"opacity":"css","className":"is-style-wide"} -->
<hr class="wp-block-separator has-css-opacity is-style-wide"/>
<!-- /wp:separator -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Typography</h2>
<!-- /wp:heading -->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:heading {"level":1} -->
<h1 class="wp-block-heading">Heading 1</h1>
<!-- /wp:heading -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Heading 2</h2>
<!-- /wp:heading -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Heading 3</h3>
<!-- /wp:heading -->

<!-- wp:heading {"level":4} -->
<h4 class="wp-block-heading">Heading 4</h4>
<!-- /wp:heading -->

<!-- wp:heading {"level":5} -->
<h5 class="wp-block-heading">Heading 5</h5>
<!-- /wp:heading -->

<!-- wp:heading {"level":6} -->
<h6 class="wp-block-heading">Heading 6</h6>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Body text with <a href="#">link</a>, <strong>bold</strong>, <em>italic</em>, and <code>inline code</code>.</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul class="wp-block-list"><!-- wp:list-item -->
<li>Unordered list item</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Another item</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Third item</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

<!-- wp:list {"ordered":true} -->
<ol class="wp-block-list"><!-- wp:list-item -->
<li>Ordered list item</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Another item</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Third item</li>
<!-- /wp:list-item --></ol>
<!-- /wp:list -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><!-- wp:paragraph -->
<p>Blockquote example for typographic rhythm.</p>
<!-- /wp:paragraph --><cite>Author</cite></blockquote>
<!-- /wp:quote -->

<!-- wp:pullquote -->
<figure class="wp-block-pullquote"><blockquote><p>Pullquote example showing accent styling.</p><cite>Someone</cite></blockquote></figure>
<!-- /wp:pullquote -->

<!-- wp:code -->
<pre class="wp-block-code"><code>.selector { font: var(--wp--preset--font-family--system); }</code></pre>
<!-- /wp:code --></div>
<!-- /wp:group -->

<!-- wp:separator {"opacity":"css","className":"is-style-dots"} -->
<hr class="wp-block-separator has-css-opacity is-style-dots"/>
<!-- /wp:separator -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Buttons</h2>
<!-- /wp:heading -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"className":"is-style-fill"} -->
<div class="wp-block-button is-style-fill"><a class="wp-block-button__link wp-element-button">Primary / Fill</a></div>
<!-- /wp:button -->

<!-- wp:button {"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button">Secondary / Outline</a></div>
<!-- /wp:button -->

<!-- wp:button {"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button">Pill</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Layout &amp; Grid</h2>
<!-- /wp:heading -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Column 1</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Column 2</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Column 3</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
<div class="wp-block-group"><!-- wp:paragraph -->
<p>Row item</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Row item</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Row item</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:separator {"opacity":"css"} -->
<hr class="wp-block-separator has-css-opacity"/>
<!-- /wp:separator -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Tables</h2>
<!-- /wp:heading -->

<!-- wp:table -->
<figure class="wp-block-table"><table class="has-fixed-layout"><thead><tr><th>Header A</th><th>Header B</th><th>Header C</th></tr></thead><tbody><tr><td>Cell</td><td>Cell</td><td>Cell</td></tr><tr><td>Cell</td><td>Cell</td><td>Cell</td></tr></tbody></table></figure>
<!-- /wp:table -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Media</h2>
<!-- /wp:heading -->

<!-- wp:media-text {"mediaType":"image"} -->
<div class="wp-block-media-text is-stacked-on-mobile"><figure class="wp-block-media-text__media"><img src="https://picsum.photos/id/1025/960/640" alt="Sample"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph -->
<p>Media &amp; Text block using external image (picsum.photos).</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:media-text -->

<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://picsum.photos/id/237/1200/800" alt="Sample image from picsum.photos"/><figcaption class="wp-element-caption">Image caption (external source)</figcaption></figure>
<!-- /wp:image -->

<!-- wp:gallery {"columns":3,"linkTo":"none"} -->
<figure class="wp-block-gallery has-nested-images columns-3 is-cropped"><!-- wp:image -->
<figure class="wp-block-image"><img src="https://picsum.photos/id/1003/800/600" alt="Gallery item 1"/></figure>
<!-- /wp:image -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://picsum.photos/id/1011/800/600" alt="Gallery item 2"/></figure>
<!-- /wp:image -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://picsum.photos/id/1020/800/600" alt="Gallery item 3"/></figure>
<!-- /wp:image --></figure>
<!-- /wp:gallery -->

<!-- wp:cover {"url":"https://picsum.photos/id/1043/1600/900","dimRatio":40} -->
<div class="wp-block-cover"><img class="wp-block-cover__image-background" alt="" src="https://picsum.photos/id/1043/1600/900" data-object-fit="cover"/><span aria-hidden="true" class="wp-block-cover__background has-background-dim-40 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph -->
<p>Cover block with external background image</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->

<!-- wp:separator {"opacity":"css"} -->
<hr class="wp-block-separator has-css-opacity"/>
<!-- /wp:separator -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Notices &amp; Details</h2>
<!-- /wp:heading -->

<!-- wp:details -->
<details class="wp-block-details"><summary>Details summary</summary><!-- wp:paragraph -->
<p>Expandable content for the Details block.</p>
<!-- /wp:paragraph --></details>
<!-- /wp:details -->

<!-- wp:paragraph {"style":{"spacing":{"padding":{"top":"8px","bottom":"8px","left":"12px","right":"12px"}}},"backgroundColor":"base","textColor":"contrast"} -->
<p class="has-contrast-color has-base-background-color has-text-color has-background" style="padding-top:8px;padding-right:12px;padding-bottom:8px;padding-left:12px">Example notice using theme tokens.</p>
<!-- /wp:paragraph -->

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

<!-- wp:heading {"level":2} -->
<h2>Colors</h2>
<!-- /wp:heading -->

<!-- wp:columns {"isStackedOnMobile":true} -->
<div class="wp-block-columns">
  <!-- wp:column -->
  <div class="wp-block-column">
    <!-- wp:paragraph -->
    <p><strong>Brand</strong></p>
    <!-- /wp:paragraph -->

    <!-- wp:paragraph {"backgroundColor":"primary","textColor":"contrast","style":{"spacing":{"padding":{"top":"16px","bottom":"16px","left":"12px","right":"12px"}}}} -->
    <p class="has-contrast-color has-primary-background-color has-text-color has-background" style="padding-top:16px;padding-right:12px;padding-bottom:16px;padding-left:12px">Primary — var(--wp--preset--color--primary)</p>
    <!-- /wp:paragraph -->

    <!-- wp:paragraph {"backgroundColor":"secondary","textColor":"contrast","style":{"spacing":{"padding":{"top":"16px","bottom":"16px","left":"12px","right":"12px"}}}} -->
    <p class="has-contrast-color has-secondary-background-color has-text-color has-background" style="padding-top:16px;padding-right:12px;padding-bottom:16px;padding-left:12px">Secondary — var(--wp--preset--color--secondary)</p>
    <!-- /wp:paragraph -->

    <!-- wp:paragraph {"backgroundColor":"tertiary","textColor":"contrast","style":{"spacing":{"padding":{"top":"16px","bottom":"16px","left":"12px","right":"12px"}}}} -->
    <p class="has-contrast-color has-tertiary-background-color has-text-color has-background" style="padding-top:16px;padding-right:12px;padding-bottom:16px;padding-left:12px">Tertiary — var(--wp--preset--color--tertiary)</p>
    <!-- /wp:paragraph -->
  </div>
  <!-- /wp:column -->

  <!-- wp:column -->
  <div class="wp-block-column">
    <!-- wp:paragraph -->
    <p><strong>Base &amp; Contrast</strong></p>
    <!-- /wp:paragraph -->

    <!-- wp:paragraph {"backgroundColor":"base","textColor":"contrast","style":{"spacing":{"padding":{"top":"16px","bottom":"16px","left":"12px","right":"12px"}}}} -->
    <p class="has-contrast-color has-base-background-color has-text-color has-background" style="padding-top:16px;padding-right:12px;padding-bottom:16px;padding-left:12px">Base</p>
    <!-- /wp:paragraph -->

    <!-- wp:paragraph {"backgroundColor":"contrast","textColor":"base","style":{"spacing":{"padding":{"top":"16px","bottom":"16px","left":"12px","right":"12px"}}}} -->
    <p class="has-base-color has-contrast-background-color has-text-color has-background" style="padding-top:16px;padding-right:12px;padding-bottom:16px;padding-left:12px">Contrast</p>
    <!-- /wp:paragraph -->
  </div>
  <!-- /wp:column -->

  <!-- wp:column -->
  <div class="wp-block-column">
    <!-- wp:paragraph -->
    <p><strong>Neutral scale</strong></p>
    <!-- /wp:paragraph -->

    <!-- wp:paragraph {"backgroundColor":"neutral-50","style":{"spacing":{"padding":{"top":"12px","bottom":"12px","left":"12px","right":"12px"}}}} -->
    <p class="has-neutral-50-background-color has-background" style="padding-top:12px;padding-right:12px;padding-bottom:12px;padding-left:12px">neutral-50</p>
    <!-- /wp:paragraph -->

    <!-- wp:paragraph {"backgroundColor":"neutral-200","style":{"spacing":{"padding":{"top":"12px","bottom":"12px","left":"12px","right":"12px"}}}} -->
    <p class="has-neutral-200-background-color has-background" style="padding-top:12px;padding-right:12px;padding-bottom:12px;padding-left:12px">neutral-200</p>
    <!-- /wp:paragraph -->

    <!-- wp:paragraph {"backgroundColor":"neutral-400","style":{"spacing":{"padding":{"top":"12px","bottom":"12px","left":"12px","right":"12px"}}}} -->
    <p class="has-neutral-400-background-color has-background" style="padding-top:12px;padding-right:12px;padding-bottom:12px;padding-left:12px">neutral-400</p>
    <!-- /wp:paragraph -->

    <!-- wp:paragraph {"backgroundColor":"neutral-700","textColor":"base","style":{"spacing":{"padding":{"top":"12px","bottom":"12px","left":"12px","right":"12px"}}}} -->
    <p class="has-base-color has-neutral-700-background-color has-text-color has-background" style="padding-top:12px;padding-right:12px;padding-bottom:12px;padding-left:12px">neutral-700</p>
    <!-- /wp:paragraph -->

    <!-- wp:paragraph {"backgroundColor":"neutral-900","textColor":"base","style":{"spacing":{"padding":{"top":"12px","bottom":"12px","left":"12px","right":"12px"}}}} -->
    <p class="has-base-color has-neutral-900-background-color has-text-color has-background" style="padding-top:12px;padding-right:12px;padding-bottom:12px;padding-left:12px">neutral-900</p>
    <!-- /wp:paragraph -->
  </div>
  <!-- /wp:column -->
</div>
<!-- /wp:columns -->

<!-- wp:heading {"level":2} -->
<h2>Forms &amp; Inputs</h2>
<!-- /wp:heading -->

<!-- wp:search {"label":"Search","showLabel":true,"buttonText":"Search"} /-->

<!-- wp:paragraph -->
<p>Fieldset (pseudo):</p>
<!-- /wp:paragraph -->

<!-- wp:group {"style":{"border":{"width":"1px","radius":"8px"},"spacing":{"padding":{"top":"16px","bottom":"16px","left":"16px","right":"16px"},"blockGap":"12px"}}} -->
<div class="wp-block-group" style="border-width:1px;border-radius:8px;padding-top:16px;padding-right:16px;padding-bottom:16px;padding-left:16px">
  <!-- wp:paragraph -->
  <p><label for="demo-input">Label</label></p>
  <!-- /wp:paragraph -->
  <!-- wp:paragraph -->
  <p><input id="demo-input" type="text" placeholder="Input text"/></p>
  <!-- /wp:paragraph -->
  <!-- wp:paragraph -->
  <p><select><option>Option A</option><option>Option B</option></select></p>
  <!-- /wp:paragraph -->
  <!-- wp:paragraph -->
  <p><input type="checkbox" id="chk"/><label for="chk">Checkbox</label></p>
  <!-- /wp:paragraph -->
</div>
<!-- /wp:group -->

<!-- wp:heading {"level":2} -->
<h2>Cards</h2>
<!-- /wp:heading -->

<!-- wp:columns -->
<div class="wp-block-columns">
  <!-- wp:column -->
  <div class="wp-block-column">
    <!-- wp:group {"style":{"border":{"width":"1px","radius":"12px"},"spacing":{"padding":{"top":"16px","right":"16px","bottom":"16px","left":"16px"},"blockGap":"12px"},"shadow":"var:preset|shadow|sm"}} -->
    <div class="wp-block-group" style="border-width:1px;border-radius:12px;box-shadow:var(--wp--preset--shadow--sm);padding-top:16px;padding-right:16px;padding-bottom:16px;padding-left:16px">
      <!-- wp:image {"sizeSlug":"large"} -->
      <figure class="wp-block-image size-large"><img src="https://picsum.photos/id/237/800/500" alt=""/></figure>
      <!-- /wp:image -->
      <!-- wp:heading {"level":3} -->
      <h3>Card title</h3>
      <!-- /wp:heading -->
      <!-- wp:paragraph -->
      <p>Short summary to validate leading &amp; trailing spacing.</p>
      <!-- /wp:paragraph -->
      <!-- wp:button -->
      <div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Action</a></div>
      <!-- /wp:button -->
    </div>
    <!-- /wp:group -->
  </div>
  <!-- /wp:column -->

  <!-- wp:column -->
  <div class="wp-block-column">
    <!-- wp:group {"style":{"border":{"width":"1px","radius":"12px"},"spacing":{"padding":{"top":"16px","right":"16px","bottom":"16px","left":"16px"},"blockGap":"12px"},"shadow":"var:preset|shadow|xl"}} -->
    <div class="wp-block-group" style="border-width:1px;border-radius:12px;box-shadow:var(--wp--preset--shadow--xl);padding-top:16px;padding-right:16px;padding-bottom:16px;padding-left:16px">
      <!-- wp:paragraph -->
      <p>No image variant</p>
      <!-- /wp:paragraph -->
      <!-- wp:heading {"level":3} -->
      <h3>Card title</h3>
      <!-- /wp:heading -->
      <!-- wp:paragraph -->
      <p>Body copy to check vertical rhythm and line-length.</p>
      <!-- /wp:paragraph -->
      <!-- wp:buttons -->
      <div class="wp-block-buttons">
        <!-- wp:button {"className":"is-style-outline"} -->
        <div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button">Secondary</a></div>
        <!-- /wp:button -->
      </div>
      <!-- /wp:buttons -->
    </div>
    <!-- /wp:group -->
  </div>
  <!-- /wp:column -->
</div>
<!-- /wp:columns -->