{"id":942,"date":"2018-09-21T18:21:04","date_gmt":"2018-09-21T18:21:04","guid":{"rendered":"https:\/\/sites.generatepress.com\/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:\/\/meansfind.com\/?p=942","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=\"4VFbbpkxJ0\"><a href=\"https:\/\/docs.generatepress.com\/article\/block-element-overview\/\">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=4VFbbpkxJ0\" data-secret=\"4VFbbpkxJ0\" 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<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/meansfind.com\/?p=942\/#Archive_Navigation\" >Archive Navigation<\/a><ul class='ez-toc-list-level-5' ><li class='ez-toc-heading-level-5'><ul class='ez-toc-list-level-5' ><li class='ez-toc-heading-level-5'><ul class='ez-toc-list-level-5' ><li class='ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/meansfind.com\/?p=942\/#A_simple_2_button_block_displaying_static_prev_and_next_labels_with_icons_with_a_dynamic_link_of_Next_Post_and_Previous_Post\" >A simple 2 button block displaying static prev and next labels with icons, with a dynamic link of Next Post and Previous Post.<\/a><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/meansfind.com\/?p=942\/#Author_Box\" >Author Box<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/meansfind.com\/?p=942\/#Post_Archive_template\" >Post Archive template<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/meansfind.com\/?p=942\/#%E2%80%93_First_Post_Template\" >&#8211; First Post Template<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/meansfind.com\/?p=942\/#Post_Navigation\" >Post Navigation<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/meansfind.com\/?p=942\/#Single_Post_Hero\" >Single Post Hero<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/meansfind.com\/?p=942\/#The_parent_Container_Block\" >The parent Container Block<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/meansfind.com\/?p=942\/#GP_Dynamic_image_block_%E2%80%93_mobile_only\" >GP Dynamic image block &#8211; mobile only<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/meansfind.com\/?p=942\/#Single_Post_Merged_Header\" >Single Post Merged Header<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Archive_Navigation\"><\/span>Archive Navigation<span class=\"ez-toc-section-end\"><\/span><\/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\"><span class=\"ez-toc-section\" id=\"A_simple_2_button_block_displaying_static_prev_and_next_labels_with_icons_with_a_dynamic_link_of_Next_Post_and_Previous_Post\"><\/span>A simple 2 button block displaying static prev and next labels with icons, with a dynamic link of Next Post and Previous Post.<span class=\"ez-toc-section-end\"><\/span><\/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\"><span class=\"ez-toc-section\" id=\"Author_Box\"><\/span>Author Box<span class=\"ez-toc-section-end\"><\/span><\/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\"><span class=\"ez-toc-section\" id=\"Post_Archive_template\"><\/span>Post Archive template<span class=\"ez-toc-section-end\"><\/span><\/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\"><span class=\"ez-toc-section\" id=\"%E2%80%93_First_Post_Template\"><\/span>&#8211; First Post Template<span class=\"ez-toc-section-end\"><\/span><\/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\"><span class=\"ez-toc-section\" id=\"Post_Navigation\"><\/span>Post Navigation<span class=\"ez-toc-section-end\"><\/span><\/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\"><span class=\"ez-toc-section\" id=\"Single_Post_Hero\"><\/span>Single Post Hero<span class=\"ez-toc-section-end\"><\/span><\/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\"><span class=\"ez-toc-section\" id=\"The_parent_Container_Block\"><\/span>The parent Container Block <span class=\"ez-toc-section-end\"><\/span><\/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\"><span class=\"ez-toc-section\" id=\"GP_Dynamic_image_block_%E2%80%93_mobile_only\"><\/span>GP Dynamic image block &#8211; mobile only<span class=\"ez-toc-section-end\"><\/span><\/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\"><span class=\"ez-toc-section\" id=\"Single_Post_Merged_Header\"><\/span>Single Post Merged Header<span class=\"ez-toc-section-end\"><\/span><\/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=\"4mM8XXaTco\"><a href=\"https:\/\/docs.generatepress.com\/article\/header-element-overview\/\">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=4mM8XXaTco\" data-secret=\"4mM8XXaTco\" 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":1202,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-942","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-meanings"],"_links":{"self":[{"href":"https:\/\/meansfind.com\/index.php?rest_route=\/wp\/v2\/posts\/942","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meansfind.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meansfind.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meansfind.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/meansfind.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=942"}],"version-history":[{"count":0,"href":"https:\/\/meansfind.com\/index.php?rest_route=\/wp\/v2\/posts\/942\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/meansfind.com\/index.php?rest_route=\/wp\/v2\/media\/1202"}],"wp:attachment":[{"href":"https:\/\/meansfind.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=942"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meansfind.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=942"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meansfind.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=942"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}