Skip to content

Commit

Permalink
Clarify what is meant by "block wrapper" in documentation (#30315)
Browse files Browse the repository at this point in the history
* Clarify what is meant by "block wrapper"

* Callout fragment and SSR specifically
  • Loading branch information
TimothyBJacobs committed Mar 29, 2021
1 parent 4e82ba5 commit 2503648
Showing 1 changed file with 1 addition and 1 deletion.
2 changes: 1 addition & 1 deletion docs/reference-guides/block-api/block-edit-save.md
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ var blockSettings = {

### block wrapper props

The first thing to notice here is the use of the `useBlockProps` React hook on the block wrapper element. In the example above, the block wrapper renders a "div" in the editor, but in order for the Gutenberg editor to know how to manipulate the block, add any extra classNames that are needed for the block... the block wrapper element should apply props retrieved from the `useBlockProps` react hook call.
The first thing to notice here is the use of the `useBlockProps` React hook on the block wrapper element. In the example above, the block wrapper renders a "div" in the editor, but in order for the Gutenberg editor to know how to manipulate the block, add any extra classNames that are needed for the block... the block wrapper element should apply props retrieved from the `useBlockProps` react hook call. The block wrapper element should be a native DOM element, like `<div>` and `<table>`, or a React component that forwards any additional props to native DOM elements. Using a `<Fragment>` or `<ServerSideRender>` component, for instance, would be invalid.

If the element wrapper needs any extra custom HTML attributes, these need to be passed as an argument to the `useBlockProps` hook. For example to add a `my-random-classname` className to the wrapper, you can use the following code:

Expand Down

0 comments on commit 2503648

Please sign in to comment.