@wordpress/editor 13.34.0 → 14.0.0

package/build-module/components/template-validation-notice/index.js

@@ -1,4 +1,3 @@
-import { createElement, Fragment } from "react";
 /**
  * WordPress dependencies
  */
@@ -7,6 +6,9 @@ import { __ } from '@wordpress/i18n';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useState } from '@wordpress/element';
 import { store as blockEditorStore } from '@wordpress/block-editor';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 export default function TemplateValidationNotice() {
   const [showConfirmDialog, setShowConfirmDialog] = useState(false);
   const isValid = useSelect(select => {
@@ -19,25 +21,29 @@ export default function TemplateValidationNotice() {
   if (isValid) {
     return null;
   }
-  return createElement(Fragment, null, createElement(Notice, {
-    className: "editor-template-validation-notice",
-    isDismissible: false,
-    status: "warning",
-    actions: [{
-      label: __('Keep it as is'),
-      onClick: () => setTemplateValidity(true)
-    }, {
-      label: __('Reset the template'),
-      onClick: () => setShowConfirmDialog(true)
-    }]
-  }, __('The content of your post doesn’t match the template assigned to your post type.')), createElement(ConfirmDialog, {
-    isOpen: showConfirmDialog,
-    confirmButtonText: __('Reset'),
-    onConfirm: () => {
-      setShowConfirmDialog(false);
-      synchronizeTemplate();
-    },
-    onCancel: () => setShowConfirmDialog(false)
-  }, __('Resetting the template may result in loss of content, do you want to continue?')));
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Notice, {
+      className: "editor-template-validation-notice",
+      isDismissible: false,
+      status: "warning",
+      actions: [{
+        label: __('Keep it as is'),
+        onClick: () => setTemplateValidity(true)
+      }, {
+        label: __('Reset the template'),
+        onClick: () => setShowConfirmDialog(true)
+      }],
+      children: __('The content of your post doesn’t match the template assigned to your post type.')
+    }), /*#__PURE__*/_jsx(ConfirmDialog, {
+      isOpen: showConfirmDialog,
+      confirmButtonText: __('Reset'),
+      onConfirm: () => {
+        setShowConfirmDialog(false);
+        synchronizeTemplate();
+      },
+      onCancel: () => setShowConfirmDialog(false),
+      children: __('Resetting the template may result in loss of content, do you want to continue?')
+    })]
+  });
 }
 //# sourceMappingURL=index.js.map

