Hi, my name is Sam El-Husseini and I'm a software engineer at Google.
I work on the kids coding team and today I'll be giving you an overview of Blockly plugins.
We'll start off with a bit of background and motivation behind Blockly plugins;
then dive into what makes up a plugin; we'll talk about how to include them in your application;
then briefly show how to build one;
and then we'll end with a showcase of some of our first party plugins.
A bit of background of what motivated us to build a plug-in ecosystem.
The Blockly ecosystem continues to grow and with that comes requests for more and more features.
Many of these may not be very generalizable or incompatible with what the majority of the folks
in the community want and need, making Blockly core a not-so-ideal candidate for these features
as it causes code bloat, additional configuration options, and introduces performance issues.
Instead in 2020 we laid the foundation of a plug-in ecosystem with the introduction of
Blockly plugins. These plugins are self-contained pieces of code that add functionality to Blockly.
They can add fields, define themes, create renderers, and so much more.
The move to a plugin ecosystem allows us to include only core functionality
in Blockly core and focus our energy on making the library even more extensible
so fellow developers in the community are able to build plugins on top of it.
Highly requested features that aren't considered core can be pulled out into first party plugins
supported by the Blockly team. We've seeded a plug-in ecosystem with 17 first-party plugins
so far and many more to come. This also gives the Blockly developer community a
structured way to share and contribute some of the amazing features we've seen over the years
so that others are able to easily include those features in their application.
So let's take a look at what makes up a plugin. Plugins are Node.js packages that may or may not
be published to npm. A plugin is a self-contained piece of code that adds functionality to Blockly.
The target user for a plugin is a developer who finds and uses the plugin through npm. There are
many types of plugins including fields, themes, blocks, and workspace plugins. Anyone can create
their own plugins. First party plugins are plugins supported by the Blockly team. They're defined in
the google/blockly-samples github repository and are published to npm under the @blockly scope.
Third-party plugins are maintained and published independently.
So how do you include plugins in your applications? Since Blockly plugins
are Node.js packages you can install them just like other packages in node using npm.
First add the plugin to your package.json and then import it into your application.
Some plugins require additional configuration. See the README of the plugin for details.
You can also use plugins without npm by referencing through a script tag to the
unpackaged version of the plugin. There are a few ways you can find plugins. On github pages,
where you can explore live demos of first party plugins; on npm,
where you can search for the @blockly scope to see a list of plugins published by the Blockly team;
on github, where you can look at the plugins directory in the Blockly Samples repository.
Each plugin has a README that describes its behavior and intended use.
Further documentation about plugins can be found at developers.google.com/blockly.
So how do we go about building a plugin? We've created the @blockly/create-package script
to allow you to bootstrap a Blockly plugin using a number of pre-defined templates.
Maribeth is giving a more in-depth talk about this tool in her talk
"Building a Blockly plugin." Blockly plugins have both javascript and typescript support.
You can use the typescript flag to create a Blockly plugin with typescript.
We've developed some naming conventions to help developers find and use our and your plugins.
For example, a first party field begins with the @blockly/field dash the name of the field,
whereas a third party field would just be blockly-field dash the name of the field.
Notice all first party plugins live under the @blockly scope. If you use the "create-package"
script, it will automatically add the suggested tags ... to the plugins package.json.
We recommend using these tags to make it easier to search plugins by type on npm.
Let's take a look at some of the first party plugins.
You can view some of these demos at google.github.io/blockly-samples.
We'll start off with the fields. We have the date field, a grid drop down,
and a slider field. With a number of block plugins here's a look at the test blocks plugin which
defines a number of test blocks; the workspace search plugin which adds workspace search;
the continuous toolbox plugin
which creates a continuously scrolling toolbox;
typed variable modal which adds a modal when creating a typed variable
allowing you to choose the type of the variable;
a number of themes such as the dark theme, and the modern theme.
Thank you for your time today and I hope this has inspired you to build with Blockly plugins.
To learn more about building your own plugin be sure to check out Maribeth's
"Build a Blockly plugin" talk.