A code snippet is missing braces, which leads to an error in the console.

[HelloAlberuni]

Here in the useBlockProps usage example, the snippet is missing braces, which generates an error in the console.

Issue Description

The current code snippet using useBlockProps is:

  const blockProps = useBlockProps(
    className: 'my-custom-class',
    style: {
      color: '#222222',
      backgroundColor: '#eeeeee'
    }
  )

The useBlockProps hook expects an object as a parameter. The snippet is missing braces, so the correct version should be:

  const blockProps = useBlockProps( {
    className: 'my-custom-class',
    style: {
      color: '#222222',
      backgroundColor: '#eeeeee'
    }
  } )

For reference, another snippet on this doc correctly demonstrates the usage of the useBlockProps hook.

URL of the Page with the Issue

https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops

Section of Page with the issue

The section is: useBlockProps

Why is this a problem?

The snippet throws an error for missing braces.

Suggested Fix

Pass parameters in the useblockprops hook as an object. I've created a pull request with the solutions: https://github.com/WordPress/gutenberg/pull/61839

[github-actions[bot]]

Heads up @WordPress/docs-issues-coordinators, we have a new issue open. Time to use 'em labels.

[github-actions[bot]]

Heads up @Leonardus-Nugraha - the "block editor" label was applied to this issue.

[flexseth]

I could put in a fix for this via wporg-developer

@dd32 - would it be merge-able, or are we still waiting on feedback about how to handle the handbooks?