0

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?

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.