|
| 1 | +# Block Editing Mode |
| 2 | + |
| 3 | +`useBlockEditingMode` is a hook that reads, and optionally sets, the editing mode of a block. The mode restricts the user interface that is displayed for editing that block. |
| 4 | + |
| 5 | +The mode can be set to one of the following values: |
| 6 | + |
| 7 | +- `'disabled'`: Prevents editing the block entirely, i.e., it cannot be selected. |
| 8 | +- `'contentOnly'`: Hides all non-content UI, such as auxiliary controls in the toolbar, block movers, and block settings. |
| 9 | +- `'default'`: Allows editing the block as normal. |
| 10 | + |
| 11 | +Modes don't cascade to inner blocks, with one exception: a block set to `'disabled'` also disables its inner blocks, unless an inner block has its own mode explicitly set. |
| 12 | + |
| 13 | +If called outside of a block context, the mode is set on the editor root, which follows the same rule, so `'disabled'` applies to every block, while `'contentOnly'` does not. |
| 14 | + |
| 15 | +A mode can also be derived rather than set by the block itself. Under a `templateLock: 'contentOnly'` ancestor, a block without an explicitly set mode is derived as `'contentOnly'` if it is a content block (it has an attribute with `role: 'content'`, or `supports.contentRole`), and as `'disabled'` otherwise. An explicitly set mode wins over these derived modes. See the [block locking guide](https://developer.wordpress.org/block-editor/how-to-guides/curating-the-editor-experience/block-locking/) for more on locking. |
| 16 | + |
| 17 | +## Development guidelines |
| 18 | + |
| 19 | +### Usage |
| 20 | + |
| 21 | +Called without an argument, the hook returns the current mode for the block. This is the most common use, and lets a block hide controls when editing is restricted: |
| 22 | + |
| 23 | +```jsx |
| 24 | +import { |
| 25 | + BlockControls, |
| 26 | + useBlockEditingMode, |
| 27 | + useBlockProps, |
| 28 | +} from '@wordpress/block-editor'; |
| 29 | + |
| 30 | +function MyBlock( { attributes, setAttributes } ) { |
| 31 | + const blockEditingMode = useBlockEditingMode(); |
| 32 | + return ( |
| 33 | + <> |
| 34 | + { blockEditingMode === 'default' && ( |
| 35 | + <BlockControls group="block"> |
| 36 | + <MyToolbarControl /> |
| 37 | + </BlockControls> |
| 38 | + ) } |
| 39 | + <div { ...useBlockProps() }></div> |
| 40 | + </> |
| 41 | + ); |
| 42 | +} |
| 43 | +``` |
| 44 | + |
| 45 | +Passing a mode sets it for the block: |
| 46 | + |
| 47 | +```jsx |
| 48 | +import { |
| 49 | + useBlockEditingMode, |
| 50 | + useBlockProps, |
| 51 | +} from '@wordpress/block-editor'; |
| 52 | + |
| 53 | +function MyBlock( { attributes, setAttributes } ) { |
| 54 | + useBlockEditingMode( 'disabled' ); |
| 55 | + return <div { ...useBlockProps() }></div>; |
| 56 | +} |
| 57 | +``` |
| 58 | + |
| 59 | +### Parameters |
| 60 | + |
| 61 | +#### `mode` |
| 62 | + |
| 63 | +- **Type:** `String` |
| 64 | +- **Default:** `undefined` |
| 65 | + |
| 66 | +The editing mode to set for the block. One of `'disabled'`, `'contentOnly'`, or `'default'`. If `undefined`, the current editing mode remains unchanged. |
| 67 | + |
| 68 | +### Return |
| 69 | + |
| 70 | +- **Type:** `String` |
| 71 | + |
| 72 | +The current editing mode for the block. |
0 commit comments