@wordpress/block-editor/build/components/block-list/block.js

Generic block editor.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _element = require("@wordpress/element");

var _classnames = _interopRequireDefault(require("classnames"));

var _blocks = require("@wordpress/blocks");

var _components = require("@wordpress/components");

var _data = require("@wordpress/data");

var _compose = require("@wordpress/compose");

var _dom = require("@wordpress/dom");

var _blockEdit = _interopRequireDefault(require("../block-edit"));

var _blockInvalidWarning = _interopRequireDefault(require("./block-invalid-warning"));

var _blockCrashWarning = _interopRequireDefault(require("./block-crash-warning"));

var _blockCrashBoundary = _interopRequireDefault(require("./block-crash-boundary"));

var _blockHtml = _interopRequireDefault(require("./block-html"));

var _useBlockProps = require("./use-block-props");

var _store = require("../../store");

var _layout = require("./layout");

var _lockUnlock = require("../../lock-unlock");

var _blockListBlockContext = require("./block-list-block-context");

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

/**
 * Merges wrapper props with special handling for classNames and styles.
 *
 * @param {Object} propsA
 * @param {Object} propsB
 *
 * @return {Object} Merged props.
 */
function mergeWrapperProps(propsA, propsB) {
  const newProps = { ...propsA,
    ...propsB
  };

  if (propsA?.className && propsB?.className) {
    newProps.className = (0, _classnames.default)(propsA.className, propsB.className);
  }

  if (propsA?.style && propsB?.style) {
    newProps.style = { ...propsA.style,
      ...propsB.style
    };
  }

  return newProps;
}

function Block({
  children,
  isHtml,
  ...props
}) {
  return (0, _element.createElement)("div", (0, _useBlockProps.useBlockProps)(props, {
    __unstableIsHtml: isHtml
  }), children);
}

function BlockListBlock({
  block: {
    __unstableBlockSource
  },
  mode,
  isLocked,
  canRemove,
  clientId,
  isSelected,
  isSelectionEnabled,
  className,
  __unstableLayoutClassNames: layoutClassNames,
  name,
  isValid,
  attributes,
  wrapperProps,
  setAttributes,
  onReplace,
  onInsertBlocksAfter,
  onMerge,
  toggleSelection
}) {
  var _wrapperProps;

  const {
    themeSupportsLayout,
    isTemporarilyEditingAsBlocks,
    blockEditingMode
  } = (0, _data.useSelect)(select => {
    const {
      getSettings,
      __unstableGetTemporarilyEditingAsBlocks,
      getBlockEditingMode
    } = (0, _lockUnlock.unlock)(select(_store.store));
    return {
      themeSupportsLayout: getSettings().supportsLayout,
      isTemporarilyEditingAsBlocks: __unstableGetTemporarilyEditingAsBlocks() === clientId,
      blockEditingMode: getBlockEditingMode(clientId)
    };
  }, [clientId]);
  const {
    removeBlock
  } = (0, _data.useDispatch)(_store.store);
  const onRemove = (0, _element.useCallback)(() => removeBlock(clientId), [clientId]);
  const parentLayout = (0, _layout.useLayout)() || {}; // We wrap the BlockEdit component in a div that hides it when editing in
  // HTML mode. This allows us to render all of the ancillary pieces
  // (InspectorControls, etc.) which are inside `BlockEdit` but not
  // `BlockHTML`, even in HTML mode.

  let blockEdit = (0, _element.createElement)(_blockEdit.default, {
    name: name,
    isSelected: isSelected,
    attributes: attributes,
    setAttributes: setAttributes,
    insertBlocksAfter: isLocked ? undefined : onInsertBlocksAfter,
    onReplace: canRemove ? onReplace : undefined,
    onRemove: canRemove ? onRemove : undefined,
    mergeBlocks: canRemove ? onMerge : undefined,
    clientId: clientId,
    isSelectionEnabled: isSelectionEnabled,
    toggleSelection: toggleSelection,
    __unstableLayoutClassNames: layoutClassNames,
    __unstableParentLayout: Object.keys(parentLayout).length ? parentLayout : undefined
  });
  const blockType = (0, _blocks.getBlockType)(name);

  if (blockEditingMode === 'disabled') {
    wrapperProps = { ...wrapperProps,
      tabIndex: -1
    };
  } // Determine whether the block has props to apply to the wrapper.


  if (blockType?.getEditWrapperProps) {
    wrapperProps = mergeWrapperProps(wrapperProps, blockType.getEditWrapperProps(attributes));
  }

  const isAligned = wrapperProps && !!wrapperProps['data-align'] && !themeSupportsLayout; // For aligned blocks, provide a wrapper element so the block can be
  // positioned relative to the block column.
  // This is only kept for classic themes that don't support layout
  // Historically we used to rely on extra divs and data-align to
  // provide the alignments styles in the editor.
  // Due to the differences between frontend and backend, we migrated
  // to the layout feature, and we're now aligning the markup of frontend
  // and backend.

  if (isAligned) {
    blockEdit = (0, _element.createElement)("div", {
      className: "wp-block",
      "data-align": wrapperProps['data-align']
    }, blockEdit);
  }

  let block;

  if (!isValid) {
    const saveContent = __unstableBlockSource ? (0, _blocks.serializeRawBlock)(__unstableBlockSource) : (0, _blocks.getSaveContent)(blockType, attributes);
    block = (0, _element.createElement)(Block, {
      className: "has-warning"
    }, (0, _element.createElement)(_blockInvalidWarning.default, {
      clientId: clientId
    }), (0, _element.createElement)(_element.RawHTML, null, (0, _dom.safeHTML)(saveContent)));
  } else if (mode === 'html') {
    // Render blockEdit so the inspector controls don't disappear.
    // See #8969.
    block = (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)("div", {
      style: {
        display: 'none'
      }
    }, blockEdit), (0, _element.createElement)(Block, {
      isHtml: true
    }, (0, _element.createElement)(_blockHtml.default, {
      clientId: clientId
    })));
  } else if (blockType?.apiVersion > 1) {
    block = blockEdit;
  } else {
    block = (0, _element.createElement)(Block, wrapperProps, blockEdit);
  }

  const {
    'data-align': dataAlign,
    ...restWrapperProps
  } = (_wrapperProps = wrapperProps) !== null && _wrapperProps !== void 0 ? _wrapperProps : {};
  const value = {
    clientId,
    className: (0, _classnames.default)({
      'is-editing-disabled': blockEditingMode === 'disabled',
      'is-content-locked-temporarily-editing-as-blocks': isTemporarilyEditingAsBlocks
    }, dataAlign && themeSupportsLayout && `align${dataAlign}`, className),
    wrapperProps: restWrapperProps,
    isAligned
  };
  const memoizedValue = (0, _element.useMemo)(() => value, Object.values(value));
  return (0, _element.createElement)(_blockListBlockContext.BlockListBlockContext.Provider, {
    value: memoizedValue
  }, (0, _element.createElement)(_blockCrashBoundary.default, {
    fallback: (0, _element.createElement)(Block, {
      className: "has-warning"
    }, (0, _element.createElement)(_blockCrashWarning.default, null))
  }, block));
}

