Blocks for Themes Test

psl-theme-test.txt

<!-- wp:heading -->
<h2>Common Blocks / Formatting / Layout Elements / Widgets and Embeds</h2>
<!-- /wp:heading -->

<!-- wp:list -->
<ul>
	<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">Button</a></li>
	<li><a href="#columns">Columns </a>   Text (only) columns / Columns experimental</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><br/></li>
	<li><a href="#embeds">Embeds</a></li>
</ul>
<!-- /wp:list -->

<!-- wp:nextpage -->
<!--nextpage-->
<!-- /wp:nextpage -->

<!-- wp:heading -->
<h2 id="images">Images</h2>
<!-- /wp:heading -->

<!-- wp:heading -->
<h3>Cover Image</h3>
<!-- /wp:heading -->

<!-- wp:cover-image {"url":"http://tt.wpswfl.org/wp-content/uploads/2018/05/lucas-gallone-276375-unsplash-web.jpg","id":3285,"hasParallax":true} -->
<div class="wp-block-cover-image has-background-dim has-parallax" style="background-image:url(http://tt.wpswfl.org/wp-content/uploads/2018/05/lucas-gallone-276375-unsplash-web.jpg)">
	<p class="wp-block-cover-image-text"><em>Creating a post <br/>with all the core blocks <br/>to use for testing Themes</em></p>
</div>
<!-- /wp:cover-image -->

<!-- wp:heading -->
<h3>Single Image</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":1511,"align":"center","width":600,"height":328} -->
<figure class="wp-block-image aligncenter is-resized"><img src="http://tt.wpswfl.org/wp-content/uploads/2017/07/Screen-Shot-2017-07-18-at-3.38.34-PM.png" alt="" class="wp-image-1511" width="600" height="328" /></figure>
<!-- /wp:image -->

<!-- wp:heading -->
<h3>Image Gallery</h3>
<!-- /wp:heading -->

<!-- wp:gallery {"columns":2} -->
<ul class="wp-block-gallery alignnone columns-2 is-cropped">
	<li class="blocks-gallery-item">
		<figure><img src="http://tt.wpswfl.org/wp-content/uploads/2017/07/WordCampEurope-Paris-2017.jpg" alt="WordCamp Europe Paris 2017" data-id="1529" /></figure>
	</li>
	<li class="blocks-gallery-item">
		<figure><img src="http://tt.wpswfl.org/wp-content/uploads/2017/07/7985992388_fdd260009c_o-768x576.jpg" alt="" data-id="1519" /></figure>
	</li>
	<li class="blocks-gallery-item">
		<figure><img src="http://tt.wpswfl.org/wp-content/uploads/2017/07/CSSGrid.gif" alt="" data-id="1513" /></figure>
	</li>
	<li class="blocks-gallery-item">
		<figure><img src="http://tt.wpswfl.org/wp-content/uploads/2017/02/REL-FMHaywoodFarmersMarket.jpg" alt="" data-id="1385" /></figure>
	</li>
	<li class="blocks-gallery-item">
		<figure><img src="http://tt.wpswfl.org/wp-content/uploads/2017/03/71percent-nonprofitorgs-techreport2017.png" alt="" data-id="1411" /></figure>
	</li>
	<li class="blocks-gallery-item">
		<figure><img src="http://tt.wpswfl.org/wp-content/uploads/2015/12/ArtFest-Fort-Myers-e1449263530113.jpg" alt="Art at ArtFest in Fort Myers" data-id="873" /></figure>
	</li>
	<li class="blocks-gallery-item">
		<figure><img src="http://tt.wpswfl.org/wp-content/uploads/2015/12/imaginarium-science-center-e1449857322356.jpg" alt="Child at the Imaginarium Science Center" data-id="878" /></figure>
	</li>
</ul>
<!-- /wp:gallery -->

<!-- wp:heading -->
<h2 id="quotes"><em>Let's talk about the Page Break in Quotes</em></h2>
<!-- /wp:heading -->

<!-- wp:quote {"align":"center"} -->
<blockquote class="wp-block-quote" style="text-align:center">
	<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 {"style":2} -->
