{"id":942,"date":"2018-09-21T18:21:04","date_gmt":"2018-09-21T18:21:04","guid":{"rendered":"https:\/\/gpsites.co\/volume\/?p=942"},"modified":"2018-09-21T18:21:04","modified_gmt":"2018-09-21T18:21:04","slug":"block-elements","status":"publish","type":"post","link":"https:\/\/myphoneup.com\/block-elements\/","title":{"rendered":"Block Elements &#8211; Theme Builder"},"content":{"rendered":"\n<p>Volume uses  total of 6 block elements and 1 header element to customize the post archives and single post templates. For more information on Block Elements you should read the following documentation:<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-wp-embed is-provider-documentation wp-block-embed-documentation\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"mH0Db9c8Lv\"><a href=\"https:\/\/docs.generatepress.com\/article\/block-element-overview\/\" rel=\"noopener\">Block Element Overview<\/a><\/blockquote><iframe loading=\"lazy\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"&#8220;Block Element Overview&#8221; &#8212; Documentation\" src=\"https:\/\/docs.generatepress.com\/article\/block-element-overview\/embed\/#?secret=7rjUG53WqK#?secret=mH0Db9c8Lv\" data-secret=\"mH0Db9c8Lv\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>All done ? Lets take a look at each of the Elements Volume is built with.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Archive Navigation<\/h2>\n\n\n\n<p><strong>Position:<\/strong> After Post Loop<br><strong><strong>Element Type:<\/strong> <\/strong>Archive Navigation<br><strong>Hook name:<\/strong> <code>after_main_content<\/code><br><strong>Display Location:<\/strong> Blog, All Archives<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">A simple 2 button block displaying static prev and next labels with icons, with a dynamic link of Next Post and Previous Post.<\/h5>\n\n\n\n<p>NOTE: Within the Block settings the option to <strong>Disable default pagination<\/strong> has been checked.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Author Box<\/h2>\n\n\n\n<p><strong>Position:<\/strong> Above Right Sidebar <br><strong>Element Type:<\/strong> Hook<br><strong>Hook name:<\/strong> <code>before_right_sidebar_bar<\/code><br><strong>Display Location:<\/strong> Posts &gt; All Posts<\/p>\n\n\n\n<p>Drawing its dynamic data from the User Meta ( Profile ) it uses a GP Dynamic Image Block for the Author Avatar, a Headline Block for the Author Name, a GP Dynamic Content Block for the Author Description and a Button with static text and a dynamic link to the Author Archives.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Post Archive template<\/h2>\n\n\n\n<p><strong>Position:<\/strong> Post Archive Cards<br><strong>Element Type:<\/strong> Content Template<br><strong>Hook name:<\/strong> <code>n\/a<\/code><br><strong>Display Location:<\/strong> Blog, All Archives<\/p>\n\n\n\n<p>This card replaces the default themes post template used on the Blog and Archive Cards. <\/p>\n\n\n\n<p>First off the content is placed inside a parent Container Block, at the top of which is the GP Dynamic Image Block set to display the Featured image which has been set to a medium-large ( 768px ) image size. <\/p>\n\n\n\n<p>Below the Image is a nested Container Block which has an Advanced &gt; Additional CSS Class of <code>post-summary<\/code> this class is necessary for CSS to align the elements vertically.<\/p>\n\n\n\n<p>Within the post summary there are several blocks set to display the post category terms, the post title, the post excerpt and finally a inline row to display post meta.<\/p>\n\n\n\n<p>NOTE: This element is a Parent Element. What makes it a parent is that the following element is one of its Children.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">&#8211; First Post Template<\/h2>\n\n\n\n<p><strong>Position:<\/strong> Post Archive Cards<br><strong>Element Type:<\/strong> Content Template<br><strong>Hook name:<\/strong> <code>n\/a<\/code><br><strong>Display Location:<\/strong> None &#8211; inherited from Parent: Post Card<\/p>\n\n\n\n<p>This element is grid layout version of the Post Card Block Element. It has not Display Rules as it inherits them from its parent ( the Post Card Block Element ). In the sidebar settings you will see it has Apply to: First Post.<\/p>\n\n\n\n<p>Note: in the Customizer &gt; Layout &gt; Blog &#8211;&gt; Columns we have the Make First Featured checked. This gives this element a specific class of <code>featured-column<\/code> which is used in Custom CSS to make it fill the entire row on Desktop and Tablet.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Post Navigation<\/h2>\n\n\n\n<p><strong>Position:<\/strong> Above Footer on Single Post<br><strong>Element Type:<\/strong> Post Navigation<br><strong>Hook name:<\/strong> <code>before_footer<\/code><br><strong>Display Location:<\/strong> Posts &gt; All Posts<\/p>\n\n\n\n<p>Using a prebuilt Navigation Template that displays the Next Prev Post label and title over the respective featured image.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Single Post Hero<\/h2>\n\n\n\n<p><strong>Position:<\/strong> Below Header ( merged ) Single Post<br><strong>Element Type:<\/strong> Page Hero<br><strong>Hook name:<\/strong> <code>after_header<\/code><br><strong>Display Location:<\/strong> Posts &gt; All Posts<\/p>\n\n\n\n<p>The Single Post hero is comprised of two main elements:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">The parent Container Block <\/h3>\n\n\n\n<p>This comprises of a solid background color, a Dynamic Image Background displaying the Featured Image which is set to Display the medium-large ( 768px ) image and positioned to the Right Center.<\/p>\n\n\n\n<p>The parent container block has an Advanced &gt; Additional CSS Class of: <code>page-hero-block<\/code> which is used for CSS to reposition the image on Tablet, and remove it altogether on Mobile.<\/p>\n\n\n\n<p>Within the parent Container is a 1 column grid &#8211; the single column is set to 75% width on Desktop and 100% on Tablet an Mobile. Within this grid container we&#8217;re displaying dynamic Post Title (H1), the Post Excerpt, followed by a Post Meta layout.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">GP Dynamic image block &#8211; mobile only<\/h3>\n\n\n\n<p>This block is set to display the Post Featured image using an image size of medium-large ( 768px ). In the Advanced &gt; Additional CSS Classes we&#8217;re using 2 x <code>hide-on-*<\/code> classes to remove  the image block on Desktop and Tablet.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Single Post Merged Header<\/h2>\n\n\n\n<p>This is a Header Element &#8211; its sole purpose is to created the Merged Header effect on the Single Post. It does not contain any Page Hero content &#8211; it simply merges the site header with the first block on the post, which is the Single Post Header Block.<\/p>\n\n\n\n<p>You can find out more on the Header Element here:<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-wp-embed is-provider-documentation wp-block-embed-documentation\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"ZWYXhJEQiV\"><a href=\"https:\/\/docs.generatepress.com\/article\/header-element-overview\/\" rel=\"noopener\">Header Element Overview<\/a><\/blockquote><iframe loading=\"lazy\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"&#8220;Header Element Overview&#8221; &#8212; Documentation\" src=\"https:\/\/docs.generatepress.com\/article\/header-element-overview\/embed\/#?secret=2Bdjo2uDUS#?secret=ZWYXhJEQiV\" data-secret=\"ZWYXhJEQiV\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><\/h2>\n","protected":false},"excerpt":{"rendered":"<p>GeneratePress Premium 2.0 introduces the first ever Block Based Theme Builder. Through a combination of the Block Element and the GenerateBlocks plugin you can now build and style your own theme elements directly from the block editor.<\/p>\n","protected":false},"author":1,"featured_media":4854,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-942","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/myphoneup.com\/wp-json\/wp\/v2\/posts\/942","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/myphoneup.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/myphoneup.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/myphoneup.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/myphoneup.com\/wp-json\/wp\/v2\/comments?post=942"}],"version-history":[{"count":0,"href":"https:\/\/myphoneup.com\/wp-json\/wp\/v2\/posts\/942\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/myphoneup.com\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/myphoneup.com\/wp-json\/wp\/v2\/media?parent=942"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/myphoneup.com\/wp-json\/wp\/v2\/categories?post=942"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/myphoneup.com\/wp-json\/wp\/v2\/tags?post=942"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}