/
index.js
67 lines (64 loc) · 1.92 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
/**
* WordPress dependencies
*/
import { useSelect, useDispatch } from '@wordpress/data';
import { useEffect } from '@wordpress/element';
/**
* Internal dependencies
*/
import { store as blockEditorStore } from '../../store';
import { useBlockEditContext } from '../block-edit/context';
/**
* @typedef {'disabled'|'contentOnly'|'default'} BlockEditingMode
*/
/**
* Allows a block to restrict the user interface that is displayed for editing
* that block and its inner blocks.
*
* @example
* ```js
* function MyBlock( { attributes, setAttributes } ) {
* useBlockEditingMode( 'disabled' );
* return <div { ...useBlockProps() }></div>;
* }
* ```
*
* `mode` can be one of three options:
*
* - `'disabled'`: Prevents editing the block entirely, i.e. it cannot be
* selected.
* - `'contentOnly'`: Hides all non-content UI, e.g. auxiliary controls in the
* toolbar, the block movers, block settings.
* - `'default'`: Allows editing the block as normal.
*
* The mode is inherited by all of the block's inner blocks, unless they have
* their own mode.
*
* If called outside of a block context, the mode is applied to all blocks.
*
* @param {?BlockEditingMode} mode The editing mode to apply. If undefined, the
* current editing mode is not changed.
*
* @return {BlockEditingMode} The current editing mode.
*/
export function useBlockEditingMode( mode ) {
const { clientId = '' } = useBlockEditContext();
const blockEditingMode = useSelect(
( select ) =>
select( blockEditorStore ).getBlockEditingMode( clientId ),
[ clientId ]
);
const { setBlockEditingMode, unsetBlockEditingMode } =
useDispatch( blockEditorStore );
useEffect( () => {
if ( mode ) {
setBlockEditingMode( clientId, mode );
}
return () => {
if ( mode ) {
unsetBlockEditingMode( clientId );
}
};
}, [ clientId, mode, setBlockEditingMode, unsetBlockEditingMode ] );
return blockEditingMode;
}