Gutenberg Demo Content

functions.php

//* Adds support for block alignments
add_theme_support( 'align-wide' );

gistfile1.txt

<!-- wp:paragraph -->
<p>This theme is optimized with support for special features of the  Gutenberg editor. This includes wide and full-width content blocks,  block styling, custom colors, custom font sizes, and back end editor styling that matches the front end of your site.  Keep in mind that if you want to use the new full width image sections then you need to assign your page to full width and not have a sidebar on it.</p>
<!-- /wp:paragraph -->

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

<!-- wp:cover {"url":"https://demos.restored316designs.com/wp-content/uploads/2019/01/georgia-de-lotz-741626-unsplash-2.jpg","align":"full","id":542,"dimRatio":30} -->
<div class="wp-block-cover has-background-dim-30 has-background-dim alignfull" style="background-image:url(https://demos.restored316designs.com/wp-content/uploads/2019/01/georgia-de-lotz-741626-unsplash-2.jpg)"><p class="wp-block-cover-text">This block is great for a hero image and/or message.</p></div>
<!-- /wp:cover -->

<!-- wp:heading -->
<h2>Full Width Image</h2>
<!-- /wp:heading -->

<!-- wp:image {"id":542,"align":"full"} -->
<figure class="wp-block-image alignfull"><img src="https://demos.restored316designs.com/wp-content/uploads/2019/01/georgia-de-lotz-741626-unsplash-2-1024x477.jpg" alt="" class="wp-image-542"/></figure>
<!-- /wp:image -->

<!-- wp:heading -->
<h2>Wide Width Image</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Images, videos, galleries, and other content can also be presented in a wide block that extends beyond the central column at bigger screen widths:</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":542,"align":"wide"} -->
<figure class="wp-block-image alignwide"><img src="https://demos.restored316designs.com/wp-content/uploads/2019/01/georgia-de-lotz-741626-unsplash-2.jpg" alt="" class="wp-image-542"/></figure>
<!-- /wp:image -->

<!-- wp:heading -->
<h2>Standard Width Image</h2>
<!-- /wp:heading -->

<!-- wp:image {"id":542} -->
<figure class="wp-block-image"><img src="https://demos.restored316designs.com/wp-content/uploads/2019/01/georgia-de-lotz-741626-unsplash-2.jpg" alt="" class="wp-image-542"/></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":1} -->
<h1>Heading H1</h1>
<!-- /wp:heading -->

<!-- wp:heading -->
<h2>Heading H2</h2>
<!-- /wp:heading -->

<!-- wp:heading {"level":3} -->
<h3>Heading H3</h3>
<!-- /wp:heading -->

<!-- wp:heading {"level":4} -->
<h4>Heading H4</h4>
<!-- /wp:heading -->

<!-- wp:heading {"level":5} -->
<h5>Heading H5</h5>
<!-- /wp:heading -->

<!-- wp:heading {"level":6} -->
<h6>Heading H6</h6>
<!-- /wp:heading -->

<!-- wp:heading -->
<h2>Galleries with or without captions</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Your posts and pages can contain galleries, which are collections of images presented in one or more columns:</p>
<!-- /wp:paragraph -->

<!-- wp:gallery {"ids":[524,530,529],"align":"full","className":"alignfull"} -->
<ul class="wp-block-gallery alignfull columns-3 is-cropped"><li class="blocks-gallery-item"><figure><img src="https://demos.restored316designs.com/wp-content/uploads/2019/01/georgia-de-lotz-602420-unsplash-723x1024.jpg" alt="" data-id="524" data-link="http://demos.restored316designs.com/georgia-de-lotz-602420-unsplash/" class="wp-image-524"/></figure></li><li class="blocks-gallery-item"><figure><img src="https://demos.restored316designs.com/wp-content/uploads/2019/01/georgia-de-lotz-423440-unsplash-683x1024.jpg" alt="" data-id="530" data-link="http://demos.restored316designs.com/georgia-de-lotz-423440-unsplash/" class="wp-image-530"/></figure></li><li class="blocks-gallery-item"><figure><img src="https://demos.restored316designs.com/wp-content/uploads/2019/01/georgia-de-lotz-455986-unsplash-683x1024.jpg" alt="" data-id="529" data-link="http://demos.restored316designs.com/georgia-de-lotz-455986-unsplash/" class="wp-image-529"/></figure></li></ul>
<!-- /wp:gallery -->

<!-- wp:paragraph {"align":"center"} -->
<p style="text-align:center">Galleries can use the full width, as above, or the wide block and regular content widths:</p>
<!-- /wp:paragraph -->

