Sample Content for the Gutenberg  Editor

Handy Gutenberg enhanced HTML for quickly testing and verifying the design of all the most commonly used blocks.

I use this to vet and verify CSS is covering all cases on sites I work with that are using Gutenberg as their primary page and post editor. It’s also available as a GitHub gist as well.

<!-- wp:cover {"url":"https://picsum.photos/1024/430","id":2100,"dimRatio":50,"customOverlayColor":"#886049","isUserOverlayColor":false,"style":{"color":{"duotone":"var:preset|duotone|dark-grayscale"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-cover"><span aria-hidden="true" class="wp-block-cover__background has-background-dim" style="background-color:#886049"></span><img class="wp-block-cover__image-background wp-image-2100" alt="" src="https://picsum.photos/1024/430" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size">Cover / Hero</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->

<!-- wp:paragraph -->
<p>This is a paragraph block. Frankfurter beef esse do non turducken strip steak sint in pork chop commodo doner sirloin beef ribs. Qui doner boudin, turkey prosciutto beef ribs sed aliqua. Occaecat quis picanha, pork chop fatback swine dolore. Tongue aliquip fatback, qui mollit tempor ut ribeye. Duis spare ribs eu fugiat eiusmod dolore proident pork chop minim et drumstick irure in cow chicken. Cillum nisi sunt t-bone pariatur.</p>
<!-- /wp:paragraph -->

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

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

<!-- wp:image {"id":123,"className":"size-large"} -->
<figure class="wp-block-image size-large"><img src="https://picsum.photos/800/520" alt="Alt text" class="wp-image-123"/><figcaption class="wp-element-caption">Image caption text goes here.</figcaption></figure>
<!-- /wp:image -->

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

<!-- wp:image {"sizeSlug":"large","align":"right"} -->
<figure class="wp-block-image alignright size-large"><img src="https://picsum.photos/200/300" alt=""/><figcaption class="wp-element-caption">Right aligned</figcaption></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Frankfurter beef esse do non turducken strip steak sint in pork chop commodo doner sirloin beef ribs. Qui doner boudin, turkey prosciutto beef ribs sed aliqua. Occaecat quis picanha, pork chop fatback swine dolore. Tongue aliquip fatback, qui mollit tempor ut ribeye. Duis spare ribs eu fugiat eiusmod dolore proident pork chop minim et drumstick irure in cow chicken. Cillum nisi sunt t-bone pariatur.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Buffalo porchetta lorem, pork belly strip steak labore qui occaecat nisi in hamburger. Tail ipsum pork chop do elit in deserunt cupidatat cupim ball tip cow veniam sed. Cow t-bone in salami magna ut. Elit sirloin tri-tip, ham hock enim reprehenderit tongue fugiat chicken ribeye ham beef ribs cupim consequat ut. Drumstick nulla kevin picanha est pork chop anim elit ribeye fatback burgdoggen. Ball tip brisket in venison. Shank irure ipsum pariatur nulla.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"sizeSlug":"large","align":"left"} -->
<figure class="wp-block-image alignleft size-large"><img src="https://picsum.photos/300/200" alt=""/><figcaption class="wp-element-caption">Left aligned</figcaption></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Bacon deserunt commodo, aliquip qui pork loin beef. Pork jowl qui eiusmod, in consectetur ipsum. Tenderloin corned beef in strip steak ullamco, spare ribs do fatback. Short loin sausage picanha fugiat veniam esse velit frankfurter meatball id eu pancetta pariatur beef. Fugiat venison eiusmod kielbasa capicola, chuck nulla pork chop doner mollit beef ribs beef ipsum.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>In pork belly labore ut chislic sirloin bresaola do leberkas fatback flank shank magna veniam. Flank chuck incididunt esse nisi sed ground round jowl. Ex voluptate adipisicing turkey tail shank, ground round pastrami kevin id exercitation. Cupim jowl excepteur swine.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"sizeSlug":"large","align":"center"} -->
<figure class="wp-block-image aligncenter size-large"><img src="https://picsum.photos/400/220" alt=""/><figcaption class="wp-element-caption">Center aligned</figcaption></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Veniam buffalo exercitation ground round dolor non, tri-tip short ribs hamburger cillum strip steak est pork chop. Bacon duis irure bresaola meatball flank. Corned beef flank ut, shankle pork loin tempor beef ribs proident duis nulla officia sint id burgdoggen. Jerky turkey excepteur dolore eu laborum biltong venison aliquip picanha mollit leberkas. Jerky sint chicken, esse t-bone nulla prosciutto anim. Ground round burgdoggen cupidatat nulla ut laborum pastrami deserunt tri-tip et. Ham brisket sed, qui officia est buffalo lorem.</p>
<!-- /wp:paragraph -->

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

<!-- wp:paragraph -->
<p>Paragraph of text, just to space out these headers for previewing purposes.</p>
<!-- /wp:paragraph -->

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

<!-- wp:paragraph -->
<p>Paragraph of text, just to space out these headers for previewing purposes.</p>
<!-- /wp:paragraph -->

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

<!-- wp:paragraph -->
<p>Paragraph of text, just to space out these headers for previewing purposes.</p>
<!-- /wp:paragraph -->

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

<!-- wp:paragraph -->
<p>Paragraph of text, just to space out these headers for previewing purposes.</p>
<!-- /wp:paragraph -->

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

<!-- wp:paragraph -->
<p>Paragraph of text, just to space out these headers for previewing purposes.</p>
<!-- /wp:paragraph -->

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

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

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

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

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

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

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

<!-- wp:paragraph -->
<p>Another paragraph of text.</p>
<!-- /wp:paragraph -->

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

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

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

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

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

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

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

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

<!-- wp:paragraph -->
<p>This is a quote block.</p>
<!-- /wp:paragraph --><cite>— Citation</cite></blockquote>
<!-- /wp:quote -->

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

<!-- wp:code -->
<pre class="wp-block-code"><code>console.log("I am code for displaying as content.");</code></pre>
<!-- /wp:code -->

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

<!-- wp:table {"hasFixedLayout":false} -->
<figure class="wp-block-table"><table><tbody><tr><td>Row 1, Cell 1</td><td>Row 1, Cell 2</td></tr><tr><td>Row 2, Cell 1</td><td>Row 2, Cell 2</td></tr></tbody></table></figure>
<!-- /wp:table -->

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

<!-- wp:audio -->
<figure class="wp-block-audio"><audio controls src="https://file-examples.com/storage/fe2465184067ef97996fb41/2017/11/file_example_MP3_700KB.mp3"></audio></figure>
<!-- /wp:audio -->

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

<!-- wp:video -->
<figure class="wp-block-video"><video controls src="https://file-examples.com/storage/fe2465184067ef97996fb41/2017/04/file_example_MP4_480_1_5MG.mp4"></video></figure>
<!-- /wp:video -->

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

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"primary","textColor":"background"} -->
<div class="wp-block-button"><a class="wp-block-button__link has-background-color has-primary-background-color has-text-color has-background wp-element-button">Primary</a></div>
<!-- /wp:button -->

