Microsoft MakeCode

Overlapping in menu - layout problem in "Blocks" mode for extension

After adding more functions to my extension, the “Blocks”-mode menu shows all the functions one above the other, leaving the menu unusable.

In the Javascript and Python modes this does not occur.

I have attached images to demonstrate this.

Can you link your code? This is most likely an error in how you authored the blocks

Thanks in advance for looking.
I went over the documentation a few times to try and find what is causing this, I’d be glad to submit a pull request with an addition to the documentation on this.

I’ve create a tiny demo extension that recreates this issue:

I’ll try reducing it more and more until I find the root cause, however, since it takes ages until MakeCode’s “refresh extension” button actually takes an update, this isn’t easy to do.

If you’re trying to define the shape of the blocks, it would likely be easiest to use https://makecode.com/playground ; that will let you author some blocks on the left side and show how they would show up in the editor after you press run. It has a lot of examples of blocks as well in the drop down (but note that nothing is persisted / if you make block definitions there you should save them somewhere else!)

The thing breaking here is the .field="gridpicker" on every block; specifically the one on setX is crashing here, as that one is trying to define the field as a gridpicker of numbers, which isn’t valid – the parameter needs to be an enumerable type, like pins, images, enum members, etc. (the other ones that have fields set to gridpicker aren’t breaking things, but only because they’re being assigned to a ‘port’ field that doesn’t exist – if you tried to add a parameter port they might break as well depending on the type).

If you want to get the gridpicker portion working, here’s a trimmed snippet from that repo that has it showing up with valid options, that will show up like the following:

image

/**
 * Testing blocks layout in menu.
 */
//% color="#303030" weight=100 icon="\uf0e7"
//% groups='["GroupA", "GroupB", "GroupC", "GroupD", "GroupE"]'
namespace tempTest {

    let myClass: MyClass = null

    /**
     * Button state
     */
    export enum ButtonState {
        //% block=Released
        Released = 0,
        //% block=Pressed
        Pressed = 1
    }
    
    /**
     * Set x
     * @param x x [0,255]
    */
    //% block="Set x|x %x"
    //% blockId="tempTest_setX"
    //% x.fieldEditor="gridpicker" x.fieldOptions.columns=2
    //% inlineInputMode=inline
    //% group="GroupD"
    //% weight=30
    export function setX(x: ButtonState): void {
        myClass.setX(x)
    }
}

As a side note, I would highly suggest using the github integration to create extensions in the future. Much easier than manually setting up repos, and it gives you access to a test project to constantly see updates, and the ability to make sure our backend knows you’ve made updates when you create releases / immediately fetches the new content at that point without a ~ 12 hr cache. Docs on that here.

I found the issue, the fieldEditor configuration caused this:

//% x.fieldEditor="gridpicker" x.fieldOptions.columns=2

I have seen this configuration in various examples including in the forum: Servo-write block creation
Removed it for now.

A great improvement to MakeCode would be a list of documentation-based errors like this and not only code-errors.

The playground did help speed things up a lot.
Since the extension uses additional hardware I’ve been using the offline version of MakeCode, in which I didn’t find a GitHub integration, however, for UI issues this was indeed redundant.

Is there an API call I can put in my GitHub workflow to invalidate the cache or is this only possible via a button in MakeCode itself?