GP Premium 2.0 – Introducing the GP Theme Builder!

[ad_1]

GP Premium 2.0 brings you theme building using the core block editor and the GenerateBlocks plugin.

Do you want stunning page heroes, personalized post meta, or custom sidebars & footers? You got that. Or maybe a custom author box without adding a plugin or writing code? How about your very own custom element populated with custom field content? But what if you could build your own single posts and post archive templates? Well… you got that too!

Throw Element Display Rules into the mix and your site design options are endless. Do you want a different post layout for your search results? Or how about a category-specific post layout? Well, that’s all possible too.

Yep, that’s right, using the GP Premium Elements module you can now build, style and integrate dynamic theme elements using the core block editor and GenerateBlocks.

And this is just the very beginning of our journey towards a full block-based theme building experience.

So, how did this come about?

Over the last 18 months, we have been carefully planning, designing, and developing the necessary components to realize what has been a long-term vision for the future of GeneratePress – block-based theme building.

At the center of our plans was the fundamental rewrite and release of GeneratePress 3.0. Aside from the significant reduction in code overhead, it introduced dynamic control over the themes content templates. This new function allowed templates to be changed dynamically without the need for creating Child Theme templates in a lot of instances.

Next, we needed some block-building tools that were both lightweight yet feature-rich. The blocks had to be multi-purpose as opposed to individual blocks with specific use cases. This resulted in GenerateBlocks and GenerateBlocks Pro. A simple 4 block plugin that provides the basic blocks required for any kind of layout or element. Simple, effective, and perfectly suited to output static and dynamic content.

With GeneratePress 3.0 and GenerateBlocks in place, we were now ready to deliver block-based theme building.

Dynamic Data

When using Block Elements, you can now add dynamic data to blocks inside our GenerateBlocks plugin!

Dynamic text/link types.

While using the Headline or Buttons block inside GenerateBlocks, we can now tell them to use the following Dynamic Text Types:

  • Title – the post/page/term title of the current page.
  • Post date – the published or updated date of the current post.
  • Post author name – the name of the post author.
  • List of terms – the post terms associated with your chosen taxonomy.
  • Comments number – the number of comments the post has.
  • Post meta – the value of a custom field name.
  • Term meta – the value of a term custom field name.
  • Author meta – the value of a user custom field name.

We can also apply Dynamic Link Types to these blocks:

  • Single post – the link to the current single post
  • Author archives – the link to the archives for the current author
  • Comments area – the link to the comments are of the current post
  • Next page of posts – the link to the next page of posts in the archive
  • Previous page of posts – the link to the previous page of posts in the archive
  • Post meta – the value of a custom field name.
  • Term meta – the value of a term custom field name.
  • Author meta – the value of a user custom field name.

With these options available to use in Headlines and Buttons, we’re all of a sudden able to build our own theme elements directly in the editor. No need for complex Customizer options that have limitations – you’re in complete control.

Content Templates

Content Templates allow you to take over the default theme design of your content area, regardless of whether you’re in archives (the blog) or single posts/pages.

This means you’re no longer limited to the Customizer options – you’re in complete control of your design/layout.

For example, here’s the default blog design in two columns.

Default post columns.

Previously, we were limited to using the Customizer when it came to designing our posts. Now, we have total control of the layout and design directly in the block editor.

Content template in the editor.

Using GenerateBlocks and GP Block Elements, we can design our posts using dynamic data, and then apply them to our live page based on our chosen Display Rules.

So our default post columns now turn into this:

New post columns.

Content Templates can be used for your archives, or even single posts/pages. And thanks to our Display Rules, you can have completely different templates for different areas of your site.

On top of that, you can even apply different Content Templates to posts with specific terms, custom fields, or the first post all within the same Display Rule. That means your main blog page can use completely different Content Templates for different posts.

When these conditions are set, you can give your Content Template a parent to fallback to if the condition isn’t met.

Content Template conditions.

Check out the video below to see Content Templates in action.

Page Hero Templates

You might be familiar with our Header Element that makes use of template tags to build dynamic page heroes. This works well, but it doesn’t allow you to visually build your page hero – it requires a certain level of HTML/CSS knowledge.

Now, we can scrap the custom HTML/CSS and build our page heroes directly in the editor.

Dynamic page heroes

Once we have the Page Hero Template designed to suit our needs, we can add the necessary Display Rules to apply it throughout our website. The image below shows what the above template is rendered as within one of our single posts.

Live page hero using our Page Hero Template.

We’re now able to achieve a dynamic page hero with no ugly template tags or HTML – everything is done directly in the block editor.

Check out the video below to see the Page Hero Templates in action.

Post Meta Templates

In some cases, you may want to keep the default Content Template that the theme provides, but design your own post meta area. This is where Post Meta Templates are super useful. They allow you to build out your post meta areas in the block editor using whatever layout you need.

Custom post meta template.