<blockquote class="wp-block-quote is-large">
	<p>Maybe someone else said it better -- add some quoted text.</p><cite>Henry PauliSan</cite></blockquote>
<!-- /wp:quote -->

<!-- wp:pullquote -->
<blockquote class="wp-block-pullquote alignnone">
	<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>
<!-- /wp:pullquote -->

<!-- wp:nextpage -->
<!--nextpage-->
<!-- /wp:nextpage -->

<!-- wp:heading -->
<h2 id="verse">Verse Block</h2>
<!-- /wp:heading -->

<!-- wp:verse {"textAlign":"center"} -->
<pre class="wp-block-verse" style="text-align:center"><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"} -->
<h2 class="buttons">Buttons</h2>
<!-- /wp:heading -->

<!-- wp:button {"customBackgroundColor":"#19597c"} -->
<div class="wp-block-button alignnone"><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 {"align":"center","backgroundColor":"luminous vivid amber","textColor":"very dark gray"} -->
<div class="wp-block-button aligncenter"><a class="wp-block-button__link has-text-color has-very-dark-gray-color has-background has-luminous-vivid-amber-background-color" href="http://meetup.com/wordpress-sefl">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","customBackgroundColor":"#3d1ed6"} -->
<div class="wp-block-button alignright"><a class="wp-block-button__link has-background" href="http://gutenbergtimes.com" style="background-color:#3d1ed6">Go to Gutenberg Times</a></div>
<!-- /wp:button -->

<!-- wp:separator -->
<hr class="wp-block-separator" />
<!-- /wp:separator -->

<!-- wp:heading -->
<h2 id="columns">Columns</h2>
<!-- /wp:heading -->

<!-- wp:heading -->
<h3>Text only columns</h3>
<!-- /wp:heading -->

<!-- wp:text-columns {"columns":3,"width":"center"} -->
<div class="wp-block-text-columns aligncenter columns-3">
	<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 -->
<div class="wp-block-columns has-2-columns">
	<!-- wp:heading {"align":"center","layout":"column-2"} -->
	<h3 style="text-align:center" class="layout-column-2">The second column has a title </h3>
	<!-- /wp:heading -->

	<!-- wp:heading {"align":"center","layout":"column-1"} -->
	<h3 style="text-align:center" class="layout-column-1">This is the title of the first column</h3>
	<!-- /wp:heading -->

	<!-- wp:image {"id":1410,"align":"center","width":228,"height":152,"layout":"column-1"} -->
	<figure class="wp-block-image aligncenter is-resized layout-column-1"><img src="http://tt.wpswfl.org/wp-content/uploads/2017/03/Session-16NTC.jpg" alt="" class="wp-image-1410" width="228" height="152" /></figure>
	<!-- /wp:image -->

	<!-- wp:image {"id":1529,"width":275,"height":151,"layout":"column-2"} -->
	<figure class="wp-block-image is-resized layout-column-2"><img src="http://tt.wpswfl.org/wp-content/uploads/2017/07/WordCampEurope-Paris-2017.jpg" alt="WordCamp Europe Paris 2017" class="wp-image-1529" width="275" height="151" /></figure>
	<!-- /wp:image -->

	<!-- wp:paragraph {"customTextColor":"#ffffff","backgroundColor":"vivid cyan blue","layout":"column-1"} -->
	<p style="color:#ffffff" class="has-background has-vivid-cyan-blue-background-color layout-column-1">Then we need some more text that's something like a summary or a teaser.</p>
	<!-- /wp:paragraph -->

	<!-- wp:paragraph {"layout":"column-1"} -->
	<p class="layout-column-1">Then we need some more text that's something like a summary or a teaser.</p>
	<!-- /wp:paragraph -->

	<!-- wp:button {"align":"center","backgroundColor":"vivid cyan blue","layout":"column-1"} -->
	<div class="wp-block-button aligncenter layout-column-1"><a class="wp-block-button__link has-background has-vivid-cyan-blue-background-color" href="#widgets">Read more</a></div>
	<!-- /wp:button -->

	<!-- wp:paragraph {"align":"center","customTextColor":"#ffffff","backgroundColor":"light green cyan","layout":"column-2"} -->
	<p style="color:#ffffff;text-align:center" class="has-background has-light-green-cyan-background-color layout-column-2">Then we need some more text that's something like a summary or a teaser.</p>
	<!-- /wp:paragraph -->

	<!-- wp:paragraph {"layout":"column-2"} -->
	<p class="layout-column-2">Then we need some more text that's something like a summary or a teaser.</p>
	<!-- /wp:paragraph -->

	<!-- wp:button {"align":"center","backgroundColor":"vivid green cyan","layout":"column-2"} -->
	<div class="wp-block-button aligncenter layout-column-2"><a class="wp-block-button__link has-background has-vivid-green-cyan-background-color" href="#columns">Enjoy the ride</a></div>
	<!-- /wp:button -->

	<!-- wp:paragraph {"layout":"column-1"} -->
	<p class="layout-column-1"></p>
	<!-- /wp:paragraph -->
