Crocoblock started out in the Elementor ecosystem and over time they built up an impressive suite of Elementor addons. Using Crocoblock for Elementor sites was something of a no-brainer, but people worried you might be locked into Elementor. Then, a few years ago Crocoblock began adding Gutenberg support, a process that they have continued to expand until today where we can see a number of the most popular Crocoblock plugins work with Gutenberg. In this post I’ll provide an overview of Crocoblock for Gutenberg, focusing on features related to dynamic data.
Video Version
All-in-One or “Super” Solutions
Recently I looked at several “super solutions” that provide a lot of dynamic data functionality. I came up with this list of features:
- Theme builder
- Custom field support
- Display conditions
- Support for advanced custom field types and post relationships
- Custom loop
- Query builder
- Front-end forms
- Front-end filters
- Easy to add code when needed
- Extensive CSS Options & Style Sheet Editing
It is interesting to note that Crocobock for Gutenberg ticks all but two of these boxes:
| Feature | Crocoblock Plugin |
|---|---|
| Theme builder | JetThemeCore |
| Custom field support | JetEngine |
| Display conditions | JetEngine |
| Support for advanced custom field types and post relationships | JetEngine |
| Custom loop | JetEngine |
| Query builder | JetEngine |
| Front-end forms | JetFormBuilder |
| Front-end filters | JetSmartFilters |
| Easy to add code when needed | – |
| Extensive CSS Options & Style Sheet Editing | – |
Theme Builder Features: JetThemeCore
JetThemeCore provides the theme building features of the Crocoblock suite. It works with Gutenberg, with all popular themes, and with the Full Site Editor. JetThemeCore is the template manager. When it is enabled you get two new menu items under a Crocoblock main menu.
In the Theme Builder page you can create templates and use Gutenberg, or Elementor if you have that installed. Here are some of the conditions for a singular template, for instance. Thus it has all of the basics like 404 page along with single and archive page options.
The other menu item is for the templates created. See how it is organized similar to the Elementor template menu.
JetEngine is a Dynamic Data Powerhouse
JetEngine is the core plugin in the Crocoblock suite for working with dynamic data. It includes all of the basic and a number of advanced features.
As you can see from the JetEngine admin menus, we get:
- JetEngine dashboard
- Listings where you create archive and grid loop items
- Post Types where you create Custom Post Types
- Meta Boxes where you add custom fields
- Taxonomies where you create custom taxonomies
- Relations where you define relationships between post types
- Options Pages where you define admin option pages
- Query Builder where you can create custom queries
If we look at the JetEngine dashboard page we find a large number of advanced features, many of which are not found in other custom field and Custom Post Type plugins. There are option for creating sliders, a calendar, user profiles, map listings, adding dynamic visibility options, data stores for things like user favorites, custom content types which provide custom tables for data and do on. There is also a skins manager, shortcode generator, and the ability to create glossaries.
JetEngine adds a number of Gutenberg blocks (if you are using Elementor, it adds Elementor widgets). Here are the basic ones. Additional ones might be added depending on the modules activated. A note about Crocoblock’s Gutenberg blocks is that they don’t have their own style options. There is a free plugin, JetStyleManager which adds some style options for many of Crocoblock’s Gutenberg blocks.
I am impressed with how extensive the conditional display options are. I enabled Display Visibility in the JetEngine dashboard and saw an “eye” icon on blocks. When there is no condition it is gray and it is blue when a condition is active.
Here is the default condition builder. I’m creating a display condition for a start and end date based on custom fields. If you look closely, you will notice that there are condition parameters in curly braces. These are JetEngine “macros” and they were automatically generated from picking choices in a popup after clicking on the database icon.
One thing to note about JetEngine is that the common features are very straightforward, but some of the advanced features are not so easy to figure out. Crocoblock has extensive documentation, but it takes some experimentation. Once you figure out the steps and logic then it makes sense.
JetSmartFilters for Frontend Sorting and Filters
JetSmartFilters is another Crocoblock plugin dedicated to dynamic data features. When activated, you get a new menu area. Here is the screen to create a new filter. Filter types supported include:
- Checkbox list
- Select
- Range
- Check range filter
- Date range
- Date period
- Radio buttons
- Rating
- Alphabetical
- Search
- Visual
JetSmartFilters supports several data sources, including:
- Taxonomies
- Manual input
- Posts
- Custom fields
- JetEngine Glossary
- JetEngine Query Builder
When you click on the add new button you are taken to a screen to pick the type of filter. Depending on which type you pick, the options below the filter types changes to show the appropriate settings for that type. You give the filter a name, you pick a type, and apply the settings.
JetSmartFilters adds a bunch of Gutenberg blocks. So after you have created and defined your filter you would go to a page or template and add the corresponding block. Then you need to use the JetEngine listing or grid blocks and you hook the filter up to the appropriate listing or grid.
You link the filter with the listing or grid by the filter’s block options. Often you will have created a custom query in the JetEngine query builder, so you may also need to add the query id.
JetSmartFilters are pretty powerful, and did I mention they work with Oxygen and Bricks, in addition to Gutenberg and Elementor? However, as you can see, there are a number of parts to configure, to it can take a bit of trial and error to get it all working. Again, Crocoblock has a lot of documentation and support knows a lot of the common steps users forget, so it is not too hard.
JetFormBuilder Free and Pro
JetFormBuilder is a freemium plugin. There is a free version in the WordPress plugin directory and then the premium version provides you with addons for more functionality.
JetFormBuilder is a drag and drop form builder that works in the Gutenberg editor. There are blocks for the different types of form fields. There are also blocks for creating forms to work with other Crocoblock plugins.
JetFormBuilder has a good number of form actions that can be taken after submit.
Other Crocoblock Plugins Supporting Gutenberg
Scheduling: JetBooking and JetAppointment
These two are similar idea. JetBooking works with days and is designed for property or hotel types of listings. JetAppointment with time and is for scheduling meetings and appointments. With both you need to build up the solution by creating Custom Post Types, forms, and wiring them up. This is very flexible but requires more work.
JetPopUp is an Advanced Popup Builder
JetPopUp is a full featured popup builder. It comes with the full range of triggers, placement options, and animations.
JetReviews and JetProductGallery
JetProductGallery works with WooCommerce products, with Custom Post Types, or with manually selected images. You can also use it to show a featured video. You can display images in various layouts along with other information. When someone clicks on an image or video in the gallery it open in a lightbox.
JetReviews also works with WooCommerce and with any Custom Post Type. When you leave a review a popup has a review form where you can leave comments and a rating. It is possible to put other information in the popup so you could have product information, information related to bookings, or any Custom Post Type. Reviews and ratings are stored in their own custom table to avoid site slow down.
JetSearch
JetSearch adds one block, AJAX Search, and with that block you can customize the entire search experience. You can pick what to include in search, so posts, pages, and products, but you can also search Custom Post Types and custom fields and taxonomies.
You can have the search go to a dedicated search results page, or customize an on page overlay with options for images, titles, excerpts, and pagination.
JetMenu
JetMenu is the Crocoblock plugin for creating menus. You can create horizontal, vertical, and hamburger menus layouts.
JetGridBuilder
JetGridBuilder is a free helper plugin for creating custom grid layouts.
Discussion and Conclusions.
- Crocoblock was a strong option for Elementor, but people worried that Custom Post Types, custom fields, etc would not be supported outside of the Elementor ecosystem.
- Crocoblock team has over the last few years been adding Gutenberg compatibility. Now 13 of 20 Crocoblock plugins support Gutenberg.
- Common features like creating Custom Post Types, taxonomies, or adding custom fields are straightforward, but others require “wiring” the parts together or building up the solution, which takes some figuring out. There are lots of documentation articles to help.
- Note that packages change periodically, so check when you buy that you are getting the package with the features you need.
- It is good to see Crocoblock expanding to support other builders. It enhances the value for people who already purchased and provides more options for everyone.
