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

Block library for the WordPress editor.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.IndentUI = IndentUI;
exports.default = ListItemEdit;
var _blockEditor = require("@wordpress/block-editor");
var _i18n = require("@wordpress/i18n");
var _components = require("@wordpress/components");
var _icons = require("@wordpress/icons");
var _compose = require("@wordpress/compose");
var _data = require("@wordpress/data");
var _hooks = require("./hooks");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

function IndentUI({
  clientId
}) {
  const indentListItem = (0, _hooks.useIndentListItem)(clientId);
  const outdentListItem = (0, _hooks.useOutdentListItem)();
  const {
    canIndent,
    canOutdent
  } = (0, _data.useSelect)(select => {
    const {
      getBlockIndex,
      getBlockRootClientId,
      getBlockName
    } = select(_blockEditor.store);
    return {
      canIndent: getBlockIndex(clientId) > 0,
      canOutdent: getBlockName(getBlockRootClientId(getBlockRootClientId(clientId))) === 'core/list-item'
    };
  }, [clientId]);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToolbarButton, {
      icon: (0, _i18n.isRTL)() ? _icons.formatOutdentRTL : _icons.formatOutdent,
      title: (0, _i18n.__)('Outdent'),
      description: (0, _i18n.__)('Outdent list item'),
      disabled: !canOutdent,
      onClick: () => outdentListItem()
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToolbarButton, {
      icon: (0, _i18n.isRTL)() ? _icons.formatIndentRTL : _icons.formatIndent,
      title: (0, _i18n.__)('Indent'),
      description: (0, _i18n.__)('Indent list item'),
      disabled: !canIndent,
      onClick: () => indentListItem()
    })]
  });
}
function ListItemEdit({
  attributes,
  setAttributes,
  clientId,
  mergeBlocks
}) {
  const {
    placeholder,
    content
  } = attributes;
  const blockProps = (0, _blockEditor.useBlockProps)();
  const innerBlocksProps = (0, _blockEditor.useInnerBlocksProps)(blockProps, {
    renderAppender: false,
    __unstableDisableDropZone: true
  });
  const useEnterRef = (0, _hooks.useEnter)({
    content,
    clientId
  });
  const useSpaceRef = (0, _hooks.useSpace)(clientId);
  const onMerge = (0, _hooks.useMerge)(clientId, mergeBlocks);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
      ...innerBlocksProps,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.RichText, {
        ref: (0, _compose.useMergeRefs)([useEnterRef, useSpaceRef]),
        identifier: "content",
        tagName: "div",
        onChange: nextContent => setAttributes({
          content: nextContent
        }),
        value: content,
        "aria-label": (0, _i18n.__)('List text'),
        placeholder: placeholder || (0, _i18n.__)('List'),
        onMerge: onMerge
      }), innerBlocksProps.children]
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.BlockControls, {
      group: "block",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IndentUI, {
        clientId: clientId
      })
    })]
  });
}
//# sourceMappingURL=edit.js.map