Tag: Updates

Last Updated on July 19, 2022

Our latest release includes the newest addition to our block library: the Map block! Display locations on your website and customize it however you like! The Map block is available to use for all Stackable users, whether Free or Premium. All you have to do is update to Stackable 3.4.0. 

Adding Maps are perfect for business, corporate, event, or non-profit websites! Especially if you want to increase foot traffic to your physical location, and with the Map block, it’s no sweat!

How to Display Locations Using the Map Block

Once you’ve updated to the latest version of Stackable, all you have to do is add the Map block to the post or page you want the location to be displayed in and navigate to the Style tab under the General panel. You will see the Location field that you can just fill up with coordinates or the exact address of the location you want to show. The block will then automatically fetch the data from Google Maps and reflect it on your page. 

What Features Does the Map Block Include?

The Map block by itself is limited to the custom height and zoom controls. You will see these in the General panel of the Style tab.

You can adjust these using the slider or simply inputting the size or zoom you want in the input text field.

If you want additional features for the Map block, you may use a Google API key. It’s a general purpose key that allows access to Google services. You can head over to our documentation to learn more about this.

Here are features that come with the Map block if you add your own API key:

Location Auto-Suggest

As we’ve mentioned you will have to know the exact coordinates or address of the area of the spot you want to show on your map. However, if you have an API key, the block will give suggestions on possible locations when you type the name or address of a place in the location field. 

Google Maps buttons display toggles

You have the power to control what buttons from Google Maps will be displayed on the map you’re adding to your page. You will see these in the General panel of the Style tab.

Just toggle which buttons you want to be visible on your map. Here’s an example of the Map block with only the zoom buttons displayed:

Map Style

You may also customize the style of your map. The Map Style panel features the basic map styles from Google, but you can take it to the next level with your own design and customizations using your own custom map code (JSON). You may learn more about creating your own custom map style here.

Custom Map Marker

Lastly, Stackable users can add their custom markers! Just toggle on the Map Marker panel and select which icon you want to use. This also includes FontAwesome icons if you added your own FontAwesome kit code. All icon settings will be available to you to have complete control over your map marker’s design!

Thanks for your continuous support of Stackable! We hope that you enjoy the latest addition to our block library. Head over to our documentation to learn more about the Map block or subscribe to our newsletter for the latest updates on Stackable.

Stackable users have been requesting an integration with Meta Box for the longest time, and it’s finally here!

You can now populate your websites built with Stackable using Meta Box custom fields. All you have to do is update Stackable to the latest version and it will automatically pick up Meta Box custom fields and their data! And don’t worry–all custom field types are supported, be it the basic or advanced field types.

To use data from Meta Box custom fields on text, you will have to click on the Stackable block that you want to insert it to. This could be the Stackable Text block, Heading block, Subtitle block, or any Stackable block that has text!

Then click on the Dynamic Fields icon on the toolbar and select the Dynamic Source. Here, you have four options: Current post, Other posts, Site, and Latest post.

Next, in the Field menu, select the field that you want to fetch data from. You can scroll to look for the specific custom field or you can type the label you’ve used to name it! Once you press Apply, a placeholder will appear where the dynamic content should be displayed.

Once you preview the page, the placeholder will then be replaced with the value stored in that custom field!

You could use Meta Box custom fields wherever dynamic content is available, like say, for example, when you use Stackable blocks in the WordPress core Query Loop block. You can use dynamic content from Meta Box fields. See how we applied it to this Query Loop using Meta Box fields:

Once you’ve added the dynamic content from Meta Box, you may then customize the blocks as you usually would using Stackable’s extensive design controls and features! You could even use Stackable’s ready-made UI kits and have a dynamic website ready in no time. 

This integration has been a long time coming so we’re very excited to see what you can build using Stackable and Meta Box! To learn more about this integration, you may go through our documentation. 

Build with Stackable and Meta Box

This integration is available for Stackable Premium users. If you’re not a Stackable Premium user yet, check out our plans and upgrade now!

We are thrilled to introduce default block styles, a new feature available in Stackable version 3.3.0! This new feature will allow Stackable users to work more efficiently, saving you more time as you build websites using Stackable blocks.

What Does Saving Block Defaults Mean?

Have you ever found yourself repeatedly designing blocks? Or duplicating a block and just replacing the content to keep the design? Maybe you’re taking advantage of the copy paste styles feature but feel that there is a more streamlined process?

This is where saving block defaults comes in! It’s a feature that allows you to save the design of a block as its default style. So that whenever you add this block again, it already adopts the block styles that you’ve saved earlier. This includes all settings, whether it’s the layout, typography, color, hover effects, and even motion effects! 

Here’s an example of us adding a block that already has a default style:

Cool, right?

So… How Do I Save Default Block Styles?

