@wordpress/block-editor 15.8.1-next.16d95556a.0 → 15.8.1-next.dc3f6d3c1.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 (169) hide show
  1. package/build/components/block-inspector/edit-contents.js +19 -23
  2. package/build/components/block-inspector/edit-contents.js.map +3 -3
  3. package/build/components/block-inspector/index.js +7 -1
  4. package/build/components/block-inspector/index.js.map +2 -2
  5. package/build/components/block-list/block.js +4 -0
  6. package/build/components/block-list/block.js.map +2 -2
  7. package/build/components/block-list/use-block-props/index.js +3 -1
  8. package/build/components/block-list/use-block-props/index.js.map +2 -2
  9. package/build/components/block-list/use-block-props/use-is-hovered.js +16 -10
  10. package/build/components/block-list/use-block-props/use-is-hovered.js.map +2 -2
  11. package/build/components/block-settings-menu-controls/edit-section-menu-item.js +64 -0
  12. package/build/components/block-settings-menu-controls/edit-section-menu-item.js.map +7 -0
  13. package/build/components/block-settings-menu-controls/index.js +8 -0
  14. package/build/components/block-settings-menu-controls/index.js.map +2 -2
  15. package/build/components/block-toolbar/block-toolbar-icon.js +9 -9
  16. package/build/components/block-toolbar/block-toolbar-icon.js.map +2 -2
  17. package/build/components/block-variation-transforms/index.js +32 -5
  18. package/build/components/block-variation-transforms/index.js.map +2 -2
  19. package/build/components/border-radius-control/single-input-control.js +1 -0
  20. package/build/components/border-radius-control/single-input-control.js.map +2 -2
  21. package/build/components/content-only-controls/index.js +263 -0
  22. package/build/components/content-only-controls/index.js.map +7 -0
  23. package/build/components/content-only-controls/link/index.js +204 -0
  24. package/build/components/content-only-controls/link/index.js.map +7 -0
  25. package/build/components/content-only-controls/media/index.js +264 -0
  26. package/build/components/content-only-controls/media/index.js.map +7 -0
  27. package/build/components/content-only-controls/plain-text/index.js +68 -0
  28. package/build/components/content-only-controls/plain-text/index.js.map +7 -0
  29. package/build/components/content-only-controls/rich-text/index.js +197 -0
  30. package/build/components/content-only-controls/rich-text/index.js.map +7 -0
  31. package/build/components/content-only-controls/use-inspector-popover-placement.js +41 -0
  32. package/build/components/content-only-controls/use-inspector-popover-placement.js.map +7 -0
  33. package/build/components/inserter/media-tab/media-tab.js +1 -33
  34. package/build/components/inserter/media-tab/media-tab.js.map +3 -3
  35. package/build/components/inspector-controls-tabs/content-tab.js +6 -2
  36. package/build/components/inspector-controls-tabs/content-tab.js.map +3 -3
  37. package/build/components/inspector-controls-tabs/index.js +7 -1
  38. package/build/components/inspector-controls-tabs/index.js.map +2 -2
  39. package/build/components/list-view/block-select-button.js +11 -4
  40. package/build/components/list-view/block-select-button.js.map +2 -2
  41. package/build/components/media-placeholder/index.js +1 -31
  42. package/build/components/media-placeholder/index.js.map +3 -3
  43. package/build/components/media-replace-flow/index.js +4 -30
  44. package/build/components/media-replace-flow/index.js.map +3 -3
  45. package/build/components/use-block-display-information/index.js +21 -1
  46. package/build/components/use-block-display-information/index.js.map +3 -3
  47. package/build/hooks/block-bindings.js +52 -61
  48. package/build/hooks/block-bindings.js.map +3 -3
  49. package/build/hooks/use-content-only-section-edit.js +67 -0
  50. package/build/hooks/use-content-only-section-edit.js.map +7 -0
  51. package/build/layouts/constrained.js +2 -2
  52. package/build/layouts/constrained.js.map +2 -2
  53. package/build/private-apis.js +2 -3
  54. package/build/private-apis.js.map +3 -3
  55. package/build/store/private-keys.js +3 -0
  56. package/build/store/private-keys.js.map +2 -2
  57. package/build/store/private-selectors.js +1 -2
  58. package/build/store/private-selectors.js.map +2 -2
  59. package/build/store/reducer.js +1 -2
  60. package/build/store/reducer.js.map +2 -2
  61. package/build/utils/fit-text-utils.js +9 -1
  62. package/build/utils/fit-text-utils.js.map +2 -2
  63. package/build-module/components/block-inspector/edit-contents.js +9 -23
  64. package/build-module/components/block-inspector/edit-contents.js.map +2 -2
  65. package/build-module/components/block-inspector/index.js +7 -1
  66. package/build-module/components/block-inspector/index.js.map +2 -2
  67. package/build-module/components/block-list/block.js +4 -0
  68. package/build-module/components/block-list/block.js.map +2 -2
  69. package/build-module/components/block-list/use-block-props/index.js +3 -1
  70. package/build-module/components/block-list/use-block-props/index.js.map +2 -2
  71. package/build-module/components/block-list/use-block-props/use-is-hovered.js +16 -10
  72. package/build-module/components/block-list/use-block-props/use-is-hovered.js.map +2 -2
  73. package/build-module/components/block-settings-menu-controls/edit-section-menu-item.js +29 -0
  74. package/build-module/components/block-settings-menu-controls/edit-section-menu-item.js.map +7 -0
  75. package/build-module/components/block-settings-menu-controls/index.js +8 -0
  76. package/build-module/components/block-settings-menu-controls/index.js.map +2 -2
  77. package/build-module/components/block-toolbar/block-toolbar-icon.js +10 -10
  78. package/build-module/components/block-toolbar/block-toolbar-icon.js.map +2 -2
  79. package/build-module/components/block-variation-transforms/index.js +32 -5
  80. package/build-module/components/block-variation-transforms/index.js.map +2 -2
  81. package/build-module/components/border-radius-control/single-input-control.js +1 -0
  82. package/build-module/components/border-radius-control/single-input-control.js.map +2 -2
  83. package/build-module/components/content-only-controls/index.js +237 -0
  84. package/build-module/components/content-only-controls/index.js.map +7 -0
  85. package/build-module/components/content-only-controls/link/index.js +172 -0
  86. package/build-module/components/content-only-controls/link/index.js.map +7 -0
  87. package/build-module/components/content-only-controls/media/index.js +243 -0
  88. package/build-module/components/content-only-controls/media/index.js.map +7 -0
  89. package/build-module/components/content-only-controls/plain-text/index.js +50 -0
  90. package/build-module/components/content-only-controls/plain-text/index.js.map +7 -0
  91. package/build-module/components/content-only-controls/rich-text/index.js +174 -0
  92. package/build-module/components/content-only-controls/rich-text/index.js.map +7 -0
  93. package/build-module/components/content-only-controls/use-inspector-popover-placement.js +16 -0
  94. package/build-module/components/content-only-controls/use-inspector-popover-placement.js.map +7 -0
  95. package/build-module/components/inserter/media-tab/media-tab.js +2 -34
  96. package/build-module/components/inserter/media-tab/media-tab.js.map +2 -2
  97. package/build-module/components/inspector-controls-tabs/content-tab.js +7 -3
  98. package/build-module/components/inspector-controls-tabs/content-tab.js.map +2 -2
  99. package/build-module/components/inspector-controls-tabs/index.js +7 -1
  100. package/build-module/components/inspector-controls-tabs/index.js.map +2 -2
  101. package/build-module/components/list-view/block-select-button.js +18 -5
  102. package/build-module/components/list-view/block-select-button.js.map +2 -2
  103. package/build-module/components/media-placeholder/index.js +1 -31
  104. package/build-module/components/media-placeholder/index.js.map +2 -2
  105. package/build-module/components/media-replace-flow/index.js +4 -30
  106. package/build-module/components/media-replace-flow/index.js.map +2 -2
  107. package/build-module/components/use-block-display-information/index.js +21 -1
  108. package/build-module/components/use-block-display-information/index.js.map +3 -3
  109. package/build-module/hooks/block-bindings.js +57 -62
  110. package/build-module/hooks/block-bindings.js.map +2 -2
  111. package/build-module/hooks/use-content-only-section-edit.js +46 -0
  112. package/build-module/hooks/use-content-only-section-edit.js.map +7 -0
  113. package/build-module/layouts/constrained.js +2 -2
  114. package/build-module/layouts/constrained.js.map +2 -2
  115. package/build-module/private-apis.js +3 -3
  116. package/build-module/private-apis.js.map +2 -2
  117. package/build-module/store/private-keys.js +2 -0
  118. package/build-module/store/private-keys.js.map +2 -2
  119. package/build-module/store/private-selectors.js +1 -2
  120. package/build-module/store/private-selectors.js.map +2 -2
  121. package/build-module/store/reducer.js +1 -2
  122. package/build-module/store/reducer.js.map +2 -2
  123. package/build-module/utils/fit-text-utils.js +9 -1
  124. package/build-module/utils/fit-text-utils.js.map +2 -2
  125. package/build-style/style-rtl.css +132 -0
  126. package/build-style/style.css +132 -0
  127. package/package.json +37 -37
  128. package/src/components/block-inspector/edit-contents.js +10 -29
  129. package/src/components/block-inspector/index.js +4 -2
  130. package/src/components/block-list/block.js +6 -0
  131. package/src/components/block-list/use-block-props/index.js +3 -1
  132. package/src/components/block-list/use-block-props/use-is-hovered.js +24 -12
  133. package/src/components/block-settings-menu-controls/edit-section-menu-item.js +39 -0
  134. package/src/components/block-settings-menu-controls/index.js +7 -0
  135. package/src/components/block-toolbar/block-toolbar-icon.js +14 -10
  136. package/src/components/block-variation-transforms/index.js +96 -35
  137. package/src/components/border-radius-control/single-input-control.js +1 -0
  138. package/src/components/content-only-controls/index.js +296 -0
  139. package/src/components/content-only-controls/link/index.js +195 -0
  140. package/src/components/content-only-controls/link/styles.scss +23 -0
  141. package/src/components/content-only-controls/media/index.js +285 -0
  142. package/src/components/content-only-controls/media/styles.scss +47 -0
  143. package/src/components/content-only-controls/plain-text/index.js +49 -0
  144. package/src/components/content-only-controls/rich-text/index.js +193 -0
  145. package/src/components/content-only-controls/rich-text/styles.scss +24 -0
  146. package/src/components/content-only-controls/styles.scss +35 -0
  147. package/src/components/content-only-controls/use-inspector-popover-placement.js +19 -0
  148. package/src/components/inserter/media-tab/media-tab.js +2 -44
  149. package/src/components/inspector-controls-tabs/content-tab.js +12 -4
  150. package/src/components/inspector-controls-tabs/index.js +4 -1
  151. package/src/components/list-view/block-select-button.js +37 -24
  152. package/src/components/media-placeholder/index.js +1 -41
  153. package/src/components/media-replace-flow/index.js +3 -39
  154. package/src/components/use-block-display-information/index.js +30 -2
  155. package/src/hooks/block-bindings.js +71 -82
  156. package/src/hooks/use-content-only-section-edit.js +63 -0
  157. package/src/layouts/constrained.js +8 -2
  158. package/src/private-apis.js +2 -2
  159. package/src/store/private-keys.js +1 -0
  160. package/src/store/private-selectors.js +1 -2
  161. package/src/store/reducer.js +0 -3
  162. package/src/store/test/reducer.js +7 -17
  163. package/src/style.scss +1 -0
  164. package/src/utils/fit-text-utils.js +19 -1
  165. package/build/components/media-upload-modal/index.js +0 -29
  166. package/build/components/media-upload-modal/index.js.map +0 -7
  167. package/build-module/components/media-upload-modal/index.js +0 -8
  168. package/build-module/components/media-upload-modal/index.js.map +0 -7
  169. package/src/components/media-upload-modal/index.js +0 -18
