Try Out Our New Blocks Editor

Domhnall O'Hanlon
Thunkable Thoughts
Published in
4 min readNov 16, 2020

Simplifying Design: Moving Invisible Components to Blocks

Today we’re inviting you to try out our new slimmed down Design Tab and the enhanced Blocks Editor that goes along with it!

At Thunkable our mission is to make cross platform app development as simple and accessible as possible. We’ve come a long way and we don’t plan on stopping any time soon. In fact, this is the first in a series of exciting updates planned for the platform which we hope you’ll love just as much as we do. We also love feedback so please leave yours over in the Thunkable Community and let us know what you think of this latest beta feature.

The most frequent question we get from new users is “How do I design my app?”. With 58 components in our present Design Tab every time a new project is created Thunkers need to sift through 31 “invisible” components to find the UI elements they actually need. The search bar is great — when you know what you’re searching for — but it’s still not ideal for novice users. In the current Design Tab finding the right component is slower and more difficult than it needs to be, so we’re making it better. We’re reducing the cognitive overhead by moving the invisible components to the Blocks Editor. By doing this you’ll be able to set the properties and the logic of these component all at the same time and reduce the amount of context switching required.

Try it Out

Today we’re inviting you to try out our new slimmed down Design Tab and the enhanced Blocks Tab that goes along with it! Simply opt in here: https://x.thunkable.com/account/features

Enabling the new Blocks Editor

Once you have opted-in you will now have just 27 visible UI components to choose from (much easier to deal with than 58, right?)

The biggest change is in the Blocks Tab. There are now 4 categories on the left of the screen; UI components, Core, App Features and Advanced (which included the “Any Component” blocks). To improve navigation each category is expandable and collapsible.

The new look Blocks Editor

Beyond that, the blocks themselves have been improved to make them easier to understand and more intuitive to use. Take our classic translator app as an example.

In the current version, you need to add 4 components to your design, then in the blocks you’re expected to understand that function blocks can/should be nested and that the “result” variable from the Translator should be passed as the input to the Text To Speech component:

Using the old blocks

That’s quite a lot if you don’t have any experience with coding. With this update you only need two UI components, and the new blocks read more naturally and intuitively. You translate the text, the translation gets passed to the TTS component. Simples!

Using the new blocks

Tasks that were previously done in the designer, such as setting the language, are now done directly in the blocks so there is less context switching between the Design and Blocks tabs.

When you’re ready to move to more complex ideas, like asynchronous blocks, then there are some alternate “Advanced” blocks that you can use. For example, the translator can work in-line like this (which is how the vast majority of you use it at the moment)

Advanced blocks are available for less frequent use cases

Or it can be set up in advanced mode like this if you need access to additional functionality like error handling.

Finally, the settings for the components formerly-known-as “invisible components” can now all be done directly in the Blocks Editor. Simply click on the gear icon to add your own settings. You can connect to multiple APIs, work with numerous Alerts and even add Push Notifications and AdMob ads without ever having to leave the tab you are working in.

This improved method of adding component settings will also enable us to give you more granular control over your final app settings — another request that we’ve heard many of you asking for.

Ok — there’s a lot to digest in that update. Please take a look at the beta features in your account, test out the new blocks and leave us your feedback.

Originally published at https://community.thunkable.com on November 16, 2020.

--

--