Skip to content

Instantly share code, notes, and snippets.

@carolinan
Last active June 18, 2021 05:42
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save carolinan/356d263455513500c2fc1af825df615e to your computer and use it in GitHub Desktop.
Save carolinan/356d263455513500c2fc1af825df615e to your computer and use it in GitHub Desktop.
5.8 beta 2 blocks
<!-- wp:heading {"level":3} -->
<h3>Site blocks:</h3>
<!-- /wp:heading -->
<!-- wp:list -->
<ul><li>Site title</li><li>Site tagline</li><li>Site logo</li></ul>
<!-- /wp:list -->
<!-- wp:heading {"level":3} -->
<h3>Post blocks:</h3>
<!-- /wp:heading -->
<!-- wp:list -->
<ul><li>Post title</li><li>Post date</li><li>Post featured image</li><li>Post content</li><li>Post excerpt</li><li>Post tags&nbsp;<em>-variations</em></li><li>Post categories&nbsp;<em>-variations</em></li></ul>
<!-- /wp:list -->
<!-- wp:heading {"level":3} -->
<h3>Archive blocks:</h3>
<!-- /wp:heading -->
<!-- wp:list -->
<ul><li>Archive title</li></ul>
<!-- /wp:list -->
<!-- wp:heading {"level":3} -->
<h3>Structural blocks</h3>
<!-- /wp:heading -->
<!-- wp:list -->
<ul><li>Login / out</li><li>Page list</li></ul>
<!-- /wp:list -->
<!-- wp:heading {"level":3} -->
<h3>Post listing blocks</h3>
<!-- /wp:heading -->
<!-- wp:list -->
<ul><li>Query Loop, alias Post List</li><li>Post Template (inner block)</li><li>Query pagination (Previous page, next page, inner blocks)</li></ul>
<!-- /wp:list -->
<!-- wp:separator -->
<hr class="wp-block-separator"/>
<!-- /wp:separator -->
<!-- wp:group {"backgroundColor":"white"} -->
<div class="wp-block-group has-white-background-color has-background"><!-- wp:heading {"level":3} -->
<h3><strong>How to test:</strong></h3>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>Below is a copy of each block, and variations of the query loop.</p>
<!-- /wp:paragraph -->
<!-- wp:list {"ordered":true} -->
<ol><li>Select one or more blocks to test.<br><em>To test the query block, first create 5 sample posts. This is needed to test the list of posts. Assign featured images, tags and categories to your posts.</em></li><li>Test all available block options including alignments, widths, spacing and link settings. <em>Different blocks will have different settings.</em></li><li>Compare the editor and front view to see if they match. Document your findings with screenshots or recordings. Make notes of everything that does not work as you expected or that breaks.</li><li>Submit the result of the testing. Even if you did not find any problems, that is also helpful information.</li></ol>
<!-- /wp:list -->
<!-- wp:paragraph -->
<p><strong>Examples:</strong><br>Align a block to the left -Is it placed correctly in the editor and front?<br>Once you have tested the left alignment, align the block to the right, then try the wide and full widths, and continue to test all settings this way.<br><br>Place the block inside a group block. Change the width of the group. Confirm that the inner block is still placed correctly in the editor and front.<br></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
<!-- wp:heading {"level":3} -->
<h3>Site blocks:</h3>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>Site title</p>
<!-- /wp:paragraph -->
<!-- wp:site-title /-->
<!-- wp:paragraph -->
<p>Site tagline</p>
<!-- /wp:paragraph -->
<!-- wp:site-tagline /-->
<!-- wp:paragraph -->
<p>Site logo</p>
<!-- /wp:paragraph -->
<!-- wp:site-logo /-->
<!-- wp:heading {"level":3} -->
<h3>Post blocks:</h3>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>Post title</p>
<!-- /wp:paragraph -->
<!-- wp:post-title /-->
<!-- wp:paragraph -->
<p>Post date</p>
<!-- /wp:paragraph -->
<!-- wp:post-date /-->
<!-- wp:paragraph -->
<p>Post featured image</p>
<!-- /wp:paragraph -->
<!-- wp:post-featured-image /-->
<!-- wp:paragraph -->
<p>Post content</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"backgroundColor":"white"} -->
<p class="has-white-background-color has-background"><em>An example post content block is not included here, since a post will try to include its own content in a loop.</em></p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>Post excerpt</p>
<!-- /wp:paragraph -->
<!-- wp:post-excerpt /-->
<!-- wp:paragraph -->
<p>Post tags&nbsp;<em>-variations</em></p>
<!-- /wp:paragraph -->
<!-- wp:post-terms {"term":"post_tag"} /-->
<!-- wp:paragraph -->
<p>Post categories&nbsp;<em>-variations</em></p>
<!-- /wp:paragraph -->
<!-- wp:post-terms {"term":"category"} /-->
<!-- wp:heading {"level":3} -->
<h3>Archive blocks:</h3>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>Archive title. <em>Important: on the front, the archive title is only visible on archive pages.</em> Place the block in a post or page and view it in a category or tag archive.</p>
<!-- /wp:paragraph -->
<!-- wp:query-title {"type":"archive"} /-->
<!-- wp:heading {"level":3} -->
<h3>Structural blocks</h3>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>Login / out -Test the settings and login and log out using the block.</p>
<!-- /wp:paragraph -->
<!-- wp:loginout /-->
<!-- wp:paragraph -->
<p>Page list</p>
<!-- /wp:paragraph -->
<!-- wp:page-list /-->
<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->
<!-- wp:heading {"level":3} -->
<h3>Post listing blocks</h3>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>Query Loop, alias Post List. <br>Inner blocks inside query loop: Post Template, Query pagination (Previous page, next page).</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>The query loop has 6 advanced designs to choose from, and 4 basic designs that are available when you select the "start from blank" option.</p>
<!-- /wp:paragraph -->
<!-- wp:heading {"level":3} -->
<h3>Query loop, design one:</h3>
<!-- /wp:heading -->
<!-- wp:query {"queryId":15,"query":{"perPage":1,"pages":0,"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false},"displayLayout":{"type":"list","columns":3}} -->
<div class="wp-block-query"><!-- wp:post-template -->
<!-- wp:post-title {"isLink":true} /-->
<!-- wp:post-featured-image {"isLink":true,"align":"wide"} /-->
<!-- wp:post-excerpt /-->
<!-- wp:separator -->
<hr class="wp-block-separator"/>
<!-- /wp:separator -->
<!-- wp:post-date /-->
<!-- /wp:post-template --></div>
<!-- /wp:query -->
<!-- wp:heading {"level":3} -->
<h3>Query loop design two:</h3>
<!-- /wp:heading -->
<!-- wp:query {"queryId":33,"query":{"perPage":1,"pages":0,"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false}} -->
<div class="wp-block-query"><!-- wp:post-template -->
<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column {"width":"66.66%"} -->
<div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:post-featured-image {"isLink":true} /--></div>
<!-- /wp:column -->
<!-- wp:column {"width":"33.33%"} -->
<div class="wp-block-column" style="flex-basis:33.33%"><!-- wp:post-title {"isLink":true} /-->
<!-- wp:post-excerpt /--></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
<!-- /wp:post-template --></div>
<!-- /wp:query -->
<!-- wp:heading {"level":3} -->
<h3>Query loop design three:</h3>
<!-- /wp:heading -->
<!-- wp:query {"queryId":49,"query":{"perPage":1,"pages":0,"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false}} -->
<div class="wp-block-query"><!-- wp:post-template -->
<!-- wp:columns {"verticalAlignment":"center"} -->
<div class="wp-block-columns are-vertically-aligned-center"><!-- wp:column {"verticalAlignment":"center","width":"25%"} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:25%"><!-- wp:post-featured-image {"isLink":true} /--></div>
<!-- /wp:column -->
<!-- wp:column {"verticalAlignment":"center","width":"75%"} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:75%"><!-- wp:post-title {"isLink":true} /--></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
<!-- /wp:post-template --></div>
<!-- /wp:query -->
<!-- wp:heading {"level":3} -->
<h3>Query loop design four:</h3>
<!-- /wp:heading -->
<!-- wp:query {"queryId":65,"query":{"perPage":6,"pages":0,"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"exclude","inherit":false},"displayLayout":{"type":"flex","columns":3}} -->
<div class="wp-block-query"><!-- wp:post-template -->
<!-- wp:group {"tagName":"main","style":{"spacing":{"padding":{"top":"30px","right":"30px","bottom":"30px","left":"30px"}}},"layout":{"inherit":false}} -->
<main class="wp-block-group" style="padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px"><!-- wp:post-title {"isLink":true} /-->
<!-- wp:post-excerpt {"wordCount":20} /-->
<!-- wp:post-date /--></main>
<!-- /wp:group -->
<!-- /wp:post-template --></div>
<!-- /wp:query -->
<!-- wp:heading {"level":3} -->
<h3>Query loop design five:</h3>
<!-- /wp:heading -->
<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"100px","right":"100px","bottom":"100px","left":"100px"}},"color":{"text":"#ffffff","background":"#000000"}}} -->
<div class="wp-block-group alignfull has-text-color has-background" style="background-color:#000000;color:#ffffff;padding-top:100px;padding-right:100px;padding-bottom:100px;padding-left:100px"><!-- wp:query {"queryId":81,"query":{"perPage":3,"pages":0,"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false}} -->
<div class="wp-block-query"><!-- wp:post-template -->
<!-- wp:separator {"customColor":"#ffffff","align":"wide","className":"is-style-wide"} -->
<hr class="wp-block-separator alignwide has-text-color has-background is-style-wide" style="background-color:#ffffff;color:#ffffff"/>
<!-- /wp:separator -->
<!-- wp:columns {"verticalAlignment":"center","align":"wide"} -->
<div class="wp-block-columns alignwide are-vertically-aligned-center"><!-- wp:column {"verticalAlignment":"center","width":"20%"} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:20%"><!-- wp:post-date {"style":{"color":{"text":"#ffffff"}},"fontSize":"extra-small"} /--></div>
<!-- /wp:column -->
<!-- wp:column {"verticalAlignment":"center","width":"80%"} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:80%"><!-- wp:post-title {"isLink":true,"style":{"typography":{"fontSize":"72px","lineHeight":"1.1"},"color":{"text":"#ffffff","link":"#ffffff"}}} /--></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
<!-- /wp:post-template --></div>
<!-- /wp:query --></div>
<!-- /wp:group -->
<!-- wp:heading {"level":3} -->
<h3>Query loop design 6:</h3>
<!-- /wp:heading -->
<!-- wp:group {"tagName":"main","style":{"spacing":{"padding":{"top":"30px","right":"30px","bottom":"30px","left":"30px"}}},"layout":{"inherit":false}} -->
<main class="wp-block-group" style="padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"50%"} -->
<div class="wp-block-column" style="flex-basis:50%"><!-- wp:query {"queryId":97,"query":{"perPage":2,"pages":0,"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"exclude","inherit":false},"displayLayout":{"type":"list"}} -->
<div class="wp-block-query"><!-- wp:post-template -->
<!-- wp:post-featured-image /-->
<!-- wp:post-title /-->
<!-- wp:post-date /-->
<!-- wp:spacer {"height":200} -->
<div style="height:200px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
<!-- /wp:post-template --></div>
<!-- /wp:query --></div>
<!-- /wp:column -->
<!-- wp:column {"width":"50%"} -->
<div class="wp-block-column" style="flex-basis:50%"><!-- wp:query {"queryId":99,"query":{"perPage":2,"pages":0,"offset":2,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"exclude","inherit":false},"displayLayout":{"type":"list"}} -->
<div class="wp-block-query"><!-- wp:post-template -->
<!-- wp:spacer {"height":200} -->
<div style="height:200px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
<!-- wp:post-featured-image /-->
<!-- wp:post-title /-->
<!-- wp:post-date /-->
<!-- /wp:post-template --></div>
<!-- /wp:query --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></main>
<!-- /wp:group -->
<!-- wp:heading {"level":3} -->
<h3>Query loop example with query pagination:</h3>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>The pagination will only show on the front if there are enough posts.</p>
<!-- /wp:paragraph -->
<!-- wp:query {"queryId":415,"query":{"perPage":3,"pages":0,"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true}} -->
<div class="wp-block-query"><!-- wp:post-template -->
<!-- wp:post-title /-->
<!-- wp:post-date /-->
<!-- /wp:post-template -->
<!-- wp:query-pagination -->
<div class="wp-block-query-pagination"><!-- wp:query-pagination-previous /-->
<!-- wp:query-pagination-numbers /-->
<!-- wp:query-pagination-next /--></div>
<!-- /wp:query-pagination --></div>
<!-- /wp:query -->
<!-- wp:heading {"level":3} -->
<h3>Query loop, start blank, title and date:</h3>
<!-- /wp:heading -->
<!-- wp:query {"queryId":317,"query":{"perPage":3,"pages":0,"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true}} -->
<div class="wp-block-query"><!-- wp:post-template -->
<!-- wp:post-title /-->
<!-- wp:post-date /-->
<!-- /wp:post-template --></div>
<!-- /wp:query -->
<!-- wp:heading {"level":3} -->
<h3>Query loop, start blank, title and excerpt:</h3>
<!-- /wp:heading -->
<!-- wp:query {"queryId":339,"query":{"perPage":3,"pages":0,"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true}} -->
<div class="wp-block-query"><!-- wp:post-template -->
<!-- wp:post-title /-->
<!-- wp:post-excerpt /-->
<!-- /wp:post-template --></div>
<!-- /wp:query -->
<!-- wp:heading {"level":3} -->
<h3>Query loop, start blank, title date and excerpt:</h3>
<!-- /wp:heading -->
<!-- wp:query {"queryId":355,"query":{"perPage":3,"pages":0,"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true}} -->
<div class="wp-block-query"><!-- wp:post-template -->
<!-- wp:post-title /-->
<!-- wp:post-date /-->
<!-- wp:post-excerpt /-->
<!-- /wp:post-template --></div>
<!-- /wp:query -->
<!-- wp:heading {"level":3} -->
<h3>Query loop, start blank, image, date and title</h3>
<!-- /wp:heading -->
<!-- wp:query {"queryId":79,"query":{"perPage":3,"pages":0,"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true}} -->
<div class="wp-block-query"><!-- wp:post-template -->
<!-- wp:post-featured-image /-->
<!-- wp:post-date /-->
<!-- wp:post-title /-->
<!-- /wp:post-template --></div>
<!-- /wp:query -->
@carolinan
Copy link
Author

Copy the code above and place it in a post or page in your WordPress installation.

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