يمكنك وضع زر أو تصنيف في أي مكان يمكنك وضع كتلة فيه في صندوق الأدوات.

JSON
{
"kind": "flyoutToolbox",
"contents": [
{
"kind": "block",
"type":"logic_operation"
},
{
"kind": "label",
"text": "A label",
"web-class": "myLabelStyle"
},
{
"kind": "label",
"text": "Another label"
},
{
"kind": "block",
"type": "logic_negate"
},
{
"kind": "button",
"text": "A button",
"callbackKey": "myFirstButtonPressed"
},
{
"kind": "block",
"type": "logic_boolean"
}
]
}
XML
<xml id="toolbox" style="display: none">
<block type="logic_operation"></block>
<label text="A label" web-class="myLabelStyle"></label>
<label text="Another label"></label>
<block type="logic_negate"></block>
<button text="A button" callbackKey="myFirstButtonPressed"></button>
<block type="logic_boolean"></block>
</xml>
<style>
.myLabelStyle>.blocklyFlyoutLabelText {
font-style: italic;
fill: green;
}
</style>
يمكنك تحديد اسم فئة CSS لتطبيقه على الزر أو التصنيف. في المثال أعلاه، يستخدم التصنيف الأول نمطًا مخصّصًا، بينما يستخدم التصنيف الثاني النمط التلقائي.
يجب أن تتضمّن الأزرار دوال ردّ الاتصال، بينما يجب ألا تتضمّن التصنيفات هذه الدوال. لضبط دالة معالجة الرجوع عند النقر على زر معيّن، استخدِم
yourWorkspace.registerButtonCallback(yourCallbackKey, yourFunction).
يجب أن تقبل الدالة الزر الذي تم النقر عليه كوسيطة. يُعدّ الزر "إنشاء متغيّر..." في فئة المتغيّرات مثالاً جيدًا على زر يتضمّن دالة ردّ الاتصال.