@wordpress/block-library
Version:
Block library for the WordPress editor.
207 lines (206 loc) • 7.11 kB
JavaScript
// packages/block-library/src/home-link/edit.js
import clsx from "clsx";
import {
InspectorControls,
RichText,
useBlockProps,
store as blockEditorStore
} from "@wordpress/block-editor";
import {
Button,
CheckboxControl,
TextControl,
TextareaControl,
__experimentalToolsPanel as ToolsPanel,
__experimentalToolsPanelItem as ToolsPanelItem
} from "@wordpress/components";
import { __ } from "@wordpress/i18n";
import { useSelect } from "@wordpress/data";
import { store as coreStore } from "@wordpress/core-data";
import { external } from "@wordpress/icons";
import { __unstableStripHTML as stripHTML } from "@wordpress/dom";
import { useToolsPanelDropdownMenuProps } from "../utils/hooks.mjs";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
var preventDefault = (event) => event.preventDefault();
function HomeEdit({ attributes, setAttributes, context }) {
const {
homeUrl,
onNavigateToEntityRecord,
frontPageId,
frontPageTemplateId
} = useSelect((select) => {
const { getEntityRecord, getDefaultTemplateId, canUser } = select(coreStore);
const baseUrl = getEntityRecord("root", "__unstableBase")?.home;
const canReadSettings = canUser("read", {
kind: "root",
name: "site"
});
const site = canReadSettings ? getEntityRecord("root", "site") : null;
const resolvedFrontPageId = site?.show_on_front === "page" ? site?.page_on_front : null;
const resolvedFrontPageTemplateId = !resolvedFrontPageId ? getDefaultTemplateId({ slug: "front-page" }) : null;
return {
homeUrl: baseUrl,
onNavigateToEntityRecord: select(blockEditorStore).getSettings().onNavigateToEntityRecord,
frontPageId: resolvedFrontPageId,
frontPageTemplateId: resolvedFrontPageTemplateId
};
}, []);
const { textColor, backgroundColor, style } = context;
const { label, opensInNewTab, description } = attributes;
const dropdownMenuProps = useToolsPanelDropdownMenuProps();
const blockProps = useBlockProps({
className: clsx("wp-block-navigation-item", {
"has-text-color": !!textColor || !!style?.color?.text,
[`has-${textColor}-color`]: !!textColor,
"has-background": !!backgroundColor || !!style?.color?.background,
[`has-${backgroundColor}-background-color`]: !!backgroundColor
}),
style: {
color: style?.color?.text,
backgroundColor: style?.color?.background
}
});
return /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx(InspectorControls, { group: "content", children: /* @__PURE__ */ jsxs(
ToolsPanel,
{
label: __("Settings"),
resetAll: () => {
setAttributes({
label: "",
opensInNewTab: false,
description: ""
});
},
dropdownMenuProps,
children: [
/* @__PURE__ */ jsx(
ToolsPanelItem,
{
hasValue: () => !!label,
label: __("Text"),
onDeselect: () => setAttributes({ label: "" }),
isShownByDefault: true,
children: /* @__PURE__ */ jsx(
TextControl,
{
label: __("Text"),
value: label ? stripHTML(label) : "",
onChange: (labelValue) => {
setAttributes({ label: labelValue });
},
autoComplete: "off"
}
)
}
),
/* @__PURE__ */ jsx(
ToolsPanelItem,
{
hasValue: () => !!opensInNewTab,
label: __("Open in new tab"),
onDeselect: () => setAttributes({ opensInNewTab: false }),
isShownByDefault: true,
children: /* @__PURE__ */ jsx(
CheckboxControl,
{
label: __("Open in new tab"),
checked: opensInNewTab,
onChange: (value) => setAttributes({ opensInNewTab: value })
}
)
}
),
onNavigateToEntityRecord && (frontPageId || frontPageTemplateId) && /* @__PURE__ */ jsx(
Button,
{
variant: "secondary",
onClick: () => {
if (frontPageId) {
onNavigateToEntityRecord({
postId: frontPageId,
postType: "page"
});
} else {
onNavigateToEntityRecord({
postId: frontPageTemplateId,
postType: "wp_template"
});
}
},
__next40pxDefaultSize: true,
className: "navigation-link-to__action-button",
children: __("Edit")
}
),
homeUrl && /* @__PURE__ */ jsx(
Button,
{
variant: "secondary",
href: homeUrl,
target: "_blank",
icon: external,
iconPosition: "right",
__next40pxDefaultSize: true,
className: "navigation-link-to__action-button",
children: __("View")
}
),
/* @__PURE__ */ jsx(
ToolsPanelItem,
{
hasValue: () => !!description,
label: __("Description"),
onDeselect: () => setAttributes({ description: "" }),
isShownByDefault: true,
children: /* @__PURE__ */ jsx(
TextareaControl,
{
label: __("Description"),
value: description || "",
onChange: (descriptionValue) => {
setAttributes({
description: descriptionValue
});
},
help: __(
"The description will be displayed in the menu if the current theme supports it."
)
}
)
}
)
]
}
) }),
/* @__PURE__ */ jsx("div", { ...blockProps, children: /* @__PURE__ */ jsxs(
"a",
{
className: "wp-block-home-link__content wp-block-navigation-item__content",
href: homeUrl,
onClick: preventDefault,
children: [
/* @__PURE__ */ jsx(
RichText,
{
identifier: "label",
className: "wp-block-home-link__label",
value: label ?? __("Home"),
onChange: (labelValue) => {
setAttributes({ label: labelValue });
},
"aria-label": __("Home link text"),
placeholder: __("Add label…"),
withoutInteractiveFormatting: true
}
),
description && /* @__PURE__ */ jsx("span", { className: "wp-block-navigation-item__description", children: description })
]
}
) })
] });
}
export {
HomeEdit as default
};
//# sourceMappingURL=edit.mjs.map