<!-- wp:button {"backgroundColor":"primary","textColor":"background","className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-background-color has-primary-background-color has-text-color has-background wp-element-button">Secondary (outline)</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Horizontal Rule (divider)</h3>
<!-- /wp:heading -->

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

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

<!-- wp:embed {"url":"https://youtu.be/_Gjn0SsS9CA?si=iCDVv4COQVSD1hpv","type":"video","providerNameSlug":"youtube","responsive":true,"className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
https://youtu.be/_Gjn0SsS9CA?si=iCDVv4COQVSD1hpv
</div></figure>
<!-- /wp:embed -->

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

<!-- wp:gallery {"linkTo":"none"} -->
<figure class="wp-block-gallery has-nested-images columns-default is-cropped"><!-- wp:image {"id":2180,"className":"size-large"} -->
<figure class="wp-block-image size-large"><img src="https://picsum.photos/250/220" alt="" class="wp-image-2180"/></figure>
<!-- /wp:image -->

<!-- wp:image {"id":2179,"className":"size-large"} -->
<figure class="wp-block-image size-large"><img src="https://picsum.photos/250/220" alt="" class="wp-image-2179"/></figure>
<!-- /wp:image -->

<!-- wp:image {"id":2172,"className":"size-large"} -->
<figure class="wp-block-image size-large"><img src="https://picsum.photos/250/220" alt="" class="wp-image-2172"/></figure>
<!-- /wp:image -->

<!-- wp:image {"id":2170,"className":"size-large"} -->
<figure class="wp-block-image size-large"><img src="https://picsum.photos/250/220" alt="" class="wp-image-2170"/></figure>
<!-- /wp:image -->

<!-- wp:image {"id":2169,"className":"size-large"} -->
<figure class="wp-block-image size-large"><img src="https://picsum.photos/250/220" alt="" class="wp-image-2169"/></figure>
<!-- /wp:image -->

<!-- wp:image {"id":2163,"className":"size-large"} -->
<figure class="wp-block-image size-large"><img src="https://picsum.photos/250/220" alt="" class="wp-image-2163"/></figure>
<!-- /wp:image --></figure>
<!-- /wp:gallery -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Media &amp; Text</h3>
<!-- /wp:heading -->

<!-- wp:media-text {"mediaId":2170,"mediaLink":"/","mediaType":"image"} -->
<div class="wp-block-media-text is-stacked-on-mobile"><figure class="wp-block-media-text__media"><img src="https://picsum.photos/500/300" alt="" class="size-full"/></figure><div class="wp-block-media-text__content">
<!-- wp:paragraph {"placeholder":"Content…"} -->
<p>Media &amp; Text blocks allow for image / text layouts like this.</p>
<!-- /wp:paragraph -->
</div></div>
<!-- /wp:media-text -->

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

<!-- wp:details -->
<details class="wp-block-details"><summary>Details Expandable Content</summary><!-- wp:paragraph {"placeholder":"Type / to add a hidden block"} -->
<p>This appears when expanded.</p>
<!-- /wp:paragraph --></details>
<!-- /wp:details -->

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

<!-- wp:pullquote -->
<figure class="wp-block-pullquote"><blockquote><p>Pull quotes are fancy block quotes with an enhanced style.</p><cite>-Kevin Leary</cite></blockquote></figure>
<!-- /wp:pullquote -->

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

<!-- wp:social-links -->
<ul class="wp-block-social-links"><!-- wp:social-link {"service":"wordpress"} /-->

<!-- wp:social-link {"service":"facebook"} /-->

<!-- wp:social-link {"service":"linkedin"} /-->

<!-- wp:social-link {"service":"x"} /-->

<!-- wp:social-link {"service":"instagram"} /-->

<!-- wp:social-link {"service":"tiktok"} /--></ul>
<!-- /wp:social-links -->

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

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

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

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

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

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

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

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

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

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

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

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

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