GenerateBlocks 1.5 – Dynamic Data, Query Loops, & Image Blocks

GenerateBlocks 1.5.0 is now in beta testing! Beta testing means bugs likely still exist in the plugin, so please only use this version on development and staging sites.

If you find any bugs or have any suggestions, please consider posting them as a GitHub issue.

Download 1.5.0-beta.1


This is a groundbreaking release with tons of awesome new features that really take GenerateBlocks to the next level.

Dynamic Data

You can now apply dynamic data to our blocks!

This allows you to return dynamic content in your Headline and Button blocks, and even add dynamic links to them. Post titles, dates, meta, lists of categories, and much more can now all be displayed inside your Buttons and Headlines with only a couple of clicks.

In our Container block, we can apply dynamic data to your background images so you can use data like featured images and post meta as your backgrounds.

Being able to use dynamic data like this is incredibly powerful and leads us to our next set of features.

Query Loops

Back in December of 2021, we made an announcement on our WP Show Posts site that we were going to discontinue the plugin and merge its functionality with GenerateBlocks. Well, it’s here now! This update includes a new Query Loop block that allows you to build complex lists of posts (of any post type) right inside the editor.

The beauty of this block is that it uses all of our own blocks that you already know and love. Display your posts in columns (or not) with our Grid block, and display all of your post data (titles, dates, excerpts) with our Headline and Button blocks.

Headlines and Buttons handle all of your dynamic content, but we were missing a way to display dynamic images. That leads up to our next new block!

Images

We needed an image block that does things the GenerateBlocks way to really polish off this release, so we built it! Our new Image Block should feel very similar to the core Image block, but with a GenerateBlocks twist.

Options like padding, margin, border radius, and borders are now available for your images. If you’re using GenerateBlocks Pro, you can now use options like Effects and Custom Attributes directly on your images.

For captions, we use our Headline block so you have full control over the styling of them.

And of course, you can build dynamic images that grab the featured image, author avatar, or even an image from your post meta!

New Components

In order to pull this update off, we had to rebuild a lot of components throughout the plugin. Since we were overhauling the code anyways, we ended up improving almost everything GenerateBlocks-related in the editor.

Color Picker Component

Our Color Picker Component has been completely rebuilt from scratch. We no longer rely on core components here – it’s all GenerateBlocks.

Number Component

We built a brand new Number Component that can include presets to save you time. These presets are filterable if you want, and you can also completely bypass the presets by clicking the custom input icon. When you use the custom input we remember your preference so the next time you go to edit a similar option (font size for example), the custom input will show by default.

Dimensions Component

Our Dimensions component has also been completely rebuilt. It now feels much better (less lag when fields are synced) and the syncing feature works a lot better (empty values are now synced).

Inline Background Images

You can now choose to output your background image URLs directly in the HTML instead of in the external CSS. This allows caching plugins to preload your background images and even convert them to other image formats if requested.

Panel Memory

In an effort to improve the overall usability of our blocks, we implemented a memory for which panels you have open between our blocks. For example, if you’re editing the Spacing inside the Headline block and you switch to another Headline block, the Spacing panel will be open and ready just where you left it in the other Headline block.

Default Container Width

For our users who use GeneratePress, the default Container width is controlled using the Container Width option in the Customizer. However, users using different themes can now alter the default Container Width directly in the Settings area of our plugin.

Full Changelog

beta.1

  • Improve typing performance in Query Loop block
  • Fix: Color picker autocomplete when typing in color
  • Tweak: Use compiled assets in script registration

alpha.2

  • Fix background images in Query Loop
  • Fix Taxonomy selector receiving wrong prop ‘postType’
  • Fix excerpt not showing when multiple loops on the same page
  • Fix Image block floats in the editor
  • Fix editor issues when Query Loop Containers are empty
  • Fix Container vertical alignment in the Query Loop editor
  • Fix loss of Image block sizes when replacing image
  • Fix an error when using Post Title data type in post types with no Title support
  • Fix an error in FSE when adding a Container to the front page
  • Add a start blank Query Loop template
  • Add a featured image Query Loop template
  • Add ability to add your own meta value to the select field
  • Add menu_order option to the orderby param options
  • Add ability to set multiple post statuses in query params
  • Clean up dynamic image HTML attributes
  • Prevent block CSS from duplicating in Query Loop when in the editor
  • Improve typing performance when in the Query Loop
  • Improve selection between Query Loop and Grid/Container blocks

alpha.1

  • New: Dynamic data
  • New: Query Loop block
  • New: Image block
  • New: Add inline background image option
  • New: Add default container width option
  • New: Number component
  • New: Block icons in the editor
  • Fix: Button link redirecting outside editor
  • Fix: Nested block post excerpts
  • Fix: Button block causing window confirm on refresh
  • Fix: Shape panel spacing issues
  • Fix: Headline link hover color in editor
  • Fix: Outer container width in editor
  • Tweak: Full code refactor in the editor
  • Tweak: Move button URL options to toolbar
  • Tweak: Switch all blocks to apiVersion 2
  • Tweak: Require WordPress 5.6
  • Tweak: Rebuild color component
  • Tweak: Rebuild dimensions component
  • Tweak: Rebuild typography component
  • Tweak: Add memory to open editor panels
  • Tweak: Make device buttons sticky
  • Tweak: Improve container width label
  • Tweak: Remove :visited selector from buttons

