UNPKG

@wordpress/block-library

Version:
128 lines (123 loc) 4.43 kB
"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.default = void 0; var _blockEditor = require("@wordpress/block-editor"); var _components = require("@wordpress/components"); var _i18n = require("@wordpress/i18n"); var _element = require("@wordpress/element"); var _data = require("@wordpress/data"); var _hooks = require("../utils/hooks"); var _lockUnlock = require("../lock-unlock"); var _jsxRuntime = require("react/jsx-runtime"); /** * WordPress dependencies */ /** * Internal dependencies */ const { withIgnoreIMEEvents } = (0, _lockUnlock.unlock)(_components.privateApis); const TEMPLATE = [['core/paragraph', { placeholder: (0, _i18n.__)('Type / to add a hidden block') }]]; function DetailsEdit({ attributes, setAttributes, clientId }) { const { name, showContent, summary, allowedBlocks, placeholder } = attributes; const blockProps = (0, _blockEditor.useBlockProps)(); const innerBlocksProps = (0, _blockEditor.useInnerBlocksProps)(blockProps, { template: TEMPLATE, __experimentalCaptureToolbars: true, allowedBlocks }); const [isOpen, setIsOpen] = (0, _element.useState)(showContent); const dropdownMenuProps = (0, _hooks.useToolsPanelDropdownMenuProps)(); // Check if the inner blocks are selected. const hasSelectedInnerBlock = (0, _data.useSelect)(select => select(_blockEditor.store).hasSelectedInnerBlock(clientId, true), [clientId]); const handleSummaryKeyDown = event => { if (event.key === 'Enter' && !event.shiftKey) { setIsOpen(prevIsOpen => !prevIsOpen); event.preventDefault(); } }; // Prevent spacebar from toggling <details> while typing. const handleSummaryKeyUp = event => { if (event.key === ' ') { event.preventDefault(); } }; return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, { children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.InspectorControls, { children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanel, { label: (0, _i18n.__)('Settings'), resetAll: () => { setAttributes({ showContent: false }); }, dropdownMenuProps: dropdownMenuProps, children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, { isShownByDefault: true, label: (0, _i18n.__)('Open by default'), hasValue: () => showContent, onDeselect: () => { setAttributes({ showContent: false }); }, children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToggleControl, { __nextHasNoMarginBottom: true, label: (0, _i18n.__)('Open by default'), checked: showContent, onChange: () => setAttributes({ showContent: !showContent }) }) }) }) }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.InspectorControls, { group: "advanced", children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.TextControl, { __next40pxDefaultSize: true, __nextHasNoMarginBottom: true, label: (0, _i18n.__)('Name attribute'), value: name || '', onChange: newName => setAttributes({ name: newName }), help: (0, _i18n.__)('Enables multiple Details blocks with the same name attribute to be connected, with only one open at a time.') }) }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("details", { ...innerBlocksProps, open: isOpen || hasSelectedInnerBlock, onToggle: event => setIsOpen(event.target.open), children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("summary", { onKeyDown: withIgnoreIMEEvents(handleSummaryKeyDown), onKeyUp: handleSummaryKeyUp, children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.RichText, { identifier: "summary", "aria-label": (0, _i18n.__)('Write summary. Press Enter to expand or collapse the details.'), placeholder: placeholder || (0, _i18n.__)('Write summary…'), withoutInteractiveFormatting: true, value: summary, onChange: newSummary => setAttributes({ summary: newSummary }) }) }), innerBlocksProps.children] })] }); } var _default = exports.default = DetailsEdit; //# sourceMappingURL=edit.js.map