@wordpress/block-editor 8.0.15 → 8.0.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/components/block-preview/auto.js +20 -4
- package/build/components/block-preview/auto.js.map +1 -1
- package/build-module/components/block-preview/auto.js +21 -4
- package/build-module/components/block-preview/auto.js.map +1 -1
- package/package.json +2 -2
- package/src/components/block-preview/auto.js +26 -1
|
@@ -32,6 +32,7 @@ var _store = require("../../store");
|
|
|
32
32
|
*/
|
|
33
33
|
// This is used to avoid rendering the block list if the sizes change.
|
|
34
34
|
let MemoizedBlockList;
|
|
35
|
+
const MAX_HEIGHT = 2000;
|
|
35
36
|
|
|
36
37
|
function AutoBlockPreview(_ref) {
|
|
37
38
|
let {
|
|
@@ -46,7 +47,18 @@ function AutoBlockPreview(_ref) {
|
|
|
46
47
|
}] = (0, _compose.useResizeObserver)();
|
|
47
48
|
const styles = (0, _data.useSelect)(select => {
|
|
48
49
|
return select(_store.store).getSettings().styles;
|
|
49
|
-
}, []); //
|
|
50
|
+
}, []); // Avoid scrollbars for pattern previews.
|
|
51
|
+
|
|
52
|
+
const editorStyles = (0, _element.useMemo)(() => {
|
|
53
|
+
if (styles) {
|
|
54
|
+
return [...styles, {
|
|
55
|
+
css: 'body{height:auto;overflow:hidden;}',
|
|
56
|
+
__unstableType: 'presets'
|
|
57
|
+
}];
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
return styles;
|
|
61
|
+
}, [styles]); // Initialize on render instead of module top level, to avoid circular dependency issues.
|
|
50
62
|
|
|
51
63
|
MemoizedBlockList = MemoizedBlockList || (0, _compose.pure)(_blockList.default);
|
|
52
64
|
const scale = containerWidth / viewportWidth;
|
|
@@ -56,11 +68,12 @@ function AutoBlockPreview(_ref) {
|
|
|
56
68
|
className: "block-editor-block-preview__content",
|
|
57
69
|
style: {
|
|
58
70
|
transform: `scale(${scale})`,
|
|
59
|
-
height: contentHeight * scale
|
|
71
|
+
height: contentHeight * scale,
|
|
72
|
+
maxHeight: contentHeight > MAX_HEIGHT ? MAX_HEIGHT * scale : undefined
|
|
60
73
|
}
|
|
61
74
|
}, (0, _element.createElement)(_iframe.default, {
|
|
62
75
|
head: (0, _element.createElement)(_editorStyles.default, {
|
|
63
|
-
styles:
|
|
76
|
+
styles: editorStyles
|
|
64
77
|
}),
|
|
65
78
|
contentRef: (0, _compose.useRefEffect)(bodyElement => {
|
|
66
79
|
const {
|
|
@@ -79,7 +92,10 @@ function AutoBlockPreview(_ref) {
|
|
|
79
92
|
position: 'absolute',
|
|
80
93
|
width: viewportWidth,
|
|
81
94
|
height: contentHeight,
|
|
82
|
-
pointerEvents: 'none'
|
|
95
|
+
pointerEvents: 'none',
|
|
96
|
+
// This is a catch-all max-height for patterns.
|
|
97
|
+
// See: https://github.com/WordPress/gutenberg/pull/38175.
|
|
98
|
+
maxHeight: MAX_HEIGHT
|
|
83
99
|
}
|
|
84
100
|
}, contentResizeListener, (0, _element.createElement)(MemoizedBlockList, {
|
|
85
101
|
renderAppender: false
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/block-editor/src/components/block-preview/auto.js"],"names":["MemoizedBlockList","AutoBlockPreview","viewportWidth","__experimentalPadding","containerResizeListener","width","containerWidth","contentResizeListener","height","contentHeight","styles","select","store","getSettings","BlockList","scale","transform","bodyElement","ownerDocument","documentElement","classList","add","style","position","padding","pointerEvents"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["@wordpress/block-editor/src/components/block-preview/auto.js"],"names":["MemoizedBlockList","MAX_HEIGHT","AutoBlockPreview","viewportWidth","__experimentalPadding","containerResizeListener","width","containerWidth","contentResizeListener","height","contentHeight","styles","select","store","getSettings","editorStyles","css","__unstableType","BlockList","scale","transform","maxHeight","undefined","bodyElement","ownerDocument","documentElement","classList","add","style","position","padding","pointerEvents"],"mappings":";;;;;;;;;AAMA;;AAHA;;AACA;;AACA;;AAMA;;AACA;;AACA;;AACA;;AAdA;AACA;AACA;;AAMA;AACA;AACA;AAMA;AACA,IAAIA,iBAAJ;AAEA,MAAMC,UAAU,GAAG,IAAnB;;AAEA,SAASC,gBAAT,OAAsE;AAAA,MAA3C;AAAEC,IAAAA,aAAF;AAAiBC,IAAAA;AAAjB,GAA2C;AACrE,QAAM,CACLC,uBADK,EAEL;AAAEC,IAAAA,KAAK,EAAEC;AAAT,GAFK,IAGF,iCAHJ;AAIA,QAAM,CACLC,qBADK,EAEL;AAAEC,IAAAA,MAAM,EAAEC;AAAV,GAFK,IAGF,iCAHJ;AAIA,QAAMC,MAAM,GAAG,qBAAaC,MAAF,IAAc;AACvC,WAAOA,MAAM,CAAEC,YAAF,CAAN,CAAgBC,WAAhB,GAA8BH,MAArC;AACA,GAFc,EAEZ,EAFY,CAAf,CATqE,CAarE;;AACA,QAAMI,YAAY,GAAG,sBAAS,MAAM;AACnC,QAAKJ,MAAL,EAAc;AACb,aAAO,CACN,GAAGA,MADG,EAEN;AACCK,QAAAA,GAAG,EAAE,oCADN;AAECC,QAAAA,cAAc,EAAE;AAFjB,OAFM,CAAP;AAOA;;AAED,WAAON,MAAP;AACA,GAZoB,EAYlB,CAAEA,MAAF,CAZkB,CAArB,CAdqE,CA4BrE;;AACAX,EAAAA,iBAAiB,GAAGA,iBAAiB,IAAI,mBAAMkB,kBAAN,CAAzC;AAEA,QAAMC,KAAK,GAAGZ,cAAc,GAAGJ,aAA/B;AAEA,SACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACGE,uBADH,EAEC,4BAAC,oBAAD;AACC,IAAA,SAAS,EAAC,qCADX;AAEC,IAAA,KAAK,EAAG;AACPe,MAAAA,SAAS,EAAG,SAASD,KAAO,GADrB;AAEPV,MAAAA,MAAM,EAAEC,aAAa,GAAGS,KAFjB;AAGPE,MAAAA,SAAS,EACRX,aAAa,GAAGT,UAAhB,GACGA,UAAU,GAAGkB,KADhB,GAEGG;AANG;AAFT,KAWC,4BAAC,eAAD;AACC,IAAA,IAAI,EAAG,4BAAC,qBAAD;AAAc,MAAA,MAAM,EAAGP;AAAvB,MADR;AAEC,IAAA,UAAU,EAAG,2BAAgBQ,WAAF,IAAmB;AAC7C,YAAM;AACLC,QAAAA,aAAa,EAAE;AAAEC,UAAAA;AAAF;AADV,UAEFF,WAFJ;AAGAE,MAAAA,eAAe,CAACC,SAAhB,CAA0BC,GAA1B,CACC,4CADD;AAGAF,MAAAA,eAAe,CAACG,KAAhB,CAAsBC,QAAtB,GAAiC,UAAjC;AACAJ,MAAAA,eAAe,CAACG,KAAhB,CAAsBtB,KAAtB,GAA8B,MAA9B;AACAiB,MAAAA,WAAW,CAACK,KAAZ,CAAkBE,OAAlB,GACC1B,qBAAqB,GAAG,IADzB;AAEA,KAXY,EAWV,EAXU,CAFd;AAcC,uBAdD;AAeC,IAAA,QAAQ,EAAG,CAAC,CAfb;AAgBC,IAAA,KAAK,EAAG;AACPyB,MAAAA,QAAQ,EAAE,UADH;AAEPvB,MAAAA,KAAK,EAAEH,aAFA;AAGPM,MAAAA,MAAM,EAAEC,aAHD;AAIPqB,MAAAA,aAAa,EAAE,MAJR;AAKP;AACA;AACAV,MAAAA,SAAS,EAAEpB;AAPJ;AAhBT,KA0BGO,qBA1BH,EA2BC,4BAAC,iBAAD;AAAmB,IAAA,cAAc,EAAG;AAApC,IA3BD,CAXD,CAFD,CADD;AA8CA;;eAEcN,gB","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Disabled } from '@wordpress/components';\nimport { useResizeObserver, pure, useRefEffect } from '@wordpress/compose';\nimport { useSelect } from '@wordpress/data';\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport BlockList from '../block-list';\nimport Iframe from '../iframe';\nimport EditorStyles from '../editor-styles';\nimport { store } from '../../store';\n\n// This is used to avoid rendering the block list if the sizes change.\nlet MemoizedBlockList;\n\nconst MAX_HEIGHT = 2000;\n\nfunction AutoBlockPreview( { viewportWidth, __experimentalPadding } ) {\n\tconst [\n\t\tcontainerResizeListener,\n\t\t{ width: containerWidth },\n\t] = useResizeObserver();\n\tconst [\n\t\tcontentResizeListener,\n\t\t{ height: contentHeight },\n\t] = useResizeObserver();\n\tconst styles = useSelect( ( select ) => {\n\t\treturn select( store ).getSettings().styles;\n\t}, [] );\n\n\t// Avoid scrollbars for pattern previews.\n\tconst editorStyles = useMemo( () => {\n\t\tif ( styles ) {\n\t\t\treturn [\n\t\t\t\t...styles,\n\t\t\t\t{\n\t\t\t\t\tcss: 'body{height:auto;overflow:hidden;}',\n\t\t\t\t\t__unstableType: 'presets',\n\t\t\t\t},\n\t\t\t];\n\t\t}\n\n\t\treturn styles;\n\t}, [ styles ] );\n\n\t// Initialize on render instead of module top level, to avoid circular dependency issues.\n\tMemoizedBlockList = MemoizedBlockList || pure( BlockList );\n\n\tconst scale = containerWidth / viewportWidth;\n\n\treturn (\n\t\t<div className=\"block-editor-block-preview__container\">\n\t\t\t{ containerResizeListener }\n\t\t\t<Disabled\n\t\t\t\tclassName=\"block-editor-block-preview__content\"\n\t\t\t\tstyle={ {\n\t\t\t\t\ttransform: `scale(${ scale })`,\n\t\t\t\t\theight: contentHeight * scale,\n\t\t\t\t\tmaxHeight:\n\t\t\t\t\t\tcontentHeight > MAX_HEIGHT\n\t\t\t\t\t\t\t? MAX_HEIGHT * scale\n\t\t\t\t\t\t\t: undefined,\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<Iframe\n\t\t\t\t\thead={ <EditorStyles styles={ editorStyles } /> }\n\t\t\t\t\tcontentRef={ useRefEffect( ( bodyElement ) => {\n\t\t\t\t\t\tconst {\n\t\t\t\t\t\t\townerDocument: { documentElement },\n\t\t\t\t\t\t} = bodyElement;\n\t\t\t\t\t\tdocumentElement.classList.add(\n\t\t\t\t\t\t\t'block-editor-block-preview__content-iframe'\n\t\t\t\t\t\t);\n\t\t\t\t\t\tdocumentElement.style.position = 'absolute';\n\t\t\t\t\t\tdocumentElement.style.width = '100%';\n\t\t\t\t\t\tbodyElement.style.padding =\n\t\t\t\t\t\t\t__experimentalPadding + 'px';\n\t\t\t\t\t}, [] ) }\n\t\t\t\t\taria-hidden\n\t\t\t\t\ttabIndex={ -1 }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\twidth: viewportWidth,\n\t\t\t\t\t\theight: contentHeight,\n\t\t\t\t\t\tpointerEvents: 'none',\n\t\t\t\t\t\t// This is a catch-all max-height for patterns.\n\t\t\t\t\t\t// See: https://github.com/WordPress/gutenberg/pull/38175.\n\t\t\t\t\t\tmaxHeight: MAX_HEIGHT,\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t{ contentResizeListener }\n\t\t\t\t\t<MemoizedBlockList renderAppender={ false } />\n\t\t\t\t</Iframe>\n\t\t\t</Disabled>\n\t\t</div>\n\t);\n}\n\nexport default AutoBlockPreview;\n"]}
|
|
@@ -6,6 +6,7 @@ import { createElement } from "@wordpress/element";
|
|
|
6
6
|
import { Disabled } from '@wordpress/components';
|
|
7
7
|
import { useResizeObserver, pure, useRefEffect } from '@wordpress/compose';
|
|
8
8
|
import { useSelect } from '@wordpress/data';
|
|
9
|
+
import { useMemo } from '@wordpress/element';
|
|
9
10
|
/**
|
|
10
11
|
* Internal dependencies
|
|
11
12
|
*/
|
|
@@ -16,6 +17,7 @@ import EditorStyles from '../editor-styles';
|
|
|
16
17
|
import { store } from '../../store'; // This is used to avoid rendering the block list if the sizes change.
|
|
17
18
|
|
|
18
19
|
let MemoizedBlockList;
|
|
20
|
+
const MAX_HEIGHT = 2000;
|
|
19
21
|
|
|
20
22
|
function AutoBlockPreview(_ref) {
|
|
21
23
|
let {
|
|
@@ -30,7 +32,18 @@ function AutoBlockPreview(_ref) {
|
|
|
30
32
|
}] = useResizeObserver();
|
|
31
33
|
const styles = useSelect(select => {
|
|
32
34
|
return select(store).getSettings().styles;
|
|
33
|
-
}, []); //
|
|
35
|
+
}, []); // Avoid scrollbars for pattern previews.
|
|
36
|
+
|
|
37
|
+
const editorStyles = useMemo(() => {
|
|
38
|
+
if (styles) {
|
|
39
|
+
return [...styles, {
|
|
40
|
+
css: 'body{height:auto;overflow:hidden;}',
|
|
41
|
+
__unstableType: 'presets'
|
|
42
|
+
}];
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
return styles;
|
|
46
|
+
}, [styles]); // Initialize on render instead of module top level, to avoid circular dependency issues.
|
|
34
47
|
|
|
35
48
|
MemoizedBlockList = MemoizedBlockList || pure(BlockList);
|
|
36
49
|
const scale = containerWidth / viewportWidth;
|
|
@@ -40,11 +53,12 @@ function AutoBlockPreview(_ref) {
|
|
|
40
53
|
className: "block-editor-block-preview__content",
|
|
41
54
|
style: {
|
|
42
55
|
transform: `scale(${scale})`,
|
|
43
|
-
height: contentHeight * scale
|
|
56
|
+
height: contentHeight * scale,
|
|
57
|
+
maxHeight: contentHeight > MAX_HEIGHT ? MAX_HEIGHT * scale : undefined
|
|
44
58
|
}
|
|
45
59
|
}, createElement(Iframe, {
|
|
46
60
|
head: createElement(EditorStyles, {
|
|
47
|
-
styles:
|
|
61
|
+
styles: editorStyles
|
|
48
62
|
}),
|
|
49
63
|
contentRef: useRefEffect(bodyElement => {
|
|
50
64
|
const {
|
|
@@ -63,7 +77,10 @@ function AutoBlockPreview(_ref) {
|
|
|
63
77
|
position: 'absolute',
|
|
64
78
|
width: viewportWidth,
|
|
65
79
|
height: contentHeight,
|
|
66
|
-
pointerEvents: 'none'
|
|
80
|
+
pointerEvents: 'none',
|
|
81
|
+
// This is a catch-all max-height for patterns.
|
|
82
|
+
// See: https://github.com/WordPress/gutenberg/pull/38175.
|
|
83
|
+
maxHeight: MAX_HEIGHT
|
|
67
84
|
}
|
|
68
85
|
}, contentResizeListener, createElement(MemoizedBlockList, {
|
|
69
86
|
renderAppender: false
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/block-editor/src/components/block-preview/auto.js"],"names":["Disabled","useResizeObserver","pure","useRefEffect","useSelect","BlockList","Iframe","EditorStyles","store","MemoizedBlockList","AutoBlockPreview","viewportWidth","__experimentalPadding","containerResizeListener","width","containerWidth","contentResizeListener","height","contentHeight","styles","select","getSettings","scale","transform","bodyElement","ownerDocument","documentElement","classList","add","style","position","padding","pointerEvents"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,QAAT,QAAyB,uBAAzB;AACA,SAASC,iBAAT,EAA4BC,IAA5B,EAAkCC,YAAlC,QAAsD,oBAAtD;AACA,SAASC,SAAT,QAA0B,iBAA1B;AAEA;AACA;AACA;;AACA,OAAOC,SAAP,MAAsB,eAAtB;AACA,OAAOC,MAAP,MAAmB,WAAnB;AACA,OAAOC,YAAP,MAAyB,kBAAzB;AACA,SAASC,KAAT,QAAsB,aAAtB,C,CAEA;;AACA,IAAIC,iBAAJ;;AAEA,SAASC,gBAAT,OAAsE;AAAA,MAA3C;AAAEC,IAAAA,aAAF;AAAiBC,IAAAA;AAAjB,GAA2C;AACrE,QAAM,CACLC,uBADK,EAEL;AAAEC,IAAAA,KAAK,EAAEC;AAAT,GAFK,
|
|
1
|
+
{"version":3,"sources":["@wordpress/block-editor/src/components/block-preview/auto.js"],"names":["Disabled","useResizeObserver","pure","useRefEffect","useSelect","useMemo","BlockList","Iframe","EditorStyles","store","MemoizedBlockList","MAX_HEIGHT","AutoBlockPreview","viewportWidth","__experimentalPadding","containerResizeListener","width","containerWidth","contentResizeListener","height","contentHeight","styles","select","getSettings","editorStyles","css","__unstableType","scale","transform","maxHeight","undefined","bodyElement","ownerDocument","documentElement","classList","add","style","position","padding","pointerEvents"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Disabled } from '@wordpress/components';\nimport { useResizeObserver, pure, useRefEffect } from '@wordpress/compose';\nimport { useSelect } from '@wordpress/data';\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport BlockList from '../block-list';\nimport Iframe from '../iframe';\nimport EditorStyles from '../editor-styles';\nimport { store } from '../../store';\n\n// This is used to avoid rendering the block list if the sizes change.\nlet MemoizedBlockList;\n\nconst MAX_HEIGHT = 2000;\n\nfunction AutoBlockPreview( { viewportWidth, __experimentalPadding } ) {\n\tconst [\n\t\tcontainerResizeListener,\n\t\t{ width: containerWidth },\n\t] = useResizeObserver();\n\tconst [\n\t\tcontentResizeListener,\n\t\t{ height: contentHeight },\n\t] = useResizeObserver();\n\tconst styles = useSelect( ( select ) => {\n\t\treturn select( store ).getSettings().styles;\n\t}, [] );\n\n\t// Avoid scrollbars for pattern previews.\n\tconst editorStyles = useMemo( () => {\n\t\tif ( styles ) {\n\t\t\treturn [\n\t\t\t\t...styles,\n\t\t\t\t{\n\t\t\t\t\tcss: 'body{height:auto;overflow:hidden;}',\n\t\t\t\t\t__unstableType: 'presets',\n\t\t\t\t},\n\t\t\t];\n\t\t}\n\n\t\treturn styles;\n\t}, [ styles ] );\n\n\t// Initialize on render instead of module top level, to avoid circular dependency issues.\n\tMemoizedBlockList = MemoizedBlockList || pure( BlockList );\n\n\tconst scale = containerWidth / viewportWidth;\n\n\treturn (\n\t\t<div className=\"block-editor-block-preview__container\">\n\t\t\t{ containerResizeListener }\n\t\t\t<Disabled\n\t\t\t\tclassName=\"block-editor-block-preview__content\"\n\t\t\t\tstyle={ {\n\t\t\t\t\ttransform: `scale(${ scale })`,\n\t\t\t\t\theight: contentHeight * scale,\n\t\t\t\t\tmaxHeight:\n\t\t\t\t\t\tcontentHeight > MAX_HEIGHT\n\t\t\t\t\t\t\t? MAX_HEIGHT * scale\n\t\t\t\t\t\t\t: undefined,\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<Iframe\n\t\t\t\t\thead={ <EditorStyles styles={ editorStyles } /> }\n\t\t\t\t\tcontentRef={ useRefEffect( ( bodyElement ) => {\n\t\t\t\t\t\tconst {\n\t\t\t\t\t\t\townerDocument: { documentElement },\n\t\t\t\t\t\t} = bodyElement;\n\t\t\t\t\t\tdocumentElement.classList.add(\n\t\t\t\t\t\t\t'block-editor-block-preview__content-iframe'\n\t\t\t\t\t\t);\n\t\t\t\t\t\tdocumentElement.style.position = 'absolute';\n\t\t\t\t\t\tdocumentElement.style.width = '100%';\n\t\t\t\t\t\tbodyElement.style.padding =\n\t\t\t\t\t\t\t__experimentalPadding + 'px';\n\t\t\t\t\t}, [] ) }\n\t\t\t\t\taria-hidden\n\t\t\t\t\ttabIndex={ -1 }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\twidth: viewportWidth,\n\t\t\t\t\t\theight: contentHeight,\n\t\t\t\t\t\tpointerEvents: 'none',\n\t\t\t\t\t\t// This is a catch-all max-height for patterns.\n\t\t\t\t\t\t// See: https://github.com/WordPress/gutenberg/pull/38175.\n\t\t\t\t\t\tmaxHeight: MAX_HEIGHT,\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t{ contentResizeListener }\n\t\t\t\t\t<MemoizedBlockList renderAppender={ false } />\n\t\t\t\t</Iframe>\n\t\t\t</Disabled>\n\t\t</div>\n\t);\n}\n\nexport default AutoBlockPreview;\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wordpress/block-editor",
|
|
3
|
-
"version": "8.0.
|
|
3
|
+
"version": "8.0.16",
|
|
4
4
|
"description": "Generic block editor.",
|
|
5
5
|
"author": "The WordPress Contributors",
|
|
6
6
|
"license": "GPL-2.0-or-later",
|
|
@@ -75,5 +75,5 @@
|
|
|
75
75
|
"publishConfig": {
|
|
76
76
|
"access": "public"
|
|
77
77
|
},
|
|
78
|
-
"gitHead": "
|
|
78
|
+
"gitHead": "cac1a1f3c854fc282d67b91a74936c3fe42d7d0a"
|
|
79
79
|
}
|
|
@@ -4,6 +4,7 @@
|
|
|
4
4
|
import { Disabled } from '@wordpress/components';
|
|
5
5
|
import { useResizeObserver, pure, useRefEffect } from '@wordpress/compose';
|
|
6
6
|
import { useSelect } from '@wordpress/data';
|
|
7
|
+
import { useMemo } from '@wordpress/element';
|
|
7
8
|
|
|
8
9
|
/**
|
|
9
10
|
* Internal dependencies
|
|
@@ -16,6 +17,8 @@ import { store } from '../../store';
|
|
|
16
17
|
// This is used to avoid rendering the block list if the sizes change.
|
|
17
18
|
let MemoizedBlockList;
|
|
18
19
|
|
|
20
|
+
const MAX_HEIGHT = 2000;
|
|
21
|
+
|
|
19
22
|
function AutoBlockPreview( { viewportWidth, __experimentalPadding } ) {
|
|
20
23
|
const [
|
|
21
24
|
containerResizeListener,
|
|
@@ -29,6 +32,21 @@ function AutoBlockPreview( { viewportWidth, __experimentalPadding } ) {
|
|
|
29
32
|
return select( store ).getSettings().styles;
|
|
30
33
|
}, [] );
|
|
31
34
|
|
|
35
|
+
// Avoid scrollbars for pattern previews.
|
|
36
|
+
const editorStyles = useMemo( () => {
|
|
37
|
+
if ( styles ) {
|
|
38
|
+
return [
|
|
39
|
+
...styles,
|
|
40
|
+
{
|
|
41
|
+
css: 'body{height:auto;overflow:hidden;}',
|
|
42
|
+
__unstableType: 'presets',
|
|
43
|
+
},
|
|
44
|
+
];
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
return styles;
|
|
48
|
+
}, [ styles ] );
|
|
49
|
+
|
|
32
50
|
// Initialize on render instead of module top level, to avoid circular dependency issues.
|
|
33
51
|
MemoizedBlockList = MemoizedBlockList || pure( BlockList );
|
|
34
52
|
|
|
@@ -42,10 +60,14 @@ function AutoBlockPreview( { viewportWidth, __experimentalPadding } ) {
|
|
|
42
60
|
style={ {
|
|
43
61
|
transform: `scale(${ scale })`,
|
|
44
62
|
height: contentHeight * scale,
|
|
63
|
+
maxHeight:
|
|
64
|
+
contentHeight > MAX_HEIGHT
|
|
65
|
+
? MAX_HEIGHT * scale
|
|
66
|
+
: undefined,
|
|
45
67
|
} }
|
|
46
68
|
>
|
|
47
69
|
<Iframe
|
|
48
|
-
head={ <EditorStyles styles={
|
|
70
|
+
head={ <EditorStyles styles={ editorStyles } /> }
|
|
49
71
|
contentRef={ useRefEffect( ( bodyElement ) => {
|
|
50
72
|
const {
|
|
51
73
|
ownerDocument: { documentElement },
|
|
@@ -65,6 +87,9 @@ function AutoBlockPreview( { viewportWidth, __experimentalPadding } ) {
|
|
|
65
87
|
width: viewportWidth,
|
|
66
88
|
height: contentHeight,
|
|
67
89
|
pointerEvents: 'none',
|
|
90
|
+
// This is a catch-all max-height for patterns.
|
|
91
|
+
// See: https://github.com/WordPress/gutenberg/pull/38175.
|
|
92
|
+
maxHeight: MAX_HEIGHT,
|
|
68
93
|
} }
|
|
69
94
|
>
|
|
70
95
|
{ contentResizeListener }
|