</div>
<!-- /wp:columns -->

<!-- wp:nextpage -->
<!--nextpage-->
<!-- /wp:nextpage -->

<!-- wp:heading -->
<h2 id="paragraphs">Examples of Paragraphs </h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"dropCap":true,"customTextColor":"#1c6087","backgroundColor":"very light gray","fontSize":"large"} -->
<p style="color:#1c6087" class="has-background has-drop-cap is-large-text has-very-light-gray-background-color">The experimental columns with nested blocks: two columns, each with a title, a graphic, a teaser and a link.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"customTextColor":"#ffffff","backgroundColor":"light green cyan","fontSize":"large"} -->
<p style="color:#ffffff" class="has-background is-large-text has-light-green-cyan-background-color"><em>Careful, though, nested blocks are still very experimental </em></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"customFontSize":20} -->
<p 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 {"customTextColor":"#3012c3","backgroundColor":"very light gray"} -->
<p style="color:#3012c3" class="has-background has-very-light-gray-background-color">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 -->
<p>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 -->
<h2 id="audio">Audio Block</h2>
<!-- /wp:heading -->

<!-- wp:audio {"id":3319,"align":"center"} -->
<figure class="wp-block-audio aligncenter"><audio controls src="http://tt.wpswfl.org/wp-content/uploads/2018/05/spencer_angelin_2016-05-18_15-38-05.mp3"></audio></figure>
<!-- /wp:audio -->

<!-- wp:heading -->
<h2 id="video">Video Block</h2>
<!-- /wp:heading -->

<!-- wp:video {"id":3320} -->
<figure class="wp-block-video"><video controls src="http://tt.wpswfl.org/wp-content/uploads/2018/05/Caldera-Gutenberg-Block.mp4"></video></figure>
<!-- /wp:video -->

<!-- wp:heading -->
<h2>Code Block</h2>
<!-- /wp:heading -->

<!-- wp:code -->
<pre class="wp-block-code"><code>import React from 'react';

class StorePicker extends React.Component {
  render() {
    // Any where else
    return &lt;p>Hello&lt;/p>
  }
}

export default StorePicker;
</code></pre>
<!-- /wp:code -->

<!-- wp:nextpage -->
<!--nextpage-->
<!-- /wp:nextpage -->

<!-- wp:heading -->
<h2 id="widgets">Widgets</h2>
<!-- /wp:heading -->

<!-- wp:heading -->
<h3>Latest Post</h3>
<!-- /wp:heading -->

<!-- wp:latest-posts {"postsToShow":6,"displayPostDate":true,"postLayout":"grid","columns":2} /-->

<!-- wp:heading -->
<h3>Categories</h3>
<!-- /wp:heading -->

<!-- wp:categories {"showPostCounts":true,"showHierarchy":true} /-->

<!-- wp:heading -->
<h2 id="lists">Lists</h2>
<!-- /wp:heading -->

<!-- wp:list -->
<ul>
	<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 -->
<ol>
	<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>
</ol>
<!-- /wp:list -->