Great question! It’s actually very easy. Design the block however you want, and once you’re content with how it looks, click the Options icon in the toolbar (the three-dot button).

Click on the Save as Default Block option, and that should do it! The next time you add that block, it should follow the design settings of the default styles you’ve set.

Works With Other Blocks

The block defaults feature is so intuitive and useful that it’s applied even in nested blocks. Like for this example:

We’ve added a default block style to the button block. Thus, when we added the Card block, which includes a button, it inherited the default style!

A limitation, however, is that default styles don’t work retroactively. Only newly added blocks are affected, so blocks that are already used in other parts of your site will not be affected if you change the block defaults.

The Block Defaults Panel

You can manage all the default styles you’ve saved from the Block Defaults panel in the Stackable settings. Just click the Stackable icon in the top right corner of the block editor.

Below the Global Typography panel, you will find the Block Defaults. Click this to open up the contents and you should see a list of all Stackable blocks. The ones in bold letters are the blocks that you’ve saved a default style for.

Click the corresponding pencil icon of the block that you want to add (or edit) default styles to. This will open up an editor in a new tab where you can edit the block default state. Don’t forget to click Update to save the default style.

Block Defaults in Wireframes

Block defaults are also applied to wireframes. Whenever you add a wireframe, the default style will be carried over to blocks that have it.

Let’s give it a try. Here’s a designed Stackable Header block, and let’s save it as the default block style.

Now, we shall add a wireframe that includes a Header block. 

See how upon adding the wireframe which consists of a Header block, the default style is inherited in the wireframe. Doesn’t that just make wireframing so much easier? It’s particularly helpful when presenting wireframes to clients, so they have a better idea of how a website prototype or finished product will look like!

Other Fixes

Aside from the all-new Saving Block Defaults feature, we’ve included some other major fixes too.

First, with FSE now in full swing, and many users switching to block themes, we’ve made Stackable now compatible with most block themes.

In addition to that, we’ve added Inline CSS Optimization that will help Stackable users improve site performance. Stackable version 3.3.0 includes a lot of other fixes which you can check out at our changelog.

You’ll Be Hearing More From Us Soon

Saving block defaults is available for all users. Update to Stackable version 3.3.0 and have a go at this brand new feature to see all the difference it makes to your design process!

This is just one of the many features and blocks we have lined up to release. Join our amazing community to stay in the loop with all Stackable updates, news, and deals!

This is just one of the many features and blocks we have lined up to release. Join our amazing community to stay in the loop with all Stackable updates, news, and deals!

Good news for Stackable users We’ve released quite a few updates, giving you a new block, a layout switcher, a new navigation panel and more! Here’s a recap:

Table of Contents Block

The Table of Contents block will automatically generate an outline of the headings present in a post–this will include both native and Stackable headings.

You will have the ability to switch your table of contents between bullets and an ordered list. In addition to that, you may exclude and include single headings, or toggle on/off whole heading levels (H1-H6).

Other cool things to note, the Table of Contents block links to anchors of your Heading blocks and you can toggle on smooth scrolling to the heading section once you click it.

The Table of Contents block uses the anchors of your Heading blocks. If you already have Heading blocks in your article and they don’t have anchors yet, the Table of Contents can generate any missing anchors your headings may have.

For longer or articles with a lot more headings, you can show your table of contents in multiple columns to make it more readable.

Layout Switcher

We recognize there are instances where you decide to change your mind when you choose a layout for a block. In the recent updates, we’ve added the layout switcher so you can seamlessly change the layout for a block. Here’s how it works:

You may change the block layout even after inputting content inside your block. Now you don’t have to start from scratch to compare how your content displays in different layouts. Please note that when switching layouts, not all your adjustments may be kept, so use this feature sparingly.

To change the layout of a block, simply click the Layout Switcher icon in the toolbar. Once you click it, the block reverts to the layout picker. Select any layout and it should be reflected in the block you’ve selected!

Navigation Panel

In the WordPress editor, there is already the native navigator on the left side of the editor which you can view by clicking the List View icon on the toolbar. 

As helpful as it is, the List View has its drawbacks. When open, the List View squishes your editor area so much and may make it hard to visualize what you’re designing. And if you have a large number of blocks in your page, the List View grows longer and becomes harder to use for navigation.

We’ve added our own navigation panel in the inspector, which makes it easier to edit sections of your blocks. It essentially has the same functionalities as the List View navigator, Except that it’s more compact and it doesn’t obstruct your view of the editor and it only shows you the current section/block you’re editing.

Through the navigation panel, you have a constant view of the outline of your blocks. You are always guided by the sequencing and nesting of your blocks without having to shrink the editor. See how it works here:

And more!

You will be seeing a lot more updates on blocks and new features because we have a lot in store for you. 

To stay updated, we invite you to join the Stackable community! You could also send in your feature and block requests there, as well as discuss with other Stackable users.