@wordpress/block-editor
Version:
142 lines (138 loc) • 4.81 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ExperimentalBlockCanvas = ExperimentalBlockCanvas;
exports.default = void 0;
var _compose = require("@wordpress/compose");
var _element = require("@wordpress/element");
var _data = require("@wordpress/data");
var _blockList = _interopRequireDefault(require("../block-list"));
var _blockTools = _interopRequireDefault(require("../block-tools"));
var _editorStyles = _interopRequireDefault(require("../editor-styles"));
var _iframe = _interopRequireDefault(require("../iframe"));
var _writingFlow = _interopRequireDefault(require("../writing-flow"));
var _observeTyping = require("../observe-typing");
var _blockSelectionClearer = require("../block-selection-clearer");
var _useBlockCommands = require("../use-block-commands");
var _store = require("../../store");
var _lockUnlock = require("../../lock-unlock");
var _jsxRuntime = require("react/jsx-runtime");
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
// EditorStyles is a memoized component, so avoid passing a new
// object reference on each render.
const EDITOR_STYLE_TRANSFORM_OPTIONS = {
// Don't transform selectors that already specify `.editor-styles-wrapper`.
ignoredSelectors: [/\.editor-styles-wrapper/gi]
};
function ExperimentalBlockCanvas({
shouldIframe = true,
height = '300px',
children = /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockList.default, {}),
styles,
contentRef: contentRefProp,
iframeProps
}) {
(0, _useBlockCommands.useBlockCommands)();
const isTabletViewport = (0, _compose.useViewportMatch)('medium', '<');
const resetTypingRef = (0, _observeTyping.useMouseMoveTypingReset)();
const clearerRef = (0, _blockSelectionClearer.useBlockSelectionClearer)();
const localRef = (0, _element.useRef)();
const contentRef = (0, _compose.useMergeRefs)([contentRefProp, clearerRef, localRef]);
const zoomLevel = (0, _data.useSelect)(select => (0, _lockUnlock.unlock)(select(_store.store)).getZoomLevel(), []);
const zoomOutIframeProps = zoomLevel !== 100 && !isTabletViewport ? {
scale: zoomLevel,
frameSize: '40px'
} : {};
if (!shouldIframe) {
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_blockTools.default, {
__unstableContentRef: localRef,
style: {
height,
display: 'flex'
},
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_editorStyles.default, {
styles: styles,
scope: ":where(.editor-styles-wrapper)",
transformOptions: EDITOR_STYLE_TRANSFORM_OPTIONS
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_writingFlow.default, {
ref: contentRef,
className: "editor-styles-wrapper",
tabIndex: -1,
style: {
height: '100%',
width: '100%'
},
children: children
})]
});
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockTools.default, {
__unstableContentRef: localRef,
style: {
height,
display: 'flex'
},
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_iframe.default, {
...iframeProps,
...zoomOutIframeProps,
ref: resetTypingRef,
contentRef: contentRef,
style: {
...iframeProps?.style
},
name: "editor-canvas",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_editorStyles.default, {
styles: styles
}), children]
})
});
}
/**
* BlockCanvas component is a component used to display the canvas of the block editor.
* What we call the canvas is an iframe containing the block list that you can manipulate.
* The component is also responsible of wiring up all the necessary hooks to enable
* the keyboard navigation across blocks in the editor and inject content styles into the iframe.
*
* @example
*
* ```jsx
* function MyBlockEditor() {
* const [ blocks, updateBlocks ] = useState([]);
* return (
* <BlockEditorProvider
* value={ blocks }
* onInput={ updateBlocks }
* onChange={ persistBlocks }
* >
* <BlockCanvas height="400px" />
* </BlockEditorProvider>
* );
* }
* ```
*
* @param {Object} props Component props.
* @param {string} props.height Canvas height, defaults to 300px.
* @param {Array} props.styles Content styles to inject into the iframe.
* @param {Element} props.children Content of the canvas, defaults to the BlockList component.
* @return {Element} Block Breadcrumb.
*/
function BlockCanvas({
children,
height,
styles
}) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(ExperimentalBlockCanvas, {
height: height,
styles: styles,
children: children
});
}
var _default = exports.default = BlockCanvas;
//# sourceMappingURL=index.js.map