Introducing GenerateBlocks 2.0: A New Era for High Performance Websites 

We are proud to announce the release of GenerateBlocks 2.0, the latest version of our popular WordPress page builder plugin. This ends the longest beta period we’ve experienced since the start of GeneratePress in 2014, and the result is the most powerful way to build WordPress sites.

If you have been following the progress during the alpha and beta periods, you know this update brings fundamental changes to GenerateBlocks. These changes have refactored how GenerateBlocks builds sites with new structures, allowing continued development and growth. 

GenerateBlocks 2.0 creates a new path forward, an exciting foundation that provides a streamlined and robust system to make building fast and effective sites easier than ever before. 

What’s New with GenerateBlocks 2.0

Bringing Professional-Grade Global Styles to Local Styles

In GenerateBlocks Pro 1.7.0, we released our new Global Styles feature. This feature improved the usability of the GenerateBlocks Global Styles system, allowing anyone to build professional-grade code within the block editor. 

Bringing Global Styles to local styles was an obvious next step. Doing so was a monumental effort. The resulting work in GenerateBlocks 2.0, however, creates powerful tools for WordPress developers within the cleanest, fastest, and most stable website-building tool available.

Performant Code Built for Fast Front-End Display

GenerateBlocks builds your production-ready code as you build your pages. 

The CSS you generate using our styles builder is constructed, formatted, and minified as you click around inside the block editor. When you save your page, the CSS is already 100% production-ready for the front end of your site. 

GenerateBlocks builds the HTML for your site in the same way. As you develop your content, GenerateBlocks creates the front-end HTML code. In fact, you can see this happening as you do things like add a URL to a Button block. If you watch the HTML Attributes control (in Pro), you’ll see it is hard at work as you build your content. 

Absolutely no HTML or CSS variables or attributes require logic on the front end. Of course, dynamic content requires server-side rendering on a visitor’s request, but all supportive display code is prepared and ready to go. And for pages without dynamic content, the page is 100% ready for site visitor’s viewing.

Even with zero coding knowledge, GenerateBlocks puts the power of professional-grade code into your hands. The result is the fastest and most performant experience available.

Dynamic Content Puts Power Into Site Building 

Dynamic tags allow you to dynamically display site content anywhere inside block HTML code. Wherever the system finds these tags as the block renders, it will replace the tag with the defined dynamic content.

You can use these tags in your content, URLs, data attributes, and anything else that GenerateBlocks renders in the HTML. See a full list of dynamic tags in our technical post. 

GenerateBlocks 2.0 dynamic tags can query post meta and deeply nested meta. If you have any meta that returns an array, you can access the data you need by specifying the keys. Even with complex arrays, dynamic tags can now make that nested information accessible for front-end display.  This works for post meta, user meta, and even the options table.

Beyond the standard data fields in WordPress, you can also register dynamic tags yourself if you need something beyond the usual dynamic content. Using our API, you can register your own tags and completely control what they return. They’re also previewable inside of the editor by default. 

Streamlined HTML and CSS in Block Design

In GenerateBlocks 2.0, we have decoupled HTML and CSS from the block structure. Previously, in version 1.x, HTML elements were often hidden within blocks. For instance, image blocks came with a permanent <figure> element, and container shapes were implemented using SVG elements directly injected into the HTML. Similarly, the grid block in 1.x included hidden HTML columns to manage flexbox gap controls.

These structures have been streamlined in GenerateBlocks 2.0. Now, image blocks simply output the <img> tag, with <figure> and <figcaption> becoming separate variant blocks. Shapes have also been separated into their own block type, enhancing modularity. The grid block has been simplified to a single container element utilizing CSS Grid for layout control. 

Some inline HTML persists, like SVG icons within text or headline blocks and the <mark> tag for highlighting, which cannot be separated into individual blocks but can still be styled.

The Query Block Provides Unlimited Options

In GenerateBlocks 2.0, we have completely refactored the Query block using our new system. The Query block in GenerateBlocks 2.0 Pro can now query and loop anything. You can now Query post meta and data in your options table. 

For example, suppose you’re using Advanced Custom Fields to build repeaters in posts or options pages. In that case, you can now query those repeaters and output any available data inside of them using our Dynamic Tag system.

Visual Control Improvements for Performance and Usability

We’ve improved our style indicators in GenerateBlocks 2.0 so that they can show you if the styles applied to your block/elements are coming from a different breakpoint or a Global Style. 

Previously, the style indicators only showed up for local blocks and were applied to all controls, such as effects, colors, or backgrounds. With 2.0, the indicators show for local blocks and Global Styles. They are applied to all controls and work on any at-rule or selector. We’ve also updated the indicator UI to make it more compact and useful. 

Our new search and filter options allow you to quickly locate any setting, saving immense time when searching for a specific control. You’ll be able to see all controls that inherit a style from elsewhere (such as a Global Style or another block) and even hide controls that don’t have a value set. Search keywords for each control are intuitive, so you don’t have to remember the exact control name. Search by the CSS property or even certain synonyms. If you’re unsure where a gradient is set, you can search for “gradient” even if the label says “Backgrounds.”

