@wordpress/block-editor/build/components/block-preview/auto.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 _components = require("@wordpress/components");

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

var _blockList = _interopRequireDefault(require("../block-list"));

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
// This is used to avoid rendering the block list if the sizes change.
let MemoizedBlockList;

function AutoBlockPreview({
  viewportWidth,
  __experimentalPadding
}) {
  const [containerResizeListener, {
    width: containerWidth
  }] = (0, _compose.useResizeObserver)();
  const [containtResizeListener, {
    height: contentHeight
  }] = (0, _compose.useResizeObserver)(); // Initialize on render instead of module top level, to avoid circular dependency issues.

  MemoizedBlockList = MemoizedBlockList || (0, _compose.pure)(_blockList.default);
  const scale = (containerWidth - 2 * __experimentalPadding) / viewportWidth;
  return (0, _element.createElement)("div", {
    className: "block-editor-block-preview__container editor-styles-wrapper",
    "aria-hidden": true,
    style: {
      height: contentHeight * scale + 2 * __experimentalPadding
    }
  }, containerResizeListener, (0, _element.createElement)(_components.Disabled, {
    style: {
      transform: `scale(${scale})`,
      width: viewportWidth,
      left: __experimentalPadding,
      right: __experimentalPadding,
      top: __experimentalPadding
    },
    className: "block-editor-block-preview__content"
  }, containtResizeListener, (0, _element.createElement)(MemoizedBlockList, null)));
}

var _default = AutoBlockPreview;
exports.default = _default;
//# sourceMappingURL=auto.js.map