Block Elements – Theme Builder

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.

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:

All done ? Lets take a look at each of the Elements Volume is built with.

Archive Navigation

Position: After Post Loop
Element Type: Archive Navigation
Hook name: after_main_content
Display Location: Blog, All Archives

A simple 2 button block displaying static prev and next labels with icons, with a dynamic link of Next Post and Previous Post.

NOTE: Within the Block settings the option to Disable default pagination has been checked.

Author Box

Position: Above Right Sidebar
Element Type: Hook
Hook name: before_right_sidebar_bar
Display Location: Posts > All Posts

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.

Post Archive template

Position: Post Archive Cards
Element Type: Content Template
Hook name: n/a
Display Location: Blog, All Archives

This card replaces the default themes post template used on the Blog and Archive Cards.

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.

Below the Image is a nested Container Block which has an Advanced > Additional CSS Class of post-summary this class is necessary for CSS to align the elements vertically.

Xem thêm bài viết hay:  A Sample Post with Comments

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.

NOTE: This element is a Parent Element. What makes it a parent is that the following element is one of its Children.

– First Post Template

Position: Post Archive Cards
Element Type: Content Template
Hook name: n/a
Display Location: None – inherited from Parent: Post Card

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.

Note: in the Customizer > Layout > Blog –> Columns we have the Make First Featured checked. This gives this element a specific class of featured-column which is used in Custom CSS to make it fill the entire row on Desktop and Tablet.

Post Navigation

Position: Above Footer on Single Post
Element Type: Post Navigation
Hook name: before_footer
Display Location: Posts > All Posts

Using a prebuilt Navigation Template that displays the Next Prev Post label and title over the respective featured image.

Single Post Hero

Position: Below Header ( merged ) Single Post
Element Type: Page Hero
Hook name: after_header
Display Location: Posts > All Posts

The Single Post hero is comprised of two main elements:

The parent Container Block

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.

Xem thêm bài viết hay:  Những điều bạn cần phải biết về tổ hợp phím tắt Ctrl

The parent container block has an Advanced > Additional CSS Class of: page-hero-block which is used for CSS to reposition the image on Tablet, and remove it altogether on Mobile.

Within the parent Container is a 1 column grid – the single column is set to 75% width on Desktop and 100% on Tablet an Mobile. Within this grid container we’re displaying dynamic Post Title (H1), the Post Excerpt, followed by a Post Meta layout.

GP Dynamic image block – mobile only

This block is set to display the Post Featured image using an image size of medium-large ( 768px ). In the Advanced > Additional CSS Classes we’re using 2 x hide-on-* classes to remove the image block on Desktop and Tablet.

Single Post Merged Header

This is a Header Element – its sole purpose is to created the Merged Header effect on the Single Post. It does not contain any Page Hero content – it simply merges the site header with the first block on the post, which is the Single Post Header Block.

You can find out more on the Header Element here: