@wordpress/block-library/build-module/details/edit.js

Block library for the WordPress editor.

/**
 * WordPress dependencies
 */
import { RichText, useBlockProps, useInnerBlocksProps, InspectorControls, store as blockEditorStore } from '@wordpress/block-editor';
import { TextControl, ToggleControl, __experimentalToolsPanel as ToolsPanel, __experimentalToolsPanelItem as ToolsPanelItem, privateApis as componentsPrivateApis } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { useState } from '@wordpress/element';
import { useSelect } from '@wordpress/data';

/**
 * Internal dependencies
 */
import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
import { unlock } from '../lock-unlock';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
const {
  withIgnoreIMEEvents
} = unlock(componentsPrivateApis);
const TEMPLATE = [['core/paragraph', {
  placeholder: __('Type / to add a hidden block')
}]];
function DetailsEdit({
  attributes,
  setAttributes,
  clientId
}) {
  const {
    name,
    showContent,
    summary,
    allowedBlocks,
    placeholder
  } = attributes;
  const blockProps = useBlockProps();
  const innerBlocksProps = useInnerBlocksProps(blockProps, {
    template: TEMPLATE,
    __experimentalCaptureToolbars: true,
    allowedBlocks
  });
  const [isOpen, setIsOpen] = useState(showContent);
  const dropdownMenuProps = useToolsPanelDropdownMenuProps();

  // Check if the inner blocks are selected.
  const hasSelectedInnerBlock = useSelect(select => select(blockEditorStore).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__*/_jsxs(_Fragment, {
    children: [/*#__PURE__*/_jsx(InspectorControls, {
      children: /*#__PURE__*/_jsx(ToolsPanel, {
        label: __('Settings'),
        resetAll: () => {
          setAttributes({
            showContent: false
          });
        },
        dropdownMenuProps: dropdownMenuProps,
        children: /*#__PURE__*/_jsx(ToolsPanelItem, {
          isShownByDefault: true,
          label: __('Open by default'),
          hasValue: () => showContent,
          onDeselect: () => {
            setAttributes({
              showContent: false
            });
          },
          children: /*#__PURE__*/_jsx(ToggleControl, {
            __nextHasNoMarginBottom: true,
            label: __('Open by default'),
            checked: showContent,
            onChange: () => setAttributes({
              showContent: !showContent
            })
          })
        })
      })
    }), /*#__PURE__*/_jsx(InspectorControls, {
      group: "advanced",
      children: /*#__PURE__*/_jsx(TextControl, {
        __next40pxDefaultSize: true,
        __nextHasNoMarginBottom: true,
        label: __('Name attribute'),
        value: name || '',
        onChange: newName => setAttributes({
          name: newName
        }),
        help: __('Enables multiple Details blocks with the same name attribute to be connected, with only one open at a time.')
      })
    }), /*#__PURE__*/_jsxs("details", {
      ...innerBlocksProps,
      open: isOpen || hasSelectedInnerBlock,
      onToggle: event => setIsOpen(event.target.open),
      children: [/*#__PURE__*/_jsx("summary", {
        onKeyDown: withIgnoreIMEEvents(handleSummaryKeyDown),
        onKeyUp: handleSummaryKeyUp,
        children: /*#__PURE__*/_jsx(RichText, {
          identifier: "summary",
          "aria-label": __('Write summary. Press Enter to expand or collapse the details.'),
          placeholder: placeholder || __('Write summary…'),
          withoutInteractiveFormatting: true,
          value: summary,
          onChange: newSummary => setAttributes({
            summary: newSummary
          })
        })
      }), innerBlocksProps.children]
    })]
  });
}
export default DetailsEdit;
//# sourceMappingURL=edit.js.map