@@ -0,0 +1,237 @@
1
+ // packages/block-editor/src/components/content-only-controls/index.js
2
+ import { store as blocksStore } from "@wordpress/blocks";
3
+ import {
4
+ __experimentalToolsPanel as ToolsPanel,
5
+ __experimentalHStack as HStack,
6
+ Icon,
7
+ Navigator
8
+ } from "@wordpress/components";
9
+ import { useDispatch, useSelect } from "@wordpress/data";
10
+ import { __ } from "@wordpress/i18n";
11
+ import { arrowLeft, arrowRight } from "@wordpress/icons";
12
+ import { unlock } from "../../lock-unlock";
13
+ import { store as blockEditorStore } from "../../store";
14
+ import BlockIcon from "../block-icon";
15
+ import useBlockDisplayTitle from "../block-title/use-block-display-title";
16
+ import useBlockDisplayInformation from "../use-block-display-information";
17
+ import { useInspectorPopoverPlacement } from "./use-inspector-popover-placement";
18
+ import PlainText from "./plain-text";
19
+ import RichText from "./rich-text";
20
+ import Media from "./media";
21
+ import Link from "./link";
22
+ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
23
+ var controls = {
24
+ PlainText,
25
+ RichText,
26
+ Media,
27
+ Link
28
+ };
29
+ function BlockAttributeToolsPanelItem({
30
+ clientId,
31
+ control,
32
+ blockType,
33
+ attributeValues
34
+ }) {
35
+ const { updateBlockAttributes } = useDispatch(blockEditorStore);
36
+ const ControlComponent = controls[control.type];
37
+ if (!ControlComponent) {
38
+ return null;
39
+ }
40
+ return /* @__PURE__ */ jsx(
41
+ ControlComponent,
42
+ {
43
+ clientId,
44
+ control,
45
+ blockType,
46
+ attributeValues,
47
+ updateAttributes: (attributes) => updateBlockAttributes(clientId, attributes)
48
+ }
49
+ );
50
+ }
51
+ function BlockFields({ clientId }) {
52
+ const { attributes, blockType } = useSelect(
53
+ (select) => {
54
+ const { getBlockAttributes, getBlockName } = select(blockEditorStore);
55
+ const { getBlockType } = select(blocksStore);
56
+ const blockName = getBlockName(clientId);
57
+ return {
58
+ attributes: getBlockAttributes(clientId),
59
+ blockType: getBlockType(blockName)
60
+ };
61
+ },
62
+ [clientId]
63
+ );
64
+ const blockTitle = useBlockDisplayTitle({
65
+ clientId,
66
+ context: "list-view"
67
+ });
68
+ const blockInformation = useBlockDisplayInformation(clientId);
69
+ const popoverPlacementProps = useInspectorPopoverPlacement();
70
+ if (!blockType?.fields?.length) {
71
+ return null;
72
+ }
73
+ return /* @__PURE__ */ jsx(
74
+ ToolsPanel,
75
+ {
76
+ label: /* @__PURE__ */ jsxs(HStack, { spacing: 1, children: [
77
+ /* @__PURE__ */ jsx(BlockIcon, { icon: blockInformation?.icon }),
78
+ /* @__PURE__ */ jsx("div", { children: blockTitle })
79
+ ] }),
80
+ panelId: clientId,
81
+ dropdownMenuProps: popoverPlacementProps,
82
+ children: blockType?.fields?.map((field, index) => /* @__PURE__ */ jsx(
83
+ BlockAttributeToolsPanelItem,
84
+ {
85
+ clientId,
86
+ control: field,
87
+ blockType,
88
+ attributeValues: attributes
89
+ },
90
+ `${clientId}/${index}`
91
+ ))
92
+ }
93
+ );
94
+ }
95
+ function DrillDownButton({ clientId }) {
96
+ const blockTitle = useBlockDisplayTitle({
97
+ clientId,
98
+ context: "list-view"
99
+ });
100
+ const blockInformation = useBlockDisplayInformation(clientId);
101
+ return /* @__PURE__ */ jsx("div", { className: "block-editor-content-only-controls__button-panel", children: /* @__PURE__ */ jsx(
102
+ Navigator.Button,
103
+ {
104
+ path: `/${clientId}`,
105
+ className: "block-editor-content-only-controls__drill-down-button",
106
+ children: /* @__PURE__ */ jsxs(HStack, { expanded: true, justify: "space-between", children: [
107
+ /* @__PURE__ */ jsxs(HStack, { justify: "flex-start", spacing: 1, children: [
108
+ /* @__PURE__ */ jsx(BlockIcon, { icon: blockInformation?.icon }),
109
+ /* @__PURE__ */ jsx("div", { children: blockTitle })
110
+ ] }),
111
+ /* @__PURE__ */ jsx(Icon, { icon: arrowRight })
112
+ ] })
113
+ }
114
+ ) });
115
+ }
116
+ function ContentOnlyControlsScreen({
117
+ rootClientId,
118
+ contentClientIds,
119
+ parentClientIds,
120
+ isNested
121
+ }) {
122
+ const isRootContentBlock = useSelect(
123
+ (select) => {
124
+ const { getBlockName } = select(blockEditorStore);
125
+ const blockName = getBlockName(rootClientId);
126
+ const { hasContentRoleAttribute } = unlock(select(blocksStore));
127
+ return hasContentRoleAttribute(blockName);
128
+ },
129
+ [rootClientId]
130
+ );
131
+ if (!isRootContentBlock && !contentClientIds.length) {
132
+ return null;
133
+ }
134
+ return /* @__PURE__ */ jsxs(Fragment, { children: [
135
+ isNested && /* @__PURE__ */ jsx("div", { className: "block-editor-content-only-controls__button-panel", children: /* @__PURE__ */ jsx(Navigator.BackButton, { className: "block-editor-content-only-controls__back-button", children: /* @__PURE__ */ jsxs(HStack, { expanded: true, spacing: 1, justify: "flex-start", children: [
136
+ /* @__PURE__ */ jsx(Icon, { icon: arrowLeft }),
137
+ /* @__PURE__ */ jsx("div", { children: __("Back") })
138
+ ] }) }) }),
139
+ isRootContentBlock && /* @__PURE__ */ jsx(BlockFields, { clientId: rootClientId }),
140
+ contentClientIds.map((clientId) => {
141
+ if (parentClientIds?.[clientId]) {
142
+ return /* @__PURE__ */ jsx(
143
+ DrillDownButton,
144
+ {
145
+ clientId
146
+ },
147
+ clientId
148
+ );
149
+ }
150
+ return /* @__PURE__ */ jsx(BlockFields, { clientId }, clientId);
151
+ })
152
+ ] });
153
+ }
154
+ function ContentOnlyControls({ rootClientId }) {
155
+ const { updatedRootClientId, nestedContentClientIds, contentClientIds } = useSelect(
156
+ (select) => {
157
+ const { getClientIdsOfDescendants, getBlockEditingMode } = select(blockEditorStore);
158
+ const _nestedContentClientIds = {};
159
+ const _contentClientIds = [];
160
+ let allNestedClientIds = [];
161
+ const allContentClientIds = getClientIdsOfDescendants(
162
+ rootClientId
163
+ ).filter(
164
+ (clientId) => getBlockEditingMode(clientId) === "contentOnly"
165
+ );
166
+ for (const clientId of allContentClientIds) {
167
+ const childClientIds = getClientIdsOfDescendants(
168
+ clientId
169
+ ).filter(
170
+ (childClientId) => getBlockEditingMode(childClientId) === "contentOnly"
171
+ );
172
+ if (childClientIds.length > 1 && !allNestedClientIds.includes(clientId)) {
173
+ _nestedContentClientIds[clientId] = childClientIds;
174
+ allNestedClientIds = [
175
+ allNestedClientIds,
176
+ ...childClientIds
177
+ ];
178
+ }
179
+ if (!allNestedClientIds.includes(clientId)) {
180
+ _contentClientIds.push(clientId);
181
+ }
182
+ }
183
+ if (_contentClientIds.length === 1 && Object.keys(_nestedContentClientIds).length === 1) {
184
+ const onlyParentClientId = Object.keys(
185
+ _nestedContentClientIds
186
+ )[0];
187
+ return {
188
+ updatedRootClientId: onlyParentClientId,
189
+ contentClientIds: _nestedContentClientIds[onlyParentClientId],
190
+ nestedContentClientIds: {}
191
+ };
192
+ }
193
+ return {
194
+ nestedContentClientIds: _nestedContentClientIds,
195
+ contentClientIds: _contentClientIds
196
+ };
197
+ },
198
+ [rootClientId]
199
+ );
200
+ return /* @__PURE__ */ jsxs(Navigator, { initialPath: "/", children: [
201
+ /* @__PURE__ */ jsx(
202
+ Navigator.Screen,
203
+ {
204
+ path: "/",
205
+ className: "block-editor-content-only-controls__screen",
206
+ children: /* @__PURE__ */ jsx(
207
+ ContentOnlyControlsScreen,
208
+ {
209
+ rootClientId: updatedRootClientId ?? rootClientId,
210
+ contentClientIds,
211
+ parentClientIds: nestedContentClientIds
212
+ }
213
+ )
214
+ }
215
+ ),
216
+ Object.keys(nestedContentClientIds).map((clientId) => /* @__PURE__ */ jsx(
217
+ Navigator.Screen,
218
+ {
219
+ path: `/${clientId}`,
220
+ className: "block-editor-content-only-controls__screen",
221
+ children: /* @__PURE__ */ jsx(
222
+ ContentOnlyControlsScreen,
223
+ {
224
+ isNested: true,
225
+ rootClientId: clientId,
226
+ contentClientIds: nestedContentClientIds[clientId]
227
+ }
228
+ )
229
+ },
230
+ clientId
231
+ ))
232
+ ] });
233
+ }
234
+ export {
235
+ ContentOnlyControls as default
236
+ };
237
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../src/components/content-only-controls/index.js"],
4
+ "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { store as blocksStore } from '@wordpress/blocks';\nimport {\n\t__experimentalToolsPanel as ToolsPanel,\n\t__experimentalHStack as HStack,\n\tIcon,\n\tNavigator,\n} from '@wordpress/components';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { __ } from '@wordpress/i18n';\nimport { arrowLeft, arrowRight } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport { store as blockEditorStore } from '../../store';\nimport BlockIcon from '../block-icon';\nimport useBlockDisplayTitle from '../block-title/use-block-display-title';\nimport useBlockDisplayInformation from '../use-block-display-information';\nimport { useInspectorPopoverPlacement } from './use-inspector-popover-placement';\n\n// controls\nimport PlainText from './plain-text';\nimport RichText from './rich-text';\nimport Media from './media';\nimport Link from './link';\n\nconst controls = {\n\tPlainText,\n\tRichText,\n\tMedia,\n\tLink,\n};\n\nfunction BlockAttributeToolsPanelItem( {\n\tclientId,\n\tcontrol,\n\tblockType,\n\tattributeValues,\n} ) {\n\tconst { updateBlockAttributes } = useDispatch( blockEditorStore );\n\tconst ControlComponent = controls[ control.type ];\n\n\tif ( ! ControlComponent ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<ControlComponent\n\t\t\tclientId={ clientId }\n\t\t\tcontrol={ control }\n\t\t\tblockType={ blockType }\n\t\t\tattributeValues={ attributeValues }\n\t\t\tupdateAttributes={ ( attributes ) =>\n\t\t\t\tupdateBlockAttributes( clientId, attributes )\n\t\t\t}\n\t\t/>\n\t);\n}\n\nfunction BlockFields( { clientId } ) {\n\tconst { attributes, blockType } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getBlockAttributes, getBlockName } =\n\t\t\t\tselect( blockEditorStore );\n\t\t\tconst { getBlockType } = select( blocksStore );\n\t\t\tconst blockName = getBlockName( clientId );\n\t\t\treturn {\n\t\t\t\tattributes: getBlockAttributes( clientId ),\n\t\t\t\tblockType: getBlockType( blockName ),\n\t\t\t};\n\t\t},\n\t\t[ clientId ]\n\t);\n\n\tconst blockTitle = useBlockDisplayTitle( {\n\t\tclientId,\n\t\tcontext: 'list-view',\n\t} );\n\tconst blockInformation = useBlockDisplayInformation( clientId );\n\tconst popoverPlacementProps = useInspectorPopoverPlacement();\n\n\tif ( ! blockType?.fields?.length ) {\n\t\t// TODO - we might still want to show a placeholder for blocks with no fields.\n\t\t// for example, a way to select the block.\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<ToolsPanel\n\t\t\tlabel={\n\t\t\t\t<HStack spacing={ 1 }>\n\t\t\t\t\t<BlockIcon icon={ blockInformation?.icon } />\n\t\t\t\t\t<div>{ blockTitle }</div>\n\t\t\t\t</HStack>\n\t\t\t}\n\t\t\tpanelId={ clientId }\n\t\t\tdropdownMenuProps={ popoverPlacementProps }\n\t\t>\n\t\t\t{ blockType?.fields?.map( ( field, index ) => (\n\t\t\t\t<BlockAttributeToolsPanelItem\n\t\t\t\t\tkey={ `${ clientId }/${ index }` }\n\t\t\t\t\tclientId={ clientId }\n\t\t\t\t\tcontrol={ field }\n\t\t\t\t\tblockType={ blockType }\n\t\t\t\t\tattributeValues={ attributes }\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t</ToolsPanel>\n\t);\n}\n\nfunction DrillDownButton( { clientId } ) {\n\tconst blockTitle = useBlockDisplayTitle( {\n\t\tclientId,\n\t\tcontext: 'list-view',\n\t} );\n\tconst blockInformation = useBlockDisplayInformation( clientId );\n\treturn (\n\t\t<div className=\"block-editor-content-only-controls__button-panel\">\n\t\t\t<Navigator.Button\n\t\t\t\tpath={ `/${ clientId }` }\n\t\t\t\tclassName=\"block-editor-content-only-controls__drill-down-button\"\n\t\t\t>\n\t\t\t\t<HStack expanded justify=\"space-between\">\n\t\t\t\t\t<HStack justify=\"flex-start\" spacing={ 1 }>\n\t\t\t\t\t\t<BlockIcon icon={ blockInformation?.icon } />\n\t\t\t\t\t\t<div>{ blockTitle }</div>\n\t\t\t\t\t</HStack>\n\t\t\t\t\t<Icon icon={ arrowRight } />\n\t\t\t\t</HStack>\n\t\t\t</Navigator.Button>\n\t\t</div>\n\t);\n}\n\nfunction ContentOnlyControlsScreen( {\n\trootClientId,\n\tcontentClientIds,\n\tparentClientIds,\n\tisNested,\n} ) {\n\tconst isRootContentBlock = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getBlockName } = select( blockEditorStore );\n\t\t\tconst blockName = getBlockName( rootClientId );\n\t\t\tconst { hasContentRoleAttribute } = unlock( select( blocksStore ) );\n\t\t\treturn hasContentRoleAttribute( blockName );\n\t\t},\n\t\t[ rootClientId ]\n\t);\n\n\tif ( ! isRootContentBlock && ! contentClientIds.length ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t{ isNested && (\n\t\t\t\t<div className=\"block-editor-content-only-controls__button-panel\">\n\t\t\t\t\t<Navigator.BackButton className=\"block-editor-content-only-controls__back-button\">\n\t\t\t\t\t\t<HStack expanded spacing={ 1 } justify=\"flex-start\">\n\t\t\t\t\t\t\t<Icon icon={ arrowLeft } />\n\t\t\t\t\t\t\t<div>{ __( 'Back' ) }</div>\n\t\t\t\t\t\t</HStack>\n\t\t\t\t\t</Navigator.BackButton>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t{ isRootContentBlock && <BlockFields clientId={ rootClientId } /> }\n\t\t\t{ contentClientIds.map( ( clientId ) => {\n\t\t\t\tif ( parentClientIds?.[ clientId ] ) {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<DrillDownButton\n\t\t\t\t\t\t\tkey={ clientId }\n\t\t\t\t\t\t\tclientId={ clientId }\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\treturn <BlockFields key={ clientId } clientId={ clientId } />;\n\t\t\t} ) }\n\t\t</>\n\t);\n}\n\nexport default function ContentOnlyControls( { rootClientId } ) {\n\tconst { updatedRootClientId, nestedContentClientIds, contentClientIds } =\n\t\tuseSelect(\n\t\t\t( select ) => {\n\t\t\t\tconst { getClientIdsOfDescendants, getBlockEditingMode } =\n\t\t\t\t\tselect( blockEditorStore );\n\n\t\t\t\t// _nestedContentClientIds is for content blocks within 'drilldowns'.\n\t\t\t\t// It's an object where the key is the parent clientId, and the element is\n\t\t\t\t// an array of child clientIds whose controls are shown within the drilldown.\n\t\t\t\tconst _nestedContentClientIds = {};\n\n\t\t\t\t// _contentClientIds is the list of contentClientIds for blocks being\n\t\t\t\t// shown at the root level. Includes parent blocks that might have a drilldown,\n\t\t\t\t// but not the children of those blocks.\n\t\t\t\tconst _contentClientIds = [];\n\n\t\t\t\t// An array of all nested client ids. Used for ensuring blocks within drilldowns\n\t\t\t\t// don't appear at the root level.\n\t\t\t\tlet allNestedClientIds = [];\n\n\t\t\t\t// A flattened list of all content clientIds to arrange into the\n\t\t\t\t// groups above.\n\t\t\t\tconst allContentClientIds = getClientIdsOfDescendants(\n\t\t\t\t\trootClientId\n\t\t\t\t).filter(\n\t\t\t\t\t( clientId ) =>\n\t\t\t\t\t\tgetBlockEditingMode( clientId ) === 'contentOnly'\n\t\t\t\t);\n\n\t\t\t\tfor ( const clientId of allContentClientIds ) {\n\t\t\t\t\tconst childClientIds = getClientIdsOfDescendants(\n\t\t\t\t\t\tclientId\n\t\t\t\t\t).filter(\n\t\t\t\t\t\t( childClientId ) =>\n\t\t\t\t\t\t\tgetBlockEditingMode( childClientId ) ===\n\t\t\t\t\t\t\t'contentOnly'\n\t\t\t\t\t);\n\n\t\t\t\t\t// If there's more than one child block, use a drilldown.\n\t\t\t\t\tif (\n\t\t\t\t\t\tchildClientIds.length > 1 &&\n\t\t\t\t\t\t! allNestedClientIds.includes( clientId )\n\t\t\t\t\t) {\n\t\t\t\t\t\t_nestedContentClientIds[ clientId ] = childClientIds;\n\t\t\t\t\t\tallNestedClientIds = [\n\t\t\t\t\t\t\tallNestedClientIds,\n\t\t\t\t\t\t\t...childClientIds,\n\t\t\t\t\t\t];\n\t\t\t\t\t}\n\n\t\t\t\t\tif ( ! allNestedClientIds.includes( clientId ) ) {\n\t\t\t\t\t\t_contentClientIds.push( clientId );\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t// Avoid showing only one drilldown block at the root.\n\t\t\t\tif (\n\t\t\t\t\t_contentClientIds.length === 1 &&\n\t\t\t\t\tObject.keys( _nestedContentClientIds ).length === 1\n\t\t\t\t) {\n\t\t\t\t\tconst onlyParentClientId = Object.keys(\n\t\t\t\t\t\t_nestedContentClientIds\n\t\t\t\t\t)[ 0 ];\n\t\t\t\t\treturn {\n\t\t\t\t\t\tupdatedRootClientId: onlyParentClientId,\n\t\t\t\t\t\tcontentClientIds:\n\t\t\t\t\t\t\t_nestedContentClientIds[ onlyParentClientId ],\n\t\t\t\t\t\tnestedContentClientIds: {},\n\t\t\t\t\t};\n\t\t\t\t}\n\n\t\t\t\treturn {\n\t\t\t\t\tnestedContentClientIds: _nestedContentClientIds,\n\t\t\t\t\tcontentClientIds: _contentClientIds,\n\t\t\t\t};\n\t\t\t},\n\t\t\t[ rootClientId ]\n\t\t);\n\n\treturn (\n\t\t<Navigator initialPath=\"/\">\n\t\t\t<Navigator.Screen\n\t\t\t\tpath=\"/\"\n\t\t\t\tclassName=\"block-editor-content-only-controls__screen\"\n\t\t\t>\n\t\t\t\t<ContentOnlyControlsScreen\n\t\t\t\t\trootClientId={ updatedRootClientId ?? rootClientId }\n\t\t\t\t\tcontentClientIds={ contentClientIds }\n\t\t\t\t\tparentClientIds={ nestedContentClientIds }\n\t\t\t\t/>\n\t\t\t</Navigator.Screen>\n\t\t\t{ Object.keys( nestedContentClientIds ).map( ( clientId ) => (\n\t\t\t\t<Navigator.Screen\n\t\t\t\t\tkey={ clientId }\n\t\t\t\t\tpath={ `/${ clientId }` }\n\t\t\t\t\tclassName=\"block-editor-content-only-controls__screen\"\n\t\t\t\t>\n\t\t\t\t\t<ContentOnlyControlsScreen\n\t\t\t\t\t\tisNested\n\t\t\t\t\t\trootClientId={ clientId }\n\t\t\t\t\t\tcontentClientIds={ nestedContentClientIds[ clientId ] }\n\t\t\t\t\t/>\n\t\t\t\t</Navigator.Screen>\n\t\t\t) ) }\n\t\t</Navigator>\n\t);\n}\n"],
5
+ "mappings": "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",
6
+ "names": []
7
+ }
@@ -0,0 +1,172 @@
1
+ // packages/block-editor/src/components/content-only-controls/link/index.js
2
+ import {
3
+ Button,
4
+ Icon,
5
+ __experimentalToolsPanelItem as ToolsPanelItem,
6
+ __experimentalGrid as Grid,
7
+ Popover
8
+ } from "@wordpress/components";
9
+ import { useMemo, useState } from "@wordpress/element";
10
+ import { __ } from "@wordpress/i18n";
11
+ import { link } from "@wordpress/icons";
12
+ import { prependHTTP } from "@wordpress/url";
13
+ import LinkControl from "../../link-control";
14
+ import { useInspectorPopoverPlacement } from "../use-inspector-popover-placement";
15
+ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
16
+ var NEW_TAB_REL = "noreferrer noopener";
17
+ var NEW_TAB_TARGET = "_blank";
18
+ var NOFOLLOW_REL = "nofollow";
19
+ function getUpdatedLinkAttributes({
20
+ rel = "",
21
+ url = "",
22
+ opensInNewTab,
23
+ nofollow
24
+ }) {
25
+ let newLinkTarget;
26
+ let updatedRel = rel;
27
+ if (opensInNewTab) {
28
+ newLinkTarget = NEW_TAB_TARGET;
29
+ updatedRel = updatedRel?.includes(NEW_TAB_REL) ? updatedRel : updatedRel + ` ${NEW_TAB_REL}`;
30
+ } else {
31
+ const relRegex = new RegExp(`\\b${NEW_TAB_REL}\\s*`, "g");
32
+ updatedRel = updatedRel?.replace(relRegex, "").trim();
33
+ }
34
+ if (nofollow) {
35
+ updatedRel = updatedRel?.includes(NOFOLLOW_REL) ? updatedRel : (updatedRel + ` ${NOFOLLOW_REL}`).trim();
36
+ } else {
37
+ const relRegex = new RegExp(`\\b${NOFOLLOW_REL}\\s*`, "g");
38
+ updatedRel = updatedRel?.replace(relRegex, "").trim();
39
+ }
40
+ return {
41
+ url: prependHTTP(url),
42
+ linkTarget: newLinkTarget,
43
+ rel: updatedRel || void 0
44
+ };
45
+ }
46
+ function Link({
47
+ clientId,
48
+ control,
49
+ blockType,
50
+ attributeValues,
51
+ updateAttributes
52
+ }) {
53
+ const [isLinkControlOpen, setIsLinkControlOpen] = useState(false);
54
+ const { popoverProps } = useInspectorPopoverPlacement({
55
+ isControl: true
56
+ });
57
+ const hrefKey = control.mapping.href;
58
+ const relKey = control.mapping.rel;
59
+ const targetKey = control.mapping.target;
60
+ const destinationKey = control.mapping.destination;
61
+ const href = attributeValues[hrefKey];
62
+ const rel = attributeValues[relKey];
63
+ const target = attributeValues[targetKey];
64
+ const destination = attributeValues[destinationKey];
65
+ const hrefDefaultValue = blockType.attributes[href]?.defaultValue ?? void 0;
66
+ const relDefaultValue = blockType.attributes[rel]?.defaultValue ?? void 0;
67
+ const targetDefaultValue = blockType.attributes[target]?.defaultValue ?? void 0;
68
+ const destinationDefaultValue = blockType.attributes[destination]?.defaultValue ?? void 0;
69
+ const opensInNewTab = target === NEW_TAB_TARGET;
70
+ const nofollow = rel === NOFOLLOW_REL;
71
+ const linkValue = useMemo(
72
+ () => ({ url: href, opensInNewTab, nofollow }),
73
+ [href, opensInNewTab, nofollow]
74
+ );
75
+ return /* @__PURE__ */ jsxs(
76
+ ToolsPanelItem,
77
+ {
78
+ panelId: clientId,
79
+ label: control.label,
80
+ hasValue: () => !!href,
81
+ onDeselect: () => {
82
+ updateAttributes({
83
+ [hrefKey]: hrefDefaultValue,
84
+ [relKey]: relDefaultValue,
85
+ [targetKey]: targetDefaultValue,
86
+ [destinationKey]: destinationDefaultValue
87
+ });
88
+ },
89
+ isShownByDefault: control.shownByDefault,
90
+ children: [
91
+ /* @__PURE__ */ jsx(
92
+ Button,
93
+ {
94
+ __next40pxDefaultSize: true,
95
+ className: "block-editor-content-only-controls__link",
96
+ onClick: () => {
97
+ setIsLinkControlOpen(true);
98
+ },
99
+ children: /* @__PURE__ */ jsxs(
100
+ Grid,
101
+ {
102
+ rowGap: 0,
103
+ columnGap: 8,
104
+ templateColumns: "24px 1fr",
105
+ className: "block-editor-content-only-controls__link-row",
106
+ children: [
107
+ href && /* @__PURE__ */ jsxs(Fragment, { children: [
108
+ /* @__PURE__ */ jsx(Icon, { icon: link, size: 24 }),
109
+ /* @__PURE__ */ jsx("span", { className: "block-editor-content-only-controls__link-title", children: href })
110
+ ] }),
111
+ !href && /* @__PURE__ */ jsxs(Fragment, { children: [
112
+ /* @__PURE__ */ jsx(
113
+ Icon,
114
+ {
115
+ icon: link,
116
+ size: 24,
117
+ style: { opacity: 0.3 }
118
+ }
119
+ ),
120
+ /* @__PURE__ */ jsx("span", { className: "block-editor-content-only-controls__link-title", children: __("Link") })
121
+ ] })
122
+ ]
123
+ }
124
+ )
125
+ }
126
+ ),
127
+ isLinkControlOpen && /* @__PURE__ */ jsx(
128
+ Popover,
129
+ {
130
+ onClose: () => {
131
+ setIsLinkControlOpen(false);
132
+ },
133
+ ...popoverProps ?? {},
134
+ children: /* @__PURE__ */ jsx(
135
+ LinkControl,
136
+ {
137
+ value: linkValue,
138
+ onChange: (newValues) => {
139
+ const updatedAttrs = getUpdatedLinkAttributes({
140
+ rel,
141
+ ...newValues
142
+ });
143
+ updateAttributes({
144
+ [hrefKey]: updatedAttrs.url,
145
+ [relKey]: updatedAttrs.rel,
146
+ [targetKey]: updatedAttrs.linkTarget
147
+ });
148
+ },
149
+ onRemove: () => {
150
+ updateAttributes({
151
+ [hrefKey]: hrefDefaultValue,
152
+ [relKey]: relDefaultValue,
153
+ [targetKey]: targetDefaultValue,
154
+ [destinationKey]: destinationDefaultValue
155
+ });
156
+ }
157
+ }
158
+ )
159
+ }
160
+ )
161
+ ]
162
+ }
163
+ );
164
+ }
165
+ export {
166
+ NEW_TAB_REL,
167
+ NEW_TAB_TARGET,
168
+ NOFOLLOW_REL,
169
+ Link as default,
170
+ getUpdatedLinkAttributes
171
+ };
172
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../src/components/content-only-controls/link/index.js"],
4
+ "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\tIcon,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n\t__experimentalGrid as Grid,\n\tPopover,\n} from '@wordpress/components';\nimport { useMemo, useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { link } from '@wordpress/icons';\nimport { prependHTTP } from '@wordpress/url';\n\n/**\n * Internal dependencies\n */\nimport LinkControl from '../../link-control';\nimport { useInspectorPopoverPlacement } from '../use-inspector-popover-placement';\n\nexport const NEW_TAB_REL = 'noreferrer noopener';\nexport const NEW_TAB_TARGET = '_blank';\nexport const NOFOLLOW_REL = 'nofollow';\n\n/**\n * Updates the link attributes.\n *\n * @param {Object} attributes The current block attributes.\n * @param {string} attributes.rel The current link rel attribute.\n * @param {string} attributes.url The current link url.\n * @param {boolean} attributes.opensInNewTab Whether the link should open in a new window.\n * @param {boolean} attributes.nofollow Whether the link should be marked as nofollow.\n */\nexport function getUpdatedLinkAttributes( {\n\trel = '',\n\turl = '',\n\topensInNewTab,\n\tnofollow,\n} ) {\n\tlet newLinkTarget;\n\t// Since `rel` is editable attribute, we need to check for existing values and proceed accordingly.\n\tlet updatedRel = rel;\n\n\tif ( opensInNewTab ) {\n\t\tnewLinkTarget = NEW_TAB_TARGET;\n\t\tupdatedRel = updatedRel?.includes( NEW_TAB_REL )\n\t\t\t? updatedRel\n\t\t\t: updatedRel + ` ${ NEW_TAB_REL }`;\n\t} else {\n\t\tconst relRegex = new RegExp( `\\\\b${ NEW_TAB_REL }\\\\s*`, 'g' );\n\t\tupdatedRel = updatedRel?.replace( relRegex, '' ).trim();\n\t}\n\n\tif ( nofollow ) {\n\t\tupdatedRel = updatedRel?.includes( NOFOLLOW_REL )\n\t\t\t? updatedRel\n\t\t\t: ( updatedRel + ` ${ NOFOLLOW_REL }` ).trim();\n\t} else {\n\t\tconst relRegex = new RegExp( `\\\\b${ NOFOLLOW_REL }\\\\s*`, 'g' );\n\t\tupdatedRel = updatedRel?.replace( relRegex, '' ).trim();\n\t}\n\n\treturn {\n\t\turl: prependHTTP( url ),\n\t\tlinkTarget: newLinkTarget,\n\t\trel: updatedRel || undefined,\n\t};\n}\n\nexport default function Link( {\n\tclientId,\n\tcontrol,\n\tblockType,\n\tattributeValues,\n\tupdateAttributes,\n} ) {\n\tconst [ isLinkControlOpen, setIsLinkControlOpen ] = useState( false );\n\tconst { popoverProps } = useInspectorPopoverPlacement( {\n\t\tisControl: true,\n\t} );\n\tconst hrefKey = control.mapping.href;\n\tconst relKey = control.mapping.rel;\n\tconst targetKey = control.mapping.target;\n\tconst destinationKey = control.mapping.destination;\n\n\tconst href = attributeValues[ hrefKey ];\n\tconst rel = attributeValues[ relKey ];\n\tconst target = attributeValues[ targetKey ];\n\tconst destination = attributeValues[ destinationKey ];\n\n\tconst hrefDefaultValue =\n\t\tblockType.attributes[ href ]?.defaultValue ?? undefined;\n\tconst relDefaultValue =\n\t\tblockType.attributes[ rel ]?.defaultValue ?? undefined;\n\tconst targetDefaultValue =\n\t\tblockType.attributes[ target ]?.defaultValue ?? undefined;\n\tconst destinationDefaultValue =\n\t\tblockType.attributes[ destination ]?.defaultValue ?? undefined;\n\n\tconst opensInNewTab = target === NEW_TAB_TARGET;\n\tconst nofollow = rel === NOFOLLOW_REL;\n\n\t// Memoize link value to avoid overriding the LinkControl's internal state.\n\t// This is a temporary fix. See https://github.com/WordPress/gutenberg/issues/51256.\n\tconst linkValue = useMemo(\n\t\t() => ( { url: href, opensInNewTab, nofollow } ),\n\t\t[ href, opensInNewTab, nofollow ]\n\t);\n\n\treturn (\n\t\t<ToolsPanelItem\n\t\t\tpanelId={ clientId }\n\t\t\tlabel={ control.label }\n\t\t\thasValue={ () => !! href }\n\t\t\tonDeselect={ () => {\n\t\t\t\tupdateAttributes( {\n\t\t\t\t\t[ hrefKey ]: hrefDefaultValue,\n\t\t\t\t\t[ relKey ]: relDefaultValue,\n\t\t\t\t\t[ targetKey ]: targetDefaultValue,\n\t\t\t\t\t[ destinationKey ]: destinationDefaultValue,\n\t\t\t\t} );\n\t\t\t} }\n\t\t\tisShownByDefault={ control.shownByDefault }\n\t\t>\n\t\t\t<Button\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\tclassName=\"block-editor-content-only-controls__link\"\n\t\t\t\tonClick={ () => {\n\t\t\t\t\tsetIsLinkControlOpen( true );\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<Grid\n\t\t\t\t\trowGap={ 0 }\n\t\t\t\t\tcolumnGap={ 8 }\n\t\t\t\t\ttemplateColumns=\"24px 1fr\"\n\t\t\t\t\tclassName=\"block-editor-content-only-controls__link-row\"\n\t\t\t\t>\n\t\t\t\t\t{ href && (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<Icon icon={ link } size={ 24 } />\n\t\t\t\t\t\t\t<span className=\"block-editor-content-only-controls__link-title\">\n\t\t\t\t\t\t\t\t{ href }\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! href && (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\ticon={ link }\n\t\t\t\t\t\t\t\tsize={ 24 }\n\t\t\t\t\t\t\t\tstyle={ { opacity: 0.3 } }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<span className=\"block-editor-content-only-controls__link-title\">\n\t\t\t\t\t\t\t\t{ __( 'Link' ) }\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</>\n\t\t\t\t\t) }\n\t\t\t\t</Grid>\n\t\t\t</Button>\n\t\t\t{ isLinkControlOpen && (\n\t\t\t\t<Popover\n\t\t\t\t\tonClose={ () => {\n\t\t\t\t\t\tsetIsLinkControlOpen( false );\n\t\t\t\t\t} }\n\t\t\t\t\t{ ...( popoverProps ?? {} ) }\n\t\t\t\t>\n\t\t\t\t\t<LinkControl\n\t\t\t\t\t\tvalue={ linkValue }\n\t\t\t\t\t\tonChange={ ( newValues ) => {\n\t\t\t\t\t\t\tconst updatedAttrs = getUpdatedLinkAttributes( {\n\t\t\t\t\t\t\t\trel,\n\t\t\t\t\t\t\t\t...newValues,\n\t\t\t\t\t\t\t} );\n\n\t\t\t\t\t\t\tupdateAttributes( {\n\t\t\t\t\t\t\t\t[ hrefKey ]: updatedAttrs.url,\n\t\t\t\t\t\t\t\t[ relKey ]: updatedAttrs.rel,\n\t\t\t\t\t\t\t\t[ targetKey ]: updatedAttrs.linkTarget,\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tonRemove={ () => {\n\t\t\t\t\t\t\tupdateAttributes( {\n\t\t\t\t\t\t\t\t[ hrefKey ]: hrefDefaultValue,\n\t\t\t\t\t\t\t\t[ relKey ]: relDefaultValue,\n\t\t\t\t\t\t\t\t[ targetKey ]: targetDefaultValue,\n\t\t\t\t\t\t\t\t[ destinationKey ]: destinationDefaultValue,\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t</Popover>\n\t\t\t) }\n\t\t</ToolsPanelItem>\n\t);\n}\n"],
5
+ "mappings": "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",
6
+ "names": []
7
+ }