• I have a plugin that registers a simple custom block server-side only using register_block_type(). It works fine, but I’m looking to add an array attribute to allow the editor to select multiple options. I could do it with multiple boolean attributes, but I thought I’d try with an array as it’d be neater in the GUI.

    So I added the following to the attributes array element:

            'show' => [
                'label'   => 'Information to show',
                'type'    => 'array',
                'items'   => [
                    'type' => 'string',
                ],
                'enum'    => ['Price', 'Location', 'Description', 'Status', 'Conditions', 'Contact'],
                'default' => ['Price'],
                'autoGenerateControl' => true,
            ],

    Note that I had to add autoGenerateControl to get the multi-select control to display on the settings bar, after I did that it displayed as expected with the default value correctly loaded.

    But if I try to add or remove options using the multi-select control, two things happen:

    1. The post/page isn’t marked as “dirty” so I can’t save it, and
    2. The block itself displays “Error loading block: [object Object]”

    Note that if I remove all options from the multi-select control, the block displays as expected, it only displays this message if I select one or more options. Even though the render function is not yet coded to use the array attribute at all.

    Is it possible to do this? I’d really prefer if it can be done with server-side hooks only, as I’d rather not have to refactor the whole plugin to use npm. Any help appreciated.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter RoscoHead

    (@roscohead)

    Thanks for your help!

    I found the autoGenerateControl in some example code somewhere, I’ve also not found any mention in any documentation. It is definitely causing the error, but if I remove it the GUI control is not rendered. I tried adding supports => [ 'autoRegister' => true ] with and without the autoGenerateControl but it didn’t appear to change the behaviour. Also, the error only displays in the editor, on the front end it displays as expected, but using the default value.

    It seems strange that it renders the control and populates it with the specified default, but is unable to set the attribute. Do you know why that would be, and if there’s any way to change the behaviour of that control?

    Failing that I guess the next thing to try would be a custom control, but I have no idea how to go about that. Is there a good tutorial that you know of?

    Thread Starter RoscoHead

    (@roscohead)

    Correction: it’s not the autoGenerateControl causing the error. It’s adding any string to the array – either in the default value, or trying to add it via the control. If I set the default to an empty array, or delete all the strings in the control, the error goes away, and the block renders as expected. But if I modify the attribute via the GUI, it will not save that attribute, the next time I edit the page it will revert to the default array values.

    Yes, an array attribute can be used, but the attribute definition needs to match what the block editor expects. The enum should generally be defined for the individual items rather than the array itself. Also, if the block is server-side only, the editor may not correctly detect changes without the proper block metadata and client-side handling.

    I’d first check the generated block attribute schema and the browser console for the actual object error. That should help identify whether the issue is with the attribute definition or the server-side block registration.

    Thread Starter RoscoHead

    (@roscohead)

    The error was indeed because the enum had to be inside the items element, but after posting in the Gutenberg git, it turns out there were a couple of related issues there as well (which have now been resolved there), see: https://github.com/WordPress/gutenberg/issues/83308

Viewing 4 replies - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.