@wordpress/block-library/build/navigation/edit/unsaved-inner-blocks.js

Block library for the WordPress editor.

"use strict";

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

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

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

var _blockEditor = require("@wordpress/block-editor");

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

var _coreData = require("@wordpress/core-data");

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

var _useNavigationMenu = _interopRequireDefault(require("../use-navigation-menu"));

var _useCreateNavigationMenu = _interopRequireDefault(require("./use-create-navigation-menu"));

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
const EMPTY_OBJECT = {};
const DRAFT_MENU_PARAMS = ['postType', 'wp_navigation', {
  status: 'draft',
  per_page: -1
}];
const DEFAULT_BLOCK = {
  name: 'core/navigation-link'
};
const ALLOWED_BLOCKS = ['core/navigation-link', 'core/search', 'core/social-links', 'core/page-list', 'core/spacer', 'core/home-link', 'core/site-title', 'core/site-logo', 'core/navigation-submenu'];

function UnsavedInnerBlocks(_ref) {
  let {
    blocks,
    clientId,
    hasSavedUnsavedInnerBlocks,
    onSave,
    hasSelection
  } = _ref;
  const originalBlocks = (0, _element.useRef)();
  (0, _element.useEffect)(() => {
    // Initially store the uncontrolled inner blocks for
    // dirty state comparison.
    if (!(originalBlocks !== null && originalBlocks !== void 0 && originalBlocks.current)) {
      originalBlocks.current = blocks;
    }
  }, [blocks]); // If the current inner blocks object is different in any way
  // from the original inner blocks from the post content then the
  // user has made changes to the inner blocks. At this point the inner
  // blocks can be considered "dirty".
  // We also make sure the current innerBlocks had a chance to be set.

  const innerBlocksAreDirty = !!originalBlocks.current && blocks !== originalBlocks.current;
  const shouldDirectInsert = (0, _element.useMemo)(() => blocks.every(_ref2 => {
    let {
      name
    } = _ref2;
    return name === 'core/navigation-link' || name === 'core/navigation-submenu' || name === 'core/page-list';
  }), [blocks]); // The block will be disabled in a block preview, use this as a way of
  // avoiding the side-effects of this component for block previews.

  const isDisabled = (0, _element.useContext)(_components.Disabled.Context);
  const savingLock = (0, _element.useRef)(false);
  const innerBlocksProps = (0, _blockEditor.useInnerBlocksProps)({
    className: 'wp-block-navigation__container'
  }, {
    renderAppender: hasSelection ? undefined : false,
    allowedBlocks: ALLOWED_BLOCKS,
    __experimentalDefaultBlock: DEFAULT_BLOCK,
    __experimentalDirectInsert: shouldDirectInsert
  });
  const {
    isSaving,
    draftNavigationMenus,
    hasResolvedDraftNavigationMenus
  } = (0, _data.useSelect)(select => {
    if (isDisabled) {
      return EMPTY_OBJECT;
    }

    const {
      getEntityRecords,
      hasFinishedResolution,
      isSavingEntityRecord
    } = select(_coreData.store);
    return {
      isSaving: isSavingEntityRecord('postType', 'wp_navigation'),
      draftNavigationMenus: getEntityRecords(...DRAFT_MENU_PARAMS),
      hasResolvedDraftNavigationMenus: hasFinishedResolution('getEntityRecords', DRAFT_MENU_PARAMS)
    };
  }, [isDisabled]);
  const {
    hasResolvedNavigationMenus,
    navigationMenus
  } = (0, _useNavigationMenu.default)();
  const {
    create: createNavigationMenu
  } = (0, _useCreateNavigationMenu.default)(clientId); // Automatically save the uncontrolled blocks.

  (0, _element.useEffect)(() => {
    // The block will be disabled when used in a BlockPreview.
    // In this case avoid automatic creation of a wp_navigation post.
    // Otherwise the user will be spammed with lots of menus!
    //
    // Also ensure other navigation menus have loaded so an
    // accurate name can be created.
    //
    // Don't try saving when another save is already
    // in progress.
    //
    // And finally only create the menu when the block is selected,
    // which is an indication they want to start editing.
    if (isDisabled || hasSavedUnsavedInnerBlocks || isSaving || savingLock.current || !hasResolvedDraftNavigationMenus || !hasResolvedNavigationMenus || !hasSelection || !innerBlocksAreDirty) {
      return;
    }

    savingLock.current = true;
    createNavigationMenu(null, blocks).then(menu => {
      onSave(menu);
      savingLock.current = false;
    });
  }, [isDisabled, isSaving, hasResolvedDraftNavigationMenus, hasResolvedNavigationMenus, draftNavigationMenus, navigationMenus, hasSelection, createNavigationMenu, blocks]);
  const Wrapper = isSaving ? _components.Disabled : 'div';
  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(Wrapper, innerBlocksProps), isSaving && (0, _element.createElement)(_components.Spinner, null));
}
//# sourceMappingURL=unsaved-inner-blocks.js.map