1. Workspace工作空间
上文Blockly简述中已经描述Workspace的表现形式，由分类区、积木区、脚本区组成，Blockly内部的操作以Workspace为核心。所有的操作都是基于Workspace的，譬如Blockly的blocks的注入，事件的响应，积木组的执行等。
Workspace使用
将Blockly放入网页的最简单方法是将其注入空的“div”标签。
首先，包括核心Blockly脚本和核心Blocks模积木。引入js路径可能会有所不同，具体取决于您的网页与Blockly文件的位置：
<script src="blockly_compressed.js"></script>
<script src="blocks_compressed.js"></script>
然后包含用户语言的脚本（在本例中为英语）：
<script src="msg/js/en.js"></script>
在html页面正文的某处添加一个空div并设置其大小，固定大小的工作空间：
<div id="blocklyDiv" style="height: 480px; width: 600px;"></div>
在页面的任何位置添加工具工具箱的结构（请参阅Toolbox工具箱定义）：
<xml id="toolbox" style="display: none">
<block type="controls_if"></block>
<block type="controls_repeat_ext"></block>
<block type="logic_compare"></block>
<block type="math_number"></block>
<block type="math_arithmetic"></block>
<block type="text"></block>
<block type="text_print"></block>
</xml>
最后，调用以下命令将Blockly注入空div。此脚本应位于页面底部，或由onload事件调用。
<script>
var workspace = Blockly.inject('blocklyDiv',
{toolbox: document.getElementById('toolbox')});
</script>
可变大小工作空间
上面定义了一个固定大小的Workspace，如何将Web应用程序按照屏幕上的可用空间调整Blockly的大小，而不是固定大小呢？
将blocklyDiv元素放在blocklyArea元素上。为此，从blocklyDiv中删除任何高度和宽度样式并添加绝对定位：
<div id="blocklyDiv" style="position: absolute"></div>
<script>
var blocklyArea = document.getElementById('blocklyArea');
var blocklyDiv = document.getElementById('blocklyDiv');
var workspace = Blockly.inject(blocklyDiv,
{toolbox: document.getElementById('toolbox')});
var onresize = function(e) {
// Compute the absolute coordinates and dimensions of blocklyArea.
var element = blocklyArea;
var x = 0;
var y = 0;
do {
x += element.offsetLeft;
y += element.offsetTop;
element = element.offsetParent;
} while (element);
// Position blocklyDiv over blocklyArea.
blocklyDiv.style.left = x + 'px';
blocklyDiv.style.top = y + 'px';
blocklyDiv.style.width = blocklyArea.offsetWidth + 'px';
blocklyDiv.style.height = blocklyArea.offsetHeight + 'px';
Blockly.svgResize(workspace);
};
window.addEventListener('resize', onresize, false);
onresize();
</script>
Grid
spacing、length、colour、snap分别定义格子Grid样式。
var workspace = Blockly.inject('blocklyDiv',
{toolbox: document.getElementById('toolbox'),
grid: {
spacing: 20,
length: 3,
colour: '#ccc',
snap: true
}});
Zoom
zoom对Workspace工作空间进行缩放，可以点击图标和控制鼠标进行缩放。
var workspace = Blockly.inject('blocklyDiv',
{toolbox: document.getElementById('toolbox'),
zoom:{
controls: true,
wheel: true,
startScale: 1.0,
maxScale: 3,
minScale: 0.3,
scaleSpeed: 1.2
}});
controls：是否开启缩放。
wheel：鼠标滚轮，设置为true以允许鼠标滚轮缩放。默认为false。
startScale：初始放大系数，默认为1。
maxScale：最大放大系数，默认为3。
minScale：最小的缩小系数，默认为0.3。
scaleSpeed：缩放速率，默认为1.2。
Workspace样式
Workspace样式分为2部分，积木样式、分类样式、
积木样式
积木样式目前由四个字段组成： colourPrimary， colourSecondary， colourTertiary和hat
主色colourPrimary（必需）：Block Colour用作积木的背景色，可以用色调或十六进制值定义。
辅助颜色colourSecondary（可选）:Shadow Block Colour如果积木是阴影积木，则使用此颜色。
三级颜色colourTertiary（可选）:Border Colour这是积木的边框颜色。在主题之前，边框颜色由光明和黑暗路径组成，以便创建投影效果。
帽子hat（可选） :当用户想要将帽子添加到其积木时使用。
分类样式
分类样式目前仅包含颜色属性。
{
"colour":"290"
}
这是分类的颜色。该值可以定义为十六进制值或色调。通常这些颜色应与该分类中大多数积木的主色相同。这使用户可以轻松地分辨哪些积木属于哪个分类。
样式注入
清楚了积木和分类如何定义样式，那么怎样将样式注入到Workspace中呢？
定义list分类采用list_category样式，logic分类采用logic_category样式。
{
"list_category": {
"colours": "#4a148c"
},
"logic_category": {
"colour": "#01579b",
}}
对于分类，可以将样式标记添加到xml即可
<category name="Logic" categorystyle="logic_category">
</category>
定义list分类下的积木采用list_blocks样式，logic分类下的积木采用logic_blocks样式；
{
"list_blocks": {
"colourPrimary": "#4a148c",
"colourSecondary":"#AD7BE9",
"colourTertiary":"#CDB6E9"
},
"logic_blocks": {
"colourPrimary": "#01579b",
"colourSecondary":"#64C7FF",
"colourTertiary":"#C5EAFF"
}}
对于积木，只需积木在定义时将样式名称添加到积木"style":"logic_blocks"。
要想分类样式和积木样式起作用，最好的办法是在Workspace生成时，定义主题，使用options.theme在您的注入中包含。
{
theme: Blockly.Theme(blockStyles, categoryStyles)
}
2. Toolbox工具箱
Toolbox工具箱指的是分类区和积木区，Toolbox在Blockly中使用一段XML存储，积木以某一小段XML代码组成，多个类似积木组成一段分类XML，分类积木的组合形成一段完整的XML，完整的XML被称为Toolbox，最终Toolbox对应的XML会被Blockly渲染为分类区和积木区。
工具箱是用户可以创建新积木的侧边菜单。工具箱的结构使用XML指定， XML可以是节点树，也可以是字符串表示。
将此XML注入到页面中时，会将其传递给Blockly。
<xml id="toolbox" style="display: none">
<block type="controls_if"></block>
<block type="controls_whileUntil"></block>
</xml>
<script>
var workspace = Blockly.inject('blocklyDiv',
{toolbox: document.getElementById('toolbox')});
</script>
Categories分类
用于将Blocks按模积木进行分类，Blockly默认定义了8种分类，每种分类使用不同的颜色，有不同功能，譬如Loops分类存放循环积木，Math分类存放数学操作积木等；
工具箱中的积木可以按分类组织。分类可嵌套，这里有两个分类（ 'Control'和'Logic'），每个分类包含三个积木：
<xml id="toolbox" style="display: none">
<category name="Control">
<block type="controls_if"></block>
<block type="controls_whileUntil"></block>
<block type="controls_for">
</category>
<category name="Logic">
<block type="logic_compare"></block>
<block type="logic_operation"></block>
<block type="logic_boolean"></block>
</category>
</xml>
动态分类
有两类具有特殊行为的分类。变量和函数分类定义为没有内容，但具有'custom'属性 ：'VARIABLE'或'PROCEDURE'。这些分类将使用适当的积木自动填充。
<category name="Variables" custom="VARIABLE"></category>
<category name="Functions" custom="PROCEDURE"></category>
Blocks积木
用于存放分类下的积木，不同积木代表不同的功能，在Blockly中，积木可以使用开发者工具，或者编写代码灵活定义积木；
阴影积木shadow
阴影积木是占位符积木，与常规积木不同，如果用户在其上放置积木，则会替换它们，相当于是一个默认值。
分隔线sep
将两个分类使用线分离，常见于菜单分割线。
按钮button和标签label
按钮和标签也可定义为积木，您可以将放入工具箱的位置放置按钮或标签。
按钮应该有回调函数，而标签不需要。要为给定按钮设置回调函数，使用
yourWorkspace.registerButtonCallback(yourCallbackKey, yourFunction)
禁用积木disabled
可以使用可选的disabled属性单独禁用工具箱中的积木：禁用积木可用于限制用户的选择。也许高级积木可能会在某些成就后解锁。
