-
Notifications
You must be signed in to change notification settings - Fork 4k
/
index.js
139 lines (130 loc) · 3.48 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
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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
/**
* External dependencies
*/
import { find } from 'lodash';
/**
* WordPress dependencies
*/
import { __, sprintf } from '@wordpress/i18n';
import { useCallback, useState } from '@wordpress/element';
import { useDispatch, useSelect } from '@wordpress/data';
import { Placeholder, Dropdown, Button } from '@wordpress/components';
import { serialize } from '@wordpress/blocks';
import { store as coreStore } from '@wordpress/core-data';
import { store as editorStore } from '@wordpress/editor';
/**
* Internal dependencies
*/
import TemplatePartSelection from '../selection';
import PatternsSetup from './patterns-setup';
const PLACEHOLDER_STEPS = {
initial: 1,
patterns: 2,
};
export default function TemplatePartPlaceholder( {
area,
clientId,
setAttributes,
} ) {
const { saveEntityRecord } = useDispatch( coreStore );
const [ step, setStep ] = useState( PLACEHOLDER_STEPS.initial );
const { areaIcon, areaLabel } = useSelect(
( select ) => {
const definedAreas = select(
editorStore
).__experimentalGetDefaultTemplatePartAreas();
const selectedArea = find( definedAreas, { area } );
const defaultArea = find( definedAreas, { area: 'uncategorized' } );
return {
areaIcon: selectedArea?.icon || defaultArea?.icon,
areaLabel: selectedArea?.label || __( 'Template Part' ),
};
},
[ area ]
);
const onCreate = useCallback(
async ( startingBlocks = [] ) => {
const title = __( 'Untitled Template Part' );
// If we have `area` set from block attributes, means an exposed
// block variation was inserted. So add this prop to the template
// part entity on creation. Afterwards remove `area` value from
// block attributes.
const record = {
title,
slug: 'template-part',
content: serialize( startingBlocks ),
// `area` is filterable on the server and defaults to `UNCATEGORIZED`
// if provided value is not allowed.
area,
};
const templatePart = await saveEntityRecord(
'postType',
'wp_template_part',
record
);
setAttributes( {
slug: templatePart.slug,
theme: templatePart.theme,
area: undefined,
} );
},
[ setAttributes, area ]
);
return (
<>
{ step === PLACEHOLDER_STEPS.initial && (
<Placeholder
icon={ areaIcon }
label={ areaLabel }
instructions={ sprintf(
// Translators: %s as template part area title ("Header", "Footer", etc.).
'Choose an existing %s or create a new one.',
areaLabel
) }
>
<Dropdown
contentClassName="wp-block-template-part__placeholder-preview-dropdown-content"
position="bottom right left"
renderToggle={ ( { isOpen, onToggle } ) => (
<>
<Button
isPrimary
onClick={ onToggle }
aria-expanded={ isOpen }
>
{ __( 'Choose existing' ) }
</Button>
<Button
isTertiary
onClick={ () =>
setStep( PLACEHOLDER_STEPS.patterns )
}
>
{ sprintf(
// Translators: %s as template part area title ("Header", "Footer", etc.).
'New %s',
areaLabel
) }
</Button>
</>
) }
renderContent={ ( { onClose } ) => (
<TemplatePartSelection
setAttributes={ setAttributes }
onClose={ onClose }
area={ area }
/>
) }
/>
</Placeholder>
) }
{ step === PLACEHOLDER_STEPS.patterns && (
<PatternsSetup
area={ area }
onCreate={ onCreate }
clientId={ clientId }
/>
) }
</>
);
}