@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 = AutoBlockPreview;

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

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

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

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

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

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

var _iframe = _interopRequireDefault(require("../iframe"));

var _editorStyles = _interopRequireDefault(require("../editor-styles"));

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

/**
 * WordPress dependencies
 */

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

function ScaledBlockPreview({
  viewportWidth,
  containerWidth,
  minHeight,
  additionalStyles = []
}) {
  if (!viewportWidth) {
    viewportWidth = containerWidth;
  }

  const [contentResizeListener, {
    height: contentHeight
  }] = (0, _compose.useResizeObserver)();
  const {
    styles
  } = (0, _data.useSelect)(select => {
    const settings = select(_store.store).getSettings();
    return {
      styles: settings.styles
    };
  }, []); // Avoid scrollbars for pattern previews.

  const editorStyles = (0, _element.useMemo)(() => {
    if (styles) {
      return [...styles, {
        css: 'body{height:auto;overflow:hidden;border:none;padding:0;}',
        __unstableType: 'presets'
      }, ...additionalStyles];
    }

    return styles;
  }, [styles, additionalStyles]); // Initialize on render instead of module top level, to avoid circular dependency issues.

  MemoizedBlockList = MemoizedBlockList || (0, _compose.pure)(_blockList.default);
  const scale = containerWidth / viewportWidth;
  return (0, _element.createElement)(_components.Disabled, {
    className: "block-editor-block-preview__content",
    style: {
      transform: `scale(${scale})`,
      height: contentHeight * scale,
      maxHeight: contentHeight > MAX_HEIGHT ? MAX_HEIGHT * scale : undefined,
      minHeight
    }
  }, (0, _element.createElement)(_iframe.default, {
    contentRef: (0, _compose.useRefEffect)(bodyElement => {
      const {
        ownerDocument: {
          documentElement
        }
      } = bodyElement;
      documentElement.classList.add('block-editor-block-preview__content-iframe');
      documentElement.style.position = 'absolute';
      documentElement.style.width = '100%'; // Necessary for contentResizeListener to work.

      bodyElement.style.boxSizing = 'border-box';
      bodyElement.style.position = 'absolute';
      bodyElement.style.width = '100%';
    }, []),
    "aria-hidden": true,
    tabIndex: -1,
    style: {
      position: 'absolute',
      width: viewportWidth,
      height: contentHeight,
      pointerEvents: 'none',
      // This is a catch-all max-height for patterns.
      // See: https://github.com/WordPress/gutenberg/pull/38175.
      maxHeight: MAX_HEIGHT,
      minHeight: scale !== 0 && scale < 1 && minHeight ? minHeight / scale : minHeight
    }
  }, (0, _element.createElement)(_editorStyles.default, {
    styles: editorStyles
  }), contentResizeListener, (0, _element.createElement)(MemoizedBlockList, {
    renderAppender: false
  })));
}

function AutoBlockPreview(props) {
  const [containerResizeListener, {
    width: containerWidth
  }] = (0, _compose.useResizeObserver)();
  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)("div", {
    style: {
      position: 'relative',
      width: '100%',
      height: 0
    }
  }, containerResizeListener), (0, _element.createElement)("div", {
    className: "block-editor-block-preview__container"
  }, !!containerWidth && (0, _element.createElement)(ScaledBlockPreview, (0, _extends2.default)({}, props, {
    containerWidth: containerWidth
  }))));
}
//# sourceMappingURL=auto.js.map