1. 什么是Blockly的workspace
workspace是Blockly中非常重要的对象，它是其他组件运行的基础，所有其他Blockly的组件都必须在workspace中才能工作。以下图为例，图中蓝框以内的范围都是workspace，左侧的ToolBox（下一节的内容）、中间的积木块组合（blocks）、右下方的垃圾桶和滑动条都是workspace的子对象。通常来说，一个应用只需要创建一个workspace就足够。如果想要使用多个workspace，需要解决一些命名空间冲突的问题，本攻略不包括这部分内容。
2. 创建一个workspace
a. 从github上下载Blockly并解压，然后将blockly-master文件夹拷贝到一个新的工作空间下，改名为blockly（方便后续开发）。blockly文件夹中包含了Blockly的源码、示例代码、编译程序以及编译后的代码。如果你的应用对包体大小很敏感，应当进行适当的裁剪。
在同一个目录下新建一个文件，并将名字改为 index1.html（任何xxxx.html都可以，名字不重要，后文简称index1）。
b. 接下来打开并编辑index1，输入下面的代码。
<!DOCTYPE html>
<html>
<head>
<title>我的第一个Blockly应用</title>
<script src="blockly/blockly_compressed.js"></script>
<script src="blockly/msg/js/zh-hans.js"></script>
</head>
<body>
<div id="blocklyDiv" style="width:400px;height:600px"></div>
<script>
var blocklyDiv = document.getElementById('blocklyDiv');
var workspace = Blockly.inject(blocklyDiv, {});
</script>
</body>
</html>
保存后，用Chrome浏览器打开index1，你将看到下图所示的效果，在左上角的灰色线框内右键能够显示workspace最基本的右键菜单，如果不是这样，检查一下代码是否正确，或者在Chrome中按F12调出调试工具查看具体错误。
c. 现在我们解释一下上面的代码。
head中第一行定义了网页的标题。第二行引入了编译后的blockly模块。第三行引入了blockly自带的简体中文字符资源。Blockly支持多国语言，所以我们必须明确的引入一种资源（引入多种会产生冲突）。
<head>
<title>我的第一个Blockly应用</title>
<script src="blockly/blockly_compressed.js"></script>
<script src="blockly/msg/js/zh-hans.js"></script>
</head>
body中第一行创建了一个空的div并且定义了它的大小，长400像素，宽600像素。
script中第一行通过id获取到了刚才创建的div元素（blocklyDiv）。
第二行用Blockly.inject(blocklyDiv, {})函数在div中注入了一个workspace，这是整个代码最核心的一行。
Blockly提供了Blockly.inject()这样一个方便的接口供我们创建workspace，其中第一个参数是一个页面中的元素，第二个参数是workspace的设置选项，在这个例子中我们全部采用默认设置，参数为空。
<body>
<div id="blocklyDiv" style="width:400px;height:600px"></div>
<script>
var blocklyDiv = document.getElementById('blocklyDiv');
var workspace = Blockly.inject(blocklyDiv, {});
</script>
</body>
workspace在第一次创建，也就是inject调用时会填充整个div，但它不会随着div的变化自动适应。在介绍workspace的参数之前，我们先让workspace能跟随浏览器大小变化。
3.可变尺寸的workspace
对index1的代码做如下修改：
<!DOCTYPE html>
<html style="height:100%">
<head>
<title>我的第一个Blockly应用</title>
<script src="blockly/blockly_compressed.js"></script>
<script src="blockly/msg/js/zh-hans.js"></script>
</head>
<body style="height:100%">
<div id="blocklyDiv" style="width:100%;height:100%"></div>
<script>
//生成模块列表区域
var blocklyDiv = document.getElementById('blocklyDiv');
var workspace = Blockly.inject(blocklyDiv, {});
//调整工作区域大小
var onresize = function (e) {
Blockly.svgResize(workspace);
};
//注册resize处理函数
window.addEventListener('resize', onresize);
Blockly.svgResize(workspace);
</script>
</body>
</html>
首先修改html和body的样式，让他们占整个页面的100%（完全填充）。同时修改div的样式，让他占满整个body。这样，当窗口大小改变时，div的大小就会自动随之变化。
但此时workspace并不会随div改变而改变，Blockly提供了svgResize接口，它能让一个workspace拉伸直到填满其父元素，这里的父元素就是blocklyDiv。因此，我们需要得知div元素何时改变了大小，每当它改变大小时就调用一次Blockly.svgResize(workspace);修改workspace的大小。
div是随页面的改变而改变的，在html中，我们可以用事件（event）机制来获取页面改变的事件。
window.addEventListener('resize', onresize);注册了一个事件回调，当resize事件发生时，调用onresize函数。
我们在上面三行定义了这个onresize函数，它只做一件事情，就是调用Blockly.svgResize(workspace);调整workspace的大小。到此，我们的workspace就能够随着窗口大小改变而改变了。整个流程大致如下：
4. workspace的设置选项
workspace目前有20个选项（options）可以设置。我们可以在var workspace = Blockly.inject(blocklyDiv, {});定义workspace时进行设置，也可以在后的程序中通过workspace.options进行修改。
下面的代码设置了几个常用的选项，包括资源目录（media）、缩放（zoom）、垃圾桶（trashcan）、滚动条（scrollBar）以及工具栏（ToolBox，下一节专门讲它的创建）：
var workspace = Blockly.inject(blocklyDiv, {
media: 'blockly/media/',
toolbox: document.getElementById('toolbox'),
zoom: {
controls: true,
wheel: true,
startScale: 1.0,
maxScale: 3,
minScale: 0.5,
scaleSpeed: 1.05
},
trashcan: true,
scrollBar: true
});
实现效果如下：
更多的选项效果，可以参考https://developers.google.com/blockly/guides/get-started/web#configuration逐个进行尝试。
