跳到内容
导航菜单
切换导航
登录
产品
行动
自动化任何工作流
包装
托管和管理包
安全
查找并修复漏洞
代码空间
即时开发环境
GitHub Copilot公司
使用AI编写更好的代码
代码审查
管理代码更改
问题
计划和跟踪工作
讨论
在代码外协作
探索
所有功能
文档
GitHub技能
博客
解决
按尺寸
企业
团队
创业公司
按行业划分
保健
金融服务
制造业
按用例
CI/CD和自动化
开发运营
开发安全操作
资源
话题
人工智能
开发运营
安全
软件开发
查看全部
探索
学习途径
白皮书、电子书、网络研讨会
客户案例
合作伙伴
开放源代码
GitHub赞助商
资助开源开发人员
ReadME项目
GitHub社区文章
存储库
话题
趋向
收藏
企业
企业平台
AI驱动的开发人员平台
可用附加组件
高级安全
企业级安全功能
GitHub Copilot公司
企业级AI功能
高级支持
企业级全天候支持
定价
搜索或跳转到。。。
搜索代码、存储库、用户、问题、拉取请求。。。
搜索
清除
搜索语法提示
提供反馈
我们阅读了每一条反馈,并非常认真地对待您的意见。
包括我的电子邮件地址以便联系我
保存的搜索
使用保存的搜索更快地筛选结果
姓名
查询
要查看所有可用的限定符,请参阅我们的
文档
.
登录
注册
重置焦点
您使用另一个选项卡或窗口登录。
重新加载
刷新会话。
您在另一个选项卡或窗口中注销。
重新加载
刷新会话。
您在另一个选项卡或窗口上切换了帐户。
重新加载
刷新会话。
解除警报
{{消息}}
WordPress(文字出版社)
/
古腾堡
公共
通知
您必须登录才能更改通知设置
福克
4.1公里
星星
10.4万
代码
问题
5公里+
Pull请求
1.3公里
讨论
行动
项目
7
安全
洞察力
其他导航选项
代码
问题
Pull请求
讨论
行动
项目
安全
洞察力
文件夹
77878个
面包屑
古腾堡
/
包装
/
块状布雷里
/
型钢混凝土
/
形象
/
图像.js
责备
责备
最新提交
历史
历史
792条线路(737处)·21.1 KB
77878个
面包屑
古腾堡
/
包装
/
块状布雷里
/
型钢混凝土
/
形象
/
图像.js
顶部
文件元数据和控件
代码
责备
792行(737个位置)·21.1 KB
原始
1
2
三
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
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
/**
*WordPress依赖项
*/
进口
{
isBlobURL
}
从
“@wordpress/blob”
;
进口
{
外部链接
,
可调整框大小
,
微调器
,
文本区域控件
,
文本控件
,
工具栏按钮
,
工具栏组
,
__实验工具面板
作为
工具面板
,
__实验工具面板项
作为
工具面板项
,
__实验使用自定义单位
作为
使用自定义单位
,
}
从
“@wordpress/components”
;
进口
{
使用ViewportMatch
}
从
“@wordpress/compose”
;
进口
{
使用Select
,
使用Dispatch
}
从
“@wordpress/data”
;
进口
{
块控件
,
检查员控制
,
__实验图像URLInputUI
作为
图像URLInputUI
,
MediaReplaceFlow
,
商店
作为
块编辑器存储
,
使用设置
,
__实验图像编辑器
作为
图像编辑器
,
__实验性使用边框属性
作为
使用边框道具
,
__实验获取阴影类和样式
作为
获取阴影类和样式
,
私人蚜虫
作为
块编辑器PrivateApis
,
}
从
“@wordpress/block-editor”
;
进口
{
使用效果
,
使用备忘录
,
使用状态
,
使用参考号
}
从
“@wordpress/element”
;
进口
{
__
,
_x个
,
把格式数据写成串
,
isRTL公司
}
从
“@wordpress/i18n”
;
进口
{
获取文件名
}
从
“@wordpress/url”
;
进口
{
切换到块类型
}
从
“@wordpress/blocks”
;
进口
{
作物
,
覆盖文本
,
上传
}
从
“@wordpress/icons”
;
进口
{
商店
作为
通知存储
}
从
“@wordpress/notices”
;
进口
{
商店
作为
核心存储区
}
从
“@wordpress/core-data”
;
/**
*内部依赖性
*/
进口
{
解锁
}
从
'../
锁定-解除锁定'
;
进口
{
创建升级嵌入块
}
从
'../
嵌入/util'
;
进口
使用客户端宽度
从
'./
使用客户端宽度'
;
进口
{
是外部图像
}
从
'./
编辑'
;
进口
{
解说词
}
从
'../
utils/caption“
;
/**
*模块常数
*/
进口
{
工具面板_DROPDOWNMENU_PROPS
}
从
'../
utils/常量'
;
进口
{
最小尺寸(_S)
,
允许的媒体类型
}
从
'./
常量'
;
进口
{
评估纵横比
}
从
'./
实用程序'
;
常量
{
尺寸工具
,
分辨率工具
}
=
解锁
(
块编辑器PrivateApis
)
;
常量
缩放选项
=
[
{
价值
:
“封面”
,
标签
:
_x个
(
“封面”
,
'尺寸控件的缩放选项'
)
,
帮助
:
__
(
“图像均匀覆盖空间。”
)
,
}
,
{
价值
:
“包含”
,
标签
:
_x个
(
“包含”
,
'尺寸控制的缩放选项'
)
,
帮助
:
__
(
“包含图像时没有失真。”
)
,
}
,
]
;
//如果图像有一个href,则包装一个<a/>标记以触发任何继承的链接元素样式。
常量
图像包装器
=
(
{
href公司
,
儿童
}
)
=>
{
如果
(
!
href公司
)
{
返回
儿童
;
}
返回
(
<
一
href公司
=
{
href公司
}
onClick(单击)
=
{
(
事件
)
=>
事件
.
预防违约
(
)
}
aria-disabled的
=
{
真的
}
风格
=
{
{
//链接图像块时,
//它用一个禁用的<a/>标签包装。
//恢复光标样式,使其不会显示为“可单击”
//并删除指针事件。
Safari需要display属性。
指针事件
:
“无”
,
光标
:
“默认”
,
显示
:
“内联”
,
}
}
>
{
儿童
}
<
/
一
>
)
;
}
;
出口
违约
功能
图像
(
{
临时URL
,
属性
,
集合属性
,
单选
,
在后面插入块
,
onReplace(更换)
,
在SelectImage上
,
在SelectURL上
,
上传错误
,
容器参考号
,
上下文
,
客户端ID
,
块编辑模式
,
}
)
{
常量
{
网址
=
''
,
中高音
,
排列
,
身份证件
,
href公司
,
相对
,
链接类
,
链接目的地
,
标题
,
宽度
,
高度
,
纵横比
,
规模
,
链接目标
,
sizeSlug(尺寸)
,
灯箱
,
元数据
,
}
=
属性
;
//唯一受支持的单位是px,因此我们可以解析Int以在此处去除px。
常量
数字宽度
=
宽度
?
解析Int
(
宽度
,
10
)
:
未定义
;
常量
数字高度
=
高度
?
解析Int
(
高度
,
10
)
:
未定义
;
常量
图像参考
=
使用参考号
(
)
;
常量
{
allowResize(允许调整大小)
=
真的
}
=
上下文
;
常量
{
getBlock(获取块)
,
获取设置
}
=
使用Select
(
块编辑器存储
)
;
常量
形象
=
使用Select
(
(
选择
)
=>
身份证件
&&
已选择isSingleSelected
?
选择
(
核心存储区
)
.
获取媒体
(
身份证件
,
{
上下文
:
'视图'
}
)
:
无效的
,
[
身份证件
,
单选
]
)
;
常量
{
可以插入封面
,
图像编辑
,
图像大小
,
最大宽度
}
=
使用Select
(
(
选择
)
=>
{
常量
{
获取块根客户端ID
,
can插入块类型
}
=
选择
(
块编辑器存储
)
;
常量
root客户端ID
=
获取块根客户端ID
(
客户端ID
)
;
常量
设置
=
获取设置
(
)
;
返回
{
图像编辑
:
设置
.
图像编辑
,
图像大小
:
设置
.
图像大小
,
最大宽度
:
设置
.
最大宽度
,
可以插入封面
:
can插入块类型
(
“芯/盖”
,
root客户端ID
)
,
}
;
}
,
[
客户端ID
]
)
;
常量
{
替换块
,
切换选择
}
=
使用Dispatch
(
块编辑器存储
)
;
常量
{
创建错误通知
,
创建成功通知
}
=
使用Dispatch
(
通知存储
)
;
常量
是较大的视口
=
使用ViewportMatch
(
“中等”
)
;
常量
宽对齐
=
[
“宽”
,
“已满”
]
.
包括
(
排列
)
;
常量
[
{
加载的自然宽度
,
装载自然高度
}
,
设置加载的自然大小
,
]
=
使用状态
(
{
}
)
;
常量
[
正在编辑图像
,
setIsEditingImage(设置为编辑图像)
]
=
使用状态
(
假
)
;
常量
[
外部Blob
,
setExternalBlob(设置外部Blob)
]
=
使用状态
(
)
;
常量
客户端宽度
=
使用客户端宽度
(
容器参考号
,
[
排列
]
)
;
常量
具有非内容控件
=
块编辑模式
===
“默认”
;
常量
可调整大小
=
allowResize(允许调整大小)
&&
具有非内容控件
&&
!
宽对齐
&&
是较大的视口
;
常量
图像大小选项
=
图像大小
.
滤波器
(
(
{
段塞
}
)
=>
形象
?.
媒体_详细信息
?.
尺寸
?.
[
段塞
]
?.
源url(_U)
)
.
地图
(
(
{
名称
,
段塞
}
)
=>
(
{
价值
:
段塞
,
标签
:
名称
}
)
)
;
//如果图像位于外部,请尝试获取图像数据。
这可能是
//如果映像主机不允许对域使用CORS,则失败。
如果可行,
//我们可以启用工具栏中的按钮来上传图像。
使用效果
(
(
)
=>
{
如果
(
!
是外部图像
(
身份证件
,
网址
)
||
!
单选
||
!
获取设置
(
)
.
媒体上传
)
{
setExternalBlob(设置外部Blob)
(
)
;
返回
;
}
如果
(
外部Blob
)
返回
;
窗口
//避免缓存,这似乎有助于避免CORS问题。
.
取来
(
网址
.
包括
(
'?'
)
?
网址
:
网址
+
'?'
)
.
然后
(
(
响应
)
=>
响应
.
斑点
(
)
)
.
然后
(
(
斑点
)
=>
setExternalBlob(设置外部Blob)
(
斑点
)
)
//什么都不做,无法上传。
.
抓住
(
(
)
=>
{
}
)
;
}
,
[
身份证件
,
网址
,
单选
,
外部Blob
]
)
;
//从image ref获取naturalWidth和naturalHeight,然后返回到加载的natural
//宽度和高度。
这解决了Safari中的一个问题
//否则,在路线之间切换时会丢失宽度和高度。
//请参见:
https://github.com/WordPress/gutenberg/pull/37210。
常量
{
自然宽度
,
自然高度
}
=
使用备忘录
(
(
)
=>
{
返回
{
自然宽度
:
图像参考
.
现在的
?.
自然宽度
||
加载的自然宽度
||
未定义
,
自然高度
:
图像参考
.
现在的
?.
自然高度
||
装载自然高度
||
未定义
,
}
;
}
,
[
加载的自然宽度
,
装载自然高度
,
图像参考
.
现在的
?.
完成
,
]
)
;
功能
onResizeStart
(
)
{
切换选择
(
假
)
;
}
功能
onResizeStop
(
)
{
切换选择
(
真的
)
;
}
功能
onImage错误
(
)
{
//检查是否有处理此URL的嵌入块,例如instagram URL。
//请参见:
https://github.com/WordPress/gutenberg/pull/11472
常量
嵌入块
=
创建升级嵌入块
(
{
属性
:
{
网址
}
}
)
;
如果
(
未定义
!==
嵌入块
)
{
onReplace(更换)
(
嵌入块
)
;
}
}
功能
onSetHref
(
道具
)
{
集合属性
(
道具
)
;
}
功能
在SetLightbox上
(
使可能
)
{
如果
(
使可能
&&
!
灯箱设置
?.
启用
)
{
集合属性
(
{
灯箱
:
{
启用
:
真的
}
,
}
)
;
}
其他的
如果
(
!
使可能
&&
灯箱设置
?.
启用
)
{
集合属性
(
{
灯箱
:
{
启用
:
假
}
,
}
)
;
}
其他的
{
集合属性
(
{
灯箱
:
未定义
,
}
)
;
}
}
功能
onSetTitle(设置标题)
(
价值
)
{
//这是HTML标题属性,与媒体对象分开
//标题。
集合属性
(
{
标题
:
价值
}
)
;
}
功能
更新Alt
(
新建Alt
)
{
集合属性
(
{
中高音
:
新建Alt
}
)
;
}
功能
更新图像
(
newSizeSlug
)
{
常量
新URL
=
形象
?.
媒体详细信息
?.
尺寸
?.
[
newSizeSlug
]
?.
源url(_U)
;
如果
(
!
新URL
)
{
返回
无效的
;
}
集合属性
(
{
网址
:
新URL
,
sizeSlug(尺寸)
:
新尺寸插头
,
}
)
;
}
功能
上传外部
(
)
{
常量
{
媒体上传
}
=
获取设置
(
)
;
如果
(
!
媒体上传
)
{
返回
;
}
媒体上传
(
{
文件列表
:
[
外部Blob
]
,
文件更改时
(
[
国际货币基金组织
]
)
{
在SelectImage上
(
国际货币基金组织
)
;
如果
(
isBlobURL
(
国际货币基金组织
.
网址
)
)
{
返回
;
}
setExternalBlob(设置外部Blob)
(
)
;
创建成功通知
(
__
(
'图像已上传。'
)
,
{
类型
:
“小吃”
,
}
)
;
}
,
允许的类型
:
允许的媒体类型
,
发生错误时
(
消息
)
{
创建错误通知
(
消息
,
{
类型
:
“小吃”
}
)
;
}
,
}
)
;
}
使用效果
(
(
)
=>
{
如果
(
!
单选
)
{
setIsEditingImage(设置为编辑图像)
(
假
)
;
}
}
,
[
单选
]
)
;
常量
canEdit图像
=
身份证件
&&
自然宽度
&&
自然高度
&&
图像编辑
;
常量
allowCrop(允许作物)
=
单选
&&
canEdit图像
&&
!
正在编辑图像
;
功能
开关到盖子
(
)
{
替换块
(
客户端ID
,
切换到块类型
(
获取块
(
客户端ID
)
,
“芯/盖”
)
)
;
}
//TODO:在弄清应该如何交互后,可以允许更多的单元
//使用ResizableBox和ImageEditor组件。
稍后的计算
//对于那些组件,目前采用的是px单位。
常量
尺寸单位选项
=
使用自定义单位
(
{
可用单位
:
[
“像素”
]
,
}
)
;
常量
[
灯箱设置
]
=
使用设置
(
“灯箱”
)
;
常量
showLightbox设置
=
!
!
灯箱
||
灯箱设置
?.
允许编辑
===
真的
;
常量
灯箱已检查
=
!
!
灯箱
?.
启用
||
(
!
灯箱
&&
!
!
灯箱设置
?.
启用
)
;
常量
尺寸控制
=
(
<
尺寸标注工具
价值
=
{
{
宽度
,
高度
,
规模
,
纵横比
}
}
onChange(更改时)
=
{
(
{
宽度
:
新宽度
,
高度
:
新高度
,
规模
:
newScale(新缩放)
,
纵横比
:
新纵横比
,
}
)
=>
{
//重建对象会强制设置“未定义”`
//对于自setAttributes之后删除的值
//对未设置的键没有任何作用。
集合属性
(
{
//CSS包括“height:auto”,但我们需要
//`width:auto`用于在以下情况下修复纵横比
//根据宽度和
//通过服务器设置高度属性。
宽度
:
!
新宽度
&&
新高度
?
“自动”
:
新宽度
,
高度
:
新高度
,
规模
:
newScale(新缩放)
,
纵横比
:
新纵横比
,
}
)
;
}
}
默认缩放
=
“封面”
默认纵横比
=
“自动”
缩放选项
=
{
缩放选项
}
单位选项
=
{
尺寸单位选项
}
/
>
)
;
常量
重置全部
=
(
)
=>
{
集合属性
(
{
中高音
:
未定义
,
宽度
:
未定义
,
高度
:
未定义
,
规模
:
未定义
,
纵横比
:
未定义
,
灯箱
:
未定义
,
}
)
;
}
;
常量
大小控件
=
(
<
检查员控制
>
<
工具面板
标签
=
{
__
(
'设置'
)
}
重置全部
=
{
重置全部
}
下拉菜单属性
=
{
工具面板_DROPDOWNMENU_PROPS
}
>
{
可调整大小
&&
尺寸控制
}
<
/
工具面板
>
<
/
检查员控制
>
)
;
常量
{
锁定URL控件
=
假
,
锁定AltControls
=
假
,
锁定标题控件
=
假
,
}
=
使用Select
(
(
选择
)
=>
{
如果
(
!
单选
)
{
返回
{
}
;
}
常量
{
获取块绑定源
}
=
解锁
(
选择
(
块编辑器存储
)
)
;
常量
{
网址
:
URL绑定
,
中高音
:
alt绑定
,
标题
:
title绑定
,
}
=
元数据
?.
绑定
||
{
}
;
返回
{
锁定URL控件
:
!
!
URL绑定
&&
获取块绑定源
(
URL绑定
?.
来源
)
?.
锁定属性编辑
===
真的
,
锁定AltControls
:
!
!
alt绑定
&&
获取块绑定源
(
alt绑定
?.
来源
)
?.
锁定属性编辑
===
真的
,
锁定标题控件
:
!
!
title绑定
&&
获取块绑定源
(
title绑定
?.
来源
)
?.
锁定属性编辑
===
真的
,
}
;
}
,
[
单选
]
)
;
常量
控制
=
(
<
>
<
区块控制
组
=
“块”
>
{
单选
&&
!
正在编辑图像
&&
!
锁定URL控件
&&
(
<
图像URLInputUI
网址
=
{
href公司
||
''
}
on更改URL
=
{
onSetHref
}
链接目的地
=
{
链接目的地
}
媒体URL
=
{
(
形象
&&
形象
.
源url(_U)
)
||
网址
}
媒体链接
=
{
形象
&&
形象
.
链接
}
链接目标
=
{
链接目标
}
链接类
=
{
链接类
}
相对
=
{
相对
}
showLightbox设置
=
{
showLightbox设置
}
灯箱已启用
=
{
灯箱已检查
}
在SetLightbox上
=
{
在SetLightbox上
}
/
>
)
}
{
allowCrop(允许作物)
&&
(
<
工具栏按钮
onClick(单击)
=
{
(
)
=>
setIsEditingImage(设置为编辑图像)
(
真的
)
}
偶像
=
{
作物
}
标签
=
{
__
(
“裁剪”
)
}
/
>
)
}
{
单选
&&
可以插入封面
&&
(
<
工具栏按钮
偶像
=
{
覆盖文本
}
标签
=
{
__
(
'在图像上添加文本'
)
}
onClick(单击)
=
{
开关到盖子
}
/
>
)
}
<
/
块控件
>
{
单选
&&
!
正在编辑图像
&&
!
锁定URL控件
&&
(
<
块控件
组
=
“其他”
>
<
MediaReplaceFlow
媒体
=
{
身份证件
}
媒体URL
=
{
网址
}
允许的类型
=
{
允许的媒体类型
}
接受
=
“图像/*”
onSelect(选择)
=
{
在SelectImage上
}
on选择URL
=
{
在SelectURL上
}
on错误
=
{
上传错误
}
/
>
<
/
块控件
>
)
}
{
单选
&&
外部Blob
&&
(
<
块控件
>
<
工具栏组
>
<
工具栏按钮
onClick(单击)
=
{
上传外部
}
偶像
=
{
上传
}
标签
=
{
__
(
'上传到媒体库'
)
}
/
>
<
/
工具栏组
>
<
/
块控件
>
)
}
<
检查员控制
>
<
工具面板
标签
=
{
__
(
'设置'
)
}
重置全部
=
{
重置全部
}
下拉菜单属性
=
{
工具面板_DROPDOWNMENU_PROPS
}
>
{
单选
&&
(
<
工具面板项
标签
=
{
__
(
'可选文本'
)
}
默认显示
=
{
真的
}
hasValue(哈斯值)
=
{
(
)
=>
!
!
中高音
}
取消选择时
=
{
(
)
=>
集合属性
(
{
中高音
:
未定义
}
)
}
>
<
文本区域控件
标签
=
{
__
(
'可选文本'
)
}
价值
=
{
中高音
||
''
}
onChange(更改时)
=
{
更新Alt
}
禁用
=
{
锁定AltControls
}
帮助
=
{
锁定AltControls
?
(
<
>
{
__
(
'已连接到自定义字段'
)
}
<
/
>
)
:
(
<
>
<
外部链接
href公司
=
"
https://www.w3.org/WAI/tutorials/images/decision-tree
"
>
{
__
(
“描述图像的用途。”
)
}
<
/
外部链接
>
<
br个
/
>
{
__
(
“如果是装饰性的,请留空。”
)
}
<
/
>
)
}
__下一个无边距底部
/
>
<
/
工具面板项
>
)
}
{
可调整大小
&&
尺寸控制
}
{
!
!
图像大小选项
.
长度
&&
(
<
分辨率工具
价值
=
{
sizeSlug(尺寸)
}
onChange(更改时)
=
{
更新图像
}
选项
=
{
图像大小选项
}
/
>
)
}
<
/
工具面板
>
<
/
检查员控制
>
<
检查员控制
组
=
“高级”
>
<
文本控件
__next无边距底部
标签
=
{
__
(
'标题属性'
)
}
价值
=
{
标题
||
''
}
onChange(更改时)
=
{
onSetTitle(设置标题)
}
禁用
=
{
锁定标题控件
}
帮助
=
{
锁定标题控件
?
(
<
>
{
__
(
'已连接到自定义字段'
)
}
<
/
>
)
:
(
<
>
{
__
(
“在页面上描述此图像的作用。”
)
}
<
外部链接
href公司
=
"
https://www.w3.org/TR/html52/dom.html#
-标题属性“
>
{
__
(
“(注意:许多设备和浏览器不显示此文本。)”
)
}
<
/
外部链接
>
<
/
>
)
}
/
>
<
/
检查员控制
>
<
/
>
)
;
常量
文件名
=
获取文件名
(
网址
)
;
让
默认Alt
;
如果
(
中高音
)
{
默认Alt
=
中高音
;
}
其他的
如果
(
文件名
)
{
默认Alt
=
把格式数据写成串
(
/*转换器:%s:文件名*/
__
(
'此图像的alt属性为空;
其文件名为“%s”
)
,
文件名
)
;
}
其他的
{
默认Alt
=
__
(
'此图像的alt属性为空'
)
;
}
常量
borderProps公司
=
使用边框属性
(
属性
)
;
常量
阴影道具
=
获取阴影类和样式
(
属性
)
;
常量
为圆形
=
属性
.
类名
?.
包括
(
'是风格圆角'
)
;
让
国际货币基金组织
=
(
//禁用原因:图像本身并不意味着是交互式的,但
//应将焦点指向块。
/*eslint禁用jsx-a11y/no非交互元素交互,jsx-a11y/click事件具有关键事件*/
<
>
<
国际货币基金组织
型钢混凝土
=
{
临时URL
||
网址
}
中高音
=
{
默认Alt
}
发生错误时
=
{
(
)
=>
onImage错误
(
)
}
加载
=
{
(
事件
)
=>
{
设置加载的自然大小
(
{
加载的自然宽度
:
事件
.
目标
?.
自然宽度
,
装载自然高度
:
事件
.
目标
?.
自然高度
,
}
)
;
}
}
裁判
=
{
图像参考
}
类名
=
{
borderProps公司
.
类名
}
风格
=
{
{
宽度
:
(
宽度
&&
高度
)
||
纵横比
?
'100%'
:
未定义
,
高度
:
(
宽度
&&
高度
)
||
纵横比
?
'100%'
:
未定义
,
对象匹配
:
规模
,
...
borderProps公司
.
风格
,
...
阴影道具
.
风格
,
}
}
/
>
{
临时URL
&&
<
微调器
/
>
}
<
/
>
/*eslint-enable jsx-a11y/no-ninteractive-element-interactions,jsx-a11-y/click-events-have-key-events*/
)
;
//clientWidth需要是一个数字,图像裁剪器才能工作,但有时它是0
//因此,我们尝试首先使用imageRef宽度,然后回退到clientWidth。
常量
回退客户端宽度
=
图像参考
.
现在的
?.
宽度
||
客户端宽度
;
如果
(
canEdit图像
&&
正在编辑图像
)
{
国际货币基金组织
=
(
<
图像包装器
href公司
=
{
href公司
}
>
<
图像编辑器
身份证件
=
{
身份证件
}
网址
=
{
网址
}
宽度
=
{
数字宽度
}
高度
=
{
数字高度
}
客户端宽度
=
{
回退客户端宽度
}
自然高度
=
{
自然高度
}
自然宽度
=
{
自然宽度
}
打开保存图像
=
{
(
图像属性
)
=>
集合属性
(
图像属性
)
}
完成编辑时
=
{
(
)
=>
{
setIsEditingImage(设置为编辑图像)
(
假
)
;
}
}
边界道具
=
{
为圆形
?
未定义
:
边界道具
}
/
>
<
/
图像包装器
>
)
;
}
其他的
如果
(
!
可调整大小
)
{
国际货币基金组织
=
(
<
div公司
风格
=
{
{
宽度
,
高度
,
纵横比
}
}
>
<
图像包装器
href公司
=
{
href公司
}
>
{
国际货币基金组织
}
<
/
图像包装器
>
<
/
div公司
>
)
;
}
其他的
{
常量
数字比率
=
纵横比
&&
评估纵横比
(
纵横比
)
;
常量
自定义比率
=
数字宽度
/
数字高度
;
常量
自然比率
=
自然宽度
/
自然高度
;
常量
比率
=
数字比率
||
自定义比率
||
自然比率
||
1
;
常量
当前宽度
=
!
数字宽度
&&
数字高度
?
数字高度
*
比率
:
数字宽度
;
常量
当前高度
=
!
数字高度
&&
数字宽度
?
数字宽度
/
比率
:
数字高度
;
常量
最小宽度
=
自然宽度
<
自然高度
?
最小尺寸(_S)
:
最小尺寸(_S)
*
比率
;
常量
最小高度
=
自然高度
<
自然宽度
?
最小尺寸(_S)
:
最小尺寸(_S)
/
比率
;
//在当前的ResizableBox实现中,图像需要一个
//最大宽度的显式像素值。
在无法
//设置内容宽度,此最大宽度当前由
//香草编辑风格。
以下变量将向该
//香草风格,所以第三方主题有一些回旋余地。
确实如此,
//在大多数情况下,允许您将图像缩放到超出
//主列,虽然不是无限的。
//@todo最好重新访问这个内容宽度变量
//变为可用。
常量
最大宽度缓冲区
=
最大宽度
*
2.5
;
让
显示右手柄
=
假
;
让
showLeft手柄
=
假
;
/*eslint可禁用no-lonely-if*/
//请参见
https://github.com/WordPress/gutenberg/issues/7584。
如果
(
排列
===
“中心”
)
{
//当图像居中时,显示两个控制柄。
显示右手柄
=
真的
;
showLeft手柄
=
真的
;
}
其他的
如果
(
isRTL公司
(
)
)
{
//在RTL模式下,图像默认位于右侧。
//仅当右控制柄处于
//左对齐。
否则,始终显示左手柄。
如果
(
排列
===
“左侧”
)
{
显示右手柄
=
真的
;
}
其他的
{
showLeft手柄
=
真的
;
}
}
其他的
{
//仅当
//图像向右对齐。
否则,始终显示右手柄。
如果
(
排列
===
“正确”
)
{
showLeft手柄
=
真的
;
}
其他的
{
显示右手柄
=
真的
;
}
}
/*eslint启用no-lonely-if*/
国际货币基金组织
=
(
<
可调整框大小
风格
=
{
{
显示
:
“块”
,
对象匹配
:
规模
,
纵横比
:
!
宽度
&&
!
高度
&&
纵横比
?
纵横比
:
未定义
,
}
}
大小
=
{
{
宽度
:
当前宽度
??
“自动”
,
高度
:
当前高度
??
“自动”
,
}
}
showHandle(显示句柄)
=
{
单选
}
最小宽度
=
{
最小宽度
}
最大宽度
=
{
最大宽度缓冲区
}
最小高度
=
{
最小高度
}
maxHeight(最大高度)
=
{
最大宽度缓冲区
/
比率
}
锁定纵横比
=
{
比率
}
使可能
=
{
{
顶部
:
假
,
正确的
:
显示右手柄
,
底部
:
真的
,
左边
:
showLeft手柄
,
}
}
onResizeStart
=
{
onResizeStart
}
onResizeStop
=
{
(
事件
,
方向
,
电子标签
)
=>
{
onResizeStop
(
)
;
//由于调整大小时纵横比被锁定,我们可以
//使用调整大小的元素的宽度计算
//CSS中的高度,以防止在最大宽度
//已到达。
集合属性
(
{
宽度
:
`
${
电子标签
.
偏移宽度
}
像素`
,
高度
:
“自动”
,
纵横比
:
比率
===
自然比率
?
未定义
:
字符串
(
比率
)
,
}
)
;
}
}
调整比率
=
{
排列
===
“中心”
?
2
:
1
}
>
<
图像包装器
href公司
=
{
href公司
}
>
{
国际货币基金组织
}
<
/
图像包装器
>
<
/
可调整框大小
>
)
;
}
如果
(
!
网址
&&
!
临时URL
)
{
//如果图像属性已连接,则添加所有控件。
返回
元数据
?.
绑定
?
控制
:
大小控件
;
}
返回
(
<
>
{
/*上载期间隐藏控件以避免组件重新装载,
这会导致重复的图像上传*/
}
{
!
临时URL
&&
控制
}
{
国际货币基金组织
}
<
解说词
属性
=
{
属性
}
集合属性
=
{
集合属性
}
已选定
=
{
单选
}
在后面插入块
=
{
在后面插入块
}
标签
=
{
__
(
'图像标题文本'
)
}
显示工具栏按钮
=
{
单选
&&
具有非内容控件
}
/
>
<
/
>
)
;
}
此时无法执行该操作。