-
Notifications
You must be signed in to change notification settings - Fork 4k
/
item.js
84 lines (77 loc) · 2.16 KB
/
item.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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
/**
* External dependencies
*/
import classnames from 'classnames';
/**
* WordPress dependencies
*/
import {
store as blockEditorStore,
BlockPreview,
useBlockDisplayInformation,
} from '@wordpress/block-editor';
import { useSelect, useDispatch } from '@wordpress/data';
import { pure } from '@wordpress/compose';
import { sprintf, __ } from '@wordpress/i18n';
import { useMemo, useRef, useEffect } from '@wordpress/element';
/**
* Internal dependencies
*/
import BlockListExplodedTopToolbar from './top-toolbar';
import { store as editSiteStore } from '../../store';
function BlockListExplodedItem( { clientId } ) {
const blockWrapper = useRef();
const { block, isSelected } = useSelect(
( select ) => {
const { getBlock, isBlockSelected } = select( blockEditorStore );
return {
block: getBlock( clientId ),
isSelected: isBlockSelected( clientId ),
};
},
[ clientId ]
);
const { title } = useBlockDisplayInformation( clientId );
const { selectBlock } = useDispatch( blockEditorStore );
// If the exploded list becomes part of block-editor
// This mode also need to move into the block-editor store.
const { switchEditorMode } = useDispatch( editSiteStore );
// translators: %s: Type of block (i.e. Text, Image etc)
const blockLabel = sprintf( __( 'Block: %s' ), title );
const blocksToPreview = useMemo( () => [ block ], [ block ] );
useEffect( () => {
if ( isSelected ) {
blockWrapper.current.focus();
}
}, [ isSelected ] );
return (
<div
className={ classnames(
'edit-site-block-list-exploded__item-container',
{ 'is-selected': isSelected }
) }
>
{ isSelected && (
<BlockListExplodedTopToolbar clientId={ clientId } />
) }
<div
ref={ blockWrapper }
role="button"
onClick={ ( event ) => {
if ( event.detail === 1 ) {
selectBlock( clientId );
} else if ( event.detail === 2 ) {
switchEditorMode( 'visual' );
}
} }
onKeyPress={ () => selectBlock( clientId ) }
onFocus={ () => selectBlock( clientId ) }
aria-label={ blockLabel }
tabIndex={ 0 }
>
<BlockPreview blocks={ blocksToPreview } />
</div>
</div>
);
}
export default pure( BlockListExplodedItem );