GenerateBlocks has always provided unrivaled flexibility and control when it comes to building custom layouts & designs in the WordPress Block Editor. We have seen our colleagues embrace GenerateBlocks as the page builder inside Gutenberg.
Our ultimate goal is to deliver a block plugin that allows users to build anything out of HTML & CSS without ever touching a line of code. And with each update, we take a step closer to this, and boy oh boy GBP 1.7 takes one huge step.
With GenerateBlocks Pro 1.7 we wanted to achieve 2 main priorities:
- Provide an even greater level of block styling control
- Help users significantly reduce their site build times
To achieve this we have built brand new Global Styles and Patterns Library systems.
Let’s take a closer look at each of these two new features and how they can help you to build faster, work smarter, and build great-looking sites with GenerateBlocks Pro.
IMPORTANT NOTE:
The features in this release replace the existing Global Styles and Pattern Library systems. Any existing Patterns or Global Styles will continue to work and can be found in the relevant admin screen under the Legacy Tab.
Global Styles 1.7
Global Styles 1.7 is all about giving you even greater design control, by adding even more CSS styling options, more breakpoints, and advanced ways of applying those styles.
Documentation is still under construction, but you can find our current Global Style articles here.
The new Global Styles allows users to:
- Create their own CSS classes
- Work with more CSS style properties
- Add any style to any pseudo-state, not just colors on hover
- Build their own CSS selectors for advanced application
- Work within more breakpoints
- Apply as many classes as needed to an individual block
- Control the loading order of their CSS
- Do all of this and more from inside of the block editor
To deliver, this required the development of a brand new and innovative styling system. A system that can read and write CSS like a pro developer. A system that uncouples itself from both the blocks and the UI. Providing unlimited scope for expansion, such as adding new properties in the future, adding custom breakpoints, or deploying this entire system in other areas.
Ultimately, users will be able to apply any style to any block in any state at any breakpoint.
With these improvements, we have set the foundations for a whole new way of building with blocks. Ultimately, users will be able to apply any style to any block in any state at any breakpoint. Couple this with the unlimited build options using the core GB blocks and there should be no limitation to what you can build.
So what are global styles anyway?
When you add styles to a GenerateBlock, those styles are attached to that individual block. As these are scoped to a single block; we refer to these as Local Styles.
Whereas Global Styles are not directly attached to a block, instead they are attached to a CSS class. And that CSS class can be applied to any number of blocks, allowing global styling of any block with that class.
New Inspector Controls
Global Styles introduces a new inspector control panel. For now, this new system lives just in Global Styles. Let’s take a quick look at what’s new:
Selectors
Selectors are patterns used to match and target specific HTML elements to apply styles to them. Basic selectors allow you to style a block based on a specific class or its pseudo-state, such as Hover or Focus. More advanced selectors allow you to apply styles in much more spectacular ways such as building pseudo elements or styling child blocks.
If you can write a CSS selector then you can pretty much build it in GenerateBlocks. This marks a huge improvement in the way you can build styles. For example, in the local system, the Hover state only allowed you to change color styles, now you can change any style.
Responsive Breakpoints
The first change here is to make our icons more truthful. Traditionally the major breakpoints are listed as Desktop, Tablet, and Mobile. But in reality, they are the base style that applies to all screen sizes, screen sizes under 1024px and screen sizes under 768px.
We must address this in the UI, as now we have added additional sizes that apply to specific devices only such as Desktop only and Tablet only. These options were previously only available in Effects and Advanced Backgrounds. But now any style can be applied at any breakpoint; that’s right, every style is now 100% responsive.
New or Improved CSS properties
In addition to the new ways of adding styles with Selectors and Breakpoints, we have added new CSS properties.
Layout has display: grid;
CSS Grid has now been added in the Layout > Display options. In the future, we will look to add new pattern pickers to support this advanced CSS property.
Backgrounds
Apply multiple background properties that support colors, images, multi-stop gradients, and blend modes. As it’s 100% responsive it will replace the Advanced Backgrounds options.
Effects
Replacing the existing Effects panel, users now have the full suite of unit pickers for each effect panel. Widely increasing their potential for adding an extra level of style to your blocks these include:
Multi-layer Shadows, Transitions, Transforms, Opacity, Blend Modes and Backdrop Filters.
Position
Position now has its own dedicated panel with the inclusion of Absolute, Sticky, and Fixed properties and the necessary Inset values to go with them. We do advise caution when using these properties as they do apply in the editor.
Content
A new inclusion to the system allows you to define pointer events as well as add the necessary content property for building your own Pseudo Elements.
Style Indicators
One of the major complications of working with Global Styles and CSS that is not applied directly to the block is knowing where a style is coming from. To address this we have added Style Indicators to the local block inspector controls.
These handy little indicators help you to identify what properties are coming from a global style and handy links to where you can edit them.
Patterns 1.7
We have a whole new library of block patterns that provide every conceivable layout for your next site build. From Heros to Testimonials, Featured Sections to Pricing Tables, Query Loops to FAQs. Not only have we made it easier to build new pages and sites, but you will be able to build them faster than ever before.
Documentation is still under construction, but you can find our current Pattern Library articles here.
Choose from 200+ mid-fidelity wireframe patterns that are built to a consistent design framework. Each pattern has minimal local block styles, allowing them to respect theme colors and typography.
Patterns include a super minimal CSS framework built with the new Global Styles, that define common properties such as section spacing, inner container max-widths, and styles for primary and secondary buttons.
Once a pattern has been imported users can modify its Global Styles and see those changes reflected across the entire pattern library. In just a few minutes you can tailor the entire pattern library to suit your site needs.
New Pattern Inserter
Patterns have a brand new gallery and inserter. Users can search, view, and preview patterns from the dedicated modal, and insert them straight into the page. And if you’re building out an entire page of patterns, there’s no need to leave with the new Bulk Inserter options. Once toggled you can choose any number of patterns, re-order them, and click to insert them all.
Patterns 2.0 Free
So no one feels left out, we add 40+ Patterns to GenerateBlocks Free. They have all the same features except for the Global Styles.
Patterns by Core and Legacy Patterns
Since the introduction of Patterns in GBP 1.0 – WordPress has added Patterns into core. As we recognize the importance of working with core functions, we have adopted the core Pattern Post type in this new system. This means a couple of things:
Legacy Patterns
Adopting the core pattern post type means Legacy patterns will be deprecated. Any existing local patterns on a site will now be available in GenerateBlocks > Patterns > Legacy Patterns. Users can continue to use them and access them in the same way for the foreseeable future.
Core Patterns in the Future
WordPress has lots of plans for future pattern features, such as partially synced patterns. If the conditions are correct then GB should be able to take advantage of those too.
Media
We always try to include any related media to a release right here in the release post. As of right now, Kyle from The Admin Bar has hit it out of the park with a handful of really helpful videos showcasing the new features! Check them out below.
Best. Update. Ever.
True it’s the best ever and they are listing the community very well and their efforts will definitely payoff. Thanks for quick video
One thing that is very important for client websites. Please allow admins to hide local templates from pro and free categories from clients, and leave only local ones. So not by toggling in editor, rather a hook, or a toggle somewhere in settings.
I create client sites with gb that have their design collection, and I do not want them to use anything that has not been prepared for them.
So basically a way to exclude local collections from the Pattern Library completely (so they can’t be enabled)? Sounds like a necessary feature. Thanks!
A way to decide what patterns will be available for clients. The one that ship with the plugin might be useful for me to speed things up, but the one I make would be the only ones available for the client.
This is what the current stable version has, and I love it, it allows me to create a library of patterns for clients that are made to fit into the design of the website perfectly.
Later when you have partially synced patterns, it is going to be easy to provide designed patterns for clients without any fear of breaking the designs.
Could a (auto) sort in Globalstyle be helpful? Ofcourse on could drag and drop new classes, but if one uses a naming system like BEM a sort could be really usefull. Especially if you add classes later on.
What would the sorted be based on? Alphabetical?
Alphabetical would be great, but also grouped related.
Like
.a-class
.card
.card__heading
.card__something
.card:hover
.demo-class
And so on.
Exactly.
This update looks great. Agree with Elvis on the library. Being able to clean up the UX for a client is very important.
I was very excited to have an update about the faqs section and it is in the new pattern library.
but after I tested it out, it is what we could already made with the block features.
I think what is needed is a standard faqs section with nice toggle option and different toggle icons to choose from. So, that the content is shown when toggle is on and gets hide alternatively what we see in standard faq sections.
It is one of the necessity given the importance of having a faqs schema in every website for seo purpose.
Patterns:
I see how I can create pattern using native dialog on any block. However, I don’t have such option inside the GB library. That is a bit strange. I have some settings with domain … smtn, I beleive this will be some cloud thing to exhange accross websites or something, but no option to make a pattern there in the GB pattern enviornment, that is not a nice UX I beleive.
Worse, there is no way to delete a pattern if I change my mind and want to remove it, edit it further etc. In block themes one can go to Site Editor > Patterns and remove from there, but in GP not.
I see I can remove them if I swap my theme with the default wp theme, meaning the pattern is not related to my theme somehow, so the question there is how do we migrate patterns between websites? Do I add patterns into the theme like with block themes?
Great update!
Another function I would like to see is to set order for loop templates by myself. If I manually set & include 10 posts in the loop, I would like to order them manually somehow.
You can change the date, so they are in the order you want. Or install a post order plugin.
This works fine if I only show the loop in one place. But I have some tables that is created in loop templates, and I want to show different order for different topics. So the date is not a good option, not even post order unfortunately.
Hello, in the free version, will it be possible to access the creation of these global styles?
Hi there,
The Global Styles is a GenerateBlocks Pro feature 🙂
The Pattern system is SO much better and the included un-styled patterns are great starting points now and I see lots of frustrating bug fixes have made it into this release 🙂 . One thing I was hoping for was a little more love to the image block, the default WP image block is catching up to the GB one very quickly with some handy features. One issue I have with the GB image is that it’s wrapped in a figure tag but any class/style you add doesn’t apply to the outermost div(figure) only directly to the image. This causes a lot of confusion when you say have a container set to 500px tall and an image inside set to object-fit:cover with a height of 100% you would expect it to fill that space but it only will if your container is set to flex and stretch to force it’s children the figure to fill the space. also if you have a setting for object-fit you should have a setting for object-position under it.
I agree 100%. We’ll be addressing this soon.
The Global styles are awesome, I really like how you can see the CSS in the admin, it would be nice if we could edit it in there. or if there was a find/replace tool built into it, maybe just colors, where it detects every color used in the global styles and shows them up top. And then if you click on a color you get a color picker which updates the colors in your styles. That would allow exporting and importing styles to be more useful. I guess you could find replace on the .xml file but it would be a nice touch
Great update! Eagerly waiting!
I can see an option for adding a library. Are we able to create a library and store our templates?
Not yet, but this will be coming soon in the form of a new plugin named GenerateCloud.
Thank you for the good news. How much time will it take? Any idea?
Ok, so another feature I beleive would be very important for this.
This is related to a more systematic use of classes/selectors in a kind of way frameworks do, for instance coreframeworks might be a good example.
Right now you can add classes one by one and in time your wp-admin/admin.php?page=generateblocks-styles page will show all of them, alternatively you can add some of the prebuilt patterns and on this page you will see all the classes from that pattern also appear here.
A couple things to consider:
– import predefined classes into this page easily, not from other GB site but from a stylesheet, let me have them made elsewhere, and just drop them here.
– give some starter classes a user can start with, not only if a pattern was used but a simple starter framework. If a user wants really blank slate, allow a bulk delete from here
This version has base functionality, I beleive a better classes management would be the next step
LP
Both great ideas, thanks for sharing!
Thank you for the latest version – it’s truly impressive! I’m currently contemplating whether to adopt your BEM naming system or to implement my own. Could you possibly include a complete list of all classes in your documentation? That would be extremely helpful and would facilitate the decision-making process.
Absolutely, here you go: https://docs.generateblocks.com/article/pattern-global-styles/
I really appreciate the added features/properties available in the new Global Styles.
Since Global Styles are always loaded regardless of how many are used, using this convenient feature can easily greatly increase the size of the Global Styles CSS file. Is there any plan to allow styles to be shared in a more precise way so that styles used only in a couple places (like maybe something that is used throughout a page–but only on that page) can be reused without having to add it to the Global Styles loaded across the entire website?
I don’t know if this is best served as display rules similar to Elements in GeneratePress or if automatic detection and inclusion is something not too detrimental to performance.
As these are Global Styles, the CSS is served up globally. That being said, the size of the stylesheet will only become problematic if you really go overboard with your classes. All of the CSS is automatically optimized using PostCSS, and we only print CSS that you specifically choose values for.
From a performance perspective, I would definitely worry more about a single un-optimized image than the stylesheet being built here 🙂
Is there a specific way to report issues with the alpha versions, or do we use the regular GenerateBlocks support? I have an issue to report.
You can either comment here or a topic in GenerateBlocks support would be great 🙂
Thank you. I submitted via GenerateBlocks support so I could include screenshots.
Any target date for full release? We are getting ready to launch a major site, and may elect to integrate some of this into it if full release is targeted this month.
Really cool update, GB team! Can’t wait to implement it on my live sites. One thing I’m curious about—and forgive me if I’m missing it—it would be nice to be able to replicate a legacy style onto a new style?
I see the option to clone an existing style—but that’s from another new one.
Nevermind… I do see the ability on certain blocks to copy from the local style. But when I first wrote that message – I was trying it on an accordion item, which does not have that ability… should every block item have that option?
Hi, great update, really playing with the thought of getting a Pro licence at this point. Are there any plans on providing a lifetime deal as you do with generatepress? I’d prefer that model alot for my personal projects.
Hi there,
At this time there isn’t an option for a lifetime license key for GenerateBlocks.
Thanks for understanding 🙂
Great update!
But I wonder why GB not have form block, we don’t need separate plugins for simple subscribe or contact form.
This looks very cool. Can’t wait to test it!
Is there a way to bulk convert the legacy local patterns to new local patterns? I have around 63 to convert.
Hi there,
At this time there isn’t a way to bulk convert. Sorry about that!
However, you can continue using the existing patterns without issues.
Hi,
Would it be an idea to add the Generatepress customizer typography settings for heading to the Generateblocks “Add or Create style”. I’m now setting it in Generatepress and then copying it over to be able to use it in the heading block. This is an extra effort and not free of errors.
I know I can use GB headline block “Advanced-Extra CSS-class” to add for example h2 but it saves a few clicks and it seems logical to have them in the list by default as I would assume that the headings should be the same in generatepress and generateblocks.