package/build-module/components/template-validation-notice/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["Notice","__experimentalConfirmDialog","ConfirmDialog","__","useDispatch","useSelect","useState","store","blockEditorStore","TemplateValidationNotice","showConfirmDialog","setShowConfirmDialog","isValid","select","isValidTemplate","setTemplateValidity","synchronizeTemplate","createElement","Fragment","className","isDismissible","status","actions","label","onClick","isOpen","confirmButtonText","onConfirm","onCancel"],"sources":["@wordpress/editor/src/components/template-validation-notice/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tNotice,\n\t__experimentalConfirmDialog as ConfirmDialog,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { useState } from '@wordpress/element';\nimport { store as blockEditorStore } from '@wordpress/block-editor';\n\nexport default function TemplateValidationNotice() {\n\tconst [ showConfirmDialog, setShowConfirmDialog ] = useState( false );\n\tconst isValid = useSelect( ( select ) => {\n\t\treturn select( blockEditorStore ).isValidTemplate();\n\t}, [] );\n\tconst { setTemplateValidity, synchronizeTemplate } =\n\t\tuseDispatch( blockEditorStore );\n\n\tif ( isValid ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<Notice\n\t\t\t\tclassName=\"editor-template-validation-notice\"\n\t\t\t\tisDismissible={ false }\n\t\t\t\tstatus=\"warning\"\n\t\t\t\tactions={ [\n\t\t\t\t\t{\n\t\t\t\t\t\tlabel: __( 'Keep it as is' ),\n\t\t\t\t\t\tonClick: () => setTemplateValidity( true ),\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tlabel: __( 'Reset the template' ),\n\t\t\t\t\t\tonClick: () => setShowConfirmDialog( true ),\n\t\t\t\t\t},\n\t\t\t\t] }\n\t\t\t>\n\t\t\t\t{ __(\n\t\t\t\t\t'The content of your post doesn’t match the template assigned to your post type.'\n\t\t\t\t) }\n\t\t\t</Notice>\n\t\t\t<ConfirmDialog\n\t\t\t\tisOpen={ showConfirmDialog }\n\t\t\t\tconfirmButtonText={ __( 'Reset' ) }\n\t\t\t\tonConfirm={ () => {\n\t\t\t\t\tsetShowConfirmDialog( false );\n\t\t\t\t\tsynchronizeTemplate();\n\t\t\t\t} }\n\t\t\t\tonCancel={ () => setShowConfirmDialog( false ) }\n\t\t\t>\n\t\t\t\t{ __(\n\t\t\t\t\t'Resetting the template may result in loss of content, do you want to continue?'\n\t\t\t\t) }\n\t\t\t</ConfirmDialog>\n\t\t</>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SACCA,MAAM,EACNC,2BAA2B,IAAIC,aAAa,QACtC,uBAAuB;AAC9B,SAASC,EAAE,QAAQ,iBAAiB;AACpC,SAASC,WAAW,EAAEC,SAAS,QAAQ,iBAAiB;AACxD,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,KAAK,IAAIC,gBAAgB,QAAQ,yBAAyB;AAEnE,eAAe,SAASC,wBAAwBA,CAAA,EAAG;EAClD,MAAM,CAAEC,iBAAiB,EAAEC,oBAAoB,CAAE,GAAGL,QAAQ,CAAE,KAAM,CAAC;EACrE,MAAMM,OAAO,GAAGP,SAAS,CAAIQ,MAAM,IAAM;IACxC,OAAOA,MAAM,CAAEL,gBAAiB,CAAC,CAACM,eAAe,CAAC,CAAC;EACpD,CAAC,EAAE,EAAG,CAAC;EACP,MAAM;IAAEC,mBAAmB;IAAEC;EAAoB,CAAC,GACjDZ,WAAW,CAAEI,gBAAiB,CAAC;EAEhC,IAAKI,OAAO,EAAG;IACd,OAAO,IAAI;EACZ;EAEA,OACCK,aAAA,CAAAC,QAAA,QACCD,aAAA,CAACjB,MAAM;IACNmB,SAAS,EAAC,mCAAmC;IAC7CC,aAAa,EAAG,KAAO;IACvBC,MAAM,EAAC,SAAS;IAChBC,OAAO,EAAG,CACT;MACCC,KAAK,EAAEpB,EAAE,CAAE,eAAgB,CAAC;MAC5BqB,OAAO,EAAEA,CAAA,KAAMT,mBAAmB,CAAE,IAAK;IAC1C,CAAC,EACD;MACCQ,KAAK,EAAEpB,EAAE,CAAE,oBAAqB,CAAC;MACjCqB,OAAO,EAAEA,CAAA,KAAMb,oBAAoB,CAAE,IAAK;IAC3C,CAAC;EACC,GAEDR,EAAE,CACH,iFACD,CACO,CAAC,EACTc,aAAA,CAACf,aAAa;IACbuB,MAAM,EAAGf,iBAAmB;IAC5BgB,iBAAiB,EAAGvB,EAAE,CAAE,OAAQ,CAAG;IACnCwB,SAAS,EAAGA,CAAA,KAAM;MACjBhB,oBAAoB,CAAE,KAAM,CAAC;MAC7BK,mBAAmB,CAAC,CAAC;IACtB,CAAG;IACHY,QAAQ,EAAGA,CAAA,KAAMjB,oBAAoB,CAAE,KAAM;EAAG,GAE9CR,EAAE,CACH,gFACD,CACc,CACd,CAAC;AAEL","ignoreList":[]}
+{"version":3,"names":["Notice","__experimentalConfirmDialog","ConfirmDialog","__","useDispatch","useSelect","useState","store","blockEditorStore","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","TemplateValidationNotice","showConfirmDialog","setShowConfirmDialog","isValid","select","isValidTemplate","setTemplateValidity","synchronizeTemplate","children","className","isDismissible","status","actions","label","onClick","isOpen","confirmButtonText","onConfirm","onCancel"],"sources":["@wordpress/editor/src/components/template-validation-notice/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tNotice,\n\t__experimentalConfirmDialog as ConfirmDialog,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { useState } from '@wordpress/element';\nimport { store as blockEditorStore } from '@wordpress/block-editor';\n\nexport default function TemplateValidationNotice() {\n\tconst [ showConfirmDialog, setShowConfirmDialog ] = useState( false );\n\tconst isValid = useSelect( ( select ) => {\n\t\treturn select( blockEditorStore ).isValidTemplate();\n\t}, [] );\n\tconst { setTemplateValidity, synchronizeTemplate } =\n\t\tuseDispatch( blockEditorStore );\n\n\tif ( isValid ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<Notice\n\t\t\t\tclassName=\"editor-template-validation-notice\"\n\t\t\t\tisDismissible={ false }\n\t\t\t\tstatus=\"warning\"\n\t\t\t\tactions={ [\n\t\t\t\t\t{\n\t\t\t\t\t\tlabel: __( 'Keep it as is' ),\n\t\t\t\t\t\tonClick: () => setTemplateValidity( true ),\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tlabel: __( 'Reset the template' ),\n\t\t\t\t\t\tonClick: () => setShowConfirmDialog( true ),\n\t\t\t\t\t},\n\t\t\t\t] }\n\t\t\t>\n\t\t\t\t{ __(\n\t\t\t\t\t'The content of your post doesn’t match the template assigned to your post type.'\n\t\t\t\t) }\n\t\t\t</Notice>\n\t\t\t<ConfirmDialog\n\t\t\t\tisOpen={ showConfirmDialog }\n\t\t\t\tconfirmButtonText={ __( 'Reset' ) }\n\t\t\t\tonConfirm={ () => {\n\t\t\t\t\tsetShowConfirmDialog( false );\n\t\t\t\t\tsynchronizeTemplate();\n\t\t\t\t} }\n\t\t\t\tonCancel={ () => setShowConfirmDialog( false ) }\n\t\t\t>\n\t\t\t\t{ __(\n\t\t\t\t\t'Resetting the template may result in loss of content, do you want to continue?'\n\t\t\t\t) }\n\t\t\t</ConfirmDialog>\n\t\t</>\n\t);\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SACCA,MAAM,EACNC,2BAA2B,IAAIC,aAAa,QACtC,uBAAuB;AAC9B,SAASC,EAAE,QAAQ,iBAAiB;AACpC,SAASC,WAAW,EAAEC,SAAS,QAAQ,iBAAiB;AACxD,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,KAAK,IAAIC,gBAAgB,QAAQ,yBAAyB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,QAAA,IAAAC,SAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAEpE,eAAe,SAASC,wBAAwBA,CAAA,EAAG;EAClD,MAAM,CAAEC,iBAAiB,EAAEC,oBAAoB,CAAE,GAAGX,QAAQ,CAAE,KAAM,CAAC;EACrE,MAAMY,OAAO,GAAGb,SAAS,CAAIc,MAAM,IAAM;IACxC,OAAOA,MAAM,CAAEX,gBAAiB,CAAC,CAACY,eAAe,CAAC,CAAC;EACpD,CAAC,EAAE,EAAG,CAAC;EACP,MAAM;IAAEC,mBAAmB;IAAEC;EAAoB,CAAC,GACjDlB,WAAW,CAAEI,gBAAiB,CAAC;EAEhC,IAAKU,OAAO,EAAG;IACd,OAAO,IAAI;EACZ;EAEA,oBACCJ,KAAA,CAAAF,SAAA;IAAAW,QAAA,gBACCb,IAAA,CAACV,MAAM;MACNwB,SAAS,EAAC,mCAAmC;MAC7CC,aAAa,EAAG,KAAO;MACvBC,MAAM,EAAC,SAAS;MAChBC,OAAO,EAAG,CACT;QACCC,KAAK,EAAEzB,EAAE,CAAE,eAAgB,CAAC;QAC5B0B,OAAO,EAAEA,CAAA,KAAMR,mBAAmB,CAAE,IAAK;MAC1C,CAAC,EACD;QACCO,KAAK,EAAEzB,EAAE,CAAE,oBAAqB,CAAC;QACjC0B,OAAO,EAAEA,CAAA,KAAMZ,oBAAoB,CAAE,IAAK;MAC3C,CAAC,CACC;MAAAM,QAAA,EAEDpB,EAAE,CACH,iFACD;IAAC,CACM,CAAC,eACTO,IAAA,CAACR,aAAa;MACb4B,MAAM,EAAGd,iBAAmB;MAC5Be,iBAAiB,EAAG5B,EAAE,CAAE,OAAQ,CAAG;MACnC6B,SAAS,EAAGA,CAAA,KAAM;QACjBf,oBAAoB,CAAE,KAAM,CAAC;QAC7BK,mBAAmB,CAAC,CAAC;MACtB,CAAG;MACHW,QAAQ,EAAGA,CAAA,KAAMhB,oBAAoB,CAAE,KAAM,CAAG;MAAAM,QAAA,EAE9CpB,EAAE,CACH,gFACD;IAAC,CACa,CAAC;EAAA,CACf,CAAC;AAEL","ignoreList":[]}

package/build-module/components/text-editor/index.js

@@ -0,0 +1,66 @@
+/**
+ * WordPress dependencies
+ */
+import { Button } from '@wordpress/components';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+import { useEffect, useRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import PostTextEditor from '../post-text-editor';
+import PostTitleRaw from '../post-title/post-title-raw';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function TextEditor({
+  autoFocus = false
+}) {
+  const {
+    switchEditorMode
+  } = useDispatch(editorStore);
+  const {
+    shortcut,
+    isRichEditingEnabled
+  } = useSelect(select => {
+    const {
+      getEditorSettings
+    } = select(editorStore);
+    const {
+      getShortcutRepresentation
+    } = select(keyboardShortcutsStore);
+    return {
+      shortcut: getShortcutRepresentation('core/editor/toggle-mode'),
+      isRichEditingEnabled: getEditorSettings().richEditingEnabled
+    };
+  }, []);
+  const titleRef = useRef();
+  useEffect(() => {
+    if (autoFocus) {
+      return;
+    }
+    titleRef?.current?.focus();
+  }, [autoFocus]);
+  return /*#__PURE__*/_jsxs("div", {
+    className: "editor-text-editor",
+    children: [isRichEditingEnabled && /*#__PURE__*/_jsxs("div", {
+      className: "editor-text-editor__toolbar",
+      children: [/*#__PURE__*/_jsx("h2", {
+        children: __('Editing code')
+      }), /*#__PURE__*/_jsx(Button, {
+        variant: "tertiary",
+        onClick: () => switchEditorMode('visual'),
+        shortcut: shortcut,
+        children: __('Exit code editor')
+      })]
+    }), /*#__PURE__*/_jsxs("div", {
+      className: "editor-text-editor__body",
+      children: [/*#__PURE__*/_jsx(PostTitleRaw, {
+        ref: titleRef
+      }), /*#__PURE__*/_jsx(PostTextEditor, {})]
+    })]
+  });
+}
+//# sourceMappingURL=index.js.map

package/build-module/components/text-editor/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Button","useDispatch","useSelect","__","store","keyboardShortcutsStore","useEffect","useRef","editorStore","PostTextEditor","PostTitleRaw","jsx","_jsx","jsxs","_jsxs","TextEditor","autoFocus","switchEditorMode","shortcut","isRichEditingEnabled","select","getEditorSettings","getShortcutRepresentation","richEditingEnabled","titleRef","current","focus","className","children","variant","onClick","ref"],"sources":["@wordpress/editor/src/components/text-editor/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Button } from '@wordpress/components';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { __ } from '@wordpress/i18n';\nimport { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';\nimport { useEffect, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { store as editorStore } from '../../store';\nimport PostTextEditor from '../post-text-editor';\nimport PostTitleRaw from '../post-title/post-title-raw';\n\nexport default function TextEditor( { autoFocus = false } ) {\n\tconst { switchEditorMode } = useDispatch( editorStore );\n\tconst { shortcut, isRichEditingEnabled } = useSelect( ( select ) => {\n\t\tconst { getEditorSettings } = select( editorStore );\n\t\tconst { getShortcutRepresentation } = select( keyboardShortcutsStore );\n\n\t\treturn {\n\t\t\tshortcut: getShortcutRepresentation( 'core/editor/toggle-mode' ),\n\t\t\tisRichEditingEnabled: getEditorSettings().richEditingEnabled,\n\t\t};\n\t}, [] );\n\n\tconst titleRef = useRef();\n\tuseEffect( () => {\n\t\tif ( autoFocus ) {\n\t\t\treturn;\n\t\t}\n\t\ttitleRef?.current?.focus();\n\t}, [ autoFocus ] );\n\n\treturn (\n\t\t<div className=\"editor-text-editor\">\n\t\t\t{ isRichEditingEnabled && (\n\t\t\t\t<div className=\"editor-text-editor__toolbar\">\n\t\t\t\t\t<h2>{ __( 'Editing code' ) }</h2>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\tonClick={ () => switchEditorMode( 'visual' ) }\n\t\t\t\t\t\tshortcut={ shortcut }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Exit code editor' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t<div className=\"editor-text-editor__body\">\n\t\t\t\t<PostTitleRaw ref={ titleRef } />\n\t\t\t\t<PostTextEditor />\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,WAAW,EAAEC,SAAS,QAAQ,iBAAiB;AACxD,SAASC,EAAE,QAAQ,iBAAiB;AACpC,SAASC,KAAK,IAAIC,sBAAsB,QAAQ,+BAA+B;AAC/E,SAASC,SAAS,EAAEC,MAAM,QAAQ,oBAAoB;;AAEtD;AACA;AACA;AACA,SAASH,KAAK,IAAII,WAAW,QAAQ,aAAa;AAClD,OAAOC,cAAc,MAAM,qBAAqB;AAChD,OAAOC,YAAY,MAAM,8BAA8B;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAExD,eAAe,SAASC,UAAUA,CAAE;EAAEC,SAAS,GAAG;AAAM,CAAC,EAAG;EAC3D,MAAM;IAAEC;EAAiB,CAAC,GAAGhB,WAAW,CAAEO,WAAY,CAAC;EACvD,MAAM;IAAEU,QAAQ;IAAEC;EAAqB,CAAC,GAAGjB,SAAS,CAAIkB,MAAM,IAAM;IACnE,MAAM;MAAEC;IAAkB,CAAC,GAAGD,MAAM,CAAEZ,WAAY,CAAC;IACnD,MAAM;MAAEc;IAA0B,CAAC,GAAGF,MAAM,CAAEf,sBAAuB,CAAC;IAEtE,OAAO;MACNa,QAAQ,EAAEI,yBAAyB,CAAE,yBAA0B,CAAC;MAChEH,oBAAoB,EAAEE,iBAAiB,CAAC,CAAC,CAACE;IAC3C,CAAC;EACF,CAAC,EAAE,EAAG,CAAC;EAEP,MAAMC,QAAQ,GAAGjB,MAAM,CAAC,CAAC;EACzBD,SAAS,CAAE,MAAM;IAChB,IAAKU,SAAS,EAAG;MAChB;IACD;IACAQ,QAAQ,EAAEC,OAAO,EAAEC,KAAK,CAAC,CAAC;EAC3B,CAAC,EAAE,CAAEV,SAAS,CAAG,CAAC;EAElB,oBACCF,KAAA;IAAKa,SAAS,EAAC,oBAAoB;IAAAC,QAAA,GAChCT,oBAAoB,iBACrBL,KAAA;MAAKa,SAAS,EAAC,6BAA6B;MAAAC,QAAA,gBAC3ChB,IAAA;QAAAgB,QAAA,EAAMzB,EAAE,CAAE,cAAe;MAAC,CAAM,CAAC,eACjCS,IAAA,CAACZ,MAAM;QACN6B,OAAO,EAAC,UAAU;QAClBC,OAAO,EAAGA,CAAA,KAAMb,gBAAgB,CAAE,QAAS,CAAG;QAC9CC,QAAQ,EAAGA,QAAU;QAAAU,QAAA,EAEnBzB,EAAE,CAAE,kBAAmB;MAAC,CACnB,CAAC;IAAA,CACL,CACL,eACDW,KAAA;MAAKa,SAAS,EAAC,0BAA0B;MAAAC,QAAA,gBACxChB,IAAA,CAACF,YAAY;QAACqB,GAAG,EAAGP;MAAU,CAAE,CAAC,eACjCZ,IAAA,CAACH,cAAc,IAAE,CAAC;IAAA,CACd,CAAC;EAAA,CACF,CAAC;AAER","ignoreList":[]}

package/build-module/components/time-to-read/index.js

@@ -1,4 +1,3 @@
-import { createElement } from "react";
 /**
  * WordPress dependencies
  */
@@ -19,6 +18,7 @@ import { store as editorStore } from '../../store';
  *
  * @type {number} A rough estimate of the average reading rate across multiple languages.
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const AVERAGE_READING_RATE = 189;
 export default function TimeToRead() {
   const content = useSelect(select => select(editorStore).getEditedPostAttribute('content'), []);
@@ -31,13 +31,14 @@ export default function TimeToRead() {
   const wordCountType = _x('words', 'Word count type. Do not translate!');
   const minutesToRead = Math.round(wordCount(content, wordCountType) / AVERAGE_READING_RATE);
   const minutesToReadString = minutesToRead === 0 ? createInterpolateElement(__('<span>< 1</span> minute'), {
-    span: createElement("span", null)
+    span: /*#__PURE__*/_jsx("span", {})
   }) : createInterpolateElement(sprintf( /* translators: %s is the number of minutes the post will take to read. */
   _n('<span>%d</span> minute', '<span>%d</span> minutes', minutesToRead), minutesToRead), {
-    span: createElement("span", null)
+    span: /*#__PURE__*/_jsx("span", {})
+  });
+  return /*#__PURE__*/_jsx("span", {
+    className: "time-to-read",
+    children: minutesToReadString
   });
-  return createElement("span", {
-    className: "time-to-read"
-  }, minutesToReadString);
 }
 //# sourceMappingURL=index.js.map

package/build-module/components/time-to-read/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["useSelect","_x","_n","__","sprintf","count","wordCount","createInterpolateElement","store","editorStore","AVERAGE_READING_RATE","TimeToRead","content","select","getEditedPostAttribute","wordCountType","minutesToRead","Math","round","minutesToReadString","span","createElement","className"],"sources":["@wordpress/editor/src/components/time-to-read/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\nimport { _x, _n, __, sprintf } from '@wordpress/i18n';\nimport { count as wordCount } from '@wordpress/wordcount';\nimport { createInterpolateElement } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { store as editorStore } from '../../store';\n\n/**\n * Average reading rate - based on average taken from\n * https://irisreading.com/average-reading-speed-in-various-languages/\n * (Characters/minute used for Chinese rather than words).\n *\n * @type {number} A rough estimate of the average reading rate across multiple languages.\n */\nconst AVERAGE_READING_RATE = 189;\n\nexport default function TimeToRead() {\n\tconst content = useSelect(\n\t\t( select ) => select( editorStore ).getEditedPostAttribute( 'content' ),\n\t\t[]\n\t);\n\n\t/*\n\t * translators: If your word count is based on single characters (e.g. East Asian characters),\n\t * enter 'characters_excluding_spaces' or 'characters_including_spaces'. Otherwise, enter 'words'.\n\t * Do not translate into your own language.\n\t */\n\tconst wordCountType = _x( 'words', 'Word count type. Do not translate!' );\n\tconst minutesToRead = Math.round(\n\t\twordCount( content, wordCountType ) / AVERAGE_READING_RATE\n\t);\n\tconst minutesToReadString =\n\t\tminutesToRead === 0\n\t\t\t? createInterpolateElement( __( '<span>< 1</span> minute' ), {\n\t\t\t\t\tspan: <span />,\n\t\t\t  } )\n\t\t\t: createInterpolateElement(\n\t\t\t\t\tsprintf(\n\t\t\t\t\t\t/* translators: %s is the number of minutes the post will take to read. */\n\t\t\t\t\t\t_n(\n\t\t\t\t\t\t\t'<span>%d</span> minute',\n\t\t\t\t\t\t\t'<span>%d</span> minutes',\n\t\t\t\t\t\t\tminutesToRead\n\t\t\t\t\t\t),\n\t\t\t\t\t\tminutesToRead\n\t\t\t\t\t),\n\t\t\t\t\t{\n\t\t\t\t\t\tspan: <span />,\n\t\t\t\t\t}\n\t\t\t  );\n\n\treturn <span className=\"time-to-read\">{ minutesToReadString }</span>;\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,SAAS,QAAQ,iBAAiB;AAC3C,SAASC,EAAE,EAAEC,EAAE,EAAEC,EAAE,EAAEC,OAAO,QAAQ,iBAAiB;AACrD,SAASC,KAAK,IAAIC,SAAS,QAAQ,sBAAsB;AACzD,SAASC,wBAAwB,QAAQ,oBAAoB;;AAE7D;AACA;AACA;AACA,SAASC,KAAK,IAAIC,WAAW,QAAQ,aAAa;;AAElD;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,oBAAoB,GAAG,GAAG;AAEhC,eAAe,SAASC,UAAUA,CAAA,EAAG;EACpC,MAAMC,OAAO,GAAGZ,SAAS,CACtBa,MAAM,IAAMA,MAAM,CAAEJ,WAAY,CAAC,CAACK,sBAAsB,CAAE,SAAU,CAAC,EACvE,EACD,CAAC;;EAED;AACD;AACA;AACA;AACA;EACC,MAAMC,aAAa,GAAGd,EAAE,CAAE,OAAO,EAAE,oCAAqC,CAAC;EACzE,MAAMe,aAAa,GAAGC,IAAI,CAACC,KAAK,CAC/BZ,SAAS,CAAEM,OAAO,EAAEG,aAAc,CAAC,GAAGL,oBACvC,CAAC;EACD,MAAMS,mBAAmB,GACxBH,aAAa,KAAK,CAAC,GAChBT,wBAAwB,CAAEJ,EAAE,CAAE,yBAA0B,CAAC,EAAE;IAC3DiB,IAAI,EAAEC,aAAA,aAAO;EACb,CAAE,CAAC,GACHd,wBAAwB,CACxBH,OAAO,EACN;EACAF,EAAE,CACD,wBAAwB,EACxB,yBAAyB,EACzBc,aACD,CAAC,EACDA,aACD,CAAC,EACD;IACCI,IAAI,EAAEC,aAAA,aAAO;EACd,CACA,CAAC;EAEL,OAAOA,aAAA;IAAMC,SAAS,EAAC;EAAc,GAAGH,mBAA2B,CAAC;AACrE","ignoreList":[]}
+{"version":3,"names":["useSelect","_x","_n","__","sprintf","count","wordCount","createInterpolateElement","store","editorStore","jsx","_jsx","AVERAGE_READING_RATE","TimeToRead","content","select","getEditedPostAttribute","wordCountType","minutesToRead","Math","round","minutesToReadString","span","className","children"],"sources":["@wordpress/editor/src/components/time-to-read/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\nimport { _x, _n, __, sprintf } from '@wordpress/i18n';\nimport { count as wordCount } from '@wordpress/wordcount';\nimport { createInterpolateElement } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { store as editorStore } from '../../store';\n\n/**\n * Average reading rate - based on average taken from\n * https://irisreading.com/average-reading-speed-in-various-languages/\n * (Characters/minute used for Chinese rather than words).\n *\n * @type {number} A rough estimate of the average reading rate across multiple languages.\n */\nconst AVERAGE_READING_RATE = 189;\n\nexport default function TimeToRead() {\n\tconst content = useSelect(\n\t\t( select ) => select( editorStore ).getEditedPostAttribute( 'content' ),\n\t\t[]\n\t);\n\n\t/*\n\t * translators: If your word count is based on single characters (e.g. East Asian characters),\n\t * enter 'characters_excluding_spaces' or 'characters_including_spaces'. Otherwise, enter 'words'.\n\t * Do not translate into your own language.\n\t */\n\tconst wordCountType = _x( 'words', 'Word count type. Do not translate!' );\n\tconst minutesToRead = Math.round(\n\t\twordCount( content, wordCountType ) / AVERAGE_READING_RATE\n\t);\n\tconst minutesToReadString =\n\t\tminutesToRead === 0\n\t\t\t? createInterpolateElement( __( '<span>< 1</span> minute' ), {\n\t\t\t\t\tspan: <span />,\n\t\t\t  } )\n\t\t\t: createInterpolateElement(\n\t\t\t\t\tsprintf(\n\t\t\t\t\t\t/* translators: %s is the number of minutes the post will take to read. */\n\t\t\t\t\t\t_n(\n\t\t\t\t\t\t\t'<span>%d</span> minute',\n\t\t\t\t\t\t\t'<span>%d</span> minutes',\n\t\t\t\t\t\t\tminutesToRead\n\t\t\t\t\t\t),\n\t\t\t\t\t\tminutesToRead\n\t\t\t\t\t),\n\t\t\t\t\t{\n\t\t\t\t\t\tspan: <span />,\n\t\t\t\t\t}\n\t\t\t  );\n\n\treturn <span className=\"time-to-read\">{ minutesToReadString }</span>;\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,SAAS,QAAQ,iBAAiB;AAC3C,SAASC,EAAE,EAAEC,EAAE,EAAEC,EAAE,EAAEC,OAAO,QAAQ,iBAAiB;AACrD,SAASC,KAAK,IAAIC,SAAS,QAAQ,sBAAsB;AACzD,SAASC,wBAAwB,QAAQ,oBAAoB;;AAE7D;AACA;AACA;AACA,SAASC,KAAK,IAAIC,WAAW,QAAQ,aAAa;;AAElD;AACA;AACA;AACA;AACA;AACA;AACA;AANA,SAAAC,GAAA,IAAAC,IAAA;AAOA,MAAMC,oBAAoB,GAAG,GAAG;AAEhC,eAAe,SAASC,UAAUA,CAAA,EAAG;EACpC,MAAMC,OAAO,GAAGd,SAAS,CACtBe,MAAM,IAAMA,MAAM,CAAEN,WAAY,CAAC,CAACO,sBAAsB,CAAE,SAAU,CAAC,EACvE,EACD,CAAC;;EAED;AACD;AACA;AACA;AACA;EACC,MAAMC,aAAa,GAAGhB,EAAE,CAAE,OAAO,EAAE,oCAAqC,CAAC;EACzE,MAAMiB,aAAa,GAAGC,IAAI,CAACC,KAAK,CAC/Bd,SAAS,CAAEQ,OAAO,EAAEG,aAAc,CAAC,GAAGL,oBACvC,CAAC;EACD,MAAMS,mBAAmB,GACxBH,aAAa,KAAK,CAAC,GAChBX,wBAAwB,CAAEJ,EAAE,CAAE,yBAA0B,CAAC,EAAE;IAC3DmB,IAAI,eAAEX,IAAA,WAAO;EACb,CAAE,CAAC,GACHJ,wBAAwB,CACxBH,OAAO,EACN;EACAF,EAAE,CACD,wBAAwB,EACxB,yBAAyB,EACzBgB,aACD,CAAC,EACDA,aACD,CAAC,EACD;IACCI,IAAI,eAAEX,IAAA,WAAO;EACd,CACA,CAAC;EAEL,oBAAOA,IAAA;IAAMY,SAAS,EAAC,cAAc;IAAAC,QAAA,EAAGH;EAAmB,CAAQ,CAAC;AACrE","ignoreList":[]}

package/build-module/components/{editor-canvas → visual-editor}/edit-template-blocks-notification.js

@@ -1,4 +1,3 @@
-import { createElement } from "react";
 /**
  * WordPress dependencies
  */
@@ -27,6 +26,7 @@ import { store as editorStore } from '../../store';
  * @param {import('react').RefObject<HTMLElement>} props.contentRef Ref to the block
  *                                                                  editor iframe canvas.
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 export default function EditTemplateBlocksNotification({
   contentRef
 }) {
@@ -67,7 +67,7 @@ export default function EditTemplateBlocksNotification({
   if (!canEditTemplate) {
     return null;
   }
-  return createElement(ConfirmDialog, {
+  return /*#__PURE__*/_jsx(ConfirmDialog, {
     isOpen: isDialogOpen,
     confirmButtonText: __('Edit template'),
     onConfirm: () => {
@@ -77,7 +77,8 @@ export default function EditTemplateBlocksNotification({
         postType: 'wp_template'
       });
     },
-    onCancel: () => setIsDialogOpen(false)
-  }, __('You’ve tried to select a block that is part of a template, which may be used on other posts and pages. Would you like to edit the template?'));
+    onCancel: () => setIsDialogOpen(false),
+    children: __('You’ve tried to select a block that is part of a template, which may be used on other posts and pages. Would you like to edit the template?')
+  });
 }
 //# sourceMappingURL=edit-template-blocks-notification.js.map

package/build-module/components/visual-editor/edit-template-blocks-notification.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useSelect","store","coreStore","useEffect","useState","__","__experimentalConfirmDialog","ConfirmDialog","editorStore","jsx","_jsx","EditTemplateBlocksNotification","contentRef","onNavigateToEntityRecord","templateId","select","getEditorSettings","getCurrentTemplateId","canEditTemplate","_select$canUser","canUser","isDialogOpen","setIsDialogOpen","handleDblClick","event","target","classList","contains","canvas","current","addEventListener","removeEventListener","isOpen","confirmButtonText","onConfirm","postId","postType","onCancel","children"],"sources":["@wordpress/editor/src/components/visual-editor/edit-template-blocks-notification.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useEffect, useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { store as editorStore } from '../../store';\n\n/**\n * Component that:\n *\n * - Displays a 'Edit your template to edit this block' notification when the\n *   user is focusing on editing page content and clicks on a disabled template\n *   block.\n * - Displays a 'Edit your template to edit this block' dialog when the user\n *   is focusing on editing page conetnt and double clicks on a disabled\n *   template block.\n *\n * @param {Object}                                 props\n * @param {import('react').RefObject<HTMLElement>} props.contentRef Ref to the block\n *                                                                  editor iframe canvas.\n */\nexport default function EditTemplateBlocksNotification( { contentRef } ) {\n\tconst { onNavigateToEntityRecord, templateId } = useSelect( ( select ) => {\n\t\tconst { getEditorSettings, getCurrentTemplateId } =\n\t\t\tselect( editorStore );\n\n\t\treturn {\n\t\t\tonNavigateToEntityRecord:\n\t\t\t\tgetEditorSettings().onNavigateToEntityRecord,\n\t\t\ttemplateId: getCurrentTemplateId(),\n\t\t};\n\t}, [] );\n\n\tconst canEditTemplate = useSelect(\n\t\t( select ) =>\n\t\t\tselect( coreStore ).canUser( 'create', 'templates' ) ?? false\n\t);\n\n\tconst [ isDialogOpen, setIsDialogOpen ] = useState( false );\n\n\tuseEffect( () => {\n\t\tconst handleDblClick = ( event ) => {\n\t\t\tif ( ! canEditTemplate ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif ( ! event.target.classList.contains( 'is-root-container' ) ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tsetIsDialogOpen( true );\n\t\t};\n\n\t\tconst canvas = contentRef.current;\n\t\tcanvas?.addEventListener( 'dblclick', handleDblClick );\n\t\treturn () => {\n\t\t\tcanvas?.removeEventListener( 'dblclick', handleDblClick );\n\t\t};\n\t}, [ contentRef, canEditTemplate ] );\n\n\tif ( ! canEditTemplate ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<ConfirmDialog\n\t\t\tisOpen={ isDialogOpen }\n\t\t\tconfirmButtonText={ __( 'Edit template' ) }\n\t\t\tonConfirm={ () => {\n\t\t\t\tsetIsDialogOpen( false );\n\t\t\t\tonNavigateToEntityRecord( {\n\t\t\t\t\tpostId: templateId,\n\t\t\t\t\tpostType: 'wp_template',\n\t\t\t\t} );\n\t\t\t} }\n\t\t\tonCancel={ () => setIsDialogOpen( false ) }\n\t\t>\n\t\t\t{ __(\n\t\t\t\t'You’ve tried to select a block that is part of a template, which may be used on other posts and pages. Would you like to edit the template?'\n\t\t\t) }\n\t\t</ConfirmDialog>\n\t);\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,SAAS,QAAQ,iBAAiB;AAC3C,SAASC,KAAK,IAAIC,SAAS,QAAQ,sBAAsB;AACzD,SAASC,SAAS,EAAEC,QAAQ,QAAQ,oBAAoB;AACxD,SAASC,EAAE,QAAQ,iBAAiB;AACpC,SAASC,2BAA2B,IAAIC,aAAa,QAAQ,uBAAuB;;AAEpF;AACA;AACA;AACA,SAASN,KAAK,IAAIO,WAAW,QAAQ,aAAa;;AAElD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAbA,SAAAC,GAAA,IAAAC,IAAA;AAcA,eAAe,SAASC,8BAA8BA,CAAE;EAAEC;AAAW,CAAC,EAAG;EACxE,MAAM;IAAEC,wBAAwB;IAAEC;EAAW,CAAC,GAAGd,SAAS,CAAIe,MAAM,IAAM;IACzE,MAAM;MAAEC,iBAAiB;MAAEC;IAAqB,CAAC,GAChDF,MAAM,CAAEP,WAAY,CAAC;IAEtB,OAAO;MACNK,wBAAwB,EACvBG,iBAAiB,CAAC,CAAC,CAACH,wBAAwB;MAC7CC,UAAU,EAAEG,oBAAoB,CAAC;IAClC,CAAC;EACF,CAAC,EAAE,EAAG,CAAC;EAEP,MAAMC,eAAe,GAAGlB,SAAS,CAC9Be,MAAM;IAAA,IAAAI,eAAA;IAAA,QAAAA,eAAA,GACPJ,MAAM,CAAEb,SAAU,CAAC,CAACkB,OAAO,CAAE,QAAQ,EAAE,WAAY,CAAC,cAAAD,eAAA,cAAAA,eAAA,GAAI,KAAK;EAAA,CAC/D,CAAC;EAED,MAAM,CAAEE,YAAY,EAAEC,eAAe,CAAE,GAAGlB,QAAQ,CAAE,KAAM,CAAC;EAE3DD,SAAS,CAAE,MAAM;IAChB,MAAMoB,cAAc,GAAKC,KAAK,IAAM;MACnC,IAAK,CAAEN,eAAe,EAAG;QACxB;MACD;MAEA,IAAK,CAAEM,KAAK,CAACC,MAAM,CAACC,SAAS,CAACC,QAAQ,CAAE,mBAAoB,CAAC,EAAG;QAC/D;MACD;MACAL,eAAe,CAAE,IAAK,CAAC;IACxB,CAAC;IAED,MAAMM,MAAM,GAAGhB,UAAU,CAACiB,OAAO;IACjCD,MAAM,EAAEE,gBAAgB,CAAE,UAAU,EAAEP,cAAe,CAAC;IACtD,OAAO,MAAM;MACZK,MAAM,EAAEG,mBAAmB,CAAE,UAAU,EAAER,cAAe,CAAC;IAC1D,CAAC;EACF,CAAC,EAAE,CAAEX,UAAU,EAAEM,eAAe,CAAG,CAAC;EAEpC,IAAK,CAAEA,eAAe,EAAG;IACxB,OAAO,IAAI;EACZ;EAEA,oBACCR,IAAA,CAACH,aAAa;IACbyB,MAAM,EAAGX,YAAc;IACvBY,iBAAiB,EAAG5B,EAAE,CAAE,eAAgB,CAAG;IAC3C6B,SAAS,EAAGA,CAAA,KAAM;MACjBZ,eAAe,CAAE,KAAM,CAAC;MACxBT,wBAAwB,CAAE;QACzBsB,MAAM,EAAErB,UAAU;QAClBsB,QAAQ,EAAE;MACX,CAAE,CAAC;IACJ,CAAG;IACHC,QAAQ,EAAGA,CAAA,KAAMf,eAAe,CAAE,KAAM,CAAG;IAAAgB,QAAA,EAEzCjC,EAAE,CACH,6IACD;EAAC,CACa,CAAC;AAElB","ignoreList":[]}

package/build-module/components/{editor-canvas → visual-editor}/index.js

@@ -1,8 +1,7 @@
-import { createElement, Fragment } from "react";
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -12,7 +11,7 @@ import { useEffect, useRef, useMemo } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { parse } from '@wordpress/blocks';
 import { store as coreStore } from '@wordpress/core-data';
-import { useMergeRefs } from '@wordpress/compose';
+import { useMergeRefs, useViewportMatch, useResizeObserver } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -21,7 +20,12 @@ import PostTitle from '../post-title';
 import { store as editorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 import EditTemplateBlocksNotification from './edit-template-blocks-notification';
+import ResizableEditor from '../resizable-editor';
 import useSelectNearestEditableBlock from '../../hooks/use-select-nearest-editable-block';
+import { NAVIGATION_POST_TYPE, PATTERN_POST_TYPE, TEMPLATE_PART_POST_TYPE, TEMPLATE_POST_TYPE } from '../../store/constants';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const {
   LayoutStyle,
   useLayoutClasses,
@@ -34,7 +38,7 @@ const {
  * These post types have a special editor where they don't allow you to fill the title
  * and they don't apply the layout styles.
  */
-const DESIGN_POST_TYPES = ['wp_block', 'wp_template', 'wp_navigation', 'wp_template_part'];
+const DESIGN_POST_TYPES = [PATTERN_POST_TYPE, TEMPLATE_POST_TYPE, NAVIGATION_POST_TYPE, TEMPLATE_PART_POST_TYPE];
 
 /**
  * Given an array of nested blocks, find the first Post Content
@@ -66,17 +70,17 @@ function checkForPostContentAtRootLevel(blocks) {
   }
   return false;
 }
-function EditorCanvas({
+function VisualEditor({
   // Ideally as we unify post and site editors, we won't need these props.
   autoFocus,
-  className,
-  renderAppender,
   styles,
   disableIframe = false,
   iframeProps,
   contentRef,
-  children
+  className
 }) {
+  const [resizeObserver, sizes] = useResizeObserver();
+  const isMobileViewport = useViewportMatch('small', '<');
   const {
     renderingMode,
     postContentAttributes,
@@ -84,8 +88,10 @@ function EditorCanvas({
     wrapperBlockName,
     wrapperUniqueId,
     deviceType,
-    showEditorPadding,
-    isDesignPostType
+    isFocusedEntity,
+    isDesignPostType,
+    postType,
+    isPreview
   } = useSelect(select => {
     const {
       getCurrentPostId,
@@ -103,28 +109,30 @@ function EditorCanvas({
     const postTypeSlug = getCurrentPostType();
     const _renderingMode = getRenderingMode();
     let _wrapperBlockName;
-    if (postTypeSlug === 'wp_block') {
+    if (postTypeSlug === PATTERN_POST_TYPE) {
       _wrapperBlockName = 'core/block';
     } else if (_renderingMode === 'post-only') {
       _wrapperBlockName = 'core/post-content';
     }
     const editorSettings = getEditorSettings();
     const supportsTemplateMode = editorSettings.supportsTemplateMode;
-    const postType = getPostType(postTypeSlug);
+    const postTypeObject = getPostType(postTypeSlug);
     const canEditTemplate = canUser('create', 'templates');
     const currentTemplateId = getCurrentTemplateId();
-    const template = currentTemplateId ? getEditedEntityRecord('postType', 'wp_template', currentTemplateId) : undefined;
+    const template = currentTemplateId ? getEditedEntityRecord('postType', TEMPLATE_POST_TYPE, currentTemplateId) : undefined;
     return {
       renderingMode: _renderingMode,
       postContentAttributes: editorSettings.postContentAttributes,
       isDesignPostType: DESIGN_POST_TYPES.includes(postTypeSlug),
       // Post template fetch returns a 404 on classic themes, which
       // messes with e2e tests, so check it's a block theme first.
-      editedPostTemplate: postType?.viewable && supportsTemplateMode && canEditTemplate ? template : undefined,
+      editedPostTemplate: postTypeObject?.viewable && supportsTemplateMode && canEditTemplate ? template : undefined,
       wrapperBlockName: _wrapperBlockName,
       wrapperUniqueId: getCurrentPostId(),
       deviceType: getDeviceType(),
-      showEditorPadding: !!editorSettings.onNavigateToPreviousEntityRecord
+      isFocusedEntity: !!editorSettings.onNavigateToPreviousEntityRecord,
+      postType: postTypeSlug,
+      isPreview: editorSettings.__unstableIsPreviewMode
     };
   }, []);
   const {
@@ -133,13 +141,19 @@ function EditorCanvas({
   const {
     hasRootPaddingAwareAlignments,
     themeHasDisabledLayoutStyles,
-    themeSupportsLayout
+    themeSupportsLayout,
+    isZoomOutMode
   } = useSelect(select => {
-    const _settings = select(blockEditorStore).getSettings();
+    const {
+      getSettings,
+      __unstableGetEditorMode
+    } = select(blockEditorStore);
+    const _settings = getSettings();
     return {
       themeHasDisabledLayoutStyles: _settings.disableLayoutStyles,
       themeSupportsLayout: _settings.supportsLayout,
-      hasRootPaddingAwareAlignments: _settings.__experimentalFeatures?.useRootPaddingAwareAlignments
+      hasRootPaddingAwareAlignments: _settings.__experimentalFeatures?.useRootPaddingAwareAlignments,
+      isZoomOutMode: __unstableGetEditorMode() === 'zoom-out'
     };
   }, []);
   const deviceStyles = useResizeCanvas(deviceType);
@@ -197,7 +211,7 @@ function EditorCanvas({
     align = ''
   } = newestPostContentAttributes || {};
   const postContentLayoutClasses = useLayoutClasses(newestPostContentAttributes, 'core/post-content');
-  const blockListLayoutClass = classnames({
+  const blockListLayoutClass = clsx({
     'is-layout-flow': !themeSupportsLayout
   }, themeSupportsLayout && postContentLayoutClasses, align && `align${align}`);
   const postContentLayoutStyles = useLayoutStyles(newestPostContentAttributes, 'core/post-content', '.block-editor-block-list__layout.is-root-container');
@@ -240,66 +254,106 @@ function EditorCanvas({
   }), useSelectNearestEditableBlock({
     isEnabled: renderingMode === 'template-locked'
   })]);
-  return createElement(BlockCanvas, {
-    shouldIframe: !disableIframe || ['Tablet', 'Mobile'].includes(deviceType),
-    contentRef: contentRef,
-    styles: styles,
-    height: "100%",
-    iframeProps: {
-      className: classnames('editor-canvas__iframe', {
-        'has-editor-padding': showEditorPadding
-      }),
-      ...iframeProps,
-      style: {
-        ...iframeProps?.style,
-        ...deviceStyles
-      }
-    }
-  }, themeSupportsLayout && !themeHasDisabledLayoutStyles && renderingMode === 'post-only' && !isDesignPostType && createElement(Fragment, null, createElement(LayoutStyle, {
-    selector: ".editor-editor-canvas__post-title-wrapper",
-    layout: fallbackLayout
-  }), createElement(LayoutStyle, {
-    selector: ".block-editor-block-list__layout.is-root-container",
-    layout: postEditorLayout
-  }), align && createElement(LayoutStyle, {
-    css: alignCSS
-  }), postContentLayoutStyles && createElement(LayoutStyle, {
-    layout: postContentLayout,
-    css: postContentLayoutStyles
-  })), renderingMode === 'post-only' && !isDesignPostType && createElement("div", {
-    className: classnames('editor-editor-canvas__post-title-wrapper',
-    // The following class is only here for backward comapatibility
-    // some themes might be using it to style the post title.
-    'edit-post-visual-editor__post-title-wrapper', {
-      'has-global-padding': hasRootPaddingAwareAlignments
+  const zoomOutProps = isZoomOutMode ? {
+    scale: 'default',
+    frameSize: '20px'
+  } : {};
+  const forceFullHeight = postType === NAVIGATION_POST_TYPE;
+  const enableResizing = [NAVIGATION_POST_TYPE, TEMPLATE_PART_POST_TYPE, PATTERN_POST_TYPE].includes(postType) &&
+  // Disable in previews / view mode.
+  !isPreview &&
+  // Disable resizing in mobile viewport.
+  !isMobileViewport &&
+  // Dsiable resizing in zoomed-out mode.
+  !isZoomOutMode;
+  const shouldIframe = !disableIframe || ['Tablet', 'Mobile'].includes(deviceType);
+  const iframeStyles = useMemo(() => {
+    return [...(styles !== null && styles !== void 0 ? styles : []), {
+      css: `.is-root-container{display:flow-root;${
+      // Some themes will have `min-height: 100vh` for the root container,
+      // which isn't a requirement in auto resize mode.
+      enableResizing ? 'min-height:0!important;' : ''}}`
+    }];
+  }, [styles, enableResizing]);
+  return /*#__PURE__*/_jsx("div", {
+    className: clsx('editor-visual-editor',
+    // this class is here for backward compatibility reasons.
+    'edit-post-visual-editor', className, {
+      'has-padding': isFocusedEntity || enableResizing,
+      'is-resizable': enableResizing,
+      'is-iframed': shouldIframe
     }),
-    contentEditable: false,
-    ref: observeTypingRef,
-    style: {
-      // This is using inline styles
-      // so it's applied for both iframed and non iframed editors.
-      marginTop: '4rem'
-    }
-  }, createElement(PostTitle, {
-    ref: titleRef
-  })), createElement(RecursionProvider, {
-    blockName: wrapperBlockName,
-    uniqueId: wrapperUniqueId
-  }, createElement(BlockList, {
-    className: classnames(className, 'is-' + deviceType.toLowerCase() + '-preview', renderingMode !== 'post-only' || isDesignPostType ? 'wp-site-blocks' : `${blockListLayoutClass} wp-block-post-content` // Ensure root level blocks receive default/flow blockGap styling rules.
-    ),
-    layout: blockListLayout,
-    dropZoneElement:
-    // When iframed, pass in the html element of the iframe to
-    // ensure the drop zone extends to the edges of the iframe.
-    disableIframe ? localRef.current : localRef.current?.parentNode,
-    renderAppender: renderAppender,
-    __unstableDisableDropZone:
-    // In template preview mode, disable drop zones at the root of the template.
-    renderingMode === 'template-locked' ? true : false
-  }), renderingMode === 'template-locked' && createElement(EditTemplateBlocksNotification, {
-    contentRef: localRef
-  })), children);
+    children: /*#__PURE__*/_jsx(ResizableEditor, {
+      enableResizing: enableResizing,
+      height: sizes.height && !forceFullHeight ? sizes.height : '100%',
+      children: /*#__PURE__*/_jsxs(BlockCanvas, {
+        shouldIframe: shouldIframe,
+        contentRef: contentRef,
+        styles: iframeStyles,
+        height: "100%",
+        iframeProps: {
+          ...iframeProps,
+          ...zoomOutProps,
+          style: {
+            ...iframeProps?.style,
+            ...deviceStyles
+          }
+        },
+        children: [themeSupportsLayout && !themeHasDisabledLayoutStyles && renderingMode === 'post-only' && !isDesignPostType && /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx(LayoutStyle, {
+            selector: ".editor-visual-editor__post-title-wrapper",
+            layout: fallbackLayout
+          }), /*#__PURE__*/_jsx(LayoutStyle, {
+            selector: ".block-editor-block-list__layout.is-root-container",
+            layout: postEditorLayout
+          }), align && /*#__PURE__*/_jsx(LayoutStyle, {
+            css: alignCSS
+          }), postContentLayoutStyles && /*#__PURE__*/_jsx(LayoutStyle, {
+            layout: postContentLayout,
+            css: postContentLayoutStyles
+          })]
+        }), renderingMode === 'post-only' && !isDesignPostType && /*#__PURE__*/_jsx("div", {
+          className: clsx('editor-visual-editor__post-title-wrapper',
+          // The following class is only here for backward comapatibility
+          // some themes might be using it to style the post title.
+          'edit-post-visual-editor__post-title-wrapper', {
+            'has-global-padding': hasRootPaddingAwareAlignments
+          }),
+          contentEditable: false,
+          ref: observeTypingRef,
+          style: {
+            // This is using inline styles
+            // so it's applied for both iframed and non iframed editors.
+            marginTop: '4rem'
+          },
+          children: /*#__PURE__*/_jsx(PostTitle, {
+            ref: titleRef
+          })
+        }), /*#__PURE__*/_jsxs(RecursionProvider, {
+          blockName: wrapperBlockName,
+          uniqueId: wrapperUniqueId,
+          children: [/*#__PURE__*/_jsx(BlockList, {
+            className: clsx('is-' + deviceType.toLowerCase() + '-preview', renderingMode !== 'post-only' || isDesignPostType ? 'wp-site-blocks' : `${blockListLayoutClass} wp-block-post-content` // Ensure root level blocks receive default/flow blockGap styling rules.
+            ),
+            layout: blockListLayout,
+            dropZoneElement:
+            // When iframed, pass in the html element of the iframe to
+            // ensure the drop zone extends to the edges of the iframe.
+            disableIframe ? localRef.current : localRef.current?.parentNode,
+            __unstableDisableDropZone:
+            // In template preview mode, disable drop zones at the root of the template.
+            renderingMode === 'template-locked' ? true : false
+          }), renderingMode === 'template-locked' && /*#__PURE__*/_jsx(EditTemplateBlocksNotification, {
+            contentRef: localRef
+          })]
+        }),
+        // Avoid resize listeners when not needed,
+        // these will trigger unnecessary re-renders
+        // when animating the iframe width.
+        enableResizing && resizeObserver]
+      })
+    })
+  });
 }
-export default EditorCanvas;
+export default VisualEditor;
 //# sourceMappingURL=index.js.map