itmar-block-packages 1.3.18 → 1.3.20

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 (6) hide show
  1. package/README.md +68 -4
  2. package/build/index.asset.php +1 -1
  3. package/build/index.js +2 -2
  4. package/package.json +1 -1
  5. package/src/BlockPlace.js +46 -21
  6. package/src/wordpressApi.js +103 -31
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "itmar-block-packages",
3
- "version": "1.3.18",
3
+ "version": "1.3.20",
4
4
  "description": "We have put together a package of common React components used for WordPress custom blocks.",
5
5
  "main": "build/index.js",
6
6
  "scripts": {
package/src/BlockPlace.js CHANGED
@@ -51,9 +51,14 @@ export default function BlockPlace(props) {
51
51
  const sel_pos = isMobile ? mobile_val : default_val;
52
52
 
53
53
  //配置アイコンの選択
54
+
54
55
  const start_icon = sel_pos.direction === "vertical" ? upper : justifyLeft;
55
56
  const center_icon = sel_pos.direction === "vertical" ? middle : justifyCenter;
56
57
  const end_icon = sel_pos.direction === "vertical" ? lower : justifyRight;
58
+ const start_cross = sel_pos.direction === "vertical" ? justifyLeft : upper;
59
+ const center_cross =
60
+ sel_pos.direction === "vertical" ? justifyCenter : middle;
61
+ const end_cross = sel_pos.direction === "vertical" ? justifyRight : lower;
57
62
  const between_icon =
58
63
  sel_pos.direction === "vertical" ? vert_between : justifyStretch;
59
64
  const around_icon =
@@ -67,6 +72,14 @@ export default function BlockPlace(props) {
67
72
  sel_pos.direction === "vertical"
68
73
  ? __("lower alignment", "block-collections")
69
74
  : __("right alignment", "block-collections");
75
+ const cross_start_tip =
76
+ sel_pos.direction === "vertical"
77
+ ? __("left alignment", "block-collections")
78
+ : __("upper alignment", "block-collections");
79
+ const cross_end_tip =
80
+ sel_pos.direction === "vertical"
81
+ ? __("right alignment", "block-collections")
82
+ : __("lower alignment", "block-collections");
70
83
 
71
84
  const [isContainer, setIsContainer] = useState(false);
72
85
  const [direction, setDirection] = useState("row");
@@ -206,9 +219,9 @@ export default function BlockPlace(props) {
206
219
  {sel_pos.direction !== "block" && sel_pos.direction !== "grid" && (
207
220
  <>
208
221
  {isMobile ? (
209
- <p>{__("InnerBlock alignment(Mobile)", "block-collections")}</p>
222
+ <p>{__("InnerBlock Main Axis(Mobile)", "block-collections")}</p>
210
223
  ) : (
211
- <p>{__("InnerBlock alignment(DeskTop)", "block-collections")}</p>
224
+ <p>{__("InnerBlock Main Axis(DeskTop)", "block-collections")}</p>
212
225
  )}
213
226
  <ToolbarGroup>
214
227
  <ToolbarItem>
@@ -216,7 +229,9 @@ export default function BlockPlace(props) {
216
229
  <Button
217
230
  {...itemProps}
218
231
  isPressed={sel_pos.inner_align === "flex-start"}
219
- onClick={() => props.onFlexChange("flex-start")} //親コンポーネントに通知
232
+ onClick={() =>
233
+ props.onFlexChange("flex-start", "inner_align")
234
+ } //親コンポーネントに通知
220
235
  icon={start_icon}
221
236
  label={start_tip}
222
237
  />
@@ -227,7 +242,7 @@ export default function BlockPlace(props) {
227
242
  <Button
228
243
  {...itemProps}
229
244
  isPressed={sel_pos.inner_align === "center"}
230
- onClick={() => props.onFlexChange("center")} //親コンポーネントに通知
245
+ onClick={() => props.onFlexChange("center", "inner_align")} //親コンポーネントに通知
231
246
  icon={center_icon}
232
247
  label={__("center alignment", "block-collections")}
233
248
  />
@@ -238,7 +253,9 @@ export default function BlockPlace(props) {
238
253
  <Button
239
254
  {...itemProps}
240
255
  isPressed={sel_pos.inner_align === "flex-end"}
241
- onClick={() => props.onFlexChange("flex-end")} //親コンポーネントに通知
256
+ onClick={() =>
257
+ props.onFlexChange("flex-end", "inner_align")
258
+ } //親コンポーネントに通知
242
259
  icon={end_icon}
243
260
  label={end_tip}
244
261
  />
@@ -249,7 +266,9 @@ export default function BlockPlace(props) {
249
266
  <Button
250
267
  {...itemProps}
251
268
  isPressed={sel_pos.inner_align === "space-between"}
252
- onClick={() => props.onFlexChange("space-between")} //親コンポーネントに通知
269
+ onClick={() =>
270
+ props.onFlexChange("space-between", "inner_align")
271
+ } //親コンポーネントに通知
253
272
  icon={between_icon}
254
273
  label={__("beteen stretch", "block-collections")}
255
274
  />
@@ -260,7 +279,9 @@ export default function BlockPlace(props) {
260
279
  <Button
261
280
  {...itemProps}
262
281
  isPressed={sel_pos.inner_align === "space-around"}
263
- onClick={() => props.onFlexChange("space-around")} //親コンポーネントに通知
282
+ onClick={() =>
283
+ props.onFlexChange("space-around", "inner_align")
284
+ } //親コンポーネントに通知
264
285
  icon={around_icon}
265
286
  label={__("around stretch", "block-collections")}
266
287
  />
@@ -272,9 +293,9 @@ export default function BlockPlace(props) {
272
293
 
273
294
  {!isSubmenu &&
274
295
  (isMobile ? (
275
- <p>{__("Block alignment(Mobile)", "block-collections")}</p>
296
+ <p>{__("InnerBlock Cross Axis(Mobile)", "block-collections")}</p>
276
297
  ) : (
277
- <p>{__("Block alignment(DeskTop)", "block-collections")}</p>
298
+ <p>{__("InnerBlock Cross Axis(DeskTop)", "block-collections")}</p>
278
299
  ))}
279
300
 
280
301
  {!isSubmenu && (
@@ -283,10 +304,12 @@ export default function BlockPlace(props) {
283
304
  {(itemProps) => (
284
305
  <Button
285
306
  {...itemProps}
286
- isPressed={sel_pos.outer_align === "left"}
287
- onClick={() => props.onAlignChange("left")}
288
- icon={justifyLeft}
289
- label={__("left alignment", "block-collections")}
307
+ isPressed={sel_pos.inner_items === "flex-start"}
308
+ onClick={() =>
309
+ props.onFlexChange("flex-start", "inner_items")
310
+ } //親コンポーネントに通知
311
+ icon={start_cross}
312
+ label={cross_start_tip}
290
313
  />
291
314
  )}
292
315
  </ToolbarItem>
@@ -294,9 +317,9 @@ export default function BlockPlace(props) {
294
317
  {(itemProps) => (
295
318
  <Button
296
319
  {...itemProps}
297
- isPressed={sel_pos.outer_align === "center"}
298
- onClick={() => props.onAlignChange("center")}
299
- icon={justifyCenter}
320
+ isPressed={sel_pos.inner_items === "center"}
321
+ onClick={() => props.onFlexChange("center", "inner_items")} //親コンポーネントに通知
322
+ icon={center_cross}
300
323
  label={__("center alignment", "block-collections")}
301
324
  />
302
325
  )}
@@ -305,10 +328,10 @@ export default function BlockPlace(props) {
305
328
  {(itemProps) => (
306
329
  <Button
307
330
  {...itemProps}
308
- isPressed={sel_pos.outer_align === "right"}
309
- onClick={() => props.onAlignChange("right")}
310
- icon={justifyRight}
311
- label={__("right alignment", "block-collections")}
331
+ isPressed={sel_pos.inner_items === "flex-end"}
332
+ onClick={() => props.onFlexChange("flex-end", "inner_items")} //親コンポーネントに通知
333
+ icon={end_cross}
334
+ label={cross_end_tip}
312
335
  />
313
336
  )}
314
337
  </ToolbarItem>
@@ -319,7 +342,9 @@ export default function BlockPlace(props) {
319
342
  {isMobile ? (
320
343
  <p>{__("Alignment in container(Mobile)", "block-collections")}</p>
321
344
  ) : (
322
- <p>{__("Alignment in container(DeskTop)", "block-collections")}</p>
345
+ <p>
346
+ {__("Alignment in container(DeskTop)", "block-collections")}
347
+ </p>
323
348
  )}
324
349
 
325
350
  <ToolbarGroup>
package/src/wordpressApi.js CHANGED
@@ -56,11 +56,13 @@ const ChoiceControl = (props) => {
56
56
  const {
57
57
  selectedSlug,
58
58
  choiceItems,
59
+ dispTaxonomies,
59
60
  type,
60
61
  blockMap,
61
62
  textDomain,
62
63
  fetchFunction,
63
64
  } = props;
65
+
64
66
  const [choices, setChoices] = useState([]);
65
67
  useEffect(() => {
66
68
  if (!selectedSlug) return; //ポストタイプのスラッグが選択されていないときは処理終了
@@ -76,17 +78,17 @@ const ChoiceControl = (props) => {
76
78
  }, [selectedSlug, fetchFunction]);
77
79
 
78
80
  //選択肢が変わったときに選択されている項目の配列内容を更新するハンドラ
79
- const handleChoiceChange = (checked, target) => {
81
+ const handleChoiceChange = (checked, target, setItems) => {
80
82
  if (checked) {
81
83
  // targetが重複していない場合のみ追加
82
- if (!choiceItems.some((item) => _.isEqual(item, target))) {
83
- return [...choiceItems, target];
84
+ if (!setItems.some((item) => _.isEqual(item, target))) {
85
+ return [...setItems, target];
84
86
  }
85
87
  } else {
86
88
  // targetを配列から削除
87
- return choiceItems.filter((item) => !_.isEqual(item, target));
89
+ return setItems.filter((item) => !_.isEqual(item, target));
88
90
  }
89
- return choiceItems;
91
+ return setItems;
90
92
  };
91
93
 
92
94
  //階層化されたカスタムフィールドのフィールド名を表示する関数
@@ -126,7 +128,11 @@ const ChoiceControl = (props) => {
126
128
  (choiceField) => choiceField === fieldName
127
129
  )}
128
130
  onChange={(checked) => {
129
- const newChoiceFields = handleChoiceChange(checked, fieldName);
131
+ const newChoiceFields = handleChoiceChange(
132
+ checked,
133
+ fieldName,
134
+ choiceItems
135
+ );
130
136
  props.onChange(newChoiceFields);
131
137
  }}
132
138
  />
@@ -156,7 +162,21 @@ const ChoiceControl = (props) => {
156
162
  choices.map((choice, index) => {
157
163
  return (
158
164
  <div key={index} className="term_section">
159
- <div className="tax_label">{choice.name}</div>
165
+ <div className="tax_label">
166
+ {choice.name}
167
+ <ToggleControl
168
+ label={__("Display", "block-collections")}
169
+ checked={dispTaxonomies.some((tax) => tax === choice.slug)}
170
+ onChange={(checked) => {
171
+ const newChoiceFields = handleChoiceChange(
172
+ checked,
173
+ choice.slug,
174
+ dispTaxonomies
175
+ );
176
+ props.onSetDispTax(newChoiceFields);
177
+ }}
178
+ />
179
+ </div>
160
180
  {choice.terms.map((term, index) => {
161
181
  return (
162
182
  <CheckboxControl
@@ -176,7 +196,8 @@ const ChoiceControl = (props) => {
176
196
  };
177
197
  const newChoiceTerms = handleChoiceChange(
178
198
  checked,
179
- target
199
+ target,
200
+ choiceItems
180
201
  );
181
202
  props.onChange(newChoiceTerms);
182
203
  }}
@@ -212,7 +233,8 @@ const ChoiceControl = (props) => {
212
233
  onChange={(checked) => {
213
234
  const newChoiceFields = handleChoiceChange(
214
235
  checked,
215
- "title"
236
+ "title",
237
+ choiceItems
216
238
  );
217
239
  props.onChange(newChoiceFields);
218
240
  }}
@@ -226,7 +248,11 @@ const ChoiceControl = (props) => {
226
248
  (choiceField) => choiceField === "date"
227
249
  )}
228
250
  onChange={(checked) => {
229
- const newChoiceFields = handleChoiceChange(checked, "date");
251
+ const newChoiceFields = handleChoiceChange(
252
+ checked,
253
+ "date",
254
+ choiceItems
255
+ );
230
256
  props.onChange(newChoiceFields);
231
257
  }}
232
258
  />
@@ -241,7 +267,8 @@ const ChoiceControl = (props) => {
241
267
  onChange={(checked) => {
242
268
  const newChoiceFields = handleChoiceChange(
243
269
  checked,
244
- "excerpt"
270
+ "excerpt",
271
+ choiceItems
245
272
  );
246
273
  props.onChange(newChoiceFields);
247
274
  }}
@@ -257,36 +284,80 @@ const ChoiceControl = (props) => {
257
284
  onChange={(checked) => {
258
285
  const newChoiceFields = handleChoiceChange(
259
286
  checked,
260
- "featured_media"
287
+ "featured_media",
288
+ choiceItems
261
289
  );
262
290
  props.onChange(newChoiceFields);
263
291
  }}
264
292
  />
265
293
  )}
294
+ {choice.link && (
295
+ <div className="itmar_custom_field_set">
296
+ <ToggleControl
297
+ className="field_choice"
298
+ label={__("Single Page Link", "block-collections")}
299
+ checked={choiceItems.some(
300
+ (choiceField) => choiceField === "link"
301
+ )}
302
+ onChange={(checked) => {
303
+ const newChoiceFields = handleChoiceChange(
304
+ checked,
305
+ "link",
306
+ choiceItems
307
+ );
308
+ props.onChange(newChoiceFields);
309
+ }}
310
+ />
311
+ <ComboboxControl
312
+ options={[
313
+ {
314
+ value: "itmar/design-button",
315
+ label: "itmar/design-button",
316
+ },
317
+ {
318
+ value: "itmar/design-title",
319
+ label: "itmar/design-title",
320
+ },
321
+ ]}
322
+ value={blockMap["link"]}
323
+ onChange={(newValue) => {
324
+ const newBlockMap = {
325
+ ...blockMap,
326
+ link: newValue,
327
+ };
328
+ props.onBlockMapChange(newBlockMap);
329
+ }}
330
+ />
331
+ <p>
332
+ {__(
333
+ "If no block is specified, a link will be set to the parent block, Design Group.",
334
+ "block-collections"
335
+ )}
336
+ </p>
337
+ </div>
338
+ )}
266
339
  {(metaFlg || acfFlg) && (
267
340
  <>
268
341
  <div className="custom_field_label">
269
342
  {__("Custom Field", "block-collections")}
270
343
  </div>
271
344
  <div className="custom_field_area">
272
- <div className="custom_field_area">
273
- {dispCustumFields({
274
- ...Object.entries(choice.meta).reduce(
275
- (acc, [key, value]) => ({
276
- ...acc,
277
- [`meta_${key}`]: value,
278
- }),
279
- {}
280
- ),
281
- ...Object.entries(choice.acf).reduce(
282
- (acc, [key, value]) => ({
283
- ...acc,
284
- [`acf_${key}`]: value,
285
- }),
286
- {}
287
- ),
288
- })}
289
- </div>
345
+ {dispCustumFields({
346
+ ...Object.entries(choice.meta).reduce(
347
+ (acc, [key, value]) => ({
348
+ ...acc,
349
+ [`meta_${key}`]: value,
350
+ }),
351
+ {}
352
+ ),
353
+ ...Object.entries(choice.acf).reduce(
354
+ (acc, [key, value]) => ({
355
+ ...acc,
356
+ [`acf_${key}`]: value,
357
+ }),
358
+ {}
359
+ ),
360
+ })}
290
361
  </div>
291
362
  </>
292
363
  )}
@@ -315,7 +386,7 @@ export const fetchPagesOptions = async (home_url) => {
315
386
  value: page.id,
316
387
  slug: page.slug,
317
388
  label: page.title.rendered,
318
- link: page.link,
389
+ link: `${home_url}/${page.slug}`,
319
390
  }))
320
391
  : [];
321
392
 
@@ -415,6 +486,7 @@ export const restFieldes = async (rest_base) => {
415
486
  "date",
416
487
  "excerpt",
417
488
  "featured_media",
489
+ "link",
418
490
  "meta",
419
491
  "acf",
420
492
  ];