Improve the serialized-disabled-interactions demo

[maribethb]

Category

• Plugins

Component

serialized-disabled-interactions

Is your feature request related to a problem? Please describe.

• The demo page says this plugin adds scrolling features, which is wrong. This was an accidental copy/paste error.
• Not clear what the plugin is for or who needs it.
• Not clear what to look at in the demo to understand what this plugin does.

Describe the solution you'd like

• [x] Remove the extra "Adds scrolling features" from the demo page.
• [ ] Add an introduction explaining why we have this plugin. This text could be pulled from the README or link to the Serialization docs.
• [ ] Remove all of the tabs in the playground except the JSON tab, since that is the only tab that matters for this demo.
• [ ] Add some blocks to the workspace that are not movable, editable, or deletable, so that users can see what the JSON output looks like for those blocks.

Additional context

Note: This issue has multiple parts, and not all parts need to be done by the same person or at the same time.

Background information on this plugin:

Blockly has two serialization systems which are used to save the state of an entire Blockly workspace and all the blocks in it. The old system uses XML. The new system uses JSON. The XML system saved certain information about blocks, including whether they are movable, editable, and deletable. The new JSON system does not save these attributes by default, because most people won't need to serialize those values since they are not user-editable. But some folks do want to serialize them, so we created this plugin for them to use.

Information on contributing to fix this bug: first read the background information about how to contribute to samples and verify your changes.

Removing the generator tabs from the playground:

1. In the test/index.js file for the serialize-disabled-interactions demo, you'll see we call createPlayground to use our dev-tools to set up the advanced playground. This function returns a promise that has an API we can use to modify the playground. So we need to first assign it a value since we will need to use it.
2. The value is a promise, so we need to wait for the promise to resolve. (Unfortunately it looks like we can't use async/await without a polyfill, so just use the normal Promise APIs.)
3. When the promise is resolved, we now have access to the PlaygroundAPI. Use the removeGenerator function to remove the following generators that we don't need to show: XML, JavaScript, Dart, Lua, Python, PHP. Now the playground should be left with only a JSON tab. (Note that until https://github.com/google/blockly-samples/issues/1224 is fixed, you might see a message that the function removeGenerator doesn't exist on type playgroundAPI. The error message is incorrect and it does exist, don't worry!)

Add initial blocks to the workspace

In Blockly, the developer can programmatically add blocks to the workspace by serializing saved block JSON or XML. We can add some undeletable, unmovable, uneditable blocks to the workspace as soon as it loads so the user can see what these look like in the JSON tab.

1. After the playground from dev-tools is loaded (if the above steps have been done, you can do this in the same place that removeGenerators was called), you can call getWorkspace() on the playgroundAPI to get the workspace.
2. Clear the workspace of blocks using workspace.clear(). The reason we have to do this after the playground is loaded, and not right after the workspace itself is created, is that the playground will automatically try to load blocks that were on the workspace before. We need to clear it after it does that.
3. Load some JSON that has the example blocks. For example, the following snippet will load a workspace that looks like this:

const blocks = {
      'blocks': {
        'languageVersion': 0,
        'blocks': [
          {
            'type': 'text',
            'id': 'N9`ZXeamxnEyVU0c`NF8',
            'x': 0,
            'y': 0,
            'fields': {
              'TEXT': 'This block is not deletable',
            },
          },
        ],
      },
      'disabledInteractions': {
        'notDeletable': [
          'N9`ZXeamxnEyVU0c`NF8',
        ],
      },
    };
    Blockly.serialization.workspaces.load(blocks, workspace);

You can use the same kind of snippet to add blocks that are not deletable, movable, or editable. You can even use the advanced playground to generate this JSON snippet for you! Hint: Use the developer console in Chrome. Select a block on the workspace. In the console, type Blockly.selected to get the selected block. Use Blockly.selected.setMovable(false) to make that block not movable. Look at how the JSON tab changed. Use this to help create an initial workspace state that shows off what this plugin does.

[HanaEason]

Could I be assigned this issue? Thanks!

[maribethb]

Closing this as obsolete due the plugin being deprecated.