@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.
- package/build/components/block-inspector/edit-contents.js +19 -23
- package/build/components/block-inspector/edit-contents.js.map +3 -3
- package/build/components/block-inspector/index.js +7 -1
- package/build/components/block-inspector/index.js.map +2 -2
- package/build/components/block-list/block.js +4 -0
- package/build/components/block-list/block.js.map +2 -2
- package/build/components/block-list/use-block-props/index.js +3 -1
- package/build/components/block-list/use-block-props/index.js.map +2 -2
- package/build/components/block-list/use-block-props/use-is-hovered.js +16 -10
- package/build/components/block-list/use-block-props/use-is-hovered.js.map +2 -2
- package/build/components/block-settings-menu-controls/edit-section-menu-item.js +64 -0
- package/build/components/block-settings-menu-controls/edit-section-menu-item.js.map +7 -0
- package/build/components/block-settings-menu-controls/index.js +8 -0
- package/build/components/block-settings-menu-controls/index.js.map +2 -2
- package/build/components/block-toolbar/block-toolbar-icon.js +9 -9
- package/build/components/block-toolbar/block-toolbar-icon.js.map +2 -2
- package/build/components/block-variation-transforms/index.js +32 -5
- package/build/components/block-variation-transforms/index.js.map +2 -2
- package/build/components/border-radius-control/single-input-control.js +1 -0
- package/build/components/border-radius-control/single-input-control.js.map +2 -2
- package/build/components/content-only-controls/index.js +263 -0
- package/build/components/content-only-controls/index.js.map +7 -0
- package/build/components/content-only-controls/link/index.js +204 -0
- package/build/components/content-only-controls/link/index.js.map +7 -0
- package/build/components/content-only-controls/media/index.js +264 -0
- package/build/components/content-only-controls/media/index.js.map +7 -0
- package/build/components/content-only-controls/plain-text/index.js +68 -0
- package/build/components/content-only-controls/plain-text/index.js.map +7 -0
- package/build/components/content-only-controls/rich-text/index.js +197 -0
- package/build/components/content-only-controls/rich-text/index.js.map +7 -0
- package/build/components/content-only-controls/use-inspector-popover-placement.js +41 -0
- package/build/components/content-only-controls/use-inspector-popover-placement.js.map +7 -0
- package/build/components/inserter/media-tab/media-tab.js +1 -33
- package/build/components/inserter/media-tab/media-tab.js.map +3 -3
- package/build/components/inspector-controls-tabs/content-tab.js +6 -2
- package/build/components/inspector-controls-tabs/content-tab.js.map +3 -3
- package/build/components/inspector-controls-tabs/index.js +7 -1
- package/build/components/inspector-controls-tabs/index.js.map +2 -2
- package/build/components/list-view/block-select-button.js +11 -4
- package/build/components/list-view/block-select-button.js.map +2 -2
- package/build/components/media-placeholder/index.js +1 -31
- package/build/components/media-placeholder/index.js.map +3 -3
- package/build/components/media-replace-flow/index.js +4 -30
- package/build/components/media-replace-flow/index.js.map +3 -3
- package/build/components/use-block-display-information/index.js +21 -1
- package/build/components/use-block-display-information/index.js.map +3 -3
- package/build/hooks/block-bindings.js +52 -61
- package/build/hooks/block-bindings.js.map +3 -3
- package/build/hooks/use-content-only-section-edit.js +67 -0
- package/build/hooks/use-content-only-section-edit.js.map +7 -0
- package/build/layouts/constrained.js +2 -2
- package/build/layouts/constrained.js.map +2 -2
- package/build/private-apis.js +2 -3
- package/build/private-apis.js.map +3 -3
- package/build/store/private-keys.js +3 -0
- package/build/store/private-keys.js.map +2 -2
- package/build/store/private-selectors.js +1 -2
- package/build/store/private-selectors.js.map +2 -2
- package/build/store/reducer.js +1 -2
- package/build/store/reducer.js.map +2 -2
- package/build/utils/fit-text-utils.js +9 -1
- package/build/utils/fit-text-utils.js.map +2 -2
- package/build-module/components/block-inspector/edit-contents.js +9 -23
- package/build-module/components/block-inspector/edit-contents.js.map +2 -2
- package/build-module/components/block-inspector/index.js +7 -1
- package/build-module/components/block-inspector/index.js.map +2 -2
- package/build-module/components/block-list/block.js +4 -0
- package/build-module/components/block-list/block.js.map +2 -2
- package/build-module/components/block-list/use-block-props/index.js +3 -1
- package/build-module/components/block-list/use-block-props/index.js.map +2 -2
- package/build-module/components/block-list/use-block-props/use-is-hovered.js +16 -10
- package/build-module/components/block-list/use-block-props/use-is-hovered.js.map +2 -2
- package/build-module/components/block-settings-menu-controls/edit-section-menu-item.js +29 -0
- package/build-module/components/block-settings-menu-controls/edit-section-menu-item.js.map +7 -0
- package/build-module/components/block-settings-menu-controls/index.js +8 -0
- package/build-module/components/block-settings-menu-controls/index.js.map +2 -2
- package/build-module/components/block-toolbar/block-toolbar-icon.js +10 -10
- package/build-module/components/block-toolbar/block-toolbar-icon.js.map +2 -2
- package/build-module/components/block-variation-transforms/index.js +32 -5
- package/build-module/components/block-variation-transforms/index.js.map +2 -2
- package/build-module/components/border-radius-control/single-input-control.js +1 -0
- package/build-module/components/border-radius-control/single-input-control.js.map +2 -2
- package/build-module/components/content-only-controls/index.js +237 -0
- package/build-module/components/content-only-controls/index.js.map +7 -0
- package/build-module/components/content-only-controls/link/index.js +172 -0
- package/build-module/components/content-only-controls/link/index.js.map +7 -0
- package/build-module/components/content-only-controls/media/index.js +243 -0
- package/build-module/components/content-only-controls/media/index.js.map +7 -0
- package/build-module/components/content-only-controls/plain-text/index.js +50 -0
- package/build-module/components/content-only-controls/plain-text/index.js.map +7 -0
- package/build-module/components/content-only-controls/rich-text/index.js +174 -0
- package/build-module/components/content-only-controls/rich-text/index.js.map +7 -0
- package/build-module/components/content-only-controls/use-inspector-popover-placement.js +16 -0
- package/build-module/components/content-only-controls/use-inspector-popover-placement.js.map +7 -0
- package/build-module/components/inserter/media-tab/media-tab.js +2 -34
- package/build-module/components/inserter/media-tab/media-tab.js.map +2 -2
- package/build-module/components/inspector-controls-tabs/content-tab.js +7 -3
- package/build-module/components/inspector-controls-tabs/content-tab.js.map +2 -2
- package/build-module/components/inspector-controls-tabs/index.js +7 -1
- package/build-module/components/inspector-controls-tabs/index.js.map +2 -2
- package/build-module/components/list-view/block-select-button.js +18 -5
- package/build-module/components/list-view/block-select-button.js.map +2 -2
- package/build-module/components/media-placeholder/index.js +1 -31
- package/build-module/components/media-placeholder/index.js.map +2 -2
- package/build-module/components/media-replace-flow/index.js +4 -30
- package/build-module/components/media-replace-flow/index.js.map +2 -2
- package/build-module/components/use-block-display-information/index.js +21 -1
- package/build-module/components/use-block-display-information/index.js.map +3 -3
- package/build-module/hooks/block-bindings.js +57 -62
- package/build-module/hooks/block-bindings.js.map +2 -2
- package/build-module/hooks/use-content-only-section-edit.js +46 -0
- package/build-module/hooks/use-content-only-section-edit.js.map +7 -0
- package/build-module/layouts/constrained.js +2 -2
- package/build-module/layouts/constrained.js.map +2 -2
- package/build-module/private-apis.js +3 -3
- package/build-module/private-apis.js.map +2 -2
- package/build-module/store/private-keys.js +2 -0
- package/build-module/store/private-keys.js.map +2 -2
- package/build-module/store/private-selectors.js +1 -2
- package/build-module/store/private-selectors.js.map +2 -2
- package/build-module/store/reducer.js +1 -2
- package/build-module/store/reducer.js.map +2 -2
- package/build-module/utils/fit-text-utils.js +9 -1
- package/build-module/utils/fit-text-utils.js.map +2 -2
- package/build-style/style-rtl.css +132 -0
- package/build-style/style.css +132 -0
- package/package.json +37 -37
- package/src/components/block-inspector/edit-contents.js +10 -29
- package/src/components/block-inspector/index.js +4 -2
- package/src/components/block-list/block.js +6 -0
- package/src/components/block-list/use-block-props/index.js +3 -1
- package/src/components/block-list/use-block-props/use-is-hovered.js +24 -12
- package/src/components/block-settings-menu-controls/edit-section-menu-item.js +39 -0
- package/src/components/block-settings-menu-controls/index.js +7 -0
- package/src/components/block-toolbar/block-toolbar-icon.js +14 -10
- package/src/components/block-variation-transforms/index.js +96 -35
- package/src/components/border-radius-control/single-input-control.js +1 -0
- package/src/components/content-only-controls/index.js +296 -0
- package/src/components/content-only-controls/link/index.js +195 -0
- package/src/components/content-only-controls/link/styles.scss +23 -0
- package/src/components/content-only-controls/media/index.js +285 -0
- package/src/components/content-only-controls/media/styles.scss +47 -0
- package/src/components/content-only-controls/plain-text/index.js +49 -0
- package/src/components/content-only-controls/rich-text/index.js +193 -0
- package/src/components/content-only-controls/rich-text/styles.scss +24 -0
- package/src/components/content-only-controls/styles.scss +35 -0
- package/src/components/content-only-controls/use-inspector-popover-placement.js +19 -0
- package/src/components/inserter/media-tab/media-tab.js +2 -44
- package/src/components/inspector-controls-tabs/content-tab.js +12 -4
- package/src/components/inspector-controls-tabs/index.js +4 -1
- package/src/components/list-view/block-select-button.js +37 -24
- package/src/components/media-placeholder/index.js +1 -41
- package/src/components/media-replace-flow/index.js +3 -39
- package/src/components/use-block-display-information/index.js +30 -2
- package/src/hooks/block-bindings.js +71 -82
- package/src/hooks/use-content-only-section-edit.js +63 -0
- package/src/layouts/constrained.js +8 -2
- package/src/private-apis.js +2 -2
- package/src/store/private-keys.js +1 -0
- package/src/store/private-selectors.js +1 -2
- package/src/store/reducer.js +0 -3
- package/src/store/test/reducer.js +7 -17
- package/src/style.scss +1 -0
- package/src/utils/fit-text-utils.js +19 -1
- package/build/components/media-upload-modal/index.js +0 -29
- package/build/components/media-upload-modal/index.js.map +0 -7
- package/build-module/components/media-upload-modal/index.js +0 -8
- package/build-module/components/media-upload-modal/index.js.map +0 -7
- 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": ";AAGA;AAAA,EACC;AAAA,EACA;AAAA,EACA,gCAAgC;AAAA,EAChC,sBAAsB;AAAA,EACtB;AAAA,OACM;AACP,SAAS,SAAS,gBAAgB;AAClC,SAAS,UAAU;AACnB,SAAS,YAAY;AACrB,SAAS,mBAAmB;AAK5B,OAAO,iBAAiB;AACxB,SAAS,oCAAoC;AAwHvC,mBACC,KADD;AAtHC,IAAM,cAAc;AACpB,IAAM,iBAAiB;AACvB,IAAM,eAAe;AAWrB,SAAS,yBAA0B;AAAA,EACzC,MAAM;AAAA,EACN,MAAM;AAAA,EACN;AAAA,EACA;AACD,GAAI;AACH,MAAI;AAEJ,MAAI,aAAa;AAEjB,MAAK,eAAgB;AACpB,oBAAgB;AAChB,iBAAa,YAAY,SAAU,WAAY,IAC5C,aACA,aAAa,IAAK,WAAY;AAAA,EAClC,OAAO;AACN,UAAM,WAAW,IAAI,OAAQ,MAAO,WAAY,QAAQ,GAAI;AAC5D,iBAAa,YAAY,QAAS,UAAU,EAAG,EAAE,KAAK;AAAA,EACvD;AAEA,MAAK,UAAW;AACf,iBAAa,YAAY,SAAU,YAAa,IAC7C,cACE,aAAa,IAAK,YAAa,IAAK,KAAK;AAAA,EAC/C,OAAO;AACN,UAAM,WAAW,IAAI,OAAQ,MAAO,YAAa,QAAQ,GAAI;AAC7D,iBAAa,YAAY,QAAS,UAAU,EAAG,EAAE,KAAK;AAAA,EACvD;AAEA,SAAO;AAAA,IACN,KAAK,YAAa,GAAI;AAAA,IACtB,YAAY;AAAA,IACZ,KAAK,cAAc;AAAA,EACpB;AACD;AAEe,SAAR,KAAuB;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAI;AACH,QAAM,CAAE,mBAAmB,oBAAqB,IAAI,SAAU,KAAM;AACpE,QAAM,EAAE,aAAa,IAAI,6BAA8B;AAAA,IACtD,WAAW;AAAA,EACZ,CAAE;AACF,QAAM,UAAU,QAAQ,QAAQ;AAChC,QAAM,SAAS,QAAQ,QAAQ;AAC/B,QAAM,YAAY,QAAQ,QAAQ;AAClC,QAAM,iBAAiB,QAAQ,QAAQ;AAEvC,QAAM,OAAO,gBAAiB,OAAQ;AACtC,QAAM,MAAM,gBAAiB,MAAO;AACpC,QAAM,SAAS,gBAAiB,SAAU;AAC1C,QAAM,cAAc,gBAAiB,cAAe;AAEpD,QAAM,mBACL,UAAU,WAAY,IAAK,GAAG,gBAAgB;AAC/C,QAAM,kBACL,UAAU,WAAY,GAAI,GAAG,gBAAgB;AAC9C,QAAM,qBACL,UAAU,WAAY,MAAO,GAAG,gBAAgB;AACjD,QAAM,0BACL,UAAU,WAAY,WAAY,GAAG,gBAAgB;AAEtD,QAAM,gBAAgB,WAAW;AACjC,QAAM,WAAW,QAAQ;AAIzB,QAAM,YAAY;AAAA,IACjB,OAAQ,EAAE,KAAK,MAAM,eAAe,SAAS;AAAA,IAC7C,CAAE,MAAM,eAAe,QAAS;AAAA,EACjC;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,SAAU;AAAA,MACV,OAAQ,QAAQ;AAAA,MAChB,UAAW,MAAM,CAAC,CAAE;AAAA,MACpB,YAAa,MAAM;AAClB,yBAAkB;AAAA,UACjB,CAAE,OAAQ,GAAG;AAAA,UACb,CAAE,MAAO,GAAG;AAAA,UACZ,CAAE,SAAU,GAAG;AAAA,UACf,CAAE,cAAe,GAAG;AAAA,QACrB,CAAE;AAAA,MACH;AAAA,MACA,kBAAmB,QAAQ;AAAA,MAE3B;AAAA;AAAA,UAAC;AAAA;AAAA,YACA,uBAAqB;AAAA,YACrB,WAAU;AAAA,YACV,SAAU,MAAM;AACf,mCAAsB,IAAK;AAAA,YAC5B;AAAA,YAEA;AAAA,cAAC;AAAA;AAAA,gBACA,QAAS;AAAA,gBACT,WAAY;AAAA,gBACZ,iBAAgB;AAAA,gBAChB,WAAU;AAAA,gBAER;AAAA,0BACD,iCACC;AAAA,wCAAC,QAAK,MAAO,MAAO,MAAO,IAAK;AAAA,oBAChC,oBAAC,UAAK,WAAU,kDACb,gBACH;AAAA,qBACD;AAAA,kBAEC,CAAE,QACH,iCACC;AAAA;AAAA,sBAAC;AAAA;AAAA,wBACA,MAAO;AAAA,wBACP,MAAO;AAAA,wBACP,OAAQ,EAAE,SAAS,IAAI;AAAA;AAAA,oBACxB;AAAA,oBACA,oBAAC,UAAK,WAAU,kDACb,aAAI,MAAO,GACd;AAAA,qBACD;AAAA;AAAA;AAAA,YAEF;AAAA;AAAA,QACD;AAAA,QACE,qBACD;AAAA,UAAC;AAAA;AAAA,YACA,SAAU,MAAM;AACf,mCAAsB,KAAM;AAAA,YAC7B;AAAA,YACE,GAAK,gBAAgB,CAAC;AAAA,YAExB;AAAA,cAAC;AAAA;AAAA,gBACA,OAAQ;AAAA,gBACR,UAAW,CAAE,cAAe;AAC3B,wBAAM,eAAe,yBAA0B;AAAA,oBAC9C;AAAA,oBACA,GAAG;AAAA,kBACJ,CAAE;AAEF,mCAAkB;AAAA,oBACjB,CAAE,OAAQ,GAAG,aAAa;AAAA,oBAC1B,CAAE,MAAO,GAAG,aAAa;AAAA,oBACzB,CAAE,SAAU,GAAG,aAAa;AAAA,kBAC7B,CAAE;AAAA,gBACH;AAAA,gBACA,UAAW,MAAM;AAChB,mCAAkB;AAAA,oBACjB,CAAE,OAAQ,GAAG;AAAA,oBACb,CAAE,MAAO,GAAG;AAAA,oBACZ,CAAE,SAAU,GAAG;AAAA,oBACf,CAAE,cAAe,GAAG;AAAA,kBACrB,CAAE;AAAA,gBACH;AAAA;AAAA,YACD;AAAA;AAAA,QACD;AAAA;AAAA;AAAA,EAEF;AAEF;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|