This article explains how to set and subscribe to Blocks properties from Google Web Designer using a custom component available for download on this page. It is assumed that the reader is familiar with Google Web Designer.

To install the PIXILAB Blocks Property custom component, download this ZIP file and install it according to the official installation instructions.

TODO: DESCRIBE HOW TO SET THE WEBSOCKET ADDRESS

When placed in a Google Web Designer document, the PIXILAB Blocks Property component provides a set of events and actions for getting and setting the value of a specific Blocks property. The "Property changes", "Property becomes true" and "Property becomes false" events can be used to react to property changes, and the "Set property value" action can be used to set the value of the property.

The component must be configured before it can be used: Select the component, open the Properties tab and scroll down to the "PIXILAB Blocks Property" section. Set the property path and choose whether to subscribe to property changes or not:

PIXILAB Blocks Property components are visible in the Google Web Designer editor, but will not be visible in the final result.

1. On the Tasks page in the Blocks editor, create a group named "test" in the Main realm, then create a Task named "test". Add a log statement with a message of your choice.
2. In a Google Web Designer project, add a new PIXILAB Blocks Property component to the document.
3. Set the Property path to "Realm.Main.group.test.test.running" and uncheck "Subscribe to changes".
4. Add a new Button component to the document.
5. Create a new click event with the previously added button as the target.
6. Select the "PIXILAB Blocks Property - Set property value" action.
7. Select the previously added PIXILAB Blocks Property component as the receiver.
8. Set the property value to "true":

Launch the Preview and click the button. Go to the Task page in Blocks. The log statement shows that the "test" Task was executed:

1. On the Tasks page in the Blocks editor, create a string realm variable named "test" in the Main realm. Give it a default value of your choice.
2. In a Google Web Designer project, add a new PIXILAB Blocks Property component to the document.
3. Set the Property path to "Realm.Main.variable.test.value" and make sure "Subscribe to changes" is checked.
4. Add a new text element to the document. (The text content does not matter.)
5. Set the ID of the text element to "test".
6. Create a new event with the previously added PIXILAB Blocks Property component as the target.
7. Select the "PIXILAB Blocks Property - Property changes" event type.
8. Select "Custom action".
9. Give the action a name and enter the following custom code:

   document.getElementById("test").textContent = event.detail.value;

Launch the Preview. The text now shows the value of the "test" Realm variable. If the "test" Realm variable changes, a "Property changes" event will be fired, and the custom action will update the text.