@wordpress/block-editor 8.0.11 → 8.0.12-next.33ec3857e2.0

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 (278) hide show
  1. package/README.md +4 -0
  2. package/build/components/block-caption/index.native.js +14 -3
  3. package/build/components/block-caption/index.native.js.map +1 -1
  4. package/build/components/block-inspector/index.js +12 -23
  5. package/build/components/block-inspector/index.js.map +1 -1
  6. package/build/components/block-list-appender/index.js +3 -11
  7. package/build/components/block-list-appender/index.js.map +1 -1
  8. package/build/components/block-preview/auto.js +10 -2
  9. package/build/components/block-preview/auto.js.map +1 -1
  10. package/build/components/block-preview/index.js +51 -0
  11. package/build/components/block-preview/index.js.map +1 -1
  12. package/build/components/block-settings/container.native.js +2 -1
  13. package/build/components/block-settings/container.native.js.map +1 -1
  14. package/build/components/block-styles/index.js +110 -134
  15. package/build/components/block-styles/index.js.map +1 -1
  16. package/build/components/block-styles/menu-items.js +63 -0
  17. package/build/components/block-styles/menu-items.js.map +1 -0
  18. package/build/components/block-styles/preview-panel.js +45 -0
  19. package/build/components/block-styles/preview-panel.js.map +1 -0
  20. package/build/components/block-styles/use-styles-for-block.js +119 -0
  21. package/build/components/block-styles/use-styles-for-block.js.map +1 -0
  22. package/build/components/block-styles/utils.js +39 -0
  23. package/build/components/block-styles/utils.js.map +1 -1
  24. package/build/components/block-switcher/block-styles-menu.js +3 -23
  25. package/build/components/block-switcher/block-styles-menu.js.map +1 -1
  26. package/build/components/block-tools/back-compat.js +2 -1
  27. package/build/components/block-tools/back-compat.js.map +1 -1
  28. package/build/components/block-tools/insertion-point.js +11 -1
  29. package/build/components/block-tools/insertion-point.js.map +1 -1
  30. package/build/components/button-block-appender/index.js +2 -1
  31. package/build/components/button-block-appender/index.js.map +1 -1
  32. package/build/components/colors-gradients/panel-color-gradient-settings.js +51 -10
  33. package/build/components/colors-gradients/panel-color-gradient-settings.js.map +1 -1
  34. package/build/components/default-block-appender/index.js +16 -19
  35. package/build/components/default-block-appender/index.js.map +1 -1
  36. package/build/components/default-style-picker/index.js +18 -3
  37. package/build/components/default-style-picker/index.js.map +1 -1
  38. package/build/components/iframe/index.js +3 -4
  39. package/build/components/iframe/index.js.map +1 -1
  40. package/build/components/index.js +17 -10
  41. package/build/components/index.js.map +1 -1
  42. package/build/components/inner-blocks/default-block-appender.js +2 -4
  43. package/build/components/inner-blocks/default-block-appender.js.map +1 -1
  44. package/build/components/inserter/index.native.js +1 -1
  45. package/build/components/inserter/index.native.js.map +1 -1
  46. package/build/components/inserter/tabs.native.js +7 -4
  47. package/build/components/inserter/tabs.native.js.map +1 -1
  48. package/build/components/inspector-controls/block-support-slot-container.js +2 -1
  49. package/build/components/inspector-controls/block-support-slot-container.js.map +1 -1
  50. package/build/components/inspector-controls/fill.native.js +3 -5
  51. package/build/components/inspector-controls/fill.native.js.map +1 -1
  52. package/build/components/inspector-controls/groups.js +2 -0
  53. package/build/components/inspector-controls/groups.js.map +1 -1
  54. package/build/components/inspector-controls/slot.js +1 -3
  55. package/build/components/inspector-controls/slot.js.map +1 -1
  56. package/build/components/letter-spacing-control/index.js +6 -6
  57. package/build/components/letter-spacing-control/index.js.map +1 -1
  58. package/build/components/list-view/block-select-button.js +23 -3
  59. package/build/components/list-view/block-select-button.js.map +1 -1
  60. package/build/components/media-placeholder/index.js +2 -0
  61. package/build/components/media-placeholder/index.js.map +1 -1
  62. package/build/components/media-replace-flow/index.js +2 -0
  63. package/build/components/media-replace-flow/index.js.map +1 -1
  64. package/build/components/rich-text/file-paste-handler.js +1 -1
  65. package/build/components/rich-text/file-paste-handler.js.map +1 -1
  66. package/build/components/rich-text/prevent-event-discovery.js +33 -0
  67. package/build/components/rich-text/prevent-event-discovery.js.map +1 -0
  68. package/build/components/rich-text/use-input-rules.js +3 -1
  69. package/build/components/rich-text/use-input-rules.js.map +1 -1
  70. package/build/components/selection-scroll-into-view/index.js +2 -1
  71. package/build/components/selection-scroll-into-view/index.js.map +1 -1
  72. package/build/components/use-display-block-controls/index.native.js +45 -0
  73. package/build/components/use-display-block-controls/index.native.js.map +1 -0
  74. package/build/components/use-on-block-drop/index.js +7 -3
  75. package/build/components/use-on-block-drop/index.js.map +1 -1
  76. package/build/components/writing-flow/use-multi-selection.js +3 -1
  77. package/build/components/writing-flow/use-multi-selection.js.map +1 -1
  78. package/build/hooks/border-color.js +63 -5
  79. package/build/hooks/border-color.js.map +1 -1
  80. package/build/hooks/border-radius.js +47 -0
  81. package/build/hooks/border-radius.js.map +1 -1
  82. package/build/hooks/border-style.js +41 -0
  83. package/build/hooks/border-style.js.map +1 -1
  84. package/build/hooks/border-width.js +70 -31
  85. package/build/hooks/border-width.js.map +1 -1
  86. package/build/hooks/border.js +81 -11
  87. package/build/hooks/border.js.map +1 -1
  88. package/build/hooks/letter-spacing.js +1 -1
  89. package/build/hooks/letter-spacing.js.map +1 -1
  90. package/build/hooks/typography.js +1 -1
  91. package/build/hooks/typography.js.map +1 -1
  92. package/build/store/actions.js +1 -2
  93. package/build/store/actions.js.map +1 -1
  94. package/build/store/defaults.js +5 -1
  95. package/build/store/defaults.js.map +1 -1
  96. package/build/store/selectors.js +25 -7
  97. package/build/store/selectors.js.map +1 -1
  98. package/build/utils/get-paste-event-data.js +1 -1
  99. package/build/utils/get-paste-event-data.js.map +1 -1
  100. package/build/utils/parse-css-unit-to-px.js +1 -1
  101. package/build/utils/parse-css-unit-to-px.js.map +1 -1
  102. package/build-module/components/block-caption/index.native.js +13 -3
  103. package/build-module/components/block-caption/index.native.js.map +1 -1
  104. package/build-module/components/block-inspector/index.js +12 -23
  105. package/build-module/components/block-inspector/index.js.map +1 -1
  106. package/build-module/components/block-list-appender/index.js +3 -10
  107. package/build-module/components/block-list-appender/index.js.map +1 -1
  108. package/build-module/components/block-preview/auto.js +10 -2
  109. package/build-module/components/block-preview/auto.js.map +1 -1
  110. package/build-module/components/block-preview/index.js +46 -0
  111. package/build-module/components/block-preview/index.js.map +1 -1
  112. package/build-module/components/block-settings/container.native.js +2 -1
  113. package/build-module/components/block-settings/container.native.js.map +1 -1
  114. package/build-module/components/block-styles/index.js +112 -133
  115. package/build-module/components/block-styles/index.js.map +1 -1
  116. package/build-module/components/block-styles/menu-items.js +50 -0
  117. package/build-module/components/block-styles/menu-items.js.map +1 -0
  118. package/build-module/components/block-styles/preview-panel.js +35 -0
  119. package/build-module/components/block-styles/preview-panel.js.map +1 -0
  120. package/build-module/components/block-styles/use-styles-for-block.js +107 -0
  121. package/build-module/components/block-styles/use-styles-for-block.js.map +1 -0
  122. package/build-module/components/block-styles/utils.js +34 -0
  123. package/build-module/components/block-styles/utils.js.map +1 -1
  124. package/build-module/components/block-switcher/block-styles-menu.js +3 -21
  125. package/build-module/components/block-switcher/block-styles-menu.js.map +1 -1
  126. package/build-module/components/block-tools/back-compat.js +2 -1
  127. package/build-module/components/block-tools/back-compat.js.map +1 -1
  128. package/build-module/components/block-tools/insertion-point.js +11 -1
  129. package/build-module/components/block-tools/insertion-point.js.map +1 -1
  130. package/build-module/components/button-block-appender/index.js +2 -1
  131. package/build-module/components/button-block-appender/index.js.map +1 -1
  132. package/build-module/components/colors-gradients/panel-color-gradient-settings.js +54 -13
  133. package/build-module/components/colors-gradients/panel-color-gradient-settings.js.map +1 -1
  134. package/build-module/components/default-block-appender/index.js +15 -18
  135. package/build-module/components/default-block-appender/index.js.map +1 -1
  136. package/build-module/components/default-style-picker/index.js +17 -3
  137. package/build-module/components/default-style-picker/index.js.map +1 -1
  138. package/build-module/components/iframe/index.js +3 -4
  139. package/build-module/components/iframe/index.js.map +1 -1
  140. package/build-module/components/index.js +2 -2
  141. package/build-module/components/index.js.map +1 -1
  142. package/build-module/components/inner-blocks/default-block-appender.js +2 -4
  143. package/build-module/components/inner-blocks/default-block-appender.js.map +1 -1
  144. package/build-module/components/inserter/index.native.js +2 -2
  145. package/build-module/components/inserter/index.native.js.map +1 -1
  146. package/build-module/components/inserter/tabs.native.js +7 -4
  147. package/build-module/components/inserter/tabs.native.js.map +1 -1
  148. package/build-module/components/inspector-controls/block-support-slot-container.js +2 -1
  149. package/build-module/components/inspector-controls/block-support-slot-container.js.map +1 -1
  150. package/build-module/components/inspector-controls/fill.native.js +3 -5
  151. package/build-module/components/inspector-controls/fill.native.js.map +1 -1
  152. package/build-module/components/inspector-controls/groups.js +2 -0
  153. package/build-module/components/inspector-controls/groups.js.map +1 -1
  154. package/build-module/components/inspector-controls/slot.js +1 -3
  155. package/build-module/components/inspector-controls/slot.js.map +1 -1
  156. package/build-module/components/letter-spacing-control/index.js +6 -6
  157. package/build-module/components/letter-spacing-control/index.js.map +1 -1
  158. package/build-module/components/list-view/block-select-button.js +22 -3
  159. package/build-module/components/list-view/block-select-button.js.map +1 -1
  160. package/build-module/components/media-placeholder/index.js +2 -0
  161. package/build-module/components/media-placeholder/index.js.map +1 -1
  162. package/build-module/components/media-replace-flow/index.js +2 -0
  163. package/build-module/components/media-replace-flow/index.js.map +1 -1
  164. package/build-module/components/rich-text/file-paste-handler.js +1 -1
  165. package/build-module/components/rich-text/file-paste-handler.js.map +1 -1
  166. package/build-module/components/rich-text/prevent-event-discovery.js +25 -0
  167. package/build-module/components/rich-text/prevent-event-discovery.js.map +1 -0
  168. package/build-module/components/rich-text/use-input-rules.js +2 -1
  169. package/build-module/components/rich-text/use-input-rules.js.map +1 -1
  170. package/build-module/components/selection-scroll-into-view/index.js +2 -1
  171. package/build-module/components/selection-scroll-into-view/index.js.map +1 -1
  172. package/build-module/components/use-display-block-controls/index.native.js +34 -0
  173. package/build-module/components/use-display-block-controls/index.native.js.map +1 -0
  174. package/build-module/components/use-on-block-drop/index.js +7 -3
  175. package/build-module/components/use-on-block-drop/index.js.map +1 -1
  176. package/build-module/components/writing-flow/use-multi-selection.js +3 -4
  177. package/build-module/components/writing-flow/use-multi-selection.js.map +1 -1
  178. package/build-module/hooks/border-color.js +61 -7
  179. package/build-module/hooks/border-color.js.map +1 -1
  180. package/build-module/hooks/border-radius.js +42 -0
  181. package/build-module/hooks/border-radius.js.map +1 -1
  182. package/build-module/hooks/border-style.js +36 -0
  183. package/build-module/hooks/border-style.js.map +1 -1
  184. package/build-module/hooks/border-width.js +66 -32
  185. package/build-module/hooks/border-width.js.map +1 -1
  186. package/build-module/hooks/border.js +80 -12
  187. package/build-module/hooks/border.js.map +1 -1
  188. package/build-module/hooks/letter-spacing.js +1 -1
  189. package/build-module/hooks/letter-spacing.js.map +1 -1
  190. package/build-module/hooks/typography.js +1 -1
  191. package/build-module/hooks/typography.js.map +1 -1
  192. package/build-module/store/actions.js +1 -2
  193. package/build-module/store/actions.js.map +1 -1
  194. package/build-module/store/defaults.js +5 -1
  195. package/build-module/store/defaults.js.map +1 -1
  196. package/build-module/store/selectors.js +24 -7
  197. package/build-module/store/selectors.js.map +1 -1
  198. package/build-module/utils/get-paste-event-data.js +1 -1
  199. package/build-module/utils/get-paste-event-data.js.map +1 -1
  200. package/build-module/utils/parse-css-unit-to-px.js +1 -1
  201. package/build-module/utils/parse-css-unit-to-px.js.map +1 -1
  202. package/build-style/style-rtl.css +226 -180
  203. package/build-style/style.css +226 -180
  204. package/package.json +27 -27
  205. package/src/components/block-caption/index.native.js +22 -4
  206. package/src/components/block-inspector/index.js +14 -17
  207. package/src/components/block-list-appender/index.js +5 -21
  208. package/src/components/block-preview/auto.js +7 -2
  209. package/src/components/block-preview/index.js +60 -0
  210. package/src/components/block-preview/style.scss +23 -0
  211. package/src/components/block-preview/test/index.js +114 -0
  212. package/src/components/block-settings/container.native.js +1 -0
  213. package/src/components/block-styles/index.js +125 -145
  214. package/src/components/block-styles/menu-items.js +49 -0
  215. package/src/components/block-styles/preview-panel.js +36 -0
  216. package/src/components/block-styles/style.scss +59 -51
  217. package/src/components/block-styles/test/{index.js → utils.js} +60 -1
  218. package/src/components/block-styles/use-styles-for-block.js +99 -0
  219. package/src/components/block-styles/utils.js +39 -0
  220. package/src/components/block-switcher/block-styles-menu.js +3 -38
  221. package/src/components/block-tools/back-compat.js +1 -0
  222. package/src/components/block-tools/insertion-point.js +10 -1
  223. package/src/components/border-style-control/style.scss +0 -1
  224. package/src/components/button-block-appender/index.js +1 -0
  225. package/src/components/colors-gradients/panel-color-gradient-settings.js +75 -19
  226. package/src/components/colors-gradients/style.scss +42 -5
  227. package/src/components/default-block-appender/index.js +17 -24
  228. package/src/components/default-block-appender/style.scss +4 -0
  229. package/src/components/default-block-appender/test/__snapshots__/index.js.snap +12 -24
  230. package/src/components/default-block-appender/test/index.js +4 -14
  231. package/src/components/default-style-picker/index.js +18 -6
  232. package/src/components/iframe/index.js +6 -3
  233. package/src/components/index.js +5 -2
  234. package/src/components/inner-blocks/README.md +2 -0
  235. package/src/components/inner-blocks/default-block-appender.js +2 -7
  236. package/src/components/inserter/index.native.js +2 -2
  237. package/src/components/inserter/tabs.native.js +5 -4
  238. package/src/components/inspector-controls/block-support-slot-container.js +3 -1
  239. package/src/components/inspector-controls/fill.native.js +4 -3
  240. package/src/components/inspector-controls/groups.js +2 -0
  241. package/src/components/inspector-controls/slot.js +2 -7
  242. package/src/components/letter-spacing-control/index.js +6 -6
  243. package/src/components/link-control/README.md +1 -1
  244. package/src/components/link-control/test/index.js +2 -0
  245. package/src/components/list-view/block-select-button.js +20 -1
  246. package/src/components/media-placeholder/index.js +2 -0
  247. package/src/components/media-replace-flow/index.js +2 -0
  248. package/src/components/rich-text/file-paste-handler.js +3 -1
  249. package/src/components/rich-text/prevent-event-discovery.js +23 -0
  250. package/src/components/rich-text/use-input-rules.js +2 -1
  251. package/src/components/selection-scroll-into-view/index.js +1 -0
  252. package/src/components/url-input/README.md +5 -0
  253. package/src/components/use-display-block-controls/index.native.js +38 -0
  254. package/src/components/use-on-block-drop/index.js +7 -3
  255. package/src/components/writing-flow/test/use-multi-selection.js +36 -0
  256. package/src/components/writing-flow/use-multi-selection.js +12 -9
  257. package/src/hooks/border-color.js +55 -3
  258. package/src/hooks/border-radius.js +32 -0
  259. package/src/hooks/border-style.js +26 -0
  260. package/src/hooks/border-width.js +56 -32
  261. package/src/hooks/border.js +115 -20
  262. package/src/hooks/border.scss +3 -17
  263. package/src/hooks/dimensions.scss +5 -0
  264. package/src/hooks/letter-spacing.js +1 -1
  265. package/src/hooks/typography.js +1 -1
  266. package/src/store/actions.js +1 -2
  267. package/src/store/defaults.js +2 -0
  268. package/src/store/selectors.js +37 -7
  269. package/src/style.scss +4 -3
  270. package/src/utils/get-paste-event-data.js +1 -1
  271. package/src/utils/parse-css-unit-to-px.js +1 -1
  272. package/src/utils/test/parse-css-unit-to-px.js +1 -0
  273. package/tsconfig.tsbuildinfo +1 -1
  274. package/build/components/use-canvas-click-redirect/index.js +0 -66
  275. package/build/components/use-canvas-click-redirect/index.js.map +0 -1
  276. package/build-module/components/use-canvas-click-redirect/index.js +0 -54
  277. package/build-module/components/use-canvas-click-redirect/index.js.map +0 -1
  278. package/src/components/use-canvas-click-redirect/index.js +0 -57