<!-- wp:heading -->
<h2 id="table">Table</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"customTextColor":"#f9ffff","backgroundColor":"vivid cyan blue","customFontSize":26} -->
<p style="color:#f9ffff;font-size:26px" class="has-background has-vivid-cyan-blue-background-color"><strong>Population in Collier County, Florida</strong></p>
<!-- /wp:paragraph -->

<!-- wp:table {"align":"center"} -->
<table class="wp-block-table aligncenter">
	<tbody>
		<tr style="height:45px">
			<td style="width:192px;height:45px"><strong>Total Population</strong></td>
			<td style="width:130px;height:45px"><strong>Year</strong></td>
		</tr>
		<tr style="height:45px">
			<td style="width:192px;height:45px">321,520</td>
			<td style="width:130px;height:45px">2010<br/></td>
		</tr>
		<tr style="height:45px">
			<td style="width:192px;height:45px">327,541<br/></td>
			<td style="width:130px;height:45px">2011</td>
		</tr>
		<tr style="height:45px">
			<td style="width:192px;height:45px">332,332</td>
			<td style="width:130px;height:45px">2012</td>
		</tr>
		<tr style="height:45px">
			<td style="width:192px;height:45px">339,224</td>
			<td style="width:130px;height:45px">2013</td>
		</tr>
	</tbody>
</table>
<!-- /wp:table -->

<!-- wp:nextpage -->
<!--nextpage-->
<!-- /wp:nextpage -->

<!-- wp:heading -->
<h2>Embedding</h2>
<!-- /wp:heading -->

<!-- wp:heading -->
<h3>Tweet</h3>
<!-- /wp:heading -->

<!-- wp:core-embed/twitter {"url":"https://twitter.com/gutenbergtimes/status/1009883503624904707","type":"rich","providerNameSlug":"twitter"} -->
<figure class="wp-block-embed-twitter wp-block-embed is-type-rich is-provider-twitter">
	https://twitter.com/gutenbergtimes/status/1009883503624904707
</figure>
<!-- /wp:core-embed/twitter -->

<!-- wp:heading -->
<h3>WordPress Post</h3>
<!-- /wp:heading -->

<!-- wp:core-embed/wordpress {"url":"https://gutenbergtimes.com/53-resources-for-developers-designers-building-blocks-for-gutenberg/","type":"wp-embed","providerNameSlug":"gutenberg-times"} -->
<figure class="wp-block-embed-wordpress wp-block-embed is-type-wp-embed is-provider-gutenberg-times">
	https://gutenbergtimes.com/53-resources-for-developers-designers-building-blocks-for-gutenberg/
	<figcaption><strong>Still some place for a caption for this embed block</strong></figcaption>
</figure>
<!-- /wp:core-embed/wordpress -->

<!-- wp:heading -->
<h3>YouTube Video</h3>
<!-- /wp:heading -->

<!-- wp:core-embed/youtube {"url":"https://www.youtube.com/watch?v=7XzPPnHGp_0","type":"video","providerNameSlug":"youtube"} -->
<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube">
	https://www.youtube.com/watch?v=7XzPPnHGp_0
	<figcaption><em>Additional Caption can go here</em></figcaption>
</figure>
<!-- /wp:core-embed/youtube -->

<!-- wp:heading -->
<h2>Instagram </h2>
<!-- /wp:heading -->

<!-- wp:core-embed/instagram {"url":"https://www.instagram.com/p/Bj4aGoFA5oq/","type":"rich","providerNameSlug":"embed-handler"} -->
<figure class="wp-block-embed-instagram wp-block-embed is-type-rich is-provider-embed-handler">
	https://www.instagram.com/p/Bj4aGoFA5oq/
</figure>
<!-- /wp:core-embed/instagram -->

<!-- wp:heading -->
<h3>Meetup </h3>
<!-- /wp:heading -->

<!-- wp:core-embed/meetup-com {"url":"https://www.meetup.com/wordpress-swfl/events/251185074/","type":"rich","providerNameSlug":"meetup"} -->
<figure class="wp-block-embed-meetup-com wp-block-embed is-type-rich is-provider-meetup">
	https://www.meetup.com/wordpress-swfl/events/251185074/
</figure>
<!-- /wp:core-embed/meetup-com -->