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

Block library for the WordPress editor.

import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import {
  useBlockProps,
  useInnerBlocksProps,
  InspectorControls,
  BlockControls,
  useBlockEditingMode,
  store as blockEditorStore,
  HeadingLevelDropdown
} from "@wordpress/block-editor";
import { __ } from "@wordpress/i18n";
import {
  ToggleControl,
  __experimentalToggleGroupControl as ToggleGroupControl,
  __experimentalToggleGroupControlOption as ToggleGroupControlOption,
  __experimentalToolsPanel as ToolsPanel,
  __experimentalToolsPanelItem as ToolsPanelItem,
  ToolbarButton,
  ToolbarGroup
} from "@wordpress/components";
import { useDispatch, useSelect, useRegistry } from "@wordpress/data";
import { createBlock } from "@wordpress/blocks";
import { useToolsPanelDropdownMenuProps } from "../utils/hooks";
const ACCORDION_BLOCK_NAME = "core/accordion-item";
const ACCORDION_HEADING_BLOCK_NAME = "core/accordion-heading";
const ACCORDION_BLOCK = {
  name: ACCORDION_BLOCK_NAME
};
function Edit({
  attributes: {
    autoclose,
    iconPosition,
    showIcon,
    headingLevel,
    levelOptions
  },
  clientId,
  setAttributes,
  isSelected: isSingleSelected
}) {
  const registry = useRegistry();
  const { getBlockOrder } = useSelect(blockEditorStore);
  const blockProps = useBlockProps({
    role: "group"
  });
  const dropdownMenuProps = useToolsPanelDropdownMenuProps();
  const { updateBlockAttributes, insertBlock } = useDispatch(blockEditorStore);
  const blockEditingMode = useBlockEditingMode();
  const isContentOnlyMode = blockEditingMode === "contentOnly";
  const innerBlocksProps = useInnerBlocksProps(blockProps, {
    template: [[ACCORDION_BLOCK_NAME]],
    defaultBlock: ACCORDION_BLOCK,
    directInsert: true,
    templateInsertUpdatesSelection: true
  });
  const addAccordionItemBlock = () => {
    const newAccordionItem = createBlock(ACCORDION_BLOCK_NAME, {}, [
      createBlock(ACCORDION_HEADING_BLOCK_NAME, {
        level: headingLevel
      }),
      createBlock("core/accordion-panel", {})
    ]);
    insertBlock(newAccordionItem, void 0, clientId);
  };
  const updateHeadingLevel = (newHeadingLevel) => {
    const innerBlockClientIds = getBlockOrder(clientId);
    const accordionHeaderClientIds = [];
    innerBlockClientIds.forEach((contentClientId) => {
      const headerClientIds = getBlockOrder(contentClientId);
      accordionHeaderClientIds.push(...headerClientIds);
    });
    registry.batch(() => {
      setAttributes({ headingLevel: newHeadingLevel });
      updateBlockAttributes(accordionHeaderClientIds, {
        level: newHeadingLevel
      });
    });
  };
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    isSingleSelected && !isContentOnlyMode && /* @__PURE__ */ jsx(BlockControls, { children: /* @__PURE__ */ jsx(ToolbarGroup, { children: /* @__PURE__ */ jsx(
      HeadingLevelDropdown,
      {
        value: headingLevel,
        options: levelOptions,
        onChange: updateHeadingLevel
      }
    ) }) }),
    isSingleSelected && /* @__PURE__ */ jsx(BlockControls, { group: "other", children: /* @__PURE__ */ jsx(ToolbarButton, { onClick: addAccordionItemBlock, children: __("Add") }) }),
    /* @__PURE__ */ jsx(InspectorControls, { children: /* @__PURE__ */ jsxs(
      ToolsPanel,
      {
        label: __("Settings"),
        resetAll: () => {
          setAttributes({
            autoclose: false,
            showIcon: true,
            iconPosition: "right"
          });
        },
        dropdownMenuProps,
        children: [
          /* @__PURE__ */ jsx(
            ToolsPanelItem,
            {
              label: __("Auto-close"),
              isShownByDefault: true,
              hasValue: () => !!autoclose,
              onDeselect: () => setAttributes({ autoclose: false }),
              children: /* @__PURE__ */ jsx(
                ToggleControl,
                {
                  isBlock: true,
                  __nextHasNoMarginBottom: true,
                  label: __("Auto-close"),
                  onChange: (value) => {
                    setAttributes({
                      autoclose: value
                    });
                  },
                  checked: autoclose,
                  help: __(
                    "Automatically close accordions when a new one is opened."
                  )
                }
              )
            }
          ),
          /* @__PURE__ */ jsx(
            ToolsPanelItem,
            {
              label: __("Show icon"),
              isShownByDefault: true,
              hasValue: () => !showIcon,
              onDeselect: () => setAttributes({ showIcon: true }),
              children: /* @__PURE__ */ jsx(
                ToggleControl,
                {
                  isBlock: true,
                  __nextHasNoMarginBottom: true,
                  label: __("Show icon"),
                  onChange: (value) => {
                    setAttributes({
                      showIcon: value,
                      iconPosition: value ? iconPosition : "right"
                    });
                  },
                  checked: showIcon,
                  help: __(
                    "Display a plus icon next to the accordion header."
                  )
                }
              )
            }
          ),
          showIcon && /* @__PURE__ */ jsx(
            ToolsPanelItem,
            {
              label: __("Icon Position"),
              isShownByDefault: true,
              hasValue: () => iconPosition !== "right",
              onDeselect: () => setAttributes({ iconPosition: "right" }),
              children: /* @__PURE__ */ jsxs(
                ToggleGroupControl,
                {
                  __nextHasNoMarginBottom: true,
                  __next40pxDefaultSize: true,
                  isBlock: true,
                  label: __("Icon Position"),
                  value: iconPosition,
                  onChange: (value) => {
                    setAttributes({ iconPosition: value });
                  },
                  children: [
                    /* @__PURE__ */ jsx(
                      ToggleGroupControlOption,
                      {
                        label: __("Left"),
                        value: "left"
                      }
                    ),
                    /* @__PURE__ */ jsx(
                      ToggleGroupControlOption,
                      {
                        label: __("Right"),
                        value: "right"
                      }
                    )
                  ]
                }
              )
            }
          )
        ]
      }
    ) }, "setting"),
    /* @__PURE__ */ jsx("div", { ...innerBlocksProps })
  ] });
}
export {
  Edit as default
};
//# sourceMappingURL=edit.js.map