Fully Responsive Controls Make Building for All Screens Easy

Mobile-first search indexing and mobile browsing dominate website development. GenerateBlocks 2.0 provides full styling control for numerous breakpoints in the free version.

All devices:

• Desktop only: @media (min-width:1025px)
• Tablet only: @media (max-width:1024px) and (min-width:768px)
• Desktop & tablet: @media (min-width:768px)
• Tablet & mobile: @media (max-width:1024px)
• Mobile-only: @media (max-width:767px)

In GenerateBlocks 2.0 Pro, you can create your own custom media queries as well as @container queries for maximum flexibility.

Support for Web Content Accessibility Guidelines

The team developed GenerateBlocks 2.0 with a strong focus on accessibility, ensuring that developers can easily ensure that site visitors with disabilities can navigate and interact with websites. 

We add ARIA labels where necessary. In GenerateBlocks free, the ARIA label field is exposed for buttons without text. In GenerateBlocks Pro, you have full access to HTML attributes, allowing customized accessibility in custom builds.

Of course, site owners must consider color and background accessibility and responsive views. 

Full Backward Compatibility

Your existing site will not change upon updating to GenerateBlocks 2.0. It will continue to operate exactly as it does now, with no action on your part. You decide how and when to migrate existing sites built with GenerateBlocks 1.x to the new system.  

GenerateBlocks 1.x blocks are not changing or going away, and users who update from 1.x will still have the version 1 blocks available by default. You will still see the version 1 blocks when you open the block inserter.

Start using version 2 blocks immediately by first navigating to GenerateBlocks > Settings to turn off the version 1 blocks. This won’t affect any existing version 1 blocks on your website; it will only enable version 2 blocks in the block inserter.

New Sites Default to Version 2 Blocks

Fresh installations will default to the GenerateBlocks version 2 blocks. If you want to continue using version 1 blocks on your fresh websites, there’s a simple PHP filter you can use. 

Fresh websites should begin using the version 2 blocks to take advantage of improvements in performance and capabilities.

Block Transformation to Update Version 1 to Version 2 Blocks

Block transforms make updating version 1 blocks to their new version in GenerateBlocks 2 easy.

Depending on how you have set up your blocks, block transformation may not be available, but our support team is available to troubleshoot any issues you encounter. 

Some issues might include:

• The v1 Grid block to v2 blocks is smart and will handle many different scenarios, but it’s not perfect, as there are too many variables at play.
• Transforms aren’t available under certain conditions, such as if the block uses legacy Global Styles.
• The v1 Query Loop, Accordion, and Tabs blocks can’t currently be transformed.

During our long beta period, the GeneratePress team transformed over 50 of our starter sites to v2, and the transforms worked wonders, saving us time and effort. 

That said, you don’t have to update your version 1 blocks to start utilizing the version 2 blocks. Both can exist on the same site and even the same page, so there’s no need to transform them if you don’t want to. 

In the future, version 1 blocks built before this release will continue functioning. 

What’s Next with GenerateBlocks

The release of GenerateBlocks 2.0 establishes a foundation for future growth. New blocks and new starter sites are on the horizon, and we’re excited for the road ahead. 

We’re excited to introduce a new suite of starter sites. These full site designs  provide an easy way for new site builds, with clean and intuitive navigation, royalty-free stock photos, and page layouts that take advantage of GeneratePress. You can learn more about them and view their demos:

• Affinity
• Services 2.0
  • Bookkeeping
  • Electrician
  • Landscaper

How to Get Started

To start with GenerateBlocks 2.0, we recommend an update on a staging server rather than a production server. Though we believe you should not encounter any issues, a staging server is best practice for important production websites with any major release. We also recommend performing any block transformation from version 1 blocks to version 2 in a staging environment.

Once you’ve verified that the update on a staging server has worked as expected, update your production server. 

If you’re starting with a new site, GenerateBlocks 2.0 will be your default. 

GeneratePress One Provides All the Power You Need

GeneratePress One is our flagship product, which includes all Pro products in the GeneratePress suite of tools. With one easy subscription, you can access our premium theme, the entire suite of plugins, including GenerateBlocks 2.0 Pro, and industry-leading support and save over $100/year.

GenerateBlocks 2.0 has numerous Pro features to make building performant sites easier than ever before. It includes:

• New Accordion block replacing the v1 version
• New Tabs block replacing the v1 version
• Some pro-only dynamic tags
  • Next post 
  • Previous post 
  • Archive title
  • Term meta
  • User meta
  • Current year
  • Site title
  • Site tagline
  • Option 
• Some Query block options
  • Ability to query post meta (e.g., ACF repeater fields) 
  • Ability to query options (e.g., ACF options page)

GenerateBlocks Pro also provides the capability of custom media queries for specific screen sizes beyond preset resolutions. 

There’s no better time to take advantage of all that GeneratePress offers as we position our product line for the future of building highly performant WordPress sites.