41 thoughts on “GenerateBlocks 1.5 – Dynamic Data, Query Loops, & Image Blocks”

  1. It’s great! I’m totally excited to receive updates so that I can make my home page complete with more recent and classified post blocks.
    Thank you for your effort and great work.
    Keep it up!

    Reply
    • Manuel, when you have the Query Block selected, click on the Add Parameter button on the right side settings. Under the Pagination settings choose Offset and set it to 1. This will exclude the latest post from the query block results.

      Reply
    • Thank you for the answers. I think I didn’t express myself precisely enough. A client of mine offers 8 services and counting. Each service has its own page. All pages with a service are assigned to the “Service” category. All services except the current one should be displayed in the sidebar on these pages. Is that possible?

      Reply
    • Thank you for the answers, Vitor and Mike.
      I think I didn’t express myself precisely enough.
      A client of mine offers 8 services (and growing). Each service has its own page. All pages with a service are assigned to the “Service” category. All services except the current one should be displayed in the sidebar on these pages. Is that possible using querry loop?

      Thanks in advance

      Reply
  2. Well done! First test: works excellent.
    What a lot of possibilities for creativity… exciting. – Thank you.

    Reply
  3. When I read the following regarding inline background images, I smiled so hard. This could be a game changer in so many ways I haven’t even thought of yet.

    “You can now choose to output your background image URLs directly in the HTML instead of in the external CSS.”

    Reply
  4. This is fantastic! Loving the new options here. Question on the query block: Is there a way for this to pull popular posts?

    Reply
  5. Excited about the query loops! Still two important features I need from WP Show Posts:

    1. Exclude current (in WP Show Posts, this is a separate setting and works differently than offset)
    2. Carousel

    Reply
  6. Love the new Image block, it was much needed! I do have a question about the new dynamic meta data. It doesn’t seem to pull from custom field plugins such as ACF. Is this planned for the full release? Keep up the great work!

    Reply
    • For meta fields to show in the dropdown they must be enabled on the REST API. For now, plugins like ACF won’t show the live preview in the editor. We’ll be adding better ACF support in GB Pro ๐Ÿ™‚

      Reply
  7. this isn’t really working for me – eg I put a headline block – as soon as I hit dynamic data I get an error: “this block has encountered an error and cannot be previewed.” – checking the error console I see the following error: “TypeError: undefined is not an object (evaluating ‘e.title.raw’) – react-dom.min.js.

    what am I missing

    Reply
  8. Wow. Just Wow. The possibilities are almost unlimited with this update. I’m looking forward to replacing Elementor completely with GB. Thanks so much for this amazing Update!

    Reply
  9. Fantastic work! I love all of the updates.

    I have two feature requests for GBP that I have been looking for since ditching Beaver Builder for GP & GB.

    – Add a related posts query parameter to Query Loop Block – I want to display posts with a post to post relationship to the current post (created by ACF or Meta Box).

    – Display global meta using Dynamic Data – I want to display meta beyond meta that is related to the current post. For example, Meta Box allows you to create a settings page with custom fields. It would be amazing if we could display this meta in a GB block. This would be great for Notification/Alert Banners or other block elements

    Reply
  10. Hey Tom,
    Really excited about this release! I can finally ditch WP Show Posts on a few sites.

    Also, the inline background image is a nice addition. This makes it a lot easier for lazy loaders, preloaders, etc. to better optimize the images.

    Keep up the great work!

    Reply
  11. I’ve been playing around with this new release, and LOVING it. Thank you!

    One issue I’ve run into, though. Trying to add a dynamic background image to the query loop. No matter whether I use the original dynamic data method or the new dynamic data method, the element pulls the featured image from the CURRENT post rather than the post within the query loop.

    See screenshots: https://drive.google.com/file/d/1Ttp0aWyUAHW6ncvsCAvzz102FWhvA7PJ/view?usp=sharing, https://drive.google.com/file/d/1w53No7Cj39OxktJk6hOotSrzOI-SPi5o/view?usp=sharing

    Reply
  12. I’ll surely give this a try on the blogs that I run GeneratePress on.
    Hope i’d be able to create a grid layout on the homepage with news from a specific category.

    Reply
  13. Hey guys,

    Iยดm looking so much forward for that release because of the Query Loops.
    One important point for me would be: Will it be possible to make the whole blog-card as one clickable? I want to avoid repeating the same link on image, headline and the read more button. But instead I would prefer to make the card as one (even the paragraph and so on) clickable with the same link in as a target. Will that be possible without changing s.th. in php?

    Thank you guys ๐Ÿ™‚

    Reply
  14. Interesting! Two questions about the scope of the new features:

    * Is it possible to insert the entire body of a post into a query block, or just an excerpt?

    * Is it possible to replicate the “Masonry” layout of WP Show Posts?

    Thanks so much!

    Dan

    Reply

Leave a Comment