What are Wix Blocks? - Full Tutorial

Hey there, welcome to The Wix Wiz! Today, we're diving into the world of Wix Blocks and exploring what they are all about.
Wix Blocks is a powerful tool that allows you to create custom apps for Wix sites. Whether you're looking to build a simple widget or a full-fledged interactive web component, Blocks has got you covered. And the best part? It's available to everyone now! (Though still technically in beta).
In this video, we'll walk you through the entire app building workflow using Wix Blocks, from start to finish. We'll discuss the advantages of using Blocks and how it can benefit your app development process, including the exciting news that now you can publish your Blocks apps to the Wix App Market and monetize them within the Wix ecosystem.
We'll start by demonstrating a "Hello World" example, giving you a taste of the app building flow. You'll see how easy it is to create a basic app and understand the fundamentals of Blocks.
But we won't stop there. We'll take things up a notch and build a more complex to-do app. Along the way, we'll explore the widget API's, which allow you to add properties, events, and functions to your widget. We'll dive into data collections, connect to site themes, and show you how to make the most of the monetization opportunities within the Wix ecosystem by publishing your app to the Wix App Market.
Throughout the video, we'll provide step-by-step guidance, insights, tips, and best practices to make your app development journey a success. You'll learn how to leverage the power of Wix Blocks to create feature-rich apps and take advantage of the monetization potential within the Wix ecosystem.
So, if you're ready to unlock the full potential of Wix Blocks and build complex, monetizable apps within the Wix ecosystem, this video is for you. Get ready to unleash your creativity and dive into the world of app development with Wix Blocks.
Don't forget to like, subscribe, and hit the notification bell to stay updated with our latest videos. Let's get started and build something incredible together!
Wix Blocks Documentation:
support.wix.com/en/wix-blocks
Have questions? Join the discussion:
www.thewixwiz.com/forum
Video Suggestions? Request and Vote here:
www.thewixwiz.com/youtube
Need some magic done on your website ASAP or want to purchase a code template?
Hit me up: www.eitanwaxman.com/contact-me
Want to have joint coding session?
www.eitanwaxman.com/book-online
Wanna say thanks?
www.eitanwaxman.com/tip-me
My Facebook page:
/ eitanthedev
Join the community on Facebook:
/ thewixwiz

[@DanielTalero]

So useful as always

[@dabert5972]

Is it possible to import libraries? Like if I needed to use a library I found on GitHub to render music charts, is there a way to do that?

[@thewixwiz]

Only as an npm package. Or copying the entire code base.

[@user-re3ho4fd9d]

I am getting 403 error by calling backend functionality , have you faced this error

[@thewixwiz]

There are still a lot of issues with blocks especially when using other Velo APIs. I would recommend reporting the bug in the dev center.

[@user-qw2oo5zx4u]

Hi is any video on wix ticket events...?

[@thewixwiz]

Not yet but thanks for the suggestion! What are you trying to achieve?

[@wuji5771]

Probably kinda late for this, but to test the api prop without building you just go to Configuration > Preview and click the link that says "Test API Properties".

[@thewixwiz]

Thanks for sharing!

[@AshutoshJatkar]

That breakpoint bug has not yet been fixed

[@thewixwiz]

Maybe it's a feature 😛

[@kirtansolanki5134]

Hey, i am trying to add items in a form to a collection but evry time it just gives me empty field in the console and my collection, i have checked the id names of the collection and elements no problem in there, heres the code
import wixData from 'wix-data';
import wixLocationFrontend from 'wix-location-frontend';
$w.onReady(function () {
$w('#loginDetailsTxt').text = "Please enter these details before continuing";
$w('#errorMsg').text = "Field empty/wrong format";
const insertObj = {
"fullName": $w("#nameInput").value,
"title1": $w("#emailInput").value

};
//,$w('#nameInput').value,$w('#checkbox1').value$w('#emailInput').value
$w('#loginBtn').onClick(() => {
if ($w('#emailInput').valid === true && $w('#nameInput').valid === true) {

wixData.insert("ChakraLogindetails", insertObj)
.then((item) => {
console.log(item);
})
.catch((error) => {
console.log(error);
})
//wixLocationFrontend.to("www.isolvelife.com/chakra-cards");
}
else {
$w('#errorMsg').show('fade');
}
});
});
console view:
fullName: ""
title1: ""
_id: "0dbf012c-729e-4bc9-af0f-f45cd15e4b37"
_owner: "ecd527f0-d2a0-4633-baf4-9777b5e0ffcc"
_createdDate: "Tue Jun 27 2023 03:37:17 GMT+0530 (India Standard Time)"
_updatedDate: "Tue Jun 27 2023 03:37:17 GMT+0530 (India Standard Time)"
any help would be appriciated

[@thewixwiz]

Hi 👋 for coding help I recommend posting on our forum www.thewixwiz.com/forum

[@kirtansolanki5134]

Done