const applyWithSelect = (0, _data.withSelect)((select, {
  clientId,
  rootClientId
}) => {
  const {
    isBlockSelected,
    getBlockMode,
    isSelectionEnabled,
    getTemplateLock,
    __unstableGetBlockWithoutInnerBlocks,
    canRemoveBlock,
    canMoveBlock
  } = select(_store.store);

  const block = __unstableGetBlockWithoutInnerBlocks(clientId);

  const isSelected = isBlockSelected(clientId);
  const templateLock = getTemplateLock(rootClientId);
  const canRemove = canRemoveBlock(clientId, rootClientId);
  const canMove = canMoveBlock(clientId, rootClientId); // The fallback to `{}` is a temporary fix.
  // This function should never be called when a block is not present in
  // the state. It happens now because the order in withSelect rendering
  // is not correct.

  const {
    name,
    attributes,
    isValid
  } = block || {}; // Do not add new properties here, use `useSelect` instead to avoid
  // leaking new props to the public API (editor.BlockListBlock filter).

  return {
    mode: getBlockMode(clientId),
    isSelectionEnabled: isSelectionEnabled(),
    isLocked: !!templateLock,
    canRemove,
    canMove,
    // Users of the editor.BlockListBlock filter used to be able to
    // access the block prop.
    // Ideally these blocks would rely on the clientId prop only.
    // This is kept for backward compatibility reasons.
    block,
    name,
    attributes,
    isValid,
    isSelected
  };
});
const applyWithDispatch = (0, _data.withDispatch)((dispatch, ownProps, registry) => {
  const {
    updateBlockAttributes,
    insertBlocks,
    mergeBlocks,
    replaceBlocks,
    toggleSelection,
    __unstableMarkLastChangeAsPersistent,
    moveBlocksToPosition,
    removeBlock
  } = dispatch(_store.store); // Do not add new properties here, use `useDispatch` instead to avoid
  // leaking new props to the public API (editor.BlockListBlock filter).

  return {
    setAttributes(newAttributes) {
      const {
        getMultiSelectedBlockClientIds
      } = registry.select(_store.store);
      const multiSelectedBlockClientIds = getMultiSelectedBlockClientIds();
      const {
        clientId
      } = ownProps;
      const clientIds = multiSelectedBlockClientIds.length ? multiSelectedBlockClientIds : [clientId];
      updateBlockAttributes(clientIds, newAttributes);
    },

    onInsertBlocks(blocks, index) {
      const {
        rootClientId
      } = ownProps;
      insertBlocks(blocks, index, rootClientId);
    },

    onInsertBlocksAfter(blocks) {
      const {
        clientId,
        rootClientId
      } = ownProps;
      const {
        getBlockIndex
      } = registry.select(_store.store);
      const index = getBlockIndex(clientId);
      insertBlocks(blocks, index + 1, rootClientId);
    },

    onMerge(forward) {
      const {
        clientId,
        rootClientId
      } = ownProps;
      const {
        getPreviousBlockClientId,
        getNextBlockClientId,
        getBlock,
        getBlockAttributes,
        getBlockName,
        getBlockOrder,
        getBlockIndex,
        getBlockRootClientId,
        canInsertBlockType
      } = registry.select(_store.store);
      /**
       * Moves the block with clientId up one level. If the block type
       * cannot be inserted at the new location, it will be attempted to
       * convert to the default block type.
       *
       * @param {string}  _clientId       The block to move.
       * @param {boolean} changeSelection Whether to change the selection
       *                                  to the moved block.
       */

      function moveFirstItemUp(_clientId, changeSelection = true) {
        const targetRootClientId = getBlockRootClientId(_clientId);
        const blockOrder = getBlockOrder(_clientId);
        const [firstClientId] = blockOrder;

        if (blockOrder.length === 1 && (0, _blocks.isUnmodifiedBlock)(getBlock(firstClientId))) {
          removeBlock(_clientId);
        } else {
          registry.batch(() => {
            if (canInsertBlockType(getBlockName(firstClientId), targetRootClientId)) {
              moveBlocksToPosition([firstClientId], _clientId, targetRootClientId, getBlockIndex(_clientId));
            } else {
              const replacement = (0, _blocks.switchToBlockType)(getBlock(firstClientId), (0, _blocks.getDefaultBlockName)());

              if (replacement && replacement.length) {
                insertBlocks(replacement, getBlockIndex(_clientId), targetRootClientId, changeSelection);
                removeBlock(firstClientId, false);
              }
            }

            if (!getBlockOrder(_clientId).length && (0, _blocks.isUnmodifiedBlock)(getBlock(_clientId))) {
              removeBlock(_clientId, false);
            }
          });
        }
      } // For `Delete` or forward merge, we should do the exact same thing
      // as `Backspace`, but from the other block.


      if (forward) {
        if (rootClientId) {
          const nextRootClientId = getNextBlockClientId(rootClientId);

          if (nextRootClientId) {
            // If there is a block that follows with the same parent
            // block name and the same attributes, merge the inner
            // blocks.
            if (getBlockName(rootClientId) === getBlockName(nextRootClientId)) {
              const rootAttributes = getBlockAttributes(rootClientId);
              const previousRootAttributes = getBlockAttributes(nextRootClientId);

              if (Object.keys(rootAttributes).every(key => rootAttributes[key] === previousRootAttributes[key])) {
                registry.batch(() => {
                  moveBlocksToPosition(getBlockOrder(nextRootClientId), nextRootClientId, rootClientId);
                  removeBlock(nextRootClientId, false);
                });
                return;
              }
            } else {
              mergeBlocks(rootClientId, nextRootClientId);
              return;
            }
          }
        }

        const nextBlockClientId = getNextBlockClientId(clientId);

        if (!nextBlockClientId) {
          return;
        }

        if (getBlockOrder(nextBlockClientId).length) {
          moveFirstItemUp(nextBlockClientId, false);
        } else {
          mergeBlocks(clientId, nextBlockClientId);
        }
      } else {
        const previousBlockClientId = getPreviousBlockClientId(clientId);

        if (previousBlockClientId) {
          mergeBlocks(previousBlockClientId, clientId);
        } else if (rootClientId) {
          const previousRootClientId = getPreviousBlockClientId(rootClientId); // If there is a preceding block with the same parent block
          // name and the same attributes, merge the inner blocks.

          if (previousRootClientId && getBlockName(rootClientId) === getBlockName(previousRootClientId)) {
            const rootAttributes = getBlockAttributes(rootClientId);
            const previousRootAttributes = getBlockAttributes(previousRootClientId);

            if (Object.keys(rootAttributes).every(key => rootAttributes[key] === previousRootAttributes[key])) {
              registry.batch(() => {
                moveBlocksToPosition(getBlockOrder(rootClientId), rootClientId, previousRootClientId);
                removeBlock(rootClientId, false);
              });
              return;
            }
          }

          moveFirstItemUp(rootClientId);
        }
      }
    },

    onReplace(blocks, indexToSelect, initialPosition) {
      if (blocks.length && !(0, _blocks.isUnmodifiedDefaultBlock)(blocks[blocks.length - 1])) {
        __unstableMarkLastChangeAsPersistent();
      }

      replaceBlocks([ownProps.clientId], blocks, indexToSelect, initialPosition);
    },

    toggleSelection(selectionEnabled) {
      toggleSelection(selectionEnabled);
    }

  };
});

var _default = (0, _compose.compose)(_compose.pure, applyWithSelect, applyWithDispatch, // Block is sometimes not mounted at the right time, causing it be undefined
// see issue for more info
// https://github.com/WordPress/gutenberg/issues/17013
(0, _compose.ifCondition)(({
  block
}) => !!block), (0, _components.withFilters)('editor.BlockListBlock'))(BlockListBlock);

exports.default = _default;
//# sourceMappingURL=block.js.map