@wordpress/block-library
Version:
Block library for the WordPress editor.
312 lines (311 loc) • 10.3 kB
JavaScript
// packages/block-library/src/rss/edit.js
import {
BlockControls,
InspectorControls,
useBlockProps
} from "@wordpress/block-editor";
import {
Button,
Placeholder,
RangeControl,
Spinner,
ToggleControl,
ToolbarGroup,
TextControl,
ExternalLink,
__experimentalInputControl as InputControl,
__experimentalToolsPanel as ToolsPanel,
__experimentalToolsPanelItem as ToolsPanelItem
} from "@wordpress/components";
import { createInterpolateElement, useState } from "@wordpress/element";
import { grid, list, pencil, rss } from "@wordpress/icons";
import { __, _x, sprintf } from "@wordpress/i18n";
import { prependHTTP } from "@wordpress/url";
import { useServerSideRender } from "@wordpress/server-side-render";
import { useDisabled } from "@wordpress/compose";
import { useToolsPanelDropdownMenuProps } from "../utils/hooks.mjs";
import HtmlRenderer from "../utils/html-renderer.mjs";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
var DEFAULT_MIN_ITEMS = 1;
var DEFAULT_MAX_ITEMS = 20;
function RSSEdit({ attributes, setAttributes, name }) {
const [isEditing, setIsEditing] = useState(!attributes.feedURL);
const {
blockLayout,
columns,
displayAuthor,
displayDate,
displayExcerpt,
excerptLength,
feedURL,
itemsToShow,
openInNewTab,
rel
} = attributes;
const dropdownMenuProps = useToolsPanelDropdownMenuProps();
function toggleAttribute(propName) {
return () => {
const value = attributes[propName];
setAttributes({ [propName]: !value });
};
}
function onSubmitURL(event) {
event.preventDefault();
if (feedURL) {
setAttributes({ feedURL: prependHTTP(feedURL) });
setIsEditing(false);
}
}
const { content, status, error } = useServerSideRender({
attributes,
skipBlockSupportAttributes: true,
block: name
});
const disabledRef = useDisabled();
const blockProps = useBlockProps({ ref: isEditing ? null : disabledRef });
const label = __("RSS URL");
if (isEditing) {
return /* @__PURE__ */ jsx("div", { ...blockProps, children: /* @__PURE__ */ jsx(
Placeholder,
{
icon: rss,
label,
instructions: __(
"Display entries from any RSS or Atom feed."
),
children: /* @__PURE__ */ jsxs(
"form",
{
onSubmit: onSubmitURL,
className: "wp-block-rss__placeholder-form",
children: [
/* @__PURE__ */ jsx(
InputControl,
{
__next40pxDefaultSize: true,
label,
type: "url",
hideLabelFromVision: true,
placeholder: __("Enter URL here\u2026"),
value: feedURL,
onChange: (value) => setAttributes({ feedURL: value }),
className: "wp-block-rss__placeholder-input"
}
),
/* @__PURE__ */ jsx(
Button,
{
__next40pxDefaultSize: true,
variant: "primary",
type: "submit",
children: __("Apply")
}
)
]
}
)
}
) });
}
const toolbarControls = [
{
icon: pencil,
title: __("Edit RSS URL"),
onClick: () => setIsEditing(true)
},
{
icon: list,
title: _x("List view", "RSS block display setting"),
onClick: () => setAttributes({ blockLayout: "list" }),
isActive: blockLayout === "list"
},
{
icon: grid,
title: _x("Grid view", "RSS block display setting"),
onClick: () => setAttributes({ blockLayout: "grid" }),
isActive: blockLayout === "grid"
}
];
return /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx(BlockControls, { children: /* @__PURE__ */ jsx(ToolbarGroup, { controls: toolbarControls }) }),
/* @__PURE__ */ jsx(InspectorControls, { children: /* @__PURE__ */ jsxs(
ToolsPanel,
{
label: __("Settings"),
resetAll: () => {
setAttributes({
itemsToShow: 5,
displayAuthor: false,
displayDate: false,
displayExcerpt: false,
excerptLength: 55,
columns: 2,
openInNewTab: false
});
},
dropdownMenuProps,
children: [
/* @__PURE__ */ jsx(
ToolsPanelItem,
{
label: __("Number of items"),
hasValue: () => itemsToShow !== 5,
onDeselect: () => setAttributes({ itemsToShow: 5 }),
isShownByDefault: true,
children: /* @__PURE__ */ jsx(
RangeControl,
{
__next40pxDefaultSize: true,
label: __("Number of items"),
value: itemsToShow,
onChange: (value) => setAttributes({ itemsToShow: value }),
min: DEFAULT_MIN_ITEMS,
max: DEFAULT_MAX_ITEMS,
required: true
}
)
}
),
/* @__PURE__ */ jsx(
ToolsPanelItem,
{
label: __("Display author"),
hasValue: () => !!displayAuthor,
onDeselect: () => setAttributes({ displayAuthor: false }),
isShownByDefault: true,
children: /* @__PURE__ */ jsx(
ToggleControl,
{
label: __("Display author"),
checked: displayAuthor,
onChange: toggleAttribute("displayAuthor")
}
)
}
),
/* @__PURE__ */ jsx(
ToolsPanelItem,
{
label: __("Display date"),
hasValue: () => !!displayDate,
onDeselect: () => setAttributes({ displayDate: false }),
isShownByDefault: true,
children: /* @__PURE__ */ jsx(
ToggleControl,
{
label: __("Display date"),
checked: displayDate,
onChange: toggleAttribute("displayDate")
}
)
}
),
/* @__PURE__ */ jsx(
ToolsPanelItem,
{
label: __("Display excerpt"),
hasValue: () => !!displayExcerpt,
onDeselect: () => setAttributes({ displayExcerpt: false }),
isShownByDefault: true,
children: /* @__PURE__ */ jsx(
ToggleControl,
{
label: __("Display excerpt"),
checked: displayExcerpt,
onChange: toggleAttribute("displayExcerpt")
}
)
}
),
displayExcerpt && /* @__PURE__ */ jsx(
ToolsPanelItem,
{
label: __("Max number of words in excerpt"),
hasValue: () => excerptLength !== 55,
onDeselect: () => setAttributes({ excerptLength: 55 }),
isShownByDefault: true,
children: /* @__PURE__ */ jsx(
RangeControl,
{
__next40pxDefaultSize: true,
label: __("Max number of words in excerpt"),
value: excerptLength,
onChange: (value) => setAttributes({ excerptLength: value }),
min: 10,
max: 100,
required: true
}
)
}
),
blockLayout === "grid" && /* @__PURE__ */ jsx(
ToolsPanelItem,
{
label: __("Columns"),
hasValue: () => columns !== 2,
onDeselect: () => setAttributes({ columns: 2 }),
isShownByDefault: true,
children: /* @__PURE__ */ jsx(
RangeControl,
{
__next40pxDefaultSize: true,
label: __("Columns"),
value: columns,
onChange: (value) => setAttributes({ columns: value }),
min: 2,
max: 6,
required: true
}
)
}
),
/* @__PURE__ */ jsx(
ToolsPanelItem,
{
label: __("Open links in new tab"),
hasValue: () => !!openInNewTab,
onDeselect: () => setAttributes({ openInNewTab: false }),
isShownByDefault: true,
children: /* @__PURE__ */ jsx(
ToggleControl,
{
label: __("Open links in new tab"),
checked: openInNewTab,
onChange: (value) => setAttributes({ openInNewTab: value })
}
)
}
)
]
}
) }),
/* @__PURE__ */ jsx(InspectorControls, { group: "advanced", children: /* @__PURE__ */ jsx(
TextControl,
{
__next40pxDefaultSize: true,
label: __("Link relation"),
help: createInterpolateElement(
__(
"The <a>Link Relation</a> attribute defines the relationship between a linked resource and the current document."
),
{
a: /* @__PURE__ */ jsx(ExternalLink, { href: "https://developer.mozilla.org/docs/Web/HTML/Attributes/rel" })
}
),
value: rel || "",
onChange: (value) => setAttributes({ rel: value })
}
) }),
status === "loading" && /* @__PURE__ */ jsx("div", { ...blockProps, children: /* @__PURE__ */ jsx(Spinner, {}) }),
status === "error" && /* @__PURE__ */ jsx("div", { ...blockProps, children: /* @__PURE__ */ jsx("p", { children: sprintf(
/* translators: %s: error message returned when rendering the block. */
__("Error: %s"),
error
) }) }),
status === "success" && /* @__PURE__ */ jsx(HtmlRenderer, { wrapperProps: blockProps, html: content })
] });
}
export {
RSSEdit as default
};
//# sourceMappingURL=edit.mjs.map