<!-- wp:gallery {"ids":[517,527,518,519,520],"align":"center","className":"aligncenter alignnone"} -->
<ul class="wp-block-gallery aligncenter columns-3 is-cropped alignnone"><li class="blocks-gallery-item"><figure><img src="https://demos.restored316designs.com/wp-content/uploads/2019/01/georgia-de-lotz-441471-unsplash-683x1024.jpg" alt="" data-id="517" data-link="http://demos.restored316designs.com/georgia-de-lotz-441471-unsplash/" class="wp-image-517"/></figure></li><li class="blocks-gallery-item"><figure><img src="https://demos.restored316designs.com/wp-content/uploads/2019/01/georgia-de-lotz-1177578-unsplash-683x1024.jpg" alt="" data-id="527" data-link="http://demos.restored316designs.com/blog/headings/georgia-de-lotz-1177578-unsplash/" class="wp-image-527"/></figure></li><li class="blocks-gallery-item"><figure><img src="https://demos.restored316designs.com/wp-content/uploads/2019/01/georgia-de-lotz-455983-unsplash-606x1024.jpg" alt="" data-id="518" data-link="http://demos.restored316designs.com/georgia-de-lotz-455983-unsplash/" class="wp-image-518"/></figure></li><li class="blocks-gallery-item"><figure><img src="https://demos.restored316designs.com/wp-content/uploads/2019/01/georgia-de-lotz-473655-unsplash-683x1024.jpg" alt="" data-id="519" data-link="http://demos.restored316designs.com/georgia-de-lotz-473655-unsplash/" class="wp-image-519"/></figure></li><li class="blocks-gallery-item"><figure><img src="https://demos.restored316designs.com/wp-content/uploads/2019/01/georgia-de-lotz-476776-unsplash-683x1024.jpg" alt="" data-id="520" data-link="http://demos.restored316designs.com/georgia-de-lotz-476776-unsplash/" class="wp-image-520"/></figure></li></ul>
<!-- /wp:gallery -->

<!-- wp:heading -->
<h2>Video Support</h2>
<!-- /wp:heading -->

<!-- wp:core-embed/vimeo {"url":"https://vimeo.com/189855792","type":"video","providerNameSlug":"vimeo","align":"center","className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
<figure class="wp-block-embed-vimeo aligncenter wp-block-embed is-type-video is-provider-vimeo wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
https://vimeo.com/189855792
</div><figcaption>Setting up your navigation menu</figcaption></figure>
<!-- /wp:core-embed/vimeo -->

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

<!-- wp:columns {"columns":3} -->
<div class="wp-block-columns has-3-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p><strong>This is right text column.</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Completely disintermediate user friendly content through covalent core competencies. Enthusiastically seize intermandated alignments for resource sucking paradigms. Intrinsicly engineer sustainable initiatives through resource maximizing benefits. Efficiently fashion top-line vortals through distributed interfaces. Intrinsicly engage performance based mindshare with best-of-breed outsourcing.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p><strong>This is middle text column.</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Completely disintermediate user friendly content through covalent core competencies. Enthusiastically seize intermandated alignments for resource sucking paradigms. Intrinsicly engineer sustainable initiatives through resource maximizing benefits. Efficiently fashion top-line vortals through distributed interfaces. Intrinsicly engage performance based mindshare with best-of-breed outsourcing.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p><strong>This is right text column.</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Completely disintermediate user friendly content through covalent core competencies. Enthusiastically seize intermandated alignments for resource sucking paradigms. Intrinsicly engineer sustainable initiatives through resource maximizing benefits. Efficiently fashion top-line vortals through distributed interfaces. Intrinsicly engage performance based mindshare with best-of-breed outsourcing.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns -->
<div class="wp-block-columns has-2-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":528} -->
<figure class="wp-block-image"><img src="https://demos.restored316designs.com/wp-content/uploads/2019/01/georgia-de-lotz-1213059-unsplash-1024x1024.jpg" alt="" class="wp-image-528"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p><strong>This is two columns with an image inserted and text in the second column. </strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Completely disintermediate user friendly content through covalent core competencies. Enthusiastically seize intermandated alignments for resource sucking paradigms. Intrinsicly engineer sustainable initiatives through resource maximizing benefits. Efficiently fashion top-line vortals through distributed interfaces.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

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

<!-- wp:paragraph -->
<p>Insert buttons as calls to action any place you'd like and style them the way you want.</p>
<!-- /wp:paragraph -->

<!-- wp:button {"align":"center","className":"alignnone is-style-squared"} -->
<div class="wp-block-button aligncenter alignnone is-style-squared"><a class="wp-block-button__link" href="#">Visit Restored 316<br></a></div>
<!-- /wp:button -->

<!-- wp:heading -->
<h2>Content Boxes</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Style paragraphs with custom colors to call attention to text anywhere in your content:</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"customTextColor":"#ffffff","customBackgroundColor":"#3c402f"} -->
<p style="background-color:#3c402f;color:#ffffff" class="has-text-color has-background">This is a sample paragraph text with a colored background. You can use 
this to feature content, highlight something important, or provide a 
call-to-action.&nbsp;<a href="https://demo.studiopress.com/genesis-sample/gutenberg-optimized/#">Sample link.</a></p>
<!-- /wp:paragraph -->

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

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p><em>Take up one idea, make that one idea your life. Think of it, dream of it, Live on that idea let the brain, muscles, nerves, every part of your body be full of that idea, and just leave every other idea alone. This is the way to success.</em></p><cite>Swami Vivekananda</cite></blockquote>
<!-- /wp:quote -->

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

<!-- wp:audio -->
<figure class="wp-block-audio"><audio controls src="https://demos.restored316designs.com/wp-content/uploads/2019/01/Lauren_Gaige_DD_Final.mp3"></audio><figcaption>Listen to Lauren's interview with Susie Davis about Starting your own Business</figcaption></figure>
<!-- /wp:audio -->

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

<!-- wp:categories /-->

<!-- wp:heading -->
<h2>Latest Posts Block</h2>
<!-- /wp:heading -->

<!-- wp:latest-posts /-->

style.css

/* Gutenberg
--------------------------------------------- */

.full-width-content .alignfull,
.full-width-content .alignwide {
	margin-bottom: 30px;
	margin-top: 30px;
	max-width: 1000%;
	width: auto;
}

.full-width-content .alignfull {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.full-width-content .alignwide {
	margin-left: calc(25% - 25vw);
	margin-right: calc(25% - 25vw);
}