@wordpress/block-editor/build/components/inner-blocks/use-inner-block-template-sync.js

Generic block editor.

"use strict";

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

var _lodash = require("lodash");

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

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

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

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

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

/**
 * This hook makes sure that a block's inner blocks stay in sync with the given
 * block "template". The template is a block hierarchy to which inner blocks must
 * conform. If the blocks get "out of sync" with the template and the template
 * is meant to be locked (e.g. templateLock = "all"), then we replace the inner
 * blocks with the correct value after synchronizing it with the template.
 *
 * @param {string} clientId     The block client ID.
 * @param {Object} template     The template to match.
 * @param {string} templateLock The template lock state for the inner blocks. For
 *                              example, if the template lock is set to "all",
 *                              then the inner blocks will stay in sync with the
 *                              template. If not defined or set to false, then
 *                              the inner blocks will not be synchronized with
 *                              the given template.
 * @param {boolean} templateInsertUpdatesSelection Whether or not to update the
 *                              block-editor selection state when inner blocks
 *                              are replaced after template synchronization.
 */
function useInnerBlockTemplateSync(clientId, template, templateLock, templateInsertUpdatesSelection) {
  const {
    getSelectedBlocksInitialCaretPosition
  } = (0, _data.useSelect)(_store.store);
  const {
    replaceInnerBlocks
  } = (0, _data.useDispatch)(_store.store);
  const innerBlocks = (0, _data.useSelect)(select => select(_store.store).getBlocks(clientId), [clientId]); // Maintain a reference to the previous value so we can do a deep equality check.

  const existingTemplate = (0, _element.useRef)(null);
  (0, _element.useLayoutEffect)(() => {
    // Only synchronize innerBlocks with template if innerBlocks are empty or
    // a locking all exists directly on the block.
    if (innerBlocks.length === 0 || templateLock === 'all') {
      const hasTemplateChanged = !(0, _lodash.isEqual)(template, existingTemplate.current);

      if (hasTemplateChanged) {
        existingTemplate.current = template;
        const nextBlocks = (0, _blocks.synchronizeBlocksWithTemplate)(innerBlocks, template);

        if (!(0, _lodash.isEqual)(nextBlocks, innerBlocks)) {
          replaceInnerBlocks(clientId, nextBlocks, innerBlocks.length === 0 && templateInsertUpdatesSelection && nextBlocks.length !== 0, // This ensures the "initialPosition" doesn't change when applying the template
          // If we're supposed to focus the block, we'll focus the first inner block
          // otherwise, we won't apply any auto-focus.
          // This ensures for instance that the focus stays in the inserter when inserting the "buttons" block.
          getSelectedBlocksInitialCaretPosition());
        }
      }
    }
  }, [innerBlocks, template, templateLock, clientId]);
}
//# sourceMappingURL=use-inner-block-template-sync.js.map