Gutenberg default attributes are empty when accessing in edit

I'm quite new to Gutenberg and Wordpress and facing some issues with my attribute. When I'm trying to output the attribute data it is returning an empty object. Not quite sure why the default values aren't being applied? Thanks in advance!

registerBlockType(mt/product-listing, {
  title: Product,
  icon: edit-page,
  category: design,
  attributes: {
    content: { type: 'string' }
  }, 
  ...,
     

And when trying to access in edit:

 edit: (props) = {
    // Accessing props
    console.log(Edit, props);


    return (
      div
         Products product={props.attributes} /
      /div
    )
  },

Resulting output:

{
    name: mt/product,
    isSelected: true,
    attributes: {},
    clientId: xxxxxxxxxx-xxxx-xxxxx,
    isSelectionEnabled: true,
    context: {},
    className: wp-block-mt-product
}

Topic block-editor plugin-development plugins Wordpress

Category Web


You aren't defining any defaults in your registerBlockType

[...]
attributes: {
    content: {
        type: 'string',
        default: 'I am a string',
    },
},
[...]

Worth noting also that the attributes will only get saved in your final markup once they have a value - it won't save the defaults in the content.

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.