UNPKG

@wordpress/block-library

Version:
283 lines (279 loc) 10.1 kB
"use strict"; var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); Object.defineProperty(exports, "__esModule", { value: true }); exports.default = RSSEdit; var _blockEditor = require("@wordpress/block-editor"); var _components = require("@wordpress/components"); var _element = require("@wordpress/element"); var _icons = require("@wordpress/icons"); var _i18n = require("@wordpress/i18n"); var _url = require("@wordpress/url"); var _serverSideRender = _interopRequireDefault(require("@wordpress/server-side-render")); var _hooks = require("../utils/hooks"); var _jsxRuntime = require("react/jsx-runtime"); /** * WordPress dependencies */ /** * Internal dependencies */ const DEFAULT_MIN_ITEMS = 1; const DEFAULT_MAX_ITEMS = 20; function RSSEdit({ attributes, setAttributes }) { const [isEditing, setIsEditing] = (0, _element.useState)(!attributes.feedURL); const { blockLayout, columns, displayAuthor, displayDate, displayExcerpt, excerptLength, feedURL, itemsToShow, openInNewTab, rel } = attributes; const dropdownMenuProps = (0, _hooks.useToolsPanelDropdownMenuProps)(); function toggleAttribute(propName) { return () => { const value = attributes[propName]; setAttributes({ [propName]: !value }); }; } function onSubmitURL(event) { event.preventDefault(); if (feedURL) { setAttributes({ feedURL: (0, _url.prependHTTP)(feedURL) }); setIsEditing(false); } } const blockProps = (0, _blockEditor.useBlockProps)(); const label = (0, _i18n.__)('RSS URL'); if (isEditing) { return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", { ...blockProps, children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Placeholder, { icon: _icons.rss, label: label, instructions: (0, _i18n.__)('Display entries from any RSS or Atom feed.'), children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("form", { onSubmit: onSubmitURL, className: "wp-block-rss__placeholder-form", children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalInputControl, { __next40pxDefaultSize: true, label: label, type: "url", hideLabelFromVision: true, placeholder: (0, _i18n.__)('Enter URL here…'), value: feedURL, onChange: value => setAttributes({ feedURL: value }), className: "wp-block-rss__placeholder-input" }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, { __next40pxDefaultSize: true, variant: "primary", type: "submit", children: (0, _i18n.__)('Apply') })] }) }) }); } const toolbarControls = [{ icon: _icons.edit, title: (0, _i18n.__)('Edit RSS URL'), onClick: () => setIsEditing(true) }, { icon: _icons.list, title: (0, _i18n._x)('List view', 'RSS block display setting'), onClick: () => setAttributes({ blockLayout: 'list' }), isActive: blockLayout === 'list' }, { icon: _icons.grid, title: (0, _i18n._x)('Grid view', 'RSS block display setting'), onClick: () => setAttributes({ blockLayout: 'grid' }), isActive: blockLayout === 'grid' }]; /* * This function merges the existing attributes with additional style properties. * The `border` and `spacing` properties are set to `undefined` to ensure that * these styles are reset and not applied on the server side. */ const serverSideAttributes = { ...attributes, style: { ...attributes?.style, border: undefined, spacing: undefined } }; return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, { children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.BlockControls, { children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToolbarGroup, { controls: toolbarControls }) }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.InspectorControls, { children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalToolsPanel, { label: (0, _i18n.__)('Settings'), resetAll: () => { setAttributes({ itemsToShow: 5, displayAuthor: false, displayDate: false, displayExcerpt: false, excerptLength: 55, columns: 2, openInNewTab: false }); }, dropdownMenuProps: dropdownMenuProps, children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, { label: (0, _i18n.__)('Number of items'), hasValue: () => itemsToShow !== 5, onDeselect: () => setAttributes({ itemsToShow: 5 }), isShownByDefault: true, children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.RangeControl, { __nextHasNoMarginBottom: true, __next40pxDefaultSize: true, label: (0, _i18n.__)('Number of items'), value: itemsToShow, onChange: value => setAttributes({ itemsToShow: value }), min: DEFAULT_MIN_ITEMS, max: DEFAULT_MAX_ITEMS, required: true }) }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, { label: (0, _i18n.__)('Display author'), hasValue: () => !!displayAuthor, onDeselect: () => setAttributes({ displayAuthor: false }), isShownByDefault: true, children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToggleControl, { __nextHasNoMarginBottom: true, label: (0, _i18n.__)('Display author'), checked: displayAuthor, onChange: toggleAttribute('displayAuthor') }) }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, { label: (0, _i18n.__)('Display date'), hasValue: () => !!displayDate, onDeselect: () => setAttributes({ displayDate: false }), isShownByDefault: true, children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToggleControl, { __nextHasNoMarginBottom: true, label: (0, _i18n.__)('Display date'), checked: displayDate, onChange: toggleAttribute('displayDate') }) }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, { label: (0, _i18n.__)('Display excerpt'), hasValue: () => !!displayExcerpt, onDeselect: () => setAttributes({ displayExcerpt: false }), isShownByDefault: true, children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToggleControl, { __nextHasNoMarginBottom: true, label: (0, _i18n.__)('Display excerpt'), checked: displayExcerpt, onChange: toggleAttribute('displayExcerpt') }) }), displayExcerpt && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, { label: (0, _i18n.__)('Max number of words in excerpt'), hasValue: () => excerptLength !== 55, onDeselect: () => setAttributes({ excerptLength: 55 }), isShownByDefault: true, children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.RangeControl, { __nextHasNoMarginBottom: true, __next40pxDefaultSize: true, label: (0, _i18n.__)('Max number of words in excerpt'), value: excerptLength, onChange: value => setAttributes({ excerptLength: value }), min: 10, max: 100, required: true }) }), blockLayout === 'grid' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, { label: (0, _i18n.__)('Columns'), hasValue: () => columns !== 2, onDeselect: () => setAttributes({ columns: 2 }), isShownByDefault: true, children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.RangeControl, { __nextHasNoMarginBottom: true, __next40pxDefaultSize: true, label: (0, _i18n.__)('Columns'), value: columns, onChange: value => setAttributes({ columns: value }), min: 2, max: 6, required: true }) }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, { label: (0, _i18n.__)('Open links in new tab'), hasValue: () => !!openInNewTab, onDeselect: () => setAttributes({ openInNewTab: false }), isShownByDefault: true, children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToggleControl, { __nextHasNoMarginBottom: true, label: (0, _i18n.__)('Open links in new tab'), checked: openInNewTab, onChange: value => setAttributes({ openInNewTab: value }) }) })] }) }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.InspectorControls, { group: "advanced", children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.TextControl, { __next40pxDefaultSize: true, __nextHasNoMarginBottom: true, label: (0, _i18n.__)('Link rel'), value: rel || '', onChange: value => setAttributes({ rel: value }) }) }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", { ...blockProps, children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Disabled, { children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_serverSideRender.default, { block: "core/rss", attributes: serverSideAttributes }) }) })] }); } //# sourceMappingURL=edit.js.map