Skip to content

Instantly share code, notes, and snippets.

@bph
Last active October 19, 2023 15:21
Show Gist options
  • Star 10 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save bph/335ddef358bb41efdcd159cbc76f582e to your computer and use it in GitHub Desktop.
Save bph/335ddef358bb41efdcd159cbc76f582e to your computer and use it in GitHub Desktop.
Blocks for Themes Test
<!-- wp:paragraph -->
<p><a href="https://gist.github.com/bph/335ddef358bb41efdcd159cbc76f582e">https://gist.github.com/bph/335ddef358bb41efdcd159cbc76f582e</a></p>
<!-- /wp:paragraph -->
<!-- wp:heading {"className":"eplus-oOhLNH"} -->
<h2 class="eplus-oOhLNH">Common Blocks / Formatting / Layout Elements / Widgets and Embeds</h2>
<!-- /wp:heading -->
<!-- wp:list {"className":"eplus-eI3gin"} -->
<ul class="eplus-eI3gin"><li><a href="#images">Images</a> (Single image, cover image, gallery </li><li><a href="#quotes">Pull Quote / Quote</a></li><li><a href="#verse">Verse</a></li><li><a href="#buttons">Buttons</a></li><li><a href="#socialicons" data-type="internal" data-id="#socialicons">Social Icons</a></li><li><a href="#columns">Columns </a> Text (only) columns / Columns experimental</li><li><a href="#cover" data-type="internal" data-id="#cover">Cover</a> with CAT + button</li><li><a href="#paragraphs">Paragraph</a> </li><li><a href="#audio">Audio</a> </li><li><a href="#video">Video</a></li><li><a href="#widgets">Widgets</a></li><li><a href="#lists">Lists</a></li><li><a href="#table">Table</a></li><li><a href="#embeds">Embeds</a></li></ul>
<!-- /wp:list -->
<!-- wp:paragraph {"className":"eplus-tZr99I","fontSize":"small"} -->
<p class="eplus-tZr99I has-small-font-size"><em>Note: The jump links do not work when there are page breaks on the page.</em></p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"className":"eplus-V2l3JY"} -->
<p class="eplus-V2l3JY"><em>Featured Image: Photo by&nbsp;<a href="https://unsplash.com/@iurte?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Iker Urteaga</a>&nbsp;on&nbsp;<a href="https://unsplash.com/s/photos/blocks?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a> </em></p>
<!-- /wp:paragraph -->
<!-- wp:heading {"className":"eplus-N6fqoo"} -->
<h2 class="eplus-N6fqoo" id="images">Images</h2>
<!-- /wp:heading -->
<!-- wp:heading {"className":"eplus-Sr9292"} -->
<h2 class="eplus-Sr9292">Cover Image</h2>
<!-- /wp:heading -->
<!-- wp:cover {"url":"https://icodeforapurpose.com/wp-content/uploads/2021/09/IMG_20161228_062135_967-scaled.jpg","id":27,"hasParallax":true,"className":"eplus-pnBZsZ","style":{"color":{}}} -->
<div class="wp-block-cover has-background-dim has-parallax eplus-pnBZsZ" style="background-image:url(https://icodeforapurpose.com/wp-content/uploads/2021/09/IMG_20161228_062135_967-scaled.jpg)"><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","className":"eplus-yptdaD","fontSize":"large"} -->
<p class="has-text-align-center eplus-yptdaD has-large-font-size"><em>Creating a post <br>with all the core blocks <br>to use for testing Themes</em></p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->
<!-- wp:heading {"className":"eplus-22WMjk"} -->
<h2 class="eplus-22WMjk">Single Image</h2>
<!-- /wp:heading -->
<!-- wp:image {"align":"center","id":152,"sizeSlug":"large","linkDestination":"none","className":"eplus-oBLN3q"} -->
<div class="wp-block-image eplus-oBLN3q"><figure class="aligncenter size-large"><img src="https://icodeforapurpose.com/wp-content/uploads/2020/10/shahadat-rahman-BfrQnKBulYQ-unsplash-1024x683.jpg" alt="" class="wp-image-152"/></figure></div>
<!-- /wp:image -->
<!-- wp:heading {"className":"eplus-DLAnTg"} -->
<h2 class="eplus-DLAnTg">Image Gallery</h2>
<!-- /wp:heading -->
<!-- wp:gallery {"ids":[294,255,224,120,121,122],"columns":2,"linkTo":"none","className":"alignnone eplus-pTc0XV"} -->
<figure class="wp-block-gallery columns-2 is-cropped alignnone eplus-pTc0XV"><ul class="blocks-gallery-grid"><li class="blocks-gallery-item"><figure><img src="https://icodeforapurpose.com/wp-content/uploads/2020/11/Screen-Shot-2020-11-18-at-6.56.43-PM-web-1024x591.png" alt="" data-id="294" data-full-url="https://icodeforapurpose.com/wp-content/uploads/2020/11/Screen-Shot-2020-11-18-at-6.56.43-PM-web.png" data-link="https://icodeforapurpose.com/20-wordpress-plugins-drafted-at-the-mega-meetup/screen-shot-2020-11-18-at-6-56-43-pm-web/" class="wp-image-294"/></figure></li><li class="blocks-gallery-item"><figure><img src="https://icodeforapurpose.com/wp-content/uploads/2020/11/ali-hajian-LPylXWfMpgE-unsplash-changed-1024x460.jpg" alt="" data-id="255" data-full-url="https://icodeforapurpose.com/wp-content/uploads/2020/11/ali-hajian-LPylXWfMpgE-unsplash-changed.jpg" data-link="https://icodeforapurpose.com/tracking-php-8-issues-around-wordpress/ali-hajian-lpylxwfmpge-unsplash-changed/" class="wp-image-255"/></figure></li><li class="blocks-gallery-item"><figure><img src="https://icodeforapurpose.com/wp-content/uploads/2020/10/states-of-a-programmer-1.png" alt="" data-id="224" data-full-url="https://icodeforapurpose.com/wp-content/uploads/2020/10/states-of-a-programmer-1.png" data-link="https://icodeforapurpose.com/give-serendipity-a-chance/states-of-a-programmer-1/" class="wp-image-224"/></figure></li><li class="blocks-gallery-item"><figure><img src="https://icodeforapurpose.com/wp-content/uploads/2020/10/PXL_20201024_164932797-1024x576.jpg" alt="" data-id="120" data-full-url="https://icodeforapurpose.com/wp-content/uploads/2020/10/PXL_20201024_164932797-scaled.jpg" data-link="https://icodeforapurpose.com/pxl_20201024_164932797/" class="wp-image-120"/></figure></li><li class="blocks-gallery-item"><figure><img src="https://icodeforapurpose.com/wp-content/uploads/2020/10/cookie-the-pom-siNDDi9RpVY-unsplash-web-1024x683.jpg" alt="" data-id="121" data-full-url="https://icodeforapurpose.com/wp-content/uploads/2020/10/cookie-the-pom-siNDDi9RpVY-unsplash-web.jpg" data-link="https://icodeforapurpose.com/cookie-the-pom-sinddi9rpvy-unsplash-web/" class="wp-image-121"/></figure></li><li class="blocks-gallery-item"><figure><img src="https://icodeforapurpose.com/wp-content/uploads/2020/10/joel-muniz-BErJJL_KsjA-unsplash-web-1024x683.jpg" alt="" data-id="122" data-full-url="https://icodeforapurpose.com/wp-content/uploads/2020/10/joel-muniz-BErJJL_KsjA-unsplash-web.jpg" data-link="https://icodeforapurpose.com/joel-muniz-berjjl_ksja-unsplash-web/" class="wp-image-122"/></figure></li></ul></figure>
<!-- /wp:gallery -->
<!-- wp:heading {"className":"eplus-qgG0JA"} -->
<h2 class="eplus-qgG0JA" id="quotes"><em>Let's talk about the Page Break in Quotes</em></h2>
<!-- /wp:heading -->
<!-- wp:quote {"align":"center","className":"eplus-syZ7TQ"} -->
<blockquote class="wp-block-quote has-text-align-center eplus-syZ7TQ"><p>This block allows you to set break points on your post. Visitors of your blog are then presented with content split into multiple pages.</p><cite>Gutenberg Dev Team</cite></blockquote>
<!-- /wp:quote -->
<!-- wp:quote {"className":"is-large eplus-yRxB6s"} -->
<blockquote class="wp-block-quote is-large eplus-yRxB6s"><p>Maybe someone else said it better -- add some quoted text.</p><cite>Henry PauliSan</cite></blockquote>
<!-- /wp:quote -->
<!-- wp:pullquote {"mainColor":"green","textColor":"black","className":"has-background has-green-background-color alignnone eplus-GYeGFP is-style-solid-color"} -->
<figure class="wp-block-pullquote has-background has-green-background-color alignnone eplus-GYeGFP is-style-solid-color"><blockquote class="has-text-color has-black-color"><p><strong>Pullquote</strong><br>Highlight a quote from your post or page by displaying it as a graphic element.</p><cite>Gutenberg Dev Team</cite></blockquote></figure>
<!-- /wp:pullquote -->
<!-- wp:heading {"className":"eplus-70zgV1"} -->
<h2 class="eplus-70zgV1" id="verse">Verse Block</h2>
<!-- /wp:heading -->
<!-- wp:verse {"textAlign":"center","className":"eplus-Orf9ZQ"} -->
<pre class="wp-block-verse has-text-align-center eplus-Orf9ZQ"><strong>What it is</strong><br><br>It is nonsense<br>says reason<br>It is what it is<br>says love<br><br>It is calamity<br>says calculation<br>It is nothing but pain<br>says fear<br>It is hopeless<br>says insight<br>It is what it is<br>says love<br><br>It is ludicrous<br>says pride<br>It is foolish<br>says caution<br>It is impossible<br>says experience<br>It is what it is <br>says love. <br><br><em>Erich Fried</em></pre>
<!-- /wp:verse -->
<!-- wp:heading {"className":"buttons eplus-d1HYiS"} -->
<h2 class="buttons eplus-d1HYiS" id="buttons">Buttons</h2>
<!-- /wp:heading -->
<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link" href="https://gutenbergtimes.com/subscribe">Subscribe </a></div>
<!-- /wp:button -->
<!-- wp:button {"style":{"color":{"background":"#19597c"}},"className":"alignnone eplus-I9FMdq"} -->
<div class="wp-block-button alignnone eplus-I9FMdq"><a class="wp-block-button__link has-background" href="mailto:birgit.pauli@gmail.com" style="background-color:#19597c"><em><strong>Send me an email</strong></em><em><strong></strong></em></a></div>
<!-- /wp:button -->
<!-- wp:button {"backgroundColor":"luminous vivid amber","textColor":"very dark gray","align":"center","className":"eplus-qoA26U"} -->
<div class="wp-block-button aligncenter eplus-qoA26U"><a class="wp-block-button__link has-very-dark-gray-color has-luminous-vivid-amber-background-color has-text-color has-background" href="http://meetup.com/wordpress-swfl">And then we have the big button that<br> goes all the way to the end of the page</a></div>
<!-- /wp:button -->
<!-- wp:button {"align":"right","style":{"color":{"background":"#3d1ed6"}},"className":"eplus-wAs9zZ"} -->
<div class="wp-block-button alignright eplus-wAs9zZ"><a class="wp-block-button__link has-background" href="http://gutenbergtimes.com" style="background-color:#3d1ed6">Go to Gutenberg Times</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->
<!-- wp:separator {"className":"eplus-Y5Ezrh"} -->
<hr class="wp-block-separator eplus-Y5Ezrh"/>
<!-- /wp:separator -->
<!-- wp:heading -->
<h2 id="socialicons">Social Profile Icons</h2>
<!-- /wp:heading -->
<!-- wp:social-links {"className":"eplus-rFbZfY"} -->
<ul class="wp-block-social-links eplus-rFbZfY"><!-- wp:social-link {"url":"https://twitter.com/gutenbergtimes","service":"twitter","label":"Share on Twitter","className":" eplus-EXMSUp"} /-->
<!-- wp:social-link {"service":"linkedin","label":"share on LinkedIn","className":" eplus-h260o3"} /-->
<!-- wp:social-link {"service":"chain","label":"Grab the linkl","className":" eplus-VmzUuy"} /-->
<!-- wp:social-link {"url":"https://instagram.com/idx","service":"instagram"} /--></ul>
<!-- /wp:social-links -->
<!-- wp:heading {"className":"eplus-AGsSkM"} -->
<h2 class="eplus-AGsSkM" id="columns">Columns</h2>
<!-- /wp:heading -->
<!-- wp:heading {"className":"eplus-ZXpssl"} -->
<h2 class="eplus-ZXpssl">Text only columns</h2>
<!-- /wp:heading -->
<!-- wp:text-columns {"columns":3,"width":"center","className":"eplus-sA0lXz"} -->
<div class="wp-block-text-columns aligncenter columns-3 eplus-sA0lXz"><div class="wp-block-column"><p>This is my first column This is my first <strong>columnThis</strong> is my first columnThis is my first columnThis is my first columnThis is my first columnThis is my first columnThis is my first columnThis is my first columnThis is my first columnThis is my first columnThis is my first columnThis is my first column</p></div><div class="wp-block-column"><p><em>This is my second columnThis is my second columnThis is my second columnThis is my second columnThis is my second columnThis is my second columnThis is my second columnThis is my second columnThis is my second columnThis is my second columnThis is my second column</em></p></div><div class="wp-block-column"><p>This is my third column<br>This is my third columnThis is my third columnThis is my third columnThis is my third columnThis is my third columnThis is my third columnThis is my third columnThis is my third columnThis is my third columnThis is my third column<br></p></div></div>
<!-- /wp:text-columns -->
<!-- wp:columns {"className":"eplus-LxfAJd"} -->
<div class="wp-block-columns eplus-LxfAJd"><!-- wp:column {"className":"eplus-gqZ4tI"} -->
<div class="wp-block-column eplus-gqZ4tI"><!-- wp:heading {"align":"center","className":"layout-column-1 eplus-y3TnZd"} -->
<h2 class="layout-column-1 eplus-y3TnZd">This is the title of the first column</h2>
<!-- /wp:heading -->
<!-- wp:image {"align":"center","id":188,"sizeSlug":"large","linkDestination":"none","className":"layout-column-1 eplus-1Sr1q3"} -->
<div class="wp-block-image layout-column-1 eplus-1Sr1q3"><figure class="aligncenter size-large"><img src="https://icodeforapurpose.com/wp-content/uploads/2020/10/WordCamp-US-2019-Francesca-SiteGround-1024x621.jpg" alt="WordCamp US 2019 - SiteGround Booth Sponsor hall" class="wp-image-188"/></figure></div>
<!-- /wp:image -->
<!-- wp:paragraph {"style":{"color":{"text":"#ffffff"}},"backgroundColor":"vivid cyan blue","className":"layout-column-1 eplus-qE7KgX"} -->
<p class="layout-column-1 eplus-qE7KgX has-vivid-cyan-blue-background-color has-text-color has-background" style="color:#ffffff">Then we need some more text that's something like a summary or a teaser.</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"className":"layout-column-1 eplus-WPHRt0"} -->
<p class="layout-column-1 eplus-WPHRt0">Then we need some more text that's something like a summary or a teaser.</p>
<!-- /wp:paragraph -->
<!-- wp:button {"backgroundColor":"vivid cyan blue","align":"center","className":"layout-column-1 eplus-QBnaaQ"} -->
<div class="wp-block-button aligncenter layout-column-1 eplus-QBnaaQ"><a class="wp-block-button__link has-vivid-cyan-blue-background-color has-background" href="#widgets">Read more</a></div>
<!-- /wp:button --></div>
<!-- /wp:column -->
<!-- wp:column {"className":"eplus-JoF8xl"} -->
<div class="wp-block-column eplus-JoF8xl"><!-- wp:heading {"align":"center","className":"layout-column-2 eplus-GPtWZ0"} -->
<h2 class="layout-column-2 eplus-GPtWZ0">The second column has a title </h2>
<!-- /wp:heading -->
<!-- wp:image {"id":255,"sizeSlug":"large","linkDestination":"none","className":"layout-column-2 eplus-WAzkrq"} -->
<figure class="wp-block-image size-large layout-column-2 eplus-WAzkrq"><img src="https://icodeforapurpose.com/wp-content/uploads/2020/11/ali-hajian-LPylXWfMpgE-unsplash-changed-1024x460.jpg" alt="" class="wp-image-255"/></figure>
<!-- /wp:image -->
<!-- wp:paragraph {"align":"center","style":{"color":{"text":"#ffffff"}},"backgroundColor":"light green cyan","className":"layout-column-2 eplus-FtmJbx"} -->
<p class="has-text-align-center layout-column-2 eplus-FtmJbx has-light-green-cyan-background-color has-text-color has-background" style="color:#ffffff">Then we need some more text that's something like a summary or a teaser.</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"className":"layout-column-2 eplus-oZ7EeU"} -->
<p class="layout-column-2 eplus-oZ7EeU">Then we need some more text that's something like a summary or a teaser.</p>
<!-- /wp:paragraph -->
<!-- wp:button {"backgroundColor":"vivid green cyan","align":"center","className":"layout-column-2 eplus-ALmoCR"} -->
<div class="wp-block-button aligncenter layout-column-2 eplus-ALmoCR"><a class="wp-block-button__link has-vivid-green-cyan-background-color has-background" href="#columns">Enjoy the ride</a></div>
<!-- /wp:button --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
<!-- wp:heading -->
<h2 id="cover">Cover Block</h2>
<!-- /wp:heading -->
<!-- wp:cover {"url":"https://icodeforapurpose.com/wp-content/uploads/2021/02/PXL_20210608_170652374-scaled.jpg","id":573,"minHeight":400} -->
<div class="wp-block-cover has-background-dim" style="min-height:400px"><img class="wp-block-cover__image-background wp-image-573" alt="" src="https://icodeforapurpose.com/wp-content/uploads/2021/02/PXL_20210608_170652374-scaled.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:heading {"textAlign":"center"} -->
<h2 class="has-text-align-center">The pond of our Lunch Loop</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">The sign warns of alligators but all we see are turtles and little fish</p>
<!-- /wp:paragraph -->
<!-- wp:buttons {"contentJustification":"center"} -->
<div class="wp-block-buttons is-content-justification-center"><!-- wp:button {"textColor":"white","width":50,"style":{"color":{"background":"#eaa743"}},"fontSize":"large"} -->
<div class="wp-block-button has-custom-width wp-block-button__width-50 has-custom-font-size has-large-font-size"><a class="wp-block-button__link has-white-color has-text-color has-background" href="https://goo.gl/maps/GFUNF6qjP9PQKfXx9" style="background-color:#eaa743">Learn more about the park</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div></div>
<!-- /wp:cover -->
<!-- wp:heading {"className":"eplus-AUZcFE"} -->
<h2 class="eplus-AUZcFE" id="paragraphs">Examples of Paragraphs </h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"dropCap":true,"style":{"color":{"text":"#1c6087"}},"backgroundColor":"very light gray","className":"eplus-qvh5OB","fontSize":"large"} -->
<p class="has-drop-cap eplus-qvh5OB has-very-light-gray-background-color has-text-color has-background has-large-font-size" style="color:#1c6087">The experimental columns with nested blocks: two columns, each with a title, a graphic, a teaser and a link.</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"style":{"color":{"text":"#ffffff"}},"backgroundColor":"light green cyan","className":"eplus-yEEgHq","fontSize":"large"} -->
<p class="eplus-yEEgHq has-light-green-cyan-background-color has-text-color has-background has-large-font-size" style="color:#ffffff"><em>Careful, though, nested blocks are still very experimental </em></p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"style":{"typography":{"fontSize":20}},"className":"eplus-ms3SAm"} -->
<p class="eplus-ms3SAm" style="font-size:20px">Now let’s look a broader look at donors in general. Many nonprofits decide that it is easier to use a technical tool called Software as a Service (SaaS), to help organize their fundraising than it is to do the administrative work themselves. There are many donation management service companies, each of which has their own privacy policy regarding the protection of data.</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"style":{"color":{"text":"#3012c3"}},"backgroundColor":"very light gray","className":"eplus-aO1ltC"} -->
<p class="eplus-aO1ltC has-very-light-gray-background-color has-text-color has-background" style="color:#3012c3">Most of the ones we have researched treat donor data as the property of the nonprofit organization as opposed to the individual owning their data. In addition to the email data described above, more detail is suggested to help improve campaign results and event attendance. For example, if you ask donors to list their employer, it is because a simple search by the SaaS provider can identify those firms doing matching contributions.</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"className":"eplus-x5WyGL"} -->
<p class="eplus-x5WyGL">If your wife has a separate income, the same may apply to her. Your employer may want to make a contribution regardless of matching funds, and the information is requested about who should be approached. Care to approach a relative or neighbor for a contribution, then you become a source for their data.</p>
<!-- /wp:paragraph -->
<!-- wp:heading {"className":"eplus-p51Ksp"} -->
<h2 class="eplus-p51Ksp" id="audio">Audio Block</h2>
<!-- /wp:heading -->
<!-- wp:audio {"id":3319,"align":"center","className":"eplus-Oj7VCo"} -->
<figure class="wp-block-audio aligncenter eplus-Oj7VCo"><audio controls src="https://icodeforapurpose.com/wp-content/uploads/2021/09/gb-changelog-Episode-52-2021-09-16.mp3" preload="metadata"></audio></figure>
<!-- /wp:audio -->
<!-- wp:heading {"className":"eplus-aLjOig"} -->
<h2 class="eplus-aLjOig" id="video">Video Block</h2>
<!-- /wp:heading -->
<!-- wp:video {"id":3320,"className":"eplus-Uk6NX9"} -->
<figure class="wp-block-video eplus-Uk6NX9"><video controls src="https://icodeforapurpose.com/wp-content/uploads/2021/09/pPufoqSLHl.mp4"></video></figure>
<!-- /wp:video -->
<!-- wp:heading {"className":"eplus-O9e8ZF"} -->
<h2 class="eplus-O9e8ZF">Code Block</h2>
<!-- /wp:heading -->
<!-- wp:code {"className":"eplus-WHrwSe"} -->
<pre class="wp-block-code eplus-WHrwSe"><code>import React from 'react';
class StorePicker extends React.Component {
render() {
// Any where else
return &lt;p&gt;Hello&lt;/p&gt;
}
}
export default StorePicker;
</code></pre>
<!-- /wp:code -->
<!-- wp:heading {"className":"eplus-z5e0vA"} -->
<h2 class="eplus-z5e0vA" id="widgets">Widgets</h2>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p><strong>Page List</strong></p>
<!-- /wp:paragraph -->
<!-- wp:page-list /-->
<!-- wp:heading {"className":"eplus-oapqd4"} -->
<h2 class="eplus-oapqd4">Latest Post</h2>
<!-- /wp:heading -->
<!-- wp:latest-posts {"postsToShow":6,"displayPostDate":true,"postLayout":"grid","columns":2,"className":" eplus-Yhw3BK"} /-->
<!-- wp:heading {"className":"eplus-YGCJ1M"} -->
<h2 class="eplus-YGCJ1M">Categories</h2>
<!-- /wp:heading -->
<!-- wp:categories {"showHierarchy":true,"showPostCounts":true,"className":" eplus-lled7G"} /-->
<!-- wp:heading {"className":"eplus-tdTe4d"} -->
<h2 class="eplus-tdTe4d" id="lists">Lists</h2>
<!-- /wp:heading -->
<!-- wp:list {"className":"eplus-LUT3RB"} -->
<ul class="eplus-LUT3RB"><li><a href="https://tam.blog/2017/12/gutenberg-inspired-redesign/">Gutenberg inspired redesign</a> (Dec 29, 2017)</li><li><a href="https://tam.blog/2018/01/gutenberg-design-basics/">Gutenberg design basics</a> (Jan 8, 2018)</li><li>Sidetrack: <a href="https://tam.blog/reading-list/">Tammie's recommended reading list</a></li></ul>
<!-- /wp:list -->
<!-- wp:list {"className":"eplus-sCZDzH"} -->
<ul class="eplus-sCZDzH"><li><a href="https://riad.blog/2017/12/30/wordpress-core-the-next-battles/">WordPress Core, the next battles</a> (Dec 30, 2018)</li><li><a href="https://riad.blog/2017/12/11/with-gutenberg-what-happens-to-my-custom-fields/">With Gutenberg, what happens to my Custom Fields?</a> (Dec 11, 2018)</li><li><a href="https://riad.blog/2017/10/16/one-thousand-and-one-way-to-extend-gutenberg-today/">One thousand and one way to extend Gutenberg today</a> (Oct 16, 2018)</li><li><a href="https://riad.blog/2017/10/06/how-gutenberg-is-changing-wordpress-development/">How Gutenberg is changing WordPress Development?</a> (Oct 6, 2018)</li></ul>
<!-- /wp:list -->
<!-- wp:heading {"className":"eplus-pyQQCH"} -->
<h2 class="eplus-pyQQCH" id="table">Table</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"style":{"color":{"text":"#f9ffff"},"typography":{"fontSize":26}},"backgroundColor":"vivid cyan blue","className":"eplus-UfIyM5"} -->
<p class="eplus-UfIyM5 has-vivid-cyan-blue-background-color has-text-color has-background" style="color:#f9ffff;font-size:26px"><strong>Population in Collier County, Florida</strong></p>
<!-- /wp:paragraph -->
<!-- wp:table {"className":"eplus-muYCYZ"} -->
<figure class="wp-block-table eplus-muYCYZ"><table><tbody><tr><td><strong>Total Population</strong></td><td><strong>Year</strong></td></tr><tr><td>321,520</td><td>2010<br></td></tr><tr><td>327,541<br></td><td>2011</td></tr><tr><td>332,332</td><td>2012</td></tr><tr><td>339,224</td><td>2013</td></tr></tbody></table></figure>
<!-- /wp:table -->
<!-- wp:heading {"className":"eplus-SnFqHn"} -->
<h2 class="eplus-SnFqHn">Embedding</h2>
<!-- /wp:heading -->
<!-- wp:heading {"className":"eplus-t8ByJN"} -->
<h2 class="eplus-t8ByJN">Tweet</h2>
<!-- /wp:heading -->
<!-- wp:embed {"url":"https://twitter.com/gutenbergtimes/status/1009883503624904707","type":"rich","providerNameSlug":"twitter","responsive":true} -->
<figure class="wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter"><div class="wp-block-embed__wrapper">
https://twitter.com/gutenbergtimes/status/1009883503624904707
</div></figure>
<!-- /wp:embed -->
<!-- wp:heading {"className":"eplus-JrV4n3"} -->
<h2 class="eplus-JrV4n3">WordPress Post</h2>
<!-- /wp:heading -->
<!-- wp:embed {"url":"https://gutenbergtimes.com/53-resources-for-developers-designers-building-blocks-for-gutenberg/","type":"wp-embed","providerNameSlug":"gutenberg-times"} -->
<figure class="wp-block-embed is-type-wp-embed is-provider-gutenberg-times wp-block-embed-gutenberg-times"><div class="wp-block-embed__wrapper">
https://gutenbergtimes.com/53-resources-for-developers-designers-building-blocks-for-gutenberg/
</div><figcaption><strong>Still some place for a caption for this embed block</strong></figcaption></figure>
<!-- /wp:embed -->
<!-- wp:heading {"className":"eplus-ZDwaHU"} -->
<h2 class="eplus-ZDwaHU">YouTube Video</h2>
<!-- /wp:heading -->
<!-- wp:embed {"url":"https://www.youtube.com/watch?v=7XzPPnHGp_0","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://www.youtube.com/watch?v=7XzPPnHGp_0
</div><figcaption><em>Additional Caption can go here</em></figcaption></figure>
<!-- /wp:embed -->
@bph
Copy link
Author

bph commented Jun 22, 2018

Before you can test it.

  • After you created a copy of your site
  • Make sure your theme is activated
  • And the Gutenberg feature plugin is installed. (6/22 - created and tested with Gutenberg v 3.1)

Use the Blocks post to test your Theme

  • Add a new Post
  • Change to Code Editor
  • Copy / Paste from this text file
  • Got back to visual editor
  • Safe as draft and preview it

Find an instructional video on YouTube:

Image Blocks

This should work, including the images, if you use it on a public site. The images all point to my personal tech blog site (icodeforapurpose.com). If you want to use the images from your own media library, you would need to either change the reference via HTML code of the block or just create new blocks and delete the current ones.

@allysonsouza
Copy link

Thank you, very useful.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment