Object type for block Attribute (Gutenberg)

Question

Is there support for type object for block attributes??

Thanks.

Answer 1

Yes, there is. It will be like this:

spacing: {
    type: 'object',
    default: {
        margin: {
            global: { ...DIRECTIONS },
            tablet: { ...DIRECTIONS },
            desktop: { ...DIRECTIONS },
            unit: 'px',
            size: 0,
            sync: false,
            syncTablet: false,
            syncDesktop: false
        },
        padding: {
            global: { ...DIRECTIONS },
            tablet: { ...DIRECTIONS },
            desktop: { ...DIRECTIONS },
            unit: 'px',
            size: 0,
            syncGlobal: false,
            syncTablet: false,
            syncDesktop: false
        }
    },
},

Answer 2

There is.

Here are all types: The type field MUST be one of the following:

null, boolean, object, array, string, integer, number (same as integer)

Source: https://developer.wordpress.../block-attributes/

if you need the default value, recreat a object structure with accossitave arrays. In console it will be parsed as a object,. Note if for some reaso is shown as string somthing is wronf in formating of defalut value.

---

Example usage:

On PHP side (in register_block_type method)

register_block_type(
    ...
    'attributes' => [
        'mediaDimensions' => [
            'type' => 'object',
            'default' => ['width' => '300px', 'height' => '200px']
        ],
    ...
]);

On JS (vanila) side:

const [mediaDimensions, setMediaDimensions] = useState(attributes.mediaDimensions);

    ...
    value: attributes.mediaDimensions.width,
    onChange: (newWidthNumber) => {
         setMediaDimensions({ ...mediaDimensions, width: newWidthNumber});)
    ...