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

Block library for the WordPress editor.

// packages/block-library/src/list/edit.js
import {
  BlockControls,
  useBlockProps,
  useInnerBlocksProps,
  store as blockEditorStore
} from "@wordpress/block-editor";
import { ToolbarButton } from "@wordpress/components";
import { useDispatch, useSelect, useRegistry } from "@wordpress/data";
import { isRTL, __ } from "@wordpress/i18n";
import {
  formatListBullets,
  formatListBulletsRTL,
  formatListNumbered,
  formatListNumberedRTL,
  formatOutdent,
  formatOutdentRTL
} from "@wordpress/icons";
import { createBlock } from "@wordpress/blocks";
import { useCallback, useEffect, Platform } from "@wordpress/element";
import deprecated from "@wordpress/deprecated";
import OrderedListSettings from "./ordered-list-settings";
import { migrateToListV2 } from "./utils";
import TagName from "./tag-name";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
var DEFAULT_BLOCK = {
  name: "core/list-item"
};
var TEMPLATE = [["core/list-item"]];
var NATIVE_MARGIN_SPACING = 8;
function useMigrateOnLoad(attributes, clientId) {
  const registry = useRegistry();
  const { updateBlockAttributes, replaceInnerBlocks } = useDispatch(blockEditorStore);
  useEffect(() => {
    if (!attributes.values) {
      return;
    }
    const [newAttributes, newInnerBlocks] = migrateToListV2(attributes);
    deprecated("Value attribute on the list block", {
      since: "6.0",
      version: "6.5",
      alternative: "inner blocks"
    });
    registry.batch(() => {
      updateBlockAttributes(clientId, newAttributes);
      replaceInnerBlocks(clientId, newInnerBlocks);
    });
  }, [attributes.values]);
}
function useOutdentList(clientId) {
  const { replaceBlocks, selectionChange } = useDispatch(blockEditorStore);
  const { getBlockRootClientId, getBlockAttributes, getBlock } = useSelect(blockEditorStore);
  return useCallback(() => {
    const parentBlockId = getBlockRootClientId(clientId);
    const parentBlockAttributes = getBlockAttributes(parentBlockId);
    const newParentBlock = createBlock(
      "core/list-item",
      parentBlockAttributes
    );
    const { innerBlocks } = getBlock(clientId);
    replaceBlocks([parentBlockId], [newParentBlock, ...innerBlocks]);
    selectionChange(innerBlocks[innerBlocks.length - 1].clientId);
  }, [clientId]);
}
function IndentUI({ clientId }) {
  const outdentList = useOutdentList(clientId);
  const canOutdent = useSelect(
    (select) => {
      const { getBlockRootClientId, getBlockName } = select(blockEditorStore);
      return getBlockName(getBlockRootClientId(clientId)) === "core/list-item";
    },
    [clientId]
  );
  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
    ToolbarButton,
    {
      icon: isRTL() ? formatOutdentRTL : formatOutdent,
      title: __("Outdent"),
      description: __("Outdent list item"),
      disabled: !canOutdent,
      onClick: outdentList
    }
  ) });
}
function Edit({ attributes, setAttributes, clientId, style }) {
  const { ordered, type, reversed, start } = attributes;
  const blockProps = useBlockProps({
    style: {
      ...Platform.isNative && style,
      listStyleType: ordered && type !== "decimal" ? type : void 0
    }
  });
  const innerBlocksProps = useInnerBlocksProps(blockProps, {
    defaultBlock: DEFAULT_BLOCK,
    directInsert: true,
    template: TEMPLATE,
    templateLock: false,
    templateInsertUpdatesSelection: true,
    ...Platform.isNative && {
      marginVertical: NATIVE_MARGIN_SPACING,
      marginHorizontal: NATIVE_MARGIN_SPACING,
      renderAppender: false
    },
    __experimentalCaptureToolbars: true
  });
  useMigrateOnLoad(attributes, clientId);
  const controls = /* @__PURE__ */ jsxs(BlockControls, { group: "block", children: [
    /* @__PURE__ */ jsx(
      ToolbarButton,
      {
        icon: isRTL() ? formatListBulletsRTL : formatListBullets,
        title: __("Unordered"),
        description: __("Convert to unordered list"),
        isActive: ordered === false,
        onClick: () => {
          setAttributes({ ordered: false });
        }
      }
    ),
    /* @__PURE__ */ jsx(
      ToolbarButton,
      {
        icon: isRTL() ? formatListNumberedRTL : formatListNumbered,
        title: __("Ordered"),
        description: __("Convert to ordered list"),
        isActive: ordered === true,
        onClick: () => {
          setAttributes({ ordered: true });
        }
      }
    ),
    /* @__PURE__ */ jsx(IndentUI, { clientId })
  ] });
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsx(
      TagName,
      {
        ordered,
        reversed,
        start,
        ...innerBlocksProps
      }
    ),
    controls,
    ordered && /* @__PURE__ */ jsx(
      OrderedListSettings,
      {
        ...{
          setAttributes,
          reversed,
          start,
          type
        }
      }
    )
  ] });
}
export {
  Edit as default
};
//# sourceMappingURL=edit.js.map