@@ -1188,66 +1188,83 @@
1188
1188
  display: none;
1189
1189
  }
1190
1190
 
1191
+ .block-editor-block-preview__live-content * {
1192
+ pointer-events: none;
1193
+ }
1194
+ .block-editor-block-preview__live-content .block-list-appender {
1195
+ display: none;
1196
+ }
1197
+ .block-editor-block-preview__live-content .components-button:disabled {
1198
+ opacity: initial;
1199
+ }
1200
+ .block-editor-block-preview__live-content .components-placeholder,
1201
+ .block-editor-block-preview__live-content .block-editor-block-list__block[data-empty=true] {
1202
+ display: none;
1203
+ }
1204
+
1191
1205
  .block-editor-block-settings-menu__popover .components-dropdown-menu__menu {
1192
1206
  padding: 0;
1193
1207
  }
1194
1208
 
1195
- .block-editor-block-styles {
1196
- display: flex;
1197
- flex-wrap: wrap;
1198
- justify-content: space-between;
1209
+ .block-editor-block-styles + .default-style-picker__default-switcher {
1210
+ margin-top: 16px;
1199
1211
  }
1200
1212
 
1201
- .block-editor-block-styles__item {
1202
- width: calc(50% - 4px);
1203
- margin: 4px 0;
1204
- flex-shrink: 0;
1205
- cursor: pointer;
1206
- overflow: hidden;
1207
- border-radius: 2px;
1208
- padding: 6px;
1209
- display: flex;
1210
- flex-direction: column;
1211
- }
1212
- .block-editor-block-styles__item:focus {
1213
- box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
1214
- outline: 2px solid transparent;
1213
+ .block-editor-block-styles__preview-panel {
1214
+ display: none;
1215
+ position: absolute;
1216
+ right: 16px;
1217
+ left: auto;
1218
+ z-index: 90;
1215
1219
  }
1216
- .block-editor-block-styles__item:hover .block-editor-block-styles__item-preview {
1217
- border-color: var(--wp-admin-theme-color);
1220
+ @media (min-width: 782px) {
1221
+ .block-editor-block-styles__preview-panel {
1222
+ display: block;
1223
+ }
1218
1224
  }
1219
- .block-editor-block-styles__item.is-active .block-editor-block-styles__item-label {
1220
- font-weight: bold;
1225
+ .block-editor-block-styles__preview-panel .block-editor-inserter__preview-container {
1226
+ left: auto;
1227
+ right: auto;
1228
+ top: auto;
1229
+ position: static;
1221
1230
  }
1222
- .block-editor-block-styles__item.is-active .block-editor-block-styles__item-preview {
1231
+ .block-editor-block-styles__preview-panel .block-editor-block-card__title.block-editor-block-card__title {
1223
1232
  margin: 0;
1224
- border: 2px solid #1e1e1e;
1225
1233
  }
1226
- .block-editor-block-styles__item .block-editor-block-preview__container {
1227
- cursor: inherit;
1234
+ .block-editor-block-styles__preview-panel .block-editor-block-icon {
1235
+ display: none;
1228
1236
  }
1229
1237
 
1230
- .block-editor-block-styles__item-preview {
1231
- outline: 1px solid transparent;
1232
- padding: 0;
1233
- margin: 2px;
1234
- border-radius: 2px;
1238
+ .block-editor-block-styles__variants {
1235
1239
  display: flex;
1236
- overflow: hidden;
1237
- background: #fff;
1238
- align-items: center;
1239
- flex-grow: 1;
1240
- min-height: 80px;
1241
- max-height: 160px;
1240
+ flex-wrap: wrap;
1241
+ justify-content: space-between;
1242
+ gap: 8px;
1242
1243
  }
1243
-
1244
- .block-editor-block-switcher__styles__menugroup {
1245
- position: relative;
1244
+ .block-editor-block-styles__variants .block-editor-block-styles__item {
1245
+ color: #2f2f2f;
1246
+ box-shadow: inset 0 0 0 1px #ccc;
1247
+ display: inline-block;
1248
+ width: calc(50% - 4px);
1249
+ }
1250
+ .block-editor-block-styles__variants .block-editor-block-styles__item:focus, .block-editor-block-styles__variants .block-editor-block-styles__item:hover {
1251
+ color: var(--wp-admin-theme-color);
1252
+ box-shadow: inset 0 0 0 2px var(--wp-admin-theme-color);
1253
+ }
1254
+ .block-editor-block-styles__variants .block-editor-block-styles__item.is-active, .block-editor-block-styles__variants .block-editor-block-styles__item.is-active:hover {
1255
+ background-color: #2f2f2f;
1256
+ box-shadow: none;
1257
+ }
1258
+ .block-editor-block-styles__variants .block-editor-block-styles__item.is-active .block-editor-block-styles__item-text, .block-editor-block-styles__variants .block-editor-block-styles__item.is-active:hover .block-editor-block-styles__item-text {
1259
+ color: #fff;
1260
+ }
1261
+ .block-editor-block-styles__variants .block-editor-block-styles__item.is-active:focus {
1262
+ box-shadow: inset 0 0 0 1px #fff, 0 0 0 2px var(--wp-admin-theme-color);
1246
1263
  }
1247
1264
 
1248
- .block-editor-block-styles__item-label {
1249
- text-align: center;
1250
- padding: 4px 0;
1265
+ .block-editor-block-styles__block-preview-container,
1266
+ .block-editor-block-styles__block-preview-container * {
1267
+ box-sizing: border-box !important;
1251
1268
  }
1252
1269
 
1253
1270
  .block-editor-block-switcher {
@@ -1704,7 +1721,6 @@
1704
1721
  }
1705
1722
  .components-border-style-control .components-border-style-control__buttons {
1706
1723
  display: inline-flex;
1707
- margin-bottom: 24px;
1708
1724
  }
1709
1725
  .components-border-style-control .components-border-style-control__buttons .components-button.has-icon {
1710
1726
  min-width: 30px;
@@ -1743,11 +1759,14 @@
1743
1759
  margin-bottom: 12px;
1744
1760
  }
1745
1761
 
1746
- .block-editor-panel-color-gradient-settings .component-color-indicator {
1747
- vertical-align: text-bottom;
1762
+ .block-editor-panel-color-gradient-settings .block-editor-panel-color-gradient-settings__panel-title {
1763
+ display: flex;
1764
+ gap: 12px;
1748
1765
  }
1749
- .block-editor-panel-color-gradient-settings__panel-title .component-color-indicator {
1750
- display: inline-block;
1766
+ .block-editor-panel-color-gradient-settings .block-editor-panel-color-gradient-settings__panel-title .component-color-indicator {
1767
+ width: 12px;
1768
+ height: 12px;
1769
+ align-self: center;
1751
1770
  }
1752
1771
  .block-editor-panel-color-gradient-settings.is-opened .block-editor-panel-color-gradient-settings__panel-title .component-color-indicator {
1753
1772
  display: none;
@@ -1762,6 +1781,35 @@
1762
1781
  .block-editor-block-inspector .block-editor-panel-color-gradient-settings .components-base-control {
1763
1782
  margin-bottom: inherit;
1764
1783
  }
1784
+ .block-editor-panel-color-gradient-settings .block-editor-panel-color-gradient-settings__dropdown {
1785
+ display: block;
1786
+ }
1787
+
1788
+ .block-editor-panel-color-gradient-settings__dropdown-content .components-popover__content > div {
1789
+ width: 280px;
1790
+ }
1791
+
1792
+ @media (min-width: 782px) {
1793
+ .block-editor-panel-color-gradient-settings__dropdown-content .components-popover__content {
1794
+ margin-right: 156px !important;
1795
+ margin-top: -60px !important;
1796
+ }
1797
+ }
1798
+ .block-editor-panel-color-gradient-settings__dropdown:last-child > div {
1799
+ border-bottom-width: 0;
1800
+ }
1801
+
1802
+ .block-editor-panel-color-gradient-settings__item {
1803
+ padding-top: 12px !important;
1804
+ padding-bottom: 12px !important;
1805
+ }
1806
+ .block-editor-panel-color-gradient-settings__item .block-editor-panel-color-gradient-settings__color-indicator {
1807
+ background: linear-gradient(-45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
1808
+ }
1809
+ .block-editor-panel-color-gradient-settings__item.is-open {
1810
+ background: #f0f0f0;
1811
+ color: var(--wp-admin-theme-color);
1812
+ }
1765
1813
 
1766
1814
  .block-editor-contrast-checker > .components-notice {
1767
1815
  margin: 0;
@@ -1859,6 +1907,10 @@
1859
1907
  display: flex;
1860
1908
  }
1861
1909
 
1910
+ .block-editor-default-block-appender__content {
1911
+ cursor: text;
1912
+ }
1913
+
1862
1914
  .block-editor-duotone-control__popover > .components-popover__content > div {
1863
1915
  padding: 16px;
1864
1916
  width: 280px;
@@ -1893,6 +1945,119 @@
1893
1945
  text-transform: capitalize;
1894
1946
  }
1895
1947
 
1948
+ .block-editor-image-size-control {
1949
+ margin-bottom: 1em;
1950
+ }
1951
+ .block-editor-image-size-control .block-editor-image-size-control__row {
1952
+ display: flex;
1953
+ justify-content: space-between;
1954
+ }
1955
+ .block-editor-image-size-control .block-editor-image-size-control__row .block-editor-image-size-control__width,
1956
+ .block-editor-image-size-control .block-editor-image-size-control__row .block-editor-image-size-control__height {
1957
+ margin-bottom: 0.5em;
1958
+ }
1959
+ .block-editor-image-size-control .block-editor-image-size-control__row .block-editor-image-size-control__width input,
1960
+ .block-editor-image-size-control .block-editor-image-size-control__row .block-editor-image-size-control__height input {
1961
+ line-height: 1.25;
1962
+ }
1963
+ .block-editor-image-size-control .block-editor-image-size-control__row .block-editor-image-size-control__width {
1964
+ margin-right: 5px;
1965
+ }
1966
+ .block-editor-image-size-control .block-editor-image-size-control__row .block-editor-image-size-control__height {
1967
+ margin-left: 5px;
1968
+ }
1969
+
1970
+ .block-editor-block-list__layout.has-overlay::after {
1971
+ content: "";
1972
+ position: absolute;
1973
+ top: 0;
1974
+ right: 0;
1975
+ bottom: 0;
1976
+ left: 0;
1977
+ z-index: 60;
1978
+ }
1979
+
1980
+ .block-editor-block-types-list__list-item {
1981
+ display: block;
1982
+ width: 33.33%;
1983
+ padding: 0;
1984
+ margin: 0;
1985
+ }
1986
+
1987
+ .components-button.block-editor-block-types-list__item {
1988
+ display: flex;
1989
+ flex-direction: column;
1990
+ width: 100%;
1991
+ font-size: 13px;
1992
+ color: #1e1e1e;
1993
+ padding: 8px;
1994
+ align-items: stretch;
1995
+ justify-content: center;
1996
+ cursor: pointer;
1997
+ background: transparent;
1998
+ word-break: break-word;
1999
+ border-radius: 2px;
2000
+ transition: all 0.05s ease-in-out;
2001
+ position: relative;
2002
+ height: auto;
2003
+ }
2004
+ @media (prefers-reduced-motion: reduce) {
2005
+ .components-button.block-editor-block-types-list__item {
2006
+ transition-duration: 0s;
2007
+ transition-delay: 0s;
2008
+ }
2009
+ }
2010
+ .components-button.block-editor-block-types-list__item:disabled {
2011
+ opacity: 0.6;
2012
+ cursor: default;
2013
+ }
2014
+ .components-button.block-editor-block-types-list__item:not(:disabled):hover {
2015
+ color: var(--wp-admin-theme-color) !important;
2016
+ }
2017
+ .components-button.block-editor-block-types-list__item:not(:disabled):focus {
2018
+ box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
2019
+ }
2020
+ .components-button.block-editor-block-types-list__item:not(:disabled).is-active {
2021
+ color: #fff;
2022
+ background: #1e1e1e;
2023
+ outline: 2px solid transparent;
2024
+ outline-offset: -2px;
2025
+ }
2026
+
2027
+ .block-editor-block-types-list__item-icon {
2028
+ padding: 12px 20px;
2029
+ border-radius: 2px;
2030
+ color: #1e1e1e;
2031
+ transition: all 0.05s ease-in-out;
2032
+ }
2033
+ @media (prefers-reduced-motion: reduce) {
2034
+ .block-editor-block-types-list__item-icon {
2035
+ transition-duration: 0s;
2036
+ transition-delay: 0s;
2037
+ }
2038
+ }
2039
+ .block-editor-block-types-list__item-icon .block-editor-block-icon {
2040
+ margin-left: auto;
2041
+ margin-right: auto;
2042
+ }
2043
+ .block-editor-block-types-list__item-icon svg {
2044
+ transition: all 0.15s ease-out;
2045
+ }
2046
+ @media (prefers-reduced-motion: reduce) {
2047
+ .block-editor-block-types-list__item-icon svg {
2048
+ transition-duration: 0s;
2049
+ transition-delay: 0s;
2050
+ }
2051
+ }
2052
+ .block-editor-block-types-list__list-item[draggable=true] .block-editor-block-types-list__item-icon {
2053
+ cursor: grab;
2054
+ }
2055
+
2056
+ .block-editor-block-types-list__item-title {
2057
+ padding: 4px 2px 8px;
2058
+ font-size: 12px;
2059
+ }
2060
+
1896
2061
  .items-justified-left {
1897
2062
  justify-content: flex-start;
1898
2063
  }
@@ -1909,6 +2074,14 @@
1909
2074
  justify-content: space-between;
1910
2075
  }
1911
2076
 
2077
+ .block-editor-line-height-control {
2078
+ margin-bottom: 24px;
2079
+ }
2080
+ .block-editor-line-height-control input {
2081
+ display: block;
2082
+ max-width: 60px;
2083
+ }
2084
+
1912
2085
  @keyframes loadingpulse {
1913
2086
  0% {
1914
2087
  opacity: 1;
@@ -2364,127 +2537,6 @@
2364
2537
  flex-shrink: 0;
2365
2538
  }
2366
2539
 
2367
- .block-editor-line-height-control {
2368
- margin-bottom: 24px;
2369
- }
2370
- .block-editor-line-height-control input {
2371
- display: block;
2372
- max-width: 60px;
2373
- }
2374
-
2375
- .block-editor-image-size-control {
2376
- margin-bottom: 1em;
2377
- }
2378
- .block-editor-image-size-control .block-editor-image-size-control__row {
2379
- display: flex;
2380
- justify-content: space-between;
2381
- }
2382
- .block-editor-image-size-control .block-editor-image-size-control__row .block-editor-image-size-control__width,
2383
- .block-editor-image-size-control .block-editor-image-size-control__row .block-editor-image-size-control__height {
2384
- margin-bottom: 0.5em;
2385
- }
2386
- .block-editor-image-size-control .block-editor-image-size-control__row .block-editor-image-size-control__width input,
2387
- .block-editor-image-size-control .block-editor-image-size-control__row .block-editor-image-size-control__height input {
2388
- line-height: 1.25;
2389
- }
2390
- .block-editor-image-size-control .block-editor-image-size-control__row .block-editor-image-size-control__width {
2391
- margin-right: 5px;
2392
- }
2393
- .block-editor-image-size-control .block-editor-image-size-control__row .block-editor-image-size-control__height {
2394
- margin-left: 5px;
2395
- }
2396
-
2397
- .block-editor-block-list__layout.has-overlay::after {
2398
- content: "";
2399
- position: absolute;
2400
- top: 0;
2401
- right: 0;
2402
- bottom: 0;
2403
- left: 0;
2404
- z-index: 60;
2405
- }
2406
-
2407
- .block-editor-block-types-list__list-item {
2408
- display: block;
2409
- width: 33.33%;
2410
- padding: 0;
2411
- margin: 0;
2412
- }
2413
-
2414
- .components-button.block-editor-block-types-list__item {
2415
- display: flex;
2416
- flex-direction: column;
2417
- width: 100%;
2418
- font-size: 13px;
2419
- color: #1e1e1e;
2420
- padding: 8px;
2421
- align-items: stretch;
2422
- justify-content: center;
2423
- cursor: pointer;
2424
- background: transparent;
2425
- word-break: break-word;
2426
- border-radius: 2px;
2427
- transition: all 0.05s ease-in-out;
2428
- position: relative;
2429
- height: auto;
2430
- }
2431
- @media (prefers-reduced-motion: reduce) {
2432
- .components-button.block-editor-block-types-list__item {
2433
- transition-duration: 0s;
2434
- transition-delay: 0s;
2435
- }
2436
- }
2437
- .components-button.block-editor-block-types-list__item:disabled {
2438
- opacity: 0.6;
2439
- cursor: default;
2440
- }
2441
- .components-button.block-editor-block-types-list__item:not(:disabled):hover {
2442
- color: var(--wp-admin-theme-color) !important;
2443
- }
2444
- .components-button.block-editor-block-types-list__item:not(:disabled):focus {
2445
- box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
2446
- }
2447
- .components-button.block-editor-block-types-list__item:not(:disabled).is-active {
2448
- color: #fff;
2449
- background: #1e1e1e;
2450
- outline: 2px solid transparent;
2451
- outline-offset: -2px;
2452
- }
2453
-
2454
- .block-editor-block-types-list__item-icon {
2455
- padding: 12px 20px;
2456
- border-radius: 2px;
2457
- color: #1e1e1e;
2458
- transition: all 0.05s ease-in-out;
2459
- }
2460
- @media (prefers-reduced-motion: reduce) {
2461
- .block-editor-block-types-list__item-icon {
2462
- transition-duration: 0s;
2463
- transition-delay: 0s;
2464
- }
2465
- }
2466
- .block-editor-block-types-list__item-icon .block-editor-block-icon {
2467
- margin-left: auto;
2468
- margin-right: auto;
2469
- }
2470
- .block-editor-block-types-list__item-icon svg {
2471
- transition: all 0.15s ease-out;
2472
- }
2473
- @media (prefers-reduced-motion: reduce) {
2474
- .block-editor-block-types-list__item-icon svg {
2475
- transition-duration: 0s;
2476
- transition-delay: 0s;
2477
- }
2478
- }
2479
- .block-editor-block-types-list__list-item[draggable=true] .block-editor-block-types-list__item-icon {
2480
- cursor: grab;
2481
- }
2482
-
2483
- .block-editor-block-types-list__item-title {
2484
- padding: 4px 2px 8px;
2485
- font-size: 12px;
2486
- }
2487
-
2488
2540
  .block-editor-list-view-tree {
2489
2541
  width: 100%;
2490
2542
  border-collapse: collapse;
@@ -3514,18 +3566,12 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
3514
3566
  margin-bottom: 8px;
3515
3567
  }
3516
3568
 
3517
- .block-editor-hooks__border-controls .block-editor-hooks__border-controls-row {
3518
- display: flex;
3519
- justify-content: space-between;
3520
- }
3521
- .block-editor-hooks__border-controls .block-editor-hooks__border-controls-row > * {
3522
- width: calc(50% - 8px);
3523
- }
3524
- .block-editor-hooks__border-controls .components-unit-control-wrapper {
3525
- margin-bottom: 24px;
3569
+ .border-block-support-panel .single-column {
3570
+ grid-column: span 1;
3526
3571
  }
3527
- .block-editor-hooks__border-controls .components-unit-control-wrapper:last-child {
3528
- margin-bottom: 8px;
3572
+
3573
+ .dimensions-block-support-panel .single-column {
3574
+ grid-column: span 1;
3529
3575
  }
3530
3576
 
3531
3577
  .typography-block-support-panel .components-font-appearance-control,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wordpress/block-editor",
3
- "version": "8.0.11",
3
+ "version": "8.0.12-next.33ec3857e2.0",
4
4
  "description": "Generic block editor.",
5
5
  "author": "The WordPress Contributors",
6
6
  "license": "GPL-2.0-or-later",
@@ -33,31 +33,31 @@
33
33
  "dependencies": {
34
34
  "@babel/runtime": "^7.16.0",
35
35
  "@react-spring/web": "^9.2.4",
36
- "@wordpress/a11y": "^3.2.4",
37
- "@wordpress/api-fetch": "^5.2.6",
38
- "@wordpress/blob": "^3.2.2",
39
- "@wordpress/block-serialization-default-parser": "^4.2.3",
40
- "@wordpress/blocks": "^11.1.4",
41
- "@wordpress/components": "^19.1.5",
42
- "@wordpress/compose": "^5.0.6",
43
- "@wordpress/data": "^6.1.4",
44
- "@wordpress/deprecated": "^3.2.3",
45
- "@wordpress/dom": "^3.2.7",
46
- "@wordpress/element": "^4.0.4",
47
- "@wordpress/hooks": "^3.2.2",
48
- "@wordpress/html-entities": "^3.2.3",
49
- "@wordpress/i18n": "^4.2.4",
50
- "@wordpress/icons": "^6.1.1",
51
- "@wordpress/is-shallow-equal": "^4.2.1",
52
- "@wordpress/keyboard-shortcuts": "^3.0.6",
53
- "@wordpress/keycodes": "^3.2.4",
54
- "@wordpress/notices": "^3.2.7",
55
- "@wordpress/rich-text": "^5.0.6",
56
- "@wordpress/shortcode": "^3.2.3",
57
- "@wordpress/token-list": "^2.2.2",
58
- "@wordpress/url": "^3.3.1",
59
- "@wordpress/warning": "^2.2.2",
60
- "@wordpress/wordcount": "^3.2.3",
36
+ "@wordpress/a11y": "^3.2.5-next.33ec3857e2.0",
37
+ "@wordpress/api-fetch": "^5.2.7-next.33ec3857e2.0",
38
+ "@wordpress/blob": "^3.2.3-next.33ec3857e2.0",
39
+ "@wordpress/block-serialization-default-parser": "^4.2.4-next.33ec3857e2.0",
40
+ "@wordpress/blocks": "^11.1.5-next.33ec3857e2.0",
41
+ "@wordpress/components": "^19.2.1-next.33ec3857e2.0",
42
+ "@wordpress/compose": "^5.0.7-next.33ec3857e2.0",
43
+ "@wordpress/data": "^6.1.6-next.33ec3857e2.0",
44
+ "@wordpress/deprecated": "^3.2.4-next.33ec3857e2.0",
45
+ "@wordpress/dom": "^3.2.8-next.33ec3857e2.0",
46
+ "@wordpress/element": "^4.0.6-next.33ec3857e2.0",
47
+ "@wordpress/hooks": "^3.2.3-next.33ec3857e2.0",
48
+ "@wordpress/html-entities": "^3.2.4-next.33ec3857e2.0",
49
+ "@wordpress/i18n": "^4.2.5-next.33ec3857e2.0",
50
+ "@wordpress/icons": "^6.1.2-next.33ec3857e2.0",
51
+ "@wordpress/is-shallow-equal": "^4.2.2-next.33ec3857e2.0",
52
+ "@wordpress/keyboard-shortcuts": "^3.0.7-next.33ec3857e2.0",
53
+ "@wordpress/keycodes": "^3.2.5-next.33ec3857e2.0",
54
+ "@wordpress/notices": "^3.2.8-next.33ec3857e2.0",
55
+ "@wordpress/rich-text": "^5.0.7-next.33ec3857e2.0",
56
+ "@wordpress/shortcode": "^3.2.4-next.33ec3857e2.0",
57
+ "@wordpress/token-list": "^2.2.3-next.33ec3857e2.0",
58
+ "@wordpress/url": "^3.3.2-next.33ec3857e2.0",
59
+ "@wordpress/warning": "^2.2.3-next.33ec3857e2.0",
60
+ "@wordpress/wordcount": "^3.2.4-next.33ec3857e2.0",
61
61
  "classnames": "^2.3.1",
62
62
  "colord": "^2.7.0",
63
63
  "css-mediaquery": "^0.1.2",
@@ -75,5 +75,5 @@
75
75
  "publishConfig": {
76
76
  "access": "public"
77
77
  },
78
- "gitHead": "3665e3e1b121046300d8b2fa35074d748f16dbc2"
78
+ "gitHead": "51c7917ea7fac72953702f24d6daac87d99e7617"
79
79
  }
@@ -9,6 +9,7 @@ import { View } from 'react-native';
9
9
  import { Caption, RichText } from '@wordpress/block-editor';
10
10
  import { compose } from '@wordpress/compose';
11
11
  import { withDispatch, withSelect } from '@wordpress/data';
12
+ import { hasBlockSupport } from '@wordpress/blocks';
12
13
 
13
14
  /**
14
15
  * Internal dependencies
@@ -44,16 +45,33 @@ const BlockCaption = ( {
44
45
 
45
46
  export default compose( [
46
47
  withSelect( ( select, { clientId } ) => {
47
- const { getBlockAttributes, getSelectedBlockClientId } = select(
48
- blockEditorStore
49
- );
48
+ const {
49
+ getBlockAttributes,
50
+ getSelectedBlockClientId,
51
+ getBlockName,
52
+ getBlockRootClientId,
53
+ } = select( blockEditorStore );
50
54
  const { caption } = getBlockAttributes( clientId ) || {};
51
55
  const isBlockSelected = getSelectedBlockClientId() === clientId;
52
56
 
57
+ // Detect whether the block is an inner block by checking if it has a parent block.
58
+ // getBlockRootClientId() will return an empty string for all top-level blocks.
59
+ // If the block is an inner block, its parent may explicitly hide child block controls.
60
+ // See: https://github.com/wordpress-mobile/gutenberg-mobile/pull/4256
61
+ const parentId = getBlockRootClientId( clientId );
62
+ const parentBlockName = getBlockName( parentId );
63
+
64
+ const hideCaption = hasBlockSupport(
65
+ parentBlockName,
66
+ '__experimentalHideChildBlockControls',
67
+ false
68
+ );
69
+
53
70
  // We'll render the caption so that the soft keyboard is not forced to close on Android
54
71
  // but still hide it by setting its display style to none. See wordpress-mobile/gutenberg-mobile#1221
55
72
  const shouldDisplay =
56
- ! RichText.isEmpty( caption ) > 0 || isBlockSelected;
73
+ ! hideCaption &&
74
+ ( ! RichText.isEmpty( caption ) > 0 || isBlockSelected );
57
75
 
58
76
  return {
59
77
  shouldDisplay,
@@ -30,10 +30,7 @@ import BlockVariationTransforms from '../block-variation-transforms';
30
30
  import useBlockDisplayInformation from '../use-block-display-information';
31
31
  import { store as blockEditorStore } from '../../store';
32
32
 
33
- const BlockInspector = ( {
34
- showNoBlockSelectedMessage = true,
35
- bubblesVirtually = true,
36
- } ) => {
33
+ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
37
34
  const {
38
35
  count,
39
36
  hasBlockStyles,
@@ -69,7 +66,7 @@ const BlockInspector = ( {
69
66
  return (
70
67
  <div className="block-editor-block-inspector">
71
68
  <MultiSelectionInspector />
72
- <InspectorControls.Slot bubblesVirtually={ bubblesVirtually } />
69
+ <InspectorControls.Slot />
73
70
  </div>
74
71
  );
75
72
  }
@@ -100,7 +97,6 @@ const BlockInspector = ( {
100
97
  clientId={ selectedBlockClientId }
101
98
  blockName={ blockType.name }
102
99
  hasBlockStyles={ hasBlockStyles }
103
- bubblesVirtually={ bubblesVirtually }
104
100
  />
105
101
  );
106
102
  };
@@ -109,7 +105,6 @@ const BlockInspectorSingleBlock = ( {
109
105
  clientId,
110
106
  blockName,
111
107
  hasBlockStyles,
112
- bubblesVirtually,
113
108
  } ) => {
114
109
  const blockInformation = useBlockDisplayInformation( clientId );
115
110
  return (
@@ -119,7 +114,10 @@ const BlockInspectorSingleBlock = ( {
119
114
  { hasBlockStyles && (
120
115
  <div>
121
116
  <PanelBody title={ __( 'Styles' ) }>
122
- <BlockStyles clientId={ clientId } />
117
+ <BlockStyles
118
+ scope="core/block-inspector"
119
+ clientId={ clientId }
120
+ />
123
121
  { hasBlockSupport(
124
122
  blockName,
125
123
  'defaultStylePicker',
@@ -128,26 +126,28 @@ const BlockInspectorSingleBlock = ( {
128
126
  </PanelBody>
129
127
  </div>
130
128
  ) }
131
- <InspectorControls.Slot bubblesVirtually={ bubblesVirtually } />
129
+ <InspectorControls.Slot />
132
130
  <InspectorControls.Slot
133
131
  __experimentalGroup="typography"
134
- bubblesVirtually={ bubblesVirtually }
135
132
  label={ __( 'Typography' ) }
136
133
  />
134
+ <InspectorControls.Slot
135
+ __experimentalGroup="border"
136
+ label={ __( 'Border' ) }
137
+ />
137
138
  <InspectorControls.Slot
138
139
  __experimentalGroup="dimensions"
139
- bubblesVirtually={ bubblesVirtually }
140
140
  label={ __( 'Dimensions' ) }
141
141
  />
142
142
  <div>
143
- <AdvancedControls bubblesVirtually={ bubblesVirtually } />
143
+ <AdvancedControls />
144
144
  </div>
145
145
  <SkipToSelectedBlock key="back" />
146
146
  </div>
147
147
  );
148
148
  };
149
149
 
150
- const AdvancedControls = ( { bubblesVirtually } ) => {
150
+ const AdvancedControls = () => {
151
151
  const slot = useSlot( InspectorAdvancedControls.slotName );
152
152
  const hasFills = Boolean( slot.fills && slot.fills.length );
153
153
 
@@ -161,10 +161,7 @@ const AdvancedControls = ( { bubblesVirtually } ) => {
161
161
  title={ __( 'Advanced' ) }
162
162
  initialOpen={ false }
163
163
  >
164
- <InspectorControls.Slot
165
- __experimentalGroup="advanced"
166
- bubblesVirtually={ bubblesVirtually }
167
- />
164
+ <InspectorControls.Slot __experimentalGroup="advanced" />
168
165
  </PanelBody>
169
166
  );
170
167
  };