javascript - How to read inline-CSS from Gutenberg block?

I'm building a simple Gutenberg block.

Attributes

    attributes: {
        sign: {
            type: 'string',
            source: 'text',
            default: '+'
        },
        size: {
            type: 'string',
            default: 16,
            selector: '.plusblok',
            source: 'attributes',
            attributes: 'style',
            property: 'font-size'
        }
    },

edit

        var attr = props.attributes;

        return [
            el(InspectorControls, {key: 'inspector'}, 
                el(components.PanelBody, {
                        title: 'Details',
                        initialOpen: true
                    },
                    el(TextControl, {
                        type: 'text',
                        value: attr.sign,
                        label: 'Teken',
                        onChange: function (newSign) {
                            props.setAttributes({ sign: newSign})
                        }
                    }),
                    el(
                        RangeControl, {
                            label: 'Grootte (in px)',
                            value: attr.size,
                            initialPosition: 16,
                            min: 8,
                            max: 48,
                            onChange: function( newSize ) {
                                props.setAttributes({ size: newSize })
                            }
                        }
                    )
                )
            ),
            el('div', {className: props.className},
                el('div', {
                    className: 'plusblok',
                    style: {
                        fontSize: attr.size + 'px',
                        }
                    },
                    attr.sign
                )
            )
        ]

save

        var attr = props.attributes;

        return (
            el('div', {className: props.className},
                el('div', {
                        className: 'plusblok',
                        style: {
                            fontSize: attr.size + 'px',
                        }
                    },
                    attr.sign
                )
            )
        )

The problem is with 'selecting' the font-size and reading the values into the attributes-part. The current code is a combination of this issue and this page in the handbook, but it doesn't work. What am I doing wrong?

I'm building a simple Gutenberg block.

Attributes

    attributes: {
        sign: {
            type: 'string',
            source: 'text',
            default: '+'
        },
        size: {
            type: 'string',
            default: 16,
            selector: '.plusblok',
            source: 'attributes',
            attributes: 'style',
            property: 'font-size'
        }
    },

edit

        var attr = props.attributes;

        return [
            el(InspectorControls, {key: 'inspector'}, 
                el(components.PanelBody, {
                        title: 'Details',
                        initialOpen: true
                    },
                    el(TextControl, {
                        type: 'text',
                        value: attr.sign,
                        label: 'Teken',
                        onChange: function (newSign) {
                            props.setAttributes({ sign: newSign})
                        }
                    }),
                    el(
                        RangeControl, {
                            label: 'Grootte (in px)',
                            value: attr.size,
                            initialPosition: 16,
                            min: 8,
                            max: 48,
                            onChange: function( newSize ) {
                                props.setAttributes({ size: newSize })
                            }
                        }
                    )
                )
            ),
            el('div', {className: props.className},
                el('div', {
                    className: 'plusblok',
                    style: {
                        fontSize: attr.size + 'px',
                        }
                    },
                    attr.sign
                )
            )
        ]

save

        var attr = props.attributes;

        return (
            el('div', {className: props.className},
                el('div', {
                        className: 'plusblok',
                        style: {
                            fontSize: attr.size + 'px',
                        }
                    },
                    attr.sign
                )
            )
        )

The problem is with 'selecting' the font-size and reading the values into the attributes-part. The current code is a combination of this issue and this page in the handbook, but it doesn't work. What am I doing wrong?

• javascript
• block-editor

Share Improve this question asked Jan 25, 2019 at 22:31 BramBram 27611 silver badge1515 bronze badges 2

• Have you tried using a string instead of an object for your style attribute? – Tom J Nowell ♦ Commented Jan 26, 2019 at 0:29
• Like so: style: '{ font-size: ' + attr.size + 'px; }'? That doesn't work, as style expects a JS-object. – Bram Commented Jan 26, 2019 at 9:21

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

Turns out Gutenberg has another way of storing attribute values: the block's comment delimiter:

If no attribute source is specified, the attribute will be saved to (and read from) the block’s comment delimiter.

source

When I inspected the database entry, I indeed found the size attribute there:

<!-- wp:XXX {"size":48} -->
    <div>...</div>
<!-- /wp:XXX -->

The problem was that the number 48 was formatted as a number in this comment delimiter, but defined as a string in the attributes section. Once I've changed that and removed all the selector-lines, it worked perfectly.

attributes: {
    sign: {
        type: 'string',
        source: 'text',
        default: '+'
    },
    size: {
        type: 'number',
        default: 16,
    }
},