itmar-block-packages 1.3.0 → 1.3.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/README.md +9 -0
  2. package/build/index.asset.php +1 -1
  3. package/build/index.js +3 -3
  4. package/img/blockplace.png +0 -0
  5. package/package.json +1 -1
  6. package/src/BlockPlace.js +293 -256
  7. package/src/index.js +1 -4
  8. package/src/wordpressApi.js +165 -33
  9. package/build/index.css +0 -1
  10. package/build/style-index.css +0 -1
  11. package/src/editor.scss +0 -25
  12. package/src/style.scss +0 -0
package/src/BlockPlace.js CHANGED
@@ -1,5 +1,5 @@
1
- import { __ } from '@wordpress/i18n';
2
- import { useState, useEffect } from '@wordpress/element';
1
+ import { __ } from "@wordpress/i18n";
2
+ import { useState, useEffect } from "@wordpress/element";
3
3
 
4
4
  import {
5
5
  Button,
@@ -12,56 +12,63 @@ import {
12
12
  ToolbarItem,
13
13
  RangeControl,
14
14
  RadioControl,
15
- Modal
16
- } from '@wordpress/components';
17
- import { group, stack, layout, justifyCenter, justifyLeft, justifyRight, justifySpaceBetween, justifyStretch, stretchWide, positionCenter } from '@wordpress/icons';
15
+ ToggleControl,
16
+ Modal,
17
+ } from "@wordpress/components";
18
+ import {
19
+ group,
20
+ stack,
21
+ layout,
22
+ justifyCenter,
23
+ justifyLeft,
24
+ justifyRight,
25
+ justifySpaceBetween,
26
+ justifyStretch,
27
+ stretchWide,
28
+ positionCenter,
29
+ } from "@wordpress/icons";
18
30
  import GridControls from "./GridControls";
19
31
 
20
-
21
32
  //横並びのアイコン
22
- const flex = <Icon icon={stack} className="rotate-icon" />
33
+ const flex = <Icon icon={stack} className="rotate-icon" />;
23
34
  //上よせアイコン
24
- const upper = <Icon icon={justifyLeft} className="rotate-icon" />
35
+ const upper = <Icon icon={justifyLeft} className="rotate-icon" />;
25
36
  //中央よせのアイコン
26
- const middle = <Icon icon={justifyCenter} className="rotate-icon" />
37
+ const middle = <Icon icon={justifyCenter} className="rotate-icon" />;
27
38
  //下よせのアイコン
28
- const lower = <Icon icon={justifyRight} className="rotate-icon" />
39
+ const lower = <Icon icon={justifyRight} className="rotate-icon" />;
29
40
  //上下一杯に伸ばすアイコン
30
- const vert_between = <Icon icon={justifyStretch} className="rotate-icon" />
41
+ const vert_between = <Icon icon={justifyStretch} className="rotate-icon" />;
31
42
  //上下均等に伸ばすアイコン
32
- const vert_around = <Icon icon={justifySpaceBetween} className="rotate-icon" />
43
+ const vert_around = <Icon icon={justifySpaceBetween} className="rotate-icon" />;
33
44
 
