Hi everyone, I'm Rachel Fenichel, I lead the Blockly team at Google. In this talk I'm going
to tell you all about the cool stuff that we did in 2020 and in the first quarter of 2021.
I'll start by talking briefly about the Blockly Samples repository and its role in our future
work. Then I'll show some cool new stuff that we've done with the toolbox and scrolling.
After that I'll talk about infrastructure, testing,
and the new websites that we've built for our code labs and demos. I'm going to cover a lot
of topics quickly. If you want to learn more you can take a look at the other summit videos
First up: Blockly Samples. This is a relatively new repository that has been home to a lot of
our work this year so I'd like to spend some time telling you what it is and what it's for.
Blockly Samples is the place for code that uses or extends Blockly.
That means examples as the name suggests. It also means fields,
block definitions, and other code that customizes Blockly. We're calling those plugins and you can
check out Sam's presentation to learn more about them. Finally, Blockly samples has Codelabs.
In contrast, the Google Blockly repository - what we're calling
the Core Library - has everything that you need to run Blockly out of the box,
and it exposes APIs to let you customize and extend Blockly. Putting this together,
Blockly Samples is the new hub for code that uses or extends Blockly. The core library
contains all of the base implementations and logic to make Blockly work. The code
in Blockly Samples uses the APIs exposed by the core library to do wacky and wonderful things.
This distinction between Core and Samples is a key part of our strategy moving forward. It lets
us focus the team's work and it makes it easier for developers to experiment and to share code.
Now let's talk about Toolboxes. Customizing the Toolbox has been a common request through
the years and we've seen a lot of custom toolboxes out in the wild.
In 2020 Abby took apart the old Toolbox code and rewrote it to be extensible and configurable.
You can now define your toolbox in either XML or JSON which makes it easy to generate
a toolbox from a list of blocks. You can also add css classes to all the parts of the toolbox
making it easy to customize the look and feel of your toolbox without diving into javascript.
Finally you can make more complicated changes by providing javascript classes
that implement some newly exposed interfaces.
As a test of the new toolbox code Maribeth built a Scratch-style Toolbox
and published it as a plugin. This toolbox has an always-open flyout and it lets you scroll
continuously through all the categories. This plugin is published on npm and it works with
the standard toolbox definitions so you can switch to it with just a few lines of code.
The code is in the Blockly Samples repository of course if you want to take a look.
Next scrolling. You may have noticed that Blockley has custom scroll bars.
Their implementation has historically been tightly coupled with zooming and workspace sizing.
The team spent the first quarter of 2021 disentangling the sizing and scrolling code
which led to some valuable new features and plugins.
I'm happy to say that as a direct result of this work we now have single direction scrolling
available as a configuration option in core, closing a bug that dates back to
2017. This style of scrolling works especially well on mobile devices
or when you want the layout or order of the block code to mirror your text code
The scrolling and metrics work also enabled a couple of small but useful plugins,
including a plugin that lets you have a fixed top left corner while maintaining
the infinite workspace down into the right. A zoom-to-fit button that you can use to see all
of your blocks at once - that's what's being demoed in this gif on the right -
and a plugin that scrolls the workspace as you drag to the edge which allows you to
drag a block to a part of the workspace that you can't see when you start the drag. Pulling those
features out into plugins allows us to support developers who want that behavior but not bloat
either the core library or the configurations struct with code that most developers won't use.
On to testing.
In 2020 we packaged up a bunch of our internal test utilities and published them for use in
your testing environments. The package with those utilities is named @blockley/dev-tools. It's
stuffed full of goodies: Stress testing utilities, the test toolboxes we use during development,
and a configurable Blockly playground that you can inject into your environment.
It also has a whole bunch of helper functions for testing your fields and your blocks.
Writing new features is fun but they really start to matter when you, the developers,
can discover and understand them. To that end we revamped our demo website and we created a single
home for all of our code labs. The new demo page is at google.github.io/blockly-samples.
You can see that at the bottom of this slide. The new page has all of the old demos which
show how to use individual features of Blockly such as right-to-left mode.
It also has newer examples showing how to integrate Blockly with frameworks like React.
There's also a full list of our plugins and a test playground for each one, meaning that you can go
explore the available plugins and take them for a spin without installing anything. Each page has a
quick toggle to view the plugins README as well as links to the code and to the package on npm.
The goal here is to help developers understand what they're looking at and how to use it.
The other new codelab the other... The other new website is at blockleycodelabs.dev.
A Codelab is an interactive tutorial written in markdown syntax.
So far we have seven of them on topics from getting started, to customizing your toolbox, to
making a custom generator. The contents of the codelabs are all on github
in the Blockly Samples repository. That means that you can propose a new Codelab,
write one of your own, or make edits to an existing Codelab when you spot a problem
In writing this presentation I dug back into pull requests, opened and closed issues,
the forum, and emails, and there was just so much there. It was really hard for me to pick
a few topics to focus on. With that in mind here are some of the other topics that I wanted to put
into this video and couldn't. I've put links to relevant issues, forum posts, and documentation.
You can find the slides on the summit website if you want to take a look at any of these.
Thanks for watching this talk and I hope to see you at our upcoming developer summit. If you have
questions you can post them in our Q&A or you can bring them to our live Q&A sessions at the summit.