Align a custom block button by wrapping it in div

by

If you turned on script debugging or the SCRIPT_DEBUG constant in WordPress, then you would’ve noticed that your block type causes React to throw this warning: “Warning: React does not recognize the tagName prop on a DOM element.“, so when developing block types, you should enable script debugging — at least, you’ll know your code causes a warning or an error, even if the message didn’t make sense.. i.e. it doesn’t tell something like, “hey, remove tagName from your blockProps object!”.. 🙂

So as for the problems in question, or the above warning, it’s because the block (wrapper) props, i.e. your blockProps variable, contained an invalid property/attribute (which is tagName) for the <div> tag that your edit() and save() functions return.

That property is added to the blockProps when you do Object.assign(blockProps, { your props }) which modifies the original blockProps object — Object.assign() works like array_merge() in PHP, but PHP doesn’t modify the first array passed to the function and simply returns a new array; Object.assign(), on the other hand, modifies the first object. So you should have used Object.assign({}, blockProps, { your props }) instead (note the {}), i.e. clone the existing blockProps object instead of modifying it, e.g. in edit():

var buttonBlock = el(
//  RichText, Object.assign(blockProps, {   // bad
// and it's bad because it adds the tagName property to the blockProps.

  RichText, Object.assign({}, blockProps, { // good
    ... your props.
  })
);
return el('div', blockProps, buttonBlock)

However, despite using the blockProps (or useBlockProps) on other elements would not result in any error/warning, I don’t think it’s needed above, hence I’d use the blockProps only on the div element. 🙂

Leave a Comment