Things like author avatars, author names, posted on dates, updated on dates, comment links and much more are all right at your finger tips. No more PHP filters or checkboxes in the Customizer. You can even use the Buttons block to output your post terms (categories, tags etc…) using separate buttons!

Post meta term items using the Buttons block.

Post Navigation Templates

All of our dynamic data has a source option that allows us to grab dynamic data from the current, next, or previous posts. This allows us to build our very own Post Navigation Templates for our single posts.

Custom post navigation template.

Using the above, we now have a completely custom post navigation area with the titles, featured images, and author names of the next and previous posts.

Post navigation template on the front-end.

Archive Pagination Templates

Lastly, we can build our own archive pagination templates using the Next Posts Page and Previous Posts Page link options.

Archive pagination template.

And that’s just scratching the surface! So far, we’re incredibly happy with how flexible these new Block Elements are. This is the first step in converting GeneratePress into a hybrid full-site editing theme. You get the freedom of designing your theme elements in the block editor along with the power of Display Rules to conditionally add those elements wherever you need them. The days of completely different designs for different categories or custom post types are here!

Site Library

Our Site Library has been completely rebuilt from scratch using React! Not only does everything feel much faster/more intuitive, but it’s also way more reliable across different hosting services that had issues with the previous version (WordPress.com, EasyWP, etc…).

New Site Library

Less jQuery

We’re that much closer to completely ditching jQuery in GP Premium! Our Masonry and Infinite Scroll features have been re-written using vanilla javascript!

That means the only jQuery left on the front-end of GP Premium is our sticky navigation and some WooCommerce features (WooCommerce uses jQuery by default). We have some awesome plans for a new sticky element feature that will be coming soon!

Sections

Our Sections module is now officially deprecated. It will continue to work/be activated on sites that have it activated, but it will no longer be available in the list of modules to be activated.

Sections was our very first attempt at a “page builder” back in the days before page builders were popular. It was a big part of our development, but with the emergence of the block editor and GenerateBlocks, it’s no longer needed.

Full Changelog

  • Blog: Rewrite infinite scroll using vanilla javascript
  • Blog: Rewrite masonry using vanilla javascript
  • Blog: Add separate infinite scroll path element to footer
  • Blog: Fix missing single/page featured image options when archive image disabled
  • Blog: Add aria-label instead of screen-reader-text to read more button
  • Colors: Fix back to top Customizer color preview
  • Elements: New Content Template Element
  • Elements: New Post Meta Template Element
  • Elements: New Post Navigation Template Element
  • Elements: New Page Hero Block Element
  • Elements: New Archive Navigation Template Element
  • Elements: New Editor Width option in Block Elements
  • Elements: Move Block Elements options into editor sidebar
  • Elements: Show Site Header options by default in Header Element
  • Elements: Fix Classic Editor issue in Block Elements
  • Elements: Add a list of active Elements to page editor
  • Elements: Add a list of active Elements to the admin bar
  • Elements: Add notices to Customizer if Elements may be overwriting options
  • Elements: Disable mobile header menu if menu is disabled via Layout Element
  • Elements: Improve Display Rule loading performance
  • Elements: Add block type filter to Elements dashboard
  • Elements: Add generate_element_display filter
  • Elements: Add No Results as a Display Rule condition
  • Menu Plus: Hide slideout toggle at set mobile menu breakpoint value
  • Menu Plus: Fix sticky menu height when using navigation as header
  • Menu Plus: Add dimensions to mobile/sticky logos
  • Menu Plus: Make Off-Canvas menu take up full width of canvas
  • Menu Plus: Fix menu bar item sticky transition
  • Menu Plus: Prevent sticky sidebar nav if mobile header is set to sticky
  • Secondary Nav: Fix centered secondary navigation items using flexbox
  • Secondary Nav: Fix conflict with Nav as Header option
  • Secondary Nav: Fix missing menu cart items when using click dropdowns
  • Sections: Officially deprecate module
  • Site Library: Completely rebuild Site Library using React
  • WooCommerce: Move full width single product CSS to inline CSS
  • WooCommerce: Use wc_get_product() instead of new WC_Product()
  • WooCommerce: Add more checks for WC() class to prevent error logs
  • WooCommerce: Add generate_wc_cart_panel_checkout_button_output filter
  • WooCommerce: Add generate_wc_sticky_add_to_cart_action filter
  • WooCommerce: Add generate_wc_show_sticky_add_to_cart filter
  • WooCommerce: Re-write quantity button javascript to be more performant/extendable
  • General: Update theme install link
  • General: Update alpha color picker script
  • General: Use correct URL scheme in external stylesheet URLs
  • General: Check if FS_CHMOD_FILE is defined in external stylesheet generation
  • General: Use inline CSS when using AMP plugin
  • General: Update EDD_SL_Plugin_Updater class to 1.8.0
  • General: Clean up javascript throughout plugin
  • General: Replace deprecated jQuery functions

[ad_2]

Designed by Agency Hut

Leave a Reply