-
Notifications
You must be signed in to change notification settings - Fork 4k
/
edit.js
124 lines (113 loc) · 3.03 KB
/
edit.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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { useSelect } from '@wordpress/data';
import { RawHTML } from '@wordpress/element';
import {
useBlockProps,
__experimentalUseInnerBlocksProps as useInnerBlocksProps,
useSetting,
__experimentalUseNoRecursiveRenders as useNoRecursiveRenders,
store as blockEditorStore,
Warning,
} from '@wordpress/block-editor';
import { useEntityProp, useEntityBlockEditor } from '@wordpress/core-data';
/**
* Internal dependencies
*/
import { useCanEditEntity } from '../utils/hooks';
function ReadOnlyContent( { userCanEdit, postType, postId } ) {
const [ , , content ] = useEntityProp(
'postType',
postType,
'content',
postId
);
const blockProps = useBlockProps();
return content?.protected && ! userCanEdit ? (
<div { ...blockProps }>
<Warning>{ __( 'This content is password protected.' ) }</Warning>
</div>
) : (
<div { ...blockProps }>
<RawHTML key="html">{ content?.rendered }</RawHTML>
</div>
);
}
function EditableContent( { layout, context = {} } ) {
const { postType, postId } = context;
const themeSupportsLayout = useSelect( ( select ) => {
const { getSettings } = select( blockEditorStore );
return getSettings()?.supportsLayout;
}, [] );
const defaultLayout = useSetting( 'layout' ) || {};
const usedLayout = !! layout && layout.inherit ? defaultLayout : layout;
const [ blocks, onInput, onChange ] = useEntityBlockEditor(
'postType',
postType,
{ id: postId }
);
const props = useInnerBlocksProps(
useBlockProps( { className: 'entry-content' } ),
{
value: blocks,
onInput,
onChange,
__experimentalLayout: themeSupportsLayout ? usedLayout : undefined,
}
);
return <div { ...props } />;
}
function Content( props ) {
const { context: { queryId, postType, postId } = {} } = props;
const isDescendentOfQueryLoop = !! queryId;
const userCanEdit = useCanEditEntity( 'postType', postType, postId );
const isEditable = userCanEdit && ! isDescendentOfQueryLoop;
return isEditable ? (
<EditableContent { ...props } />
) : (
<ReadOnlyContent
userCanEdit={ userCanEdit }
postType={ postType }
postId={ postId }
/>
);
}
function Placeholder() {
const blockProps = useBlockProps();
return (
<div { ...blockProps }>
<p>{ __( 'Post Content' ) }</p>
</div>
);
}
function RecursionError() {
const blockProps = useBlockProps();
return (
<div { ...blockProps }>
<Warning>
{ __( 'Block cannot be rendered inside itself.' ) }
</Warning>
</div>
);
}
export default function PostContentEdit( { context, attributes } ) {
const { postId: contextPostId, postType: contextPostType } = context;
const { layout = {} } = attributes;
const [ hasAlreadyRendered, RecursionProvider ] = useNoRecursiveRenders(
contextPostId
);
if ( contextPostId && contextPostType && hasAlreadyRendered ) {
return <RecursionError />;
}
return (
<RecursionProvider>
{ contextPostId && contextPostType ? (
<Content context={ context } layout={ layout } />
) : (
<Placeholder />
) }
</RecursionProvider>
);
}