@wordpress/block-editor/build/components/use-flash-editable-blocks/index.js

Generic block editor.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useFlashEditableBlocks = useFlashEditableBlocks;
var _compose = require("@wordpress/compose");
var _data = require("@wordpress/data");
var _store = require("../../store");
var _lockUnlock = require("../../lock-unlock");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

function useFlashEditableBlocks({
  clientId = '',
  isEnabled = true
} = {}) {
  const {
    getEnabledClientIdsTree
  } = (0, _lockUnlock.unlock)((0, _data.useSelect)(_store.store));
  return (0, _compose.useRefEffect)(element => {
    if (!isEnabled) {
      return;
    }
    const flashEditableBlocks = () => {
      getEnabledClientIdsTree(clientId).forEach(({
        clientId: id
      }) => {
        const block = element.querySelector(`[data-block="${id}"]`);
        if (!block) {
          return;
        }
        block.classList.remove('has-editable-outline');
        // Force reflow to trigger the animation.
        // eslint-disable-next-line no-unused-expressions
        block.offsetWidth;
        block.classList.add('has-editable-outline');
      });
    };
    const handleClick = event => {
      const shouldFlash = event.target === element || event.target.classList.contains('is-root-container');
      if (!shouldFlash) {
        return;
      }
      if (event.defaultPrevented) {
        return;
      }
      event.preventDefault();
      flashEditableBlocks();
    };
    element.addEventListener('click', handleClick);
    return () => element.removeEventListener('click', handleClick);
  }, [isEnabled]);
}
//# sourceMappingURL=index.js.map