Gutenberg was merged into WordPress core almost three years ago. Now we are seeing the introduction of Full Site Editing. With Full Site Editing we will be able to create templates for post types and archives using the block editor. It is now time to bring dynamic data options to the Gutenberg editor and Stackable Blocks is one of a handful of Gutenberg addons making the leap to the next stage of WordPress theme and theme building. Version 3 of Stackable Blocks was just released and in this article I want to do two things: give an overview of Stackable version 3 and look at the dynamic data options this new release brings.
The video version will have the complete walk-though. I found that I’d need too many screenshots to show all of the features and steps and it didn’t make for a good reading experience. So, in the text version I’m going to mainly give some highlight summaries.
Admin Settings Area
When you install and activate Stackable Blocks you will want to check out the admin settings area. There is a lot on the page. Several things of note include:
- The ability to limit what people can do in the editor by role (pro feature).
- The ability to turn off any blocks you aren’t planning to use.
- The ability to create site wide basic custom fields (pro feature).
- Several options for ensuring backwards compatibility with Stackable version 2.
Stackable Settings With the Gutenberg Editor
There are some some global style settings within the Gutenberg editor. I was glad to see that Stackable has integrated with Blocksy and was picking up the choices from the theme Customizer.
Some Notes About the Blocks
There are 34 blocks. Interesting to note that all of them are available even in the free version. The difference is that the paid version has a number of block enhancements, things like the dynamic data options, animations and other visual enhancements. The blocks are divided into three groups.
Essential blocks are the basic ones that are building blocks, such as a heading, button, text, and image block. An interesting feature of them is that they are the ones with the dynamic data options (covered below).
The special blocks are things like accordions, social share buttons, and video popups. They provide the kind of functionality we’ve come to expect from plugins or page builders.
The section blocks are an interesting set. These are things like a testimonial, team member, pricing, or call to action types of block. The Stackable team implemented these as sort of “composite” blocks that are built up from the essential blocks. They are totally editable, which provides a lot of flexibility, though some people might prefer having more “guard rails.”
Here is a screenshot of one of these “section blocks,” or as I like to refer to them, composite blocks. In the list view you can see how the Hero Block is made up of a heading, text, and button block, just as if you had created it yourself. The outside block, in this case Hero Block, is a container block and has some container settings. The other blocks have all of their regular settings so you can go to town tweaking them as needed.
A Looks At Block Options Beyond Core
The core blocks are very minimalistic. Here are the options for the core Heading Block. You can change the font size, change the color, and in the advanced panel you can set a CSS class or add an HTML anchor.
Now, here are the option panels for the Stackable Heading block. Note that there are three, each on its own tab. The Block tab’s options are variable by block. In this case we have alignment, background, size and spacing, and borders and shadows. Note also the toolbar above the block itself in the editor. There we have the database icon for access to dynamic data and the palette icon which allows you to copy and paste styles between blocks.
Here is the styles options panel. These options also vary by block. Here we have typography options, which include the color options. There are also options for a stylistic bar above or below the heading.
The advanced options panel has a ton of design options and these options are the same for all of the blocks. These are the kinds of things your find with a page builder and many of them will appeal to designers.
- In the general area you can pick the HTML tag, set how overflow is handled, and clear floats.
- In the position area you can set the opacity, absolute position and z-index.
- Transforms and Transitions is where you can set transitions and skew etc the block.
- Motion Effects gives you options for entrance or scroll animations.
- Custom Attributes allows you to add an HTML data attribute to the block. This can be useful for custom programming.
- In the Custom CSS area you are given the correct CSS selector and you can add CSS for the block. Adding the CSS here means that it is loaded with the page and not site-wide as it would be if you put it in the Customizer.
- Responsive settings lets you hide the block by device size.
- Conditional Display gives you a list of display rule options. We will look at those below.
- Finally, the Advanced area provides the ability to add a custom class or an HTML anchor.
Dynamic Data Features
Of course, the dynamic data features of Stackable version 3 are the ones that have me most interested.
Accessing Dynamic Data – Tokens and Fields
You can access the dynamic data options by clicking on the database icon on the block toolbar. Also, some of the blocks, like the image block, have the same dynamic data options available on the settings panel on the right.
You can pull dynamic data from the current post, other posts, site, or latest posts. When you do the Other posts then you are kind of picking a source and it will not change. When you pick Site then you get access to fields like the site title and tag line.
The fields for the Current Post are the kind of things you have probably seen when using a page builder. There are the standard post fields, author fields, comment fields, media fields, and then the custom fields from ACF.
Posts Block and the Core Query Loop Block
Stackable has a Posts Block like most Gutenberg addons do. Like most of the others, you can pick the query source and show records from a Custom Post Type. However, a cool feature of Stackable is that you can also use Stackable’s blocks with the core Query Loop block. This means that you can create a very customized listing complete with dynamic data. Here is an example using the Books Custom Post Type. Note the author’s photo, which is an ACF custom field.
Conditional Display Options
A powerful feature of Stackable Pro version 3 is the Conditional Display feature. It is accessible from the Advanced tab for all of the blocks. You have the option to show the block if the condition matches, or if it doesn’t.
You can create rules based on the user’s login status, role, the date and time, a custom PHP query, a conditional tag, query string, post meta field, site options, post id, post type, or post taxonomy. Wow, that is a long list. With the custom PHP option you can do pretty much anything that you can code.
I added an icon under the book cover in the Query Loop block and set the condition to be based on the Post Taxonomy. That gave me the option to pick the post type and then the taxonomy. I set it to only show the icon block when the genre was Fantasy. This was easy to do and worked great.
Stackable’s Own Custom Fields
As mentioned above, Stackable has its own custom fields option. It is pretty basic. You can create a custom field of type text, number, date, time, or URL. These are site-wide fields and they show when you pick the site location in the dynamic data drop down. Although even the free version of ACF has many more field types and options, it does not allow you to create a settings page on the site level, so I guess this could be useful for basic things like showing hours of operation or contact info.
Discussion and Conclusions
Gutenberg was merged into WordPress core almost three years ago. Now we are seeing the introduction of Full Site Editing. With Full Site Editing we will be able to create templates for post types and archives using the block editor. It is now time to bring dynamic data options to the Gutenberg editor and Stackable Blocks is one of a handful of Gutenberg addons making the leap to the next stage of WordPress theme and theme building.
Some of the pluses of Stackable are:
- It has the option to disable blocks you don’t plan to use.
- The blocks offer many design options beyond what you find in core.
- The section, or composite blocks, are a clever way of putting together advanced blocks.
Stackable Blocks version 3 has many dynamic data options:
- The essential blocks have dynamic token and field options. Access to dynamic data includes an array of fields such as standard Post, Author, and Site data, as well as custom fields.
- Stackable Pro supports Advanced Custom Fields and we were able to add an ACF image field to our custom listing.
- Support for Toolset custom fields is available in the free version of Stackable Blocks.
- The Stackable Posts Block supports Custom Post Types.
- Stackable Blocks work well with the core Query Loop Block to create a custom listing.
- Stackable Pro added a Conditional Display feature which is extensive and powerful.
- Version 3 of Stackable Blocks Pro adds its own custom fields implementation. It is basic compared to the likes of ACF, Meta Box, Pods, or Toolset, but it could be useful for simple use cases, such as adding some site-wide settings.
Version 3 was a rewrite and I admire the Stackable’s team willingness and commitment to keep the plugin current. However, I would be cautious rolling this out as soon as it is released. Since it is new there could be bugs. It may be wise to wait until there is a chance for feedback and bug fixes, especially if you have version 2 content on the site.
I had hoped to see the ability to create single and archive templates for Custom Post Types. However, many vendors are waiting for Full Site Editing to be released before supporting this as they don’t want to have to change it when now these features are so close to being available in core.
Version 3 of Stackable Blocks is a significant upgrade over version 2. I like what the team has done, especially with the addition and extensions to dynamic data options. Stackable will be a strong option for site builders and looks like it will pair well with Full Site Editing when that is released in the next version of WordPress.
You can use the coupon code WEBTNG for 10% off at the Stackable website.