34
45
  export default function BlockPlace(props) {
35
-
36
- const {
37
- attributes,
38
- clientId,
39
- blockRef,
40
- isMobile,
41
- isSubmenu
42
- } = props;
43
- const {
44
- positionType,
45
- heightValue,
46
- default_pos,
47
- mobile_pos
48
- } = attributes;
46
+ const { attributes, clientId, blockRef, isMobile, isSubmenu } = props;
47
+ const { positionType, heightValue, default_pos, mobile_pos } = attributes;
49
48
 
50
49
  //モバイルかデスクトップか
51
- const sel_pos = isMobile ? mobile_pos : default_pos
50
+ const sel_pos = isMobile ? mobile_pos : default_pos;
52
51
 
53
52
  //配置アイコンの選択
54
- const start_icon = sel_pos.direction === 'vertical' ? upper : justifyLeft;
55
- const center_icon = sel_pos.direction === 'vertical' ? middle : justifyCenter;
56
- const end_icon = sel_pos.direction === 'vertical' ? lower : justifyRight;
57
- const between_icon = sel_pos.direction === 'vertical' ? vert_between : justifyStretch;
58
- const around_icon = sel_pos.direction === 'vertical' ? vert_around : justifySpaceBetween;
53
+ const start_icon = sel_pos.direction === "vertical" ? upper : justifyLeft;
54
+ const center_icon = sel_pos.direction === "vertical" ? middle : justifyCenter;
55
+ const end_icon = sel_pos.direction === "vertical" ? lower : justifyRight;
56
+ const between_icon =
57
+ sel_pos.direction === "vertical" ? vert_between : justifyStretch;
58
+ const around_icon =
59
+ sel_pos.direction === "vertical" ? vert_around : justifySpaceBetween;
59
60
  //ツールチップの選択
60
- const start_tip = sel_pos.direction === 'vertical' ? __('upper alignment', 'block-collections') : __('left alignment', 'block-collections');
61
- const end_tip = sel_pos.direction === 'vertical' ? __('lower alignment', 'block-collections') : __('right alignment', 'block-collections');
61
+ const start_tip =
62
+ sel_pos.direction === "vertical"
63
+ ? __("upper alignment", "block-collections")
64
+ : __("left alignment", "block-collections");
65
+ const end_tip =
66
+ sel_pos.direction === "vertical"
67
+ ? __("lower alignment", "block-collections")
68
+ : __("right alignment", "block-collections");
62
69
 
63
70
  const [isContainer, setIsContainer] = useState(false);
64
- const [direction, setDirection] = useState('row');
71
+ const [direction, setDirection] = useState("row");
65
72
  useEffect(() => {
66
73
  if (blockRef.current) {
67
74
  const element = blockRef.current;
@@ -69,130 +76,157 @@ export default function BlockPlace(props) {
69
76
  const grandparentElement = parentElement?.parentElement;
70
77
  const computedStyle = getComputedStyle(grandparentElement);
71
78
  //親要素がFlex又はGridコンテナか
72
- if (computedStyle.display === "flex" || computedStyle.display === "inline-flex" || computedStyle.display === "grid" || computedStyle.display === "inline-grid") {
73
- setIsContainer(true)
79
+ if (
80
+ computedStyle.display === "flex" ||
81
+ computedStyle.display === "inline-flex" ||
82
+ computedStyle.display === "grid" ||
83
+ computedStyle.display === "inline-grid"
84
+ ) {
85
+ setIsContainer(true);
74
86
  }
75
87
  //flexの時その方向
76
- if (computedStyle.display === "flex" || computedStyle.display === "inline-flex") {
88
+ if (
89
+ computedStyle.display === "flex" ||
90
+ computedStyle.display === "inline-flex"
91
+ ) {
77
92
  if (computedStyle.flexDirection === "row") {
78
- setDirection('row');
93
+ setDirection("row");
79
94
  } else {
80
- setDirection('column');
95
+ setDirection("column");
81
96
  }
82
-
83
97
  }
84
98
  }
85
99
  }, []);
86
100
 
87
-
88
-
89
101
  //GridModalを開く
90
102
  const [isGridModalOpen, setIsGridModalOpen] = useState(false);
91
103
  const openGridModal = () => setIsGridModalOpen(true);
92
104
  const closeGridModal = () => setIsGridModalOpen(false);
93
105
 
94
106
  // 翻訳が必要な文字列を直接指定
95
- const blockMaxWidthMobile = __('Block Max Width(Mobile)', 'block-collections');
96
- const blockWidthMobile = __('Block Width(Mobile)', 'block-collections');
97
- const blockMaxWidthDesktop = __('Block Max Width(DeskTop)', 'block-collections');
98
- const blockWidthDesktop = __('Block Width(DeskTop)', 'block-collections');
107
+ const blockMaxWidthMobile = __(
108
+ "Block Max Width(Mobile)",
109
+ "block-collections"
110
+ );
111
+ const blockWidthMobile = __("Block Width(Mobile)", "block-collections");
112
+ const blockMaxWidthDesktop = __(
113
+ "Block Max Width(DeskTop)",
114
+ "block-collections"
115
+ );
116
+ const blockWidthDesktop = __("Block Width(DeskTop)", "block-collections");
99
117
 
100
118
  // 条件に応じて選択
101
119
  const blockWidthLabel = isMobile
102
- ? (isSubmenu ? blockWidthMobile : blockMaxWidthMobile)
103
- : (isSubmenu ? blockWidthDesktop : blockMaxWidthDesktop);
104
-
120
+ ? isSubmenu
121
+ ? blockWidthMobile
122
+ : blockMaxWidthMobile
123
+ : isSubmenu
124
+ ? blockWidthDesktop
125
+ : blockMaxWidthDesktop;
105
126
 
106
127
  return (
107
128
  <>
108
129
  <PanelBody
109
- title={__("Block placement", 'block-collections')}
130
+ title={__("Block placement", "block-collections")}
110
131
  initialOpen={false}
111
- className='itmar_group_direction'
132
+ className="itmar_group_direction"
112
133
  >
113
- {isMobile ?
114
- <p>{__('InnerBlock direction(Mobile)', 'block-collections')}</p>
115
- :
116
- <p>{__('InnerBlock direction(DeskTop)', 'block-collections')}</p>
117
- }
134
+ {isMobile ? (
135
+ <p>{__("InnerBlock direction(Mobile)", "block-collections")}</p>
136
+ ) : (
137
+ <p>{__("InnerBlock direction(DeskTop)", "block-collections")}</p>
138
+ )}
118
139
 
119
140
  <ToolbarGroup>
120
141
  <ToolbarItem>
121
142
  {(itemProps) => (
122
- <Button {...itemProps}
123
- isPressed={sel_pos.direction === 'block'}
124
- onClick={() => props.onDirectionChange('block')}
143
+ <Button
144
+ {...itemProps}
145
+ isPressed={sel_pos.direction === "block"}
146
+ onClick={() => props.onDirectionChange("block")}
125
147
  icon={group}
126
- label={__('block', 'block-collections')}
148
+ label={__("block", "block-collections")}
127
149
  />
128
-
129
150
  )}
130
151
  </ToolbarItem>
131
152
  <ToolbarItem>
132
153
  {(itemProps) => (
133
- <Button {...itemProps}
134
- isPressed={sel_pos.direction === 'vertical'}
135
- onClick={() => props.onDirectionChange('vertical')}
154
+ <Button
155
+ {...itemProps}
156
+ isPressed={sel_pos.direction === "vertical"}
157
+ onClick={() => props.onDirectionChange("vertical")}
136
158
  icon={stack}
137
- label={__('virtical', 'block-collections')}
159
+ label={__("virtical", "block-collections")}
138
160
  />
139
161
  )}
140
162
  </ToolbarItem>
141
163
  <ToolbarItem>
142
164
  {(itemProps) => (
143
- <Button {...itemProps}
144
- isPressed={sel_pos.direction === 'horizen'}
145
- onClick={() => props.onDirectionChange('horizen')}
165
+ <Button
166
+ {...itemProps}
167
+ isPressed={sel_pos.direction === "horizen"}
168
+ onClick={() => props.onDirectionChange("horizen")}
146
169
  icon={flex}
147
- label={__('horizen', 'block-collections')}
170
+ label={__("horizen", "block-collections")}
148
171
  />
149
172
  )}
150
173
  </ToolbarItem>
151
174
  <ToolbarItem>
152
175
  {(itemProps) => (
153
- <Button {...itemProps}
154
- isPressed={sel_pos.direction === 'grid'}
155
- onClick={() => props.onDirectionChange('grid')}
176
+ <Button
177
+ {...itemProps}
178
+ isPressed={sel_pos.direction === "grid"}
179
+ onClick={() => props.onDirectionChange("grid")}
156
180
  icon={layout}
157
- label={__('grid', 'block-collections')}
181
+ label={__("grid", "block-collections")}
158
182
  />
159
183
  )}
160
184
  </ToolbarItem>
161
185
  </ToolbarGroup>
162
- {(sel_pos.direction !== 'block' && sel_pos.direction !== 'grid') &&
186
+ {(sel_pos.direction === "horizen" ||
187
+ sel_pos.direction === "vertical") && (
188
+ <ToggleControl
189
+ label={__("reverse", "block-collections")}
190
+ checked={sel_pos.reverse}
191
+ onChange={(checked) => props.onReverseChange(checked)}
192
+ />
193
+ )}
194
+ {sel_pos.direction !== "block" && sel_pos.direction !== "grid" && (
163
195
  <>
164
- {isMobile ?
165
- <p>{__('InnerBlock alignment(Mobile)', 'block-collections')}</p>
166
- :
167
- <p>{__('InnerBlock alignment(DeskTop)', 'block-collections')}</p>
168
- }
196
+ {isMobile ? (
197
+ <p>{__("InnerBlock alignment(Mobile)", "block-collections")}</p>
198
+ ) : (
199
+ <p>{__("InnerBlock alignment(DeskTop)", "block-collections")}</p>
200
+ )}
169
201
  <ToolbarGroup>
170
202
  <ToolbarItem>
171
203
  {(itemProps) => (
172
- <Button {...itemProps}
173
- isPressed={sel_pos.inner_align === 'flex-start'}
174
- onClick={() => props.onFlexChange('flex-start')}//親コンポーネントに通知
204
+ <Button
205
+ {...itemProps}
206
+ isPressed={sel_pos.inner_align === "flex-start"}
207
+ onClick={() => props.onFlexChange("flex-start")} //親コンポーネントに通知
175
208
  icon={start_icon}
176
209
  label={start_tip}
177
210
  />
178
-
179
211
  )}
180
212
  </ToolbarItem>
181
213
  <ToolbarItem>
182
214
  {(itemProps) => (
183
- <Button {...itemProps}
184
- isPressed={sel_pos.inner_align === 'center'}
185
- onClick={() => props.onFlexChange('center')}//親コンポーネントに通知
215
+ <Button
216
+ {...itemProps}
217
+ isPressed={sel_pos.inner_align === "center"}
218
+ onClick={() => props.onFlexChange("center")} //親コンポーネントに通知
186
219
  icon={center_icon}
187
- label={__('center alignment', 'block-collections')}
220
+ label={__("center alignment", "block-collections")}
188
221
  />
189
222
  )}
190
223
  </ToolbarItem>
191
224
  <ToolbarItem>
192
225
  {(itemProps) => (
193
- <Button {...itemProps}
194
- isPressed={sel_pos.inner_align === 'flex-end'}
195
- onClick={() => props.onFlexChange('flex-end')}//親コンポーネントに通知
226
+ <Button
227
+ {...itemProps}
228
+ isPressed={sel_pos.inner_align === "flex-end"}
229
+ onClick={() => props.onFlexChange("flex-end")} //親コンポーネントに通知
196
230
  icon={end_icon}
197
231
  label={end_tip}
198
232
  />
@@ -200,222 +234,224 @@ export default function BlockPlace(props) {
200
234
  </ToolbarItem>
201
235
  <ToolbarItem>
202
236
  {(itemProps) => (
203
- <Button {...itemProps}
204
- isPressed={sel_pos.inner_align === 'space-between'}
205
- onClick={() => props.onFlexChange('space-between')}//親コンポーネントに通知
237
+ <Button
238
+ {...itemProps}
239
+ isPressed={sel_pos.inner_align === "space-between"}
240
+ onClick={() => props.onFlexChange("space-between")} //親コンポーネントに通知
206
241
  icon={between_icon}
207
- label={__('beteen stretch', 'block-collections')}
242
+ label={__("beteen stretch", "block-collections")}
208
243
  />
209
-
210
244
  )}
211
245
  </ToolbarItem>
212
246
  <ToolbarItem>
213
247
  {(itemProps) => (
214
- <Button {...itemProps}
215
- isPressed={sel_pos.inner_align === 'space-around'}
216
- onClick={() => props.onFlexChange('space-around')}//親コンポーネントに通知
248
+ <Button
249
+ {...itemProps}
250
+ isPressed={sel_pos.inner_align === "space-around"}
251
+ onClick={() => props.onFlexChange("space-around")} //親コンポーネントに通知
217
252
  icon={around_icon}
218
- label={__('around stretch', 'block-collections')}
253
+ label={__("around stretch", "block-collections")}
219
254
  />
220
-
221
255
  )}
222
256
  </ToolbarItem>
223
257
  </ToolbarGroup>
224
258
  </>
225
- }
226
-
227
- {(!isContainer && !isSubmenu) && (
228
- isMobile ?
229
- <p>{__('Block alignment(Mobile)', 'block-collections')}</p>
230
- :
231
- <p>{__('Block alignment(DeskTop)', 'block-collections')}</p>
232
259
  )}
233
260
 
234
- {(!isContainer && !isSubmenu) &&
261
+ {!isContainer &&
262
+ !isSubmenu &&
263
+ (isMobile ? (
264
+ <p>{__("Block alignment(Mobile)", "block-collections")}</p>
265
+ ) : (
266
+ <p>{__("Block alignment(DeskTop)", "block-collections")}</p>
267
+ ))}
268
+
269
+ {!isContainer && !isSubmenu && (
235
270
  <ToolbarGroup>
236
271
  <ToolbarItem>
237
272
  {(itemProps) => (
238
- <Button {...itemProps}
239
- isPressed={sel_pos.outer_align === 'left'}
240
- onClick={() => props.onAlignChange('left')}
273
+ <Button
274
+ {...itemProps}
275
+ isPressed={sel_pos.outer_align === "left"}
276
+ onClick={() => props.onAlignChange("left")}
241
277
  icon={justifyLeft}
242
- label={__('left alignment', 'block-collections')}
278
+ label={__("left alignment", "block-collections")}
243
279
  />
244
-
245
280
  )}
246
281
  </ToolbarItem>
247
282
  <ToolbarItem>
248
283
  {(itemProps) => (
249
- <Button {...itemProps}
250
- isPressed={sel_pos.outer_align === 'center'}
251
- onClick={() => props.onAlignChange('center')}
284
+ <Button
285
+ {...itemProps}
286
+ isPressed={sel_pos.outer_align === "center"}
287
+ onClick={() => props.onAlignChange("center")}
252
288
  icon={justifyCenter}
253
- label={__('center alignment', 'block-collections')}
289
+ label={__("center alignment", "block-collections")}
254
290
  />
255
291
  )}
256
292
  </ToolbarItem>
257
293
  <ToolbarItem>
258
294
  {(itemProps) => (
259
- <Button {...itemProps}
260
- isPressed={sel_pos.outer_align === 'right'}
261
- onClick={() => props.onAlignChange('right')}
295
+ <Button
296
+ {...itemProps}
297
+ isPressed={sel_pos.outer_align === "right"}
298
+ onClick={() => props.onAlignChange("right")}
262
299
  icon={justifyRight}
263
- label={__('right alignment', 'block-collections')}
300
+ label={__("right alignment", "block-collections")}
264
301
  />
265
302
  )}
266
303
  </ToolbarItem>
267
-
268
304
  </ToolbarGroup>
269
- }
270
- {isContainer &&
305
+ )}
306
+ {isContainer && (
271
307
  <>
272
- {isMobile ?
273
- <p>{__('Block alignment(Mobile)', 'block-collections')}</p>
274
- :
275
- <p>{__('Block alignment(DeskTop)', 'block-collections')}</p>
276
- }
308
+ {isMobile ? (
309
+ <p>{__("Block alignment(Mobile)", "block-collections")}</p>
310
+ ) : (
311
+ <p>{__("Block alignment(DeskTop)", "block-collections")}</p>
312
+ )}
277
313
 
278
314
  <ToolbarGroup>
279
315
  <ToolbarItem>
280
316
  {(itemProps) => (
281
- <Button {...itemProps}
282
- isPressed={sel_pos.outer_vertical === 'self-start'}
283
- onClick={() => props.onVerticalChange('self-start')}
284
- icon={direction === 'row' ? upper : justifyLeft}
285
- label={__('upper alignment', 'block-collections')}
317
+ <Button
318
+ {...itemProps}
319
+ isPressed={sel_pos.outer_vertical === "self-start"}
320
+ onClick={() => props.onVerticalChange("self-start")}
321
+ icon={direction === "row" ? upper : justifyLeft}
322
+ label={__("upper alignment", "block-collections")}
286
323
  />
287
-
288
324
  )}
289
325
  </ToolbarItem>
290
326
  <ToolbarItem>
291
327
  {(itemProps) => (
292
- <Button {...itemProps}
293
- isPressed={sel_pos.outer_vertical === 'center'}
294
- onClick={() => props.onVerticalChange('center')}
295
- icon={direction === 'row' ? middle : justifyCenter}
296
- label={__('center alignment', 'block-collections')}
328
+ <Button
329
+ {...itemProps}
330
+ isPressed={sel_pos.outer_vertical === "center"}
331
+ onClick={() => props.onVerticalChange("center")}
332
+ icon={direction === "row" ? middle : justifyCenter}
333
+ label={__("center alignment", "block-collections")}
297
334
  />
298
335
  )}
299
336
  </ToolbarItem>
300
337
  <ToolbarItem>
301
338
  {(itemProps) => (
302
- <Button {...itemProps}
303
- isPressed={sel_pos.outer_vertical === 'self-end'}
304
- onClick={() => props.onVerticalChange('self-end')}
305
- icon={direction === 'row' ? lower : justifyRight}
306
- label={__('lower alignment', 'block-collections')}
339
+ <Button
340
+ {...itemProps}
341
+ isPressed={sel_pos.outer_vertical === "self-end"}
342
+ onClick={() => props.onVerticalChange("self-end")}
343
+ icon={direction === "row" ? lower : justifyRight}
344
+ label={__("lower alignment", "block-collections")}
307
345
  />
308
346
  )}
309
347
  </ToolbarItem>
310
-
311
348
  </ToolbarGroup>
312
349
  </>
313
- }
350
+ )}
314
351
 
315
352
  <p>{blockWidthLabel}</p>
316
353
  <ToolbarGroup>
317
354
  <ToolbarItem>
318
355
  {(itemProps) => (
319
- <Button {...itemProps}
320
- isPressed={sel_pos.width_val === 'full'}
321
- onClick={() => props.onWidthChange('full')}
322
- text='full'
356
+ <Button
357
+ {...itemProps}
358
+ isPressed={sel_pos.width_val === "full"}
359
+ onClick={() => props.onWidthChange("full")}
360
+ text="full"
323
361
  />
324
-
325
362
  )}
326
363
  </ToolbarItem>
327
364
  <ToolbarItem>
328
365
  {(itemProps) => (
329
- <Button {...itemProps}
330
- isPressed={sel_pos.width_val === 'fit'}
331
- onClick={() => props.onWidthChange('fit')}
332
- text='fit'
366
+ <Button
367
+ {...itemProps}
368
+ isPressed={sel_pos.width_val === "fit"}
369
+ onClick={() => props.onWidthChange("fit")}
370
+ text="fit"
333
371
  />
334
-
335
372
  )}
336
373
  </ToolbarItem>
337
374
  <ToolbarItem>
338
375
  {(itemProps) => (
339
- <Button {...itemProps}
340
- isPressed={sel_pos.width_val === 'wideSize'}
341
- onClick={() => props.onWidthChange('wideSize')}
376
+ <Button
377
+ {...itemProps}
378
+ isPressed={sel_pos.width_val === "wideSize"}
379
+ onClick={() => props.onWidthChange("wideSize")}
342
380
  icon={stretchWide}
343
- label={__('Wide Size', 'block-collections')}
381
+ label={__("Wide Size", "block-collections")}
344
382
  />
345
-
346
383
  )}
347
384
  </ToolbarItem>
348
385
  <ToolbarItem>
349
386
  {(itemProps) => (
350
- <Button {...itemProps}
351
- isPressed={sel_pos.width_val === 'contentSize'}
352
- onClick={() => props.onWidthChange('contentSize')}
387
+ <Button
388
+ {...itemProps}
389
+ isPressed={sel_pos.width_val === "contentSize"}
390
+ onClick={() => props.onWidthChange("contentSize")}
353
391
  icon={positionCenter}
354
- label={__('Content Size', 'block-collections')}
392
+ label={__("Content Size", "block-collections")}
355
393
  />
356
-
357
394
  )}
358
395
  </ToolbarItem>
359
396
  <ToolbarItem>
360
397
  {(itemProps) => (
361
- <Button {...itemProps}
362
- isPressed={sel_pos.width_val === 'free'}
363
- onClick={() => props.onWidthChange('free')}
364
- text='free'
398
+ <Button
399
+ {...itemProps}
400
+ isPressed={sel_pos.width_val === "free"}
401
+ onClick={() => props.onWidthChange("free")}
402
+ text="free"
365
403
  />
366
-
367
404
  )}
368
405
  </ToolbarItem>
369
-
370
406
  </ToolbarGroup>
371
407
 
372
- {sel_pos.width_val === 'free' &&
408
+ {sel_pos.width_val === "free" && (
373
409
  <RangeControl
374
410
  value={sel_pos.free_val}
375
- label={__("Max width", 'block-collections')}
411
+ label={__("Max width", "block-collections")}
376
412
  max={1800}
377
413
  min={300}
378
414
  step={10}
379
415
  onChange={(newValue) => {
380
- props.onFreevalChange(newValue)
416
+ props.onFreevalChange(newValue);
381
417
  }}
382
418
  withInputField={true}
383
419
  />
384
- }
420
+ )}
385
421
 
386
- <p>{__('Block Height', 'block-collections')}</p>
422
+ <p>{__("Block Height", "block-collections")}</p>
387
423
  <ToolbarGroup>
388
424
  <ToolbarItem>
389
425
  {(itemProps) => (
390
- <Button {...itemProps}
391
- isPressed={heightValue === 'full'}
392
- onClick={() => props.onHeightChange('full')}
393
- text='full'
426
+ <Button
427
+ {...itemProps}
428
+ isPressed={heightValue === "full"}
429
+ onClick={() => props.onHeightChange("full")}
430
+ text="full"
394
431
  />
395
-
396
432
  )}
397
433
  </ToolbarItem>
398
434
  <ToolbarItem>
399
435
  {(itemProps) => (
400
- <Button {...itemProps}
401
- isPressed={heightValue === 'fit'}
402
- onClick={() => props.onHeightChange('fit')}
403
- text='fit'
436
+ <Button
437
+ {...itemProps}
438
+ isPressed={heightValue === "fit"}
439
+ onClick={() => props.onHeightChange("fit")}
440
+ text="fit"
404
441
  />
405
-
406
442
  )}
407
443
  </ToolbarItem>
408
444
  </ToolbarGroup>
409
445
 
410
- {sel_pos.direction === 'grid' &&
446
+ {sel_pos.direction === "grid" && (
411
447
  <>
412
- {isMobile ?
413
- <p>{__('Grid Info settings(Mobile)', 'block-collections')}</p>
414
- :
415
- <p>{__('Grid Info settings(DeskTop)', 'block-collections')}</p>
416
- }
448
+ {isMobile ? (
449
+ <p>{__("Grid Info settings(Mobile)", "block-collections")}</p>
450
+ ) : (
451
+ <p>{__("Grid Info settings(DeskTop)", "block-collections")}</p>
452
+ )}
417
453
  <Button variant="primary" onClick={openGridModal}>
418
- {__("Open Setting Modal", 'block-collections')}
454
+ {__("Open Setting Modal", "block-collections")}
419
455
  </Button>
420
456
  {isGridModalOpen && (
421
457
  <Modal title="Grid Info settings" onRequestClose={closeGridModal}>
@@ -423,96 +459,97 @@ export default function BlockPlace(props) {
423
459
  attributes={sel_pos.grid_info}
424
460
  clientId={clientId}
425
461
  onChange={(newValue) => {
426
- props.onGridChange(newValue)
462
+ props.onGridChange(newValue);
427
463
  }}
428
464
  />
429
465
  </Modal>
430
466
  )}
431
467
  </>
432
- }
433
- <div className='itmar_title_type'>
468
+ )}
469
+ <div className="itmar_title_type">
434
470
  <RadioControl
435
- label={__("Position Type", 'block-collections')}
471
+ label={__("Position Type", "block-collections")}
436
472
  selected={positionType}
437
473
  options={[
438
- { label: __("Static", 'block-collections'), value: 'staic' },
439
- { label: __("Relative", 'block-collections'), value: 'relative' },
440
- { label: __("Absolute", 'block-collections'), value: 'absolute' },
441
- { label: __("Fix", 'block-collections'), value: 'fixed' },
442
- { label: __("Sticky", 'block-collections'), value: 'sticky' }
474
+ { label: __("Static", "block-collections"), value: "staic" },
475
+ { label: __("Relative", "block-collections"), value: "relative" },
476
+ { label: __("Absolute", "block-collections"), value: "absolute" },
477
+ { label: __("Fix", "block-collections"), value: "fixed" },
478
+ { label: __("Sticky", "block-collections"), value: "sticky" },
443
479
  ]}
444
480
  onChange={(newVal) => {
445
- props.onPositionChange(newVal)
481
+ props.onPositionChange(newVal);
446
482
  }}
447
483
  />
448
484
  </div>
449
- {(positionType === 'absolute' || positionType === 'fixed' || positionType === 'sticky') &&
485
+ {(positionType === "absolute" ||
486
+ positionType === "fixed" ||
487
+ positionType === "sticky") && (
450
488
  <>
451
- {isMobile ?
452
- <p>{__('Block Position(Mobile)', 'block-collections')}</p>
453
- :
454
- <p>{__('Block Position(DeskTop)', 'block-collections')}</p>
455
- }
456
- <PanelRow className='position_row'>
489
+ {isMobile ? (
490
+ <p>{__("Block Position(Mobile)", "block-collections")}</p>
491
+ ) : (
492
+ <p>{__("Block Position(DeskTop)", "block-collections")}</p>
493
+ )}
494
+ <PanelRow className="position_row">
457
495
  <ComboboxControl
458
- label={__("Vertical", 'block-collections')}
496
+ label={__("Vertical", "block-collections")}
459
497
  options={[
460
- { value: 'top', label: 'Top' },
461
- { value: 'bottom', label: 'Bottom' }
498
+ { value: "top", label: "Top" },
499
+ { value: "bottom", label: "Bottom" },
462
500
  ]}
463
- value={sel_pos.posValue?.vertBase || 'top'}
464
- onChange={
465
- (newValue) => {
466
- const newValObj = { ...(sel_pos.posValue || {}), vertBase: newValue }
467
- props.onPosValueChange(newValObj)
468
- }
469
- }
501
+ value={sel_pos.posValue?.vertBase || "top"}
502
+ onChange={(newValue) => {
503
+ const newValObj = {
504
+ ...(sel_pos.posValue || {}),
505
+ vertBase: newValue,
506
+ };
507
+ props.onPosValueChange(newValObj);
508
+ }}
470
509
  />
471
510
  <UnitControl
472
511
  dragDirection="e"
473
- onChange={
474
- (newValue) => {
475
- const newValObj = { ...(sel_pos.posValue || {}), vertValue: newValue }
476
- props.onPosValueChange(newValObj)
477
- }
478
- }
479
- value={sel_pos.posValue?.vertValue || '3em'}
512
+ onChange={(newValue) => {
513
+ const newValObj = {
514
+ ...(sel_pos.posValue || {}),
515
+ vertValue: newValue,
516
+ };
517
+ props.onPosValueChange(newValObj);
518
+ }}
519
+ value={sel_pos.posValue?.vertValue || "3em"}
480
520
  />
481
-
482
521
  </PanelRow>
483
- <PanelRow className='position_row'>
522
+ <PanelRow className="position_row">
484
523
  <ComboboxControl
485
- label={__("Horizon", 'block-collections')}
524
+ label={__("Horizon", "block-collections")}
486
525
  options={[
487
- { value: 'left', label: 'Left' },
488
- { value: 'right', label: 'Right' }
526
+ { value: "left", label: "Left" },
527
+ { value: "right", label: "Right" },
489
528
  ]}
490
- value={sel_pos.posValue?.horBase || 'left'}
491
- onChange={
492
- (newValue) => {
493
- const newValObj = { ...(sel_pos.posValue || {}), horBase: newValue }
494
- props.onPosValueChange(newValObj)
495
- }
496
- }
529
+ value={sel_pos.posValue?.horBase || "left"}
530
+ onChange={(newValue) => {
531
+ const newValObj = {
532
+ ...(sel_pos.posValue || {}),
533
+ horBase: newValue,
534
+ };
535
+ props.onPosValueChange(newValObj);
536
+ }}
497
537
  />
498
538
  <UnitControl
499
539
  dragDirection="e"
500
- onChange={
501
- (newValue) => {
502
- const newValObj = { ...(sel_pos.posValue || {}), horValue: newValue }
503
- props.onPosValueChange(newValObj)
504
- }
505
- }
506
- value={sel_pos.posValue?.horValue || '3em'}
540
+ onChange={(newValue) => {
541
+ const newValObj = {
542
+ ...(sel_pos.posValue || {}),
543
+ horValue: newValue,
544
+ };
545
+ props.onPosValueChange(newValObj);
546
+ }}
547
+ value={sel_pos.posValue?.horValue || "3em"}
507
548
  />
508
-
509
549
  </PanelRow>
510
-
511
550
  </>
512
-
513
- }
514
- </PanelBody >
515
-
551
+ )}
552
+ </PanelBody>
516
553
  </>
517
554
  );
518
- }
555
+ }