@wordpress/editor 13.22.0 → 13.24.0

package/build/components/post-title/post-title-raw.js

@@ -0,0 +1,92 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _components = require("@wordpress/components");
+var _i18n = require("@wordpress/i18n");
+var _htmlEntities = require("@wordpress/html-entities");
+var _data = require("@wordpress/data");
+var _blockEditor = require("@wordpress/block-editor");
+var _element = require("@wordpress/element");
+var _constants = require("./constants");
+var _usePostTitleFocus = _interopRequireDefault(require("./use-post-title-focus"));
+var _usePostTitle = _interopRequireDefault(require("./use-post-title"));
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+function PostTitleRaw(_, forwardedRef) {
+  const {
+    placeholder,
+    hasFixedToolbar
+  } = (0, _data.useSelect)(select => {
+    const {
+      getSettings
+    } = select(_blockEditor.store);
+    const {
+      titlePlaceholder,
+      hasFixedToolbar: _hasFixedToolbar
+    } = getSettings();
+    return {
+      placeholder: titlePlaceholder,
+      hasFixedToolbar: _hasFixedToolbar
+    };
+  }, []);
+  const [isSelected, setIsSelected] = (0, _element.useState)(false);
+  const {
+    title,
+    setTitle: onUpdate
+  } = (0, _usePostTitle.default)();
+  const {
+    ref: focusRef
+  } = (0, _usePostTitleFocus.default)(forwardedRef);
+  function onChange(value) {
+    onUpdate(value.replace(_constants.REGEXP_NEWLINES, ' '));
+  }
+  function onSelect() {
+    setIsSelected(true);
+  }
+  function onUnselect() {
+    setIsSelected(false);
+  }
+
+  // The wp-block className is important for editor styles.
+  // This same block is used in both the visual and the code editor.
+  const className = (0, _classnames.default)(_constants.DEFAULT_CLASSNAMES, {
+    'is-selected': isSelected,
+    'has-fixed-toolbar': hasFixedToolbar,
+    'is-raw-text': true
+  });
+  const decodedPlaceholder = (0, _htmlEntities.decodeEntities)(placeholder) || (0, _i18n.__)('Add title');
+  return (0, _react.createElement)(_components.TextareaControl, {
+    ref: focusRef,
+    value: title,
+    onChange: onChange,
+    onFocus: onSelect,
+    onBlur: onUnselect,
+    label: placeholder,
+    className: className,
+    placeholder: decodedPlaceholder,
+    hideLabelFromVision: true,
+    autoComplete: "off",
+    dir: "auto",
+    rows: 1,
+    __nextHasNoMarginBottom: true
+  });
+}
+var _default = (0, _element.forwardRef)(PostTitleRaw);
+exports.default = _default;
+//# sourceMappingURL=post-title-raw.js.map

package/build/components/post-title/post-title-raw.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_classnames","_interopRequireDefault","require","_components","_i18n","_htmlEntities","_data","_blockEditor","_element","_constants","_usePostTitleFocus","_usePostTitle","PostTitleRaw","_","forwardedRef","placeholder","hasFixedToolbar","useSelect","select","getSettings","blockEditorStore","titlePlaceholder","_hasFixedToolbar","isSelected","setIsSelected","useState","title","setTitle","onUpdate","usePostTitle","ref","focusRef","usePostTitleFocus","onChange","value","replace","REGEXP_NEWLINES","onSelect","onUnselect","className","classnames","DEFAULT_CLASSNAMES","decodedPlaceholder","decodeEntities","__","_react","createElement","TextareaControl","onFocus","onBlur","label","hideLabelFromVision","autoComplete","dir","rows","__nextHasNoMarginBottom","_default","forwardRef","exports","default"],"sources":["@wordpress/editor/src/components/post-title/post-title-raw.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { TextareaControl } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { decodeEntities } from '@wordpress/html-entities';\nimport { useSelect } from '@wordpress/data';\nimport { store as blockEditorStore } from '@wordpress/block-editor';\nimport { useState, forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { DEFAULT_CLASSNAMES, REGEXP_NEWLINES } from './constants';\nimport usePostTitleFocus from './use-post-title-focus';\nimport usePostTitle from './use-post-title';\n\nfunction PostTitleRaw( _, forwardedRef ) {\n\tconst { placeholder, hasFixedToolbar } = useSelect( ( select ) => {\n\t\tconst { getSettings } = select( blockEditorStore );\n\t\tconst { titlePlaceholder, hasFixedToolbar: _hasFixedToolbar } =\n\t\t\tgetSettings();\n\n\t\treturn {\n\t\t\tplaceholder: titlePlaceholder,\n\t\t\thasFixedToolbar: _hasFixedToolbar,\n\t\t};\n\t}, [] );\n\n\tconst [ isSelected, setIsSelected ] = useState( false );\n\n\tconst { title, setTitle: onUpdate } = usePostTitle();\n\tconst { ref: focusRef } = usePostTitleFocus( forwardedRef );\n\n\tfunction onChange( value ) {\n\t\tonUpdate( value.replace( REGEXP_NEWLINES, ' ' ) );\n\t}\n\n\tfunction onSelect() {\n\t\tsetIsSelected( true );\n\t}\n\n\tfunction onUnselect() {\n\t\tsetIsSelected( false );\n\t}\n\n\t// The wp-block className is important for editor styles.\n\t// This same block is used in both the visual and the code editor.\n\tconst className = classnames( DEFAULT_CLASSNAMES, {\n\t\t'is-selected': isSelected,\n\t\t'has-fixed-toolbar': hasFixedToolbar,\n\t\t'is-raw-text': true,\n\t} );\n\n\tconst decodedPlaceholder =\n\t\tdecodeEntities( placeholder ) || __( 'Add title' );\n\n\treturn (\n\t\t<TextareaControl\n\t\t\tref={ focusRef }\n\t\t\tvalue={ title }\n\t\t\tonChange={ onChange }\n\t\t\tonFocus={ onSelect }\n\t\t\tonBlur={ onUnselect }\n\t\t\tlabel={ placeholder }\n\t\t\tclassName={ className }\n\t\t\tplaceholder={ decodedPlaceholder }\n\t\t\thideLabelFromVision={ true }\n\t\t\tautoComplete=\"off\"\n\t\t\tdir=\"auto\"\n\t\t\trows={ 1 }\n\t\t\t__nextHasNoMarginBottom\n\t\t/>\n\t);\n}\n\nexport default forwardRef( PostTitleRaw );\n"],"mappings":";;;;;;;;AAGA,IAAAA,WAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,WAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AACA,IAAAG,aAAA,GAAAH,OAAA;AACA,IAAAI,KAAA,GAAAJ,OAAA;AACA,IAAAK,YAAA,GAAAL,OAAA;AACA,IAAAM,QAAA,GAAAN,OAAA;AAKA,IAAAO,UAAA,GAAAP,OAAA;AACA,IAAAQ,kBAAA,GAAAT,sBAAA,CAAAC,OAAA;AACA,IAAAS,aAAA,GAAAV,sBAAA,CAAAC,OAAA;AApBA;AACA;AACA;;AAGA;AACA;AACA;;AAQA;AACA;AACA;;AAKA,SAASU,YAAYA,CAAEC,CAAC,EAAEC,YAAY,EAAG;EACxC,MAAM;IAAEC,WAAW;IAAEC;EAAgB,CAAC,GAAG,IAAAC,eAAS,EAAIC,MAAM,IAAM;IACjE,MAAM;MAAEC;IAAY,CAAC,GAAGD,MAAM,CAAEE,kBAAiB,CAAC;IAClD,MAAM;MAAEC,gBAAgB;MAAEL,eAAe,EAAEM;IAAiB,CAAC,GAC5DH,WAAW,CAAC,CAAC;IAEd,OAAO;MACNJ,WAAW,EAAEM,gBAAgB;MAC7BL,eAAe,EAAEM;IAClB,CAAC;EACF,CAAC,EAAE,EAAG,CAAC;EAEP,MAAM,CAAEC,UAAU,EAAEC,aAAa,CAAE,GAAG,IAAAC,iBAAQ,EAAE,KAAM,CAAC;EAEvD,MAAM;IAAEC,KAAK;IAAEC,QAAQ,EAAEC;EAAS,CAAC,GAAG,IAAAC,qBAAY,EAAC,CAAC;EACpD,MAAM;IAAEC,GAAG,EAAEC;EAAS,CAAC,GAAG,IAAAC,0BAAiB,EAAElB,YAAa,CAAC;EAE3D,SAASmB,QAAQA,CAAEC,KAAK,EAAG;IAC1BN,QAAQ,CAAEM,KAAK,CAACC,OAAO,CAAEC,0BAAe,EAAE,GAAI,CAAE,CAAC;EAClD;EAEA,SAASC,QAAQA,CAAA,EAAG;IACnBb,aAAa,CAAE,IAAK,CAAC;EACtB;EAEA,SAASc,UAAUA,CAAA,EAAG;IACrBd,aAAa,CAAE,KAAM,CAAC;EACvB;;EAEA;EACA;EACA,MAAMe,SAAS,GAAG,IAAAC,mBAAU,EAAEC,6BAAkB,EAAE;IACjD,aAAa,EAAElB,UAAU;IACzB,mBAAmB,EAAEP,eAAe;IACpC,aAAa,EAAE;EAChB,CAAE,CAAC;EAEH,MAAM0B,kBAAkB,GACvB,IAAAC,4BAAc,EAAE5B,WAAY,CAAC,IAAI,IAAA6B,QAAE,EAAE,WAAY,CAAC;EAEnD,OACC,IAAAC,MAAA,CAAAC,aAAA,EAAC3C,WAAA,CAAA4C,eAAe;IACfjB,GAAG,EAAGC,QAAU;IAChBG,KAAK,EAAGR,KAAO;IACfO,QAAQ,EAAGA,QAAU;IACrBe,OAAO,EAAGX,QAAU;IACpBY,MAAM,EAAGX,UAAY;IACrBY,KAAK,EAAGnC,WAAa;IACrBwB,SAAS,EAAGA,SAAW;IACvBxB,WAAW,EAAG2B,kBAAoB;IAClCS,mBAAmB,EAAG,IAAM;IAC5BC,YAAY,EAAC,KAAK;IAClBC,GAAG,EAAC,MAAM;IACVC,IAAI,EAAG,CAAG;IACVC,uBAAuB;EAAA,CACvB,CAAC;AAEJ;AAAC,IAAAC,QAAA,GAEc,IAAAC,mBAAU,EAAE7C,YAAa,CAAC;AAAA8C,OAAA,CAAAC,OAAA,GAAAH,QAAA"}

package/build/components/post-title/use-post-title-focus.js

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = usePostTitleFocus;
+var _element = require("@wordpress/element");
+var _data = require("@wordpress/data");
+var _store = require("../../store");
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+function usePostTitleFocus(forwardedRef) {
+  const ref = (0, _element.useRef)();
+  const {
+    isCleanNewPost
+  } = (0, _data.useSelect)(select => {
+    const {
+      isCleanNewPost: _isCleanNewPost
+    } = select(_store.store);
+    return {
+      isCleanNewPost: _isCleanNewPost()
+    };
+  }, []);
+  (0, _element.useImperativeHandle)(forwardedRef, () => ({
+    focus: () => {
+      ref?.current?.focus();
+    }
+  }));
+  (0, _element.useEffect)(() => {
+    if (!ref.current) {
+      return;
+    }
+    const {
+      defaultView
+    } = ref.current.ownerDocument;
+    const {
+      name,
+      parent
+    } = defaultView;
+    const ownerDocument = name === 'editor-canvas' ? parent.document : defaultView.document;
+    const {
+      activeElement,
+      body
+    } = ownerDocument;
+
+    // Only autofocus the title when the post is entirely empty. This should
+    // only happen for a new post, which means we focus the title on new
+    // post so the author can start typing right away, without needing to
+    // click anything.
+    if (isCleanNewPost && (!activeElement || body === activeElement)) {
+      ref.current.focus();
+    }
+  }, [isCleanNewPost]);
+  return {
+    ref
+  };
+}
+//# sourceMappingURL=use-post-title-focus.js.map

package/build/components/post-title/use-post-title-focus.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_element","require","_data","_store","usePostTitleFocus","forwardedRef","ref","useRef","isCleanNewPost","useSelect","select","_isCleanNewPost","editorStore","useImperativeHandle","focus","current","useEffect","defaultView","ownerDocument","name","parent","document","activeElement","body"],"sources":["@wordpress/editor/src/components/post-title/use-post-title-focus.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect, useImperativeHandle, useRef } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { store as editorStore } from '../../store';\n\nexport default function usePostTitleFocus( forwardedRef ) {\n\tconst ref = useRef();\n\n\tconst { isCleanNewPost } = useSelect( ( select ) => {\n\t\tconst { isCleanNewPost: _isCleanNewPost } = select( editorStore );\n\n\t\treturn {\n\t\t\tisCleanNewPost: _isCleanNewPost(),\n\t\t};\n\t}, [] );\n\n\tuseImperativeHandle( forwardedRef, () => ( {\n\t\tfocus: () => {\n\t\t\tref?.current?.focus();\n\t\t},\n\t} ) );\n\n\tuseEffect( () => {\n\t\tif ( ! ref.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst { defaultView } = ref.current.ownerDocument;\n\t\tconst { name, parent } = defaultView;\n\t\tconst ownerDocument =\n\t\t\tname === 'editor-canvas' ? parent.document : defaultView.document;\n\t\tconst { activeElement, body } = ownerDocument;\n\n\t\t// Only autofocus the title when the post is entirely empty. This should\n\t\t// only happen for a new post, which means we focus the title on new\n\t\t// post so the author can start typing right away, without needing to\n\t\t// click anything.\n\t\tif ( isCleanNewPost && ( ! activeElement || body === activeElement ) ) {\n\t\t\tref.current.focus();\n\t\t}\n\t}, [ isCleanNewPost ] );\n\n\treturn { ref };\n}\n"],"mappings":";;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AAKA,IAAAE,MAAA,GAAAF,OAAA;AATA;AACA;AACA;;AAIA;AACA;AACA;;AAGe,SAASG,iBAAiBA,CAAEC,YAAY,EAAG;EACzD,MAAMC,GAAG,GAAG,IAAAC,eAAM,EAAC,CAAC;EAEpB,MAAM;IAAEC;EAAe,CAAC,GAAG,IAAAC,eAAS,EAAIC,MAAM,IAAM;IACnD,MAAM;MAAEF,cAAc,EAAEG;IAAgB,CAAC,GAAGD,MAAM,CAAEE,YAAY,CAAC;IAEjE,OAAO;MACNJ,cAAc,EAAEG,eAAe,CAAC;IACjC,CAAC;EACF,CAAC,EAAE,EAAG,CAAC;EAEP,IAAAE,4BAAmB,EAAER,YAAY,EAAE,OAAQ;IAC1CS,KAAK,EAAEA,CAAA,KAAM;MACZR,GAAG,EAAES,OAAO,EAAED,KAAK,CAAC,CAAC;IACtB;EACD,CAAC,CAAG,CAAC;EAEL,IAAAE,kBAAS,EAAE,MAAM;IAChB,IAAK,CAAEV,GAAG,CAACS,OAAO,EAAG;MACpB;IACD;IAEA,MAAM;MAAEE;IAAY,CAAC,GAAGX,GAAG,CAACS,OAAO,CAACG,aAAa;IACjD,MAAM;MAAEC,IAAI;MAAEC;IAAO,CAAC,GAAGH,WAAW;IACpC,MAAMC,aAAa,GAClBC,IAAI,KAAK,eAAe,GAAGC,MAAM,CAACC,QAAQ,GAAGJ,WAAW,CAACI,QAAQ;IAClE,MAAM;MAAEC,aAAa;MAAEC;IAAK,CAAC,GAAGL,aAAa;;IAE7C;IACA;IACA;IACA;IACA,IAAKV,cAAc,KAAM,CAAEc,aAAa,IAAIC,IAAI,KAAKD,aAAa,CAAE,EAAG;MACtEhB,GAAG,CAACS,OAAO,CAACD,KAAK,CAAC,CAAC;IACpB;EACD,CAAC,EAAE,CAAEN,cAAc,CAAG,CAAC;EAEvB,OAAO;IAAEF;EAAI,CAAC;AACf"}

package/build/components/post-title/use-post-title.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = usePostTitle;
+var _data = require("@wordpress/data");
+var _store = require("../../store");
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+function usePostTitle() {
+  const {
+    editPost
+  } = (0, _data.useDispatch)(_store.store);
+  const {
+    title
+  } = (0, _data.useSelect)(select => {
+    const {
+      getEditedPostAttribute
+    } = select(_store.store);
+    return {
+      title: getEditedPostAttribute('title')
+    };
+  }, []);
+  function updateTitle(newTitle) {
+    editPost({
+      title: newTitle
+    });
+  }
+  return {
+    title,
+    setTitle: updateTitle
+  };
+}
+//# sourceMappingURL=use-post-title.js.map

package/build/components/post-title/use-post-title.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_data","require","_store","usePostTitle","editPost","useDispatch","editorStore","title","useSelect","select","getEditedPostAttribute","updateTitle","newTitle","setTitle"],"sources":["@wordpress/editor/src/components/post-title/use-post-title.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect, useDispatch } from '@wordpress/data';\n/**\n * Internal dependencies\n */\nimport { store as editorStore } from '../../store';\n\nexport default function usePostTitle() {\n\tconst { editPost } = useDispatch( editorStore );\n\tconst { title } = useSelect( ( select ) => {\n\t\tconst { getEditedPostAttribute } = select( editorStore );\n\n\t\treturn {\n\t\t\ttitle: getEditedPostAttribute( 'title' ),\n\t\t};\n\t}, [] );\n\n\tfunction updateTitle( newTitle ) {\n\t\teditPost( { title: newTitle } );\n\t}\n\n\treturn { title, setTitle: updateTitle };\n}\n"],"mappings":";;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AAIA,IAAAC,MAAA,GAAAD,OAAA;AAPA;AACA;AACA;;AAEA;AACA;AACA;;AAGe,SAASE,YAAYA,CAAA,EAAG;EACtC,MAAM;IAAEC;EAAS,CAAC,GAAG,IAAAC,iBAAW,EAAEC,YAAY,CAAC;EAC/C,MAAM;IAAEC;EAAM,CAAC,GAAG,IAAAC,eAAS,EAAIC,MAAM,IAAM;IAC1C,MAAM;MAAEC;IAAuB,CAAC,GAAGD,MAAM,CAAEH,YAAY,CAAC;IAExD,OAAO;MACNC,KAAK,EAAEG,sBAAsB,CAAE,OAAQ;IACxC,CAAC;EACF,CAAC,EAAE,EAAG,CAAC;EAEP,SAASC,WAAWA,CAAEC,QAAQ,EAAG;IAChCR,QAAQ,CAAE;MAAEG,KAAK,EAAEK;IAAS,CAAE,CAAC;EAChC;EAEA,OAAO;IAAEL,KAAK;IAAEM,QAAQ,EAAEF;EAAY,CAAC;AACxC"}

package/build/components/post-url/panel.js

@@ -0,0 +1,70 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = PostURLPanel;
+var _react = require("react");
+var _element = require("@wordpress/element");
+var _components = require("@wordpress/components");
+var _i18n = require("@wordpress/i18n");
+var _check = _interopRequireDefault(require("./check"));
+var _index = _interopRequireDefault(require("./index"));
+var _label = require("./label");
+var _postPanelRow = _interopRequireDefault(require("../post-panel-row"));
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+function PostURLPanel() {
+  // Use internal state instead of a ref to make sure that the component
+  // re-renders when the popover's anchor updates.
+  const [popoverAnchor, setPopoverAnchor] = (0, _element.useState)(null);
+  // Memoize popoverProps to avoid returning a new object every time.
+  const popoverProps = (0, _element.useMemo)(() => ({
+    anchor: popoverAnchor,
+    placement: 'bottom-end'
+  }), [popoverAnchor]);
+  return (0, _react.createElement)(_check.default, null, (0, _react.createElement)(_postPanelRow.default, {
+    label: (0, _i18n.__)('URL'),
+    ref: setPopoverAnchor
+  }, (0, _react.createElement)(_components.Dropdown, {
+    popoverProps: popoverProps,
+    className: "editor-post-url__panel-dropdown",
+    contentClassName: "editor-post-url__panel-dialog",
+    focusOnMount: true,
+    renderToggle: ({
+      isOpen,
+      onToggle
+    }) => (0, _react.createElement)(PostURLToggle, {
+      isOpen: isOpen,
+      onClick: onToggle
+    }),
+    renderContent: ({
+      onClose
+    }) => (0, _react.createElement)(_index.default, {
+      onClose: onClose
+    })
+  })));
+}
+function PostURLToggle({
+  isOpen,
+  onClick
+}) {
+  const label = (0, _label.usePostURLLabel)();
+  return (0, _react.createElement)(_components.Button, {
+    className: "editor-post-url__panel-toggle",
+    variant: "tertiary",
+    "aria-expanded": isOpen
+    // translators: %s: Current post URL.
+    ,
+    "aria-label": (0, _i18n.sprintf)((0, _i18n.__)('Change URL: %s'), label),
+    onClick: onClick
+  }, label);
+}
+//# sourceMappingURL=panel.js.map

package/build/components/post-url/panel.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_element","require","_components","_i18n","_check","_interopRequireDefault","_index","_label","_postPanelRow","PostURLPanel","popoverAnchor","setPopoverAnchor","useState","popoverProps","useMemo","anchor","placement","_react","createElement","default","label","__","ref","Dropdown","className","contentClassName","focusOnMount","renderToggle","isOpen","onToggle","PostURLToggle","onClick","renderContent","onClose","usePostURLLabel","Button","variant","sprintf"],"sources":["@wordpress/editor/src/components/post-url/panel.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo, useState } from '@wordpress/element';\nimport { Dropdown, Button } from '@wordpress/components';\nimport { __, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport PostURLCheck from './check';\nimport PostURL from './index';\nimport { usePostURLLabel } from './label';\nimport PostPanelRow from '../post-panel-row';\n\nexport default function PostURLPanel() {\n\t// Use internal state instead of a ref to make sure that the component\n\t// re-renders when the popover's anchor updates.\n\tconst [ popoverAnchor, setPopoverAnchor ] = useState( null );\n\t// Memoize popoverProps to avoid returning a new object every time.\n\tconst popoverProps = useMemo(\n\t\t() => ( { anchor: popoverAnchor, placement: 'bottom-end' } ),\n\t\t[ popoverAnchor ]\n\t);\n\n\treturn (\n\t\t<PostURLCheck>\n\t\t\t<PostPanelRow label={ __( 'URL' ) } ref={ setPopoverAnchor }>\n\t\t\t\t<Dropdown\n\t\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\t\tclassName=\"editor-post-url__panel-dropdown\"\n\t\t\t\t\tcontentClassName=\"editor-post-url__panel-dialog\"\n\t\t\t\t\tfocusOnMount\n\t\t\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t\t\t<PostURLToggle isOpen={ isOpen } onClick={ onToggle } />\n\t\t\t\t\t) }\n\t\t\t\t\trenderContent={ ( { onClose } ) => (\n\t\t\t\t\t\t<PostURL onClose={ onClose } />\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t</PostPanelRow>\n\t\t</PostURLCheck>\n\t);\n}\n\nfunction PostURLToggle( { isOpen, onClick } ) {\n\tconst label = usePostURLLabel();\n\treturn (\n\t\t<Button\n\t\t\tclassName=\"editor-post-url__panel-toggle\"\n\t\t\tvariant=\"tertiary\"\n\t\t\taria-expanded={ isOpen }\n\t\t\t// translators: %s: Current post URL.\n\t\t\taria-label={ sprintf( __( 'Change URL: %s' ), label ) }\n\t\t\tonClick={ onClick }\n\t\t>\n\t\t\t{ label }\n\t\t</Button>\n\t);\n}\n"],"mappings":";;;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AAKA,IAAAG,MAAA,GAAAC,sBAAA,CAAAJ,OAAA;AACA,IAAAK,MAAA,GAAAD,sBAAA,CAAAJ,OAAA;AACA,IAAAM,MAAA,GAAAN,OAAA;AACA,IAAAO,aAAA,GAAAH,sBAAA,CAAAJ,OAAA;AAbA;AACA;AACA;;AAKA;AACA;AACA;;AAMe,SAASQ,YAAYA,CAAA,EAAG;EACtC;EACA;EACA,MAAM,CAAEC,aAAa,EAAEC,gBAAgB,CAAE,GAAG,IAAAC,iBAAQ,EAAE,IAAK,CAAC;EAC5D;EACA,MAAMC,YAAY,GAAG,IAAAC,gBAAO,EAC3B,OAAQ;IAAEC,MAAM,EAAEL,aAAa;IAAEM,SAAS,EAAE;EAAa,CAAC,CAAE,EAC5D,CAAEN,aAAa,CAChB,CAAC;EAED,OACC,IAAAO,MAAA,CAAAC,aAAA,EAACd,MAAA,CAAAe,OAAY,QACZ,IAAAF,MAAA,CAAAC,aAAA,EAACV,aAAA,CAAAW,OAAY;IAACC,KAAK,EAAG,IAAAC,QAAE,EAAE,KAAM,CAAG;IAACC,GAAG,EAAGX;EAAkB,GAC3D,IAAAM,MAAA,CAAAC,aAAA,EAAChB,WAAA,CAAAqB,QAAQ;IACRV,YAAY,EAAGA,YAAc;IAC7BW,SAAS,EAAC,iCAAiC;IAC3CC,gBAAgB,EAAC,+BAA+B;IAChDC,YAAY;IACZC,YAAY,EAAGA,CAAE;MAAEC,MAAM;MAAEC;IAAS,CAAC,KACpC,IAAAZ,MAAA,CAAAC,aAAA,EAACY,aAAa;MAACF,MAAM,EAAGA,MAAQ;MAACG,OAAO,EAAGF;IAAU,CAAE,CACrD;IACHG,aAAa,EAAGA,CAAE;MAAEC;IAAQ,CAAC,KAC5B,IAAAhB,MAAA,CAAAC,aAAA,EAACZ,MAAA,CAAAa,OAAO;MAACc,OAAO,EAAGA;IAAS,CAAE;EAC5B,CACH,CACY,CACD,CAAC;AAEjB;AAEA,SAASH,aAAaA,CAAE;EAAEF,MAAM;EAAEG;AAAQ,CAAC,EAAG;EAC7C,MAAMX,KAAK,GAAG,IAAAc,sBAAe,EAAC,CAAC;EAC/B,OACC,IAAAjB,MAAA,CAAAC,aAAA,EAAChB,WAAA,CAAAiC,MAAM;IACNX,SAAS,EAAC,+BAA+B;IACzCY,OAAO,EAAC,UAAU;IAClB,iBAAgBR;IAChB;IAAA;IACA,cAAa,IAAAS,aAAO,EAAE,IAAAhB,QAAE,EAAE,gBAAiB,CAAC,EAAED,KAAM,CAAG;IACvDW,OAAO,EAAGA;EAAS,GAEjBX,KACK,CAAC;AAEX"}

package/build/components/provider/constants.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PAGE_CONTENT_BLOCK_TYPES = void 0;
+const PAGE_CONTENT_BLOCK_TYPES = ['core/post-title', 'core/post-featured-image', 'core/post-content'];
+exports.PAGE_CONTENT_BLOCK_TYPES = PAGE_CONTENT_BLOCK_TYPES;
+//# sourceMappingURL=constants.js.map

package/build/components/provider/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["PAGE_CONTENT_BLOCK_TYPES","exports"],"sources":["@wordpress/editor/src/components/provider/constants.js"],"sourcesContent":["export const PAGE_CONTENT_BLOCK_TYPES = [\n\t'core/post-title',\n\t'core/post-featured-image',\n\t'core/post-content',\n];\n"],"mappings":";;;;;;AAAO,MAAMA,wBAAwB,GAAG,CACvC,iBAAiB,EACjB,0BAA0B,EAC1B,mBAAmB,CACnB;AAACC,OAAA,CAAAD,wBAAA,GAAAA,wBAAA"}

package/build/components/provider/disable-non-page-content-blocks.js

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = DisableNonPageContentBlocks;
+var _react = require("react");
+var _data = require("@wordpress/data");
+var _blockEditor = require("@wordpress/block-editor");
+var _element = require("@wordpress/element");
+var _constants = require("./constants");
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+function DisableBlock({
+  clientId
+}) {
+  const isDescendentOfQueryLoop = (0, _data.useSelect)(select => {
+    const {
+      getBlockParentsByBlockName
+    } = select(_blockEditor.store);
+    return getBlockParentsByBlockName(clientId, 'core/query').length !== 0;
+  }, [clientId]);
+  const mode = isDescendentOfQueryLoop ? undefined : 'contentOnly';
+  const {
+    setBlockEditingMode,
+    unsetBlockEditingMode
+  } = (0, _data.useDispatch)(_blockEditor.store);
+  (0, _element.useEffect)(() => {
+    if (mode) {
+      setBlockEditingMode(clientId, mode);
+      return () => {
+        unsetBlockEditingMode(clientId);
+      };
+    }
+  }, [clientId, mode, setBlockEditingMode, unsetBlockEditingMode]);
+}
+
+/**
+ * Component that when rendered, makes it so that the site editor allows only
+ * page content to be edited.
+ */
+function DisableNonPageContentBlocks() {
+  (0, _blockEditor.useBlockEditingMode)('disabled');
+  const clientIds = (0, _data.useSelect)(select => {
+    const {
+      __experimentalGetGlobalBlocksByName
+    } = select(_blockEditor.store);
+    return __experimentalGetGlobalBlocksByName(_constants.PAGE_CONTENT_BLOCK_TYPES);
+  }, []);
+  return clientIds.map(clientId => {
+    return (0, _react.createElement)(DisableBlock, {
+      key: clientId,
+      clientId: clientId
+    });
+  });
+}
+//# sourceMappingURL=disable-non-page-content-blocks.js.map

package/build/components/provider/disable-non-page-content-blocks.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_data","require","_blockEditor","_element","_constants","DisableBlock","clientId","isDescendentOfQueryLoop","useSelect","select","getBlockParentsByBlockName","blockEditorStore","length","mode","undefined","setBlockEditingMode","unsetBlockEditingMode","useDispatch","useEffect","DisableNonPageContentBlocks","useBlockEditingMode","clientIds","__experimentalGetGlobalBlocksByName","PAGE_CONTENT_BLOCK_TYPES","map","_react","createElement","key"],"sources":["@wordpress/editor/src/components/provider/disable-non-page-content-blocks.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport {\n\tuseBlockEditingMode,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\nimport { useEffect } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { PAGE_CONTENT_BLOCK_TYPES } from './constants';\n\nfunction DisableBlock( { clientId } ) {\n\tconst isDescendentOfQueryLoop = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getBlockParentsByBlockName } = select( blockEditorStore );\n\t\t\treturn (\n\t\t\t\tgetBlockParentsByBlockName( clientId, 'core/query' ).length !==\n\t\t\t\t0\n\t\t\t);\n\t\t},\n\t\t[ clientId ]\n\t);\n\tconst mode = isDescendentOfQueryLoop ? undefined : 'contentOnly';\n\tconst { setBlockEditingMode, unsetBlockEditingMode } =\n\t\tuseDispatch( blockEditorStore );\n\tuseEffect( () => {\n\t\tif ( mode ) {\n\t\t\tsetBlockEditingMode( clientId, mode );\n\t\t\treturn () => {\n\t\t\t\tunsetBlockEditingMode( clientId );\n\t\t\t};\n\t\t}\n\t}, [ clientId, mode, setBlockEditingMode, unsetBlockEditingMode ] );\n}\n\n/**\n * Component that when rendered, makes it so that the site editor allows only\n * page content to be edited.\n */\nexport default function DisableNonPageContentBlocks() {\n\tuseBlockEditingMode( 'disabled' );\n\tconst clientIds = useSelect( ( select ) => {\n\t\tconst { __experimentalGetGlobalBlocksByName } =\n\t\t\tselect( blockEditorStore );\n\t\treturn __experimentalGetGlobalBlocksByName( PAGE_CONTENT_BLOCK_TYPES );\n\t}, [] );\n\n\treturn clientIds.map( ( clientId ) => {\n\t\treturn <DisableBlock key={ clientId } clientId={ clientId } />;\n\t} );\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAIA,IAAAE,QAAA,GAAAF,OAAA;AAKA,IAAAG,UAAA,GAAAH,OAAA;AAbA;AACA;AACA;;AAQA;AACA;AACA;;AAGA,SAASI,YAAYA,CAAE;EAAEC;AAAS,CAAC,EAAG;EACrC,MAAMC,uBAAuB,GAAG,IAAAC,eAAS,EACtCC,MAAM,IAAM;IACb,MAAM;MAAEC;IAA2B,CAAC,GAAGD,MAAM,CAAEE,kBAAiB,CAAC;IACjE,OACCD,0BAA0B,CAAEJ,QAAQ,EAAE,YAAa,CAAC,CAACM,MAAM,KAC3D,CAAC;EAEH,CAAC,EACD,CAAEN,QAAQ,CACX,CAAC;EACD,MAAMO,IAAI,GAAGN,uBAAuB,GAAGO,SAAS,GAAG,aAAa;EAChE,MAAM;IAAEC,mBAAmB;IAAEC;EAAsB,CAAC,GACnD,IAAAC,iBAAW,EAAEN,kBAAiB,CAAC;EAChC,IAAAO,kBAAS,EAAE,MAAM;IAChB,IAAKL,IAAI,EAAG;MACXE,mBAAmB,CAAET,QAAQ,EAAEO,IAAK,CAAC;MACrC,OAAO,MAAM;QACZG,qBAAqB,CAAEV,QAAS,CAAC;MAClC,CAAC;IACF;EACD,CAAC,EAAE,CAAEA,QAAQ,EAAEO,IAAI,EAAEE,mBAAmB,EAAEC,qBAAqB,CAAG,CAAC;AACpE;;AAEA;AACA;AACA;AACA;AACe,SAASG,2BAA2BA,CAAA,EAAG;EACrD,IAAAC,gCAAmB,EAAE,UAAW,CAAC;EACjC,MAAMC,SAAS,GAAG,IAAAb,eAAS,EAAIC,MAAM,IAAM;IAC1C,MAAM;MAAEa;IAAoC,CAAC,GAC5Cb,MAAM,CAAEE,kBAAiB,CAAC;IAC3B,OAAOW,mCAAmC,CAAEC,mCAAyB,CAAC;EACvE,CAAC,EAAE,EAAG,CAAC;EAEP,OAAOF,SAAS,CAACG,GAAG,CAAIlB,QAAQ,IAAM;IACrC,OAAO,IAAAmB,MAAA,CAAAC,aAAA,EAACrB,YAAY;MAACsB,GAAG,EAAGrB,QAAU;MAACA,QAAQ,EAAGA;IAAU,CAAE,CAAC;EAC/D,CAAE,CAAC;AACJ"}

package/build/components/provider/index.js

@@ -14,10 +14,13 @@ var _coreData = require("@wordpress/core-data");
 var _blockEditor = require("@wordpress/block-editor");
 var _notices = require("@wordpress/notices");
 var _patterns = require("@wordpress/patterns");
+var _blocks = require("@wordpress/blocks");
 var _withRegistryProvider = _interopRequireDefault(require("./with-registry-provider"));
 var _store = require("../../store");
 var _useBlockEditorSettings = _interopRequireDefault(require("./use-block-editor-settings"));
 var _lockUnlock = require("../../lock-unlock");
+var _disableNonPageContentBlocks = _interopRequireDefault(require("./disable-non-page-content-blocks"));
+var _constants = require("./constants");
 /**
  * WordPress dependencies
  */
@@ -32,24 +35,135 @@ const {
 const {
   PatternsMenuItems
 } = (0, _lockUnlock.unlock)(_patterns.privateApis);
+const noop = () => {};
+
+/**
+ * For the Navigation block editor, we need to force the block editor to contentOnly for that block.
+ *
+ * Set block editing mode to contentOnly when entering Navigation focus mode.
+ * this ensures that non-content controls on the block will be hidden and thus
+ * the user can focus on editing the Navigation Menu content only.
+ *
+ * @param {string} navigationBlockClientId ClientId.
+ */
+function useForceFocusModeForNavigation(navigationBlockClientId) {
+  const {
+    setBlockEditingMode,
+    unsetBlockEditingMode
+  } = (0, _data.useDispatch)(_blockEditor.store);
+  (0, _element.useEffect)(() => {
+    if (!navigationBlockClientId) {
+      return;
+    }
+    setBlockEditingMode(navigationBlockClientId, 'contentOnly');
+    return () => {
+      unsetBlockEditingMode(navigationBlockClientId);
+    };
+  }, [navigationBlockClientId, unsetBlockEditingMode, setBlockEditingMode]);
+}
+
+/**
+ * Helper method to extract the post content block types from a template.
+ *
+ * @param {Array} blocks Template blocks.
+ *
+ * @return {Array} Flattened object.
+ */
+function extractPageContentBlockTypesFromTemplateBlocks(blocks) {
+  const result = [];
+  for (let i = 0; i < blocks.length; i++) {
+    // Since the Query Block could contain PAGE_CONTENT_BLOCK_TYPES block types,
+    // we skip it because we only want to render stand-alone page content blocks in the block list.
+    if (blocks[i].name === 'core/query') {
+      continue;
+    }
+    if (_constants.PAGE_CONTENT_BLOCK_TYPES.includes(blocks[i].name)) {
+      result.push((0, _blocks.createBlock)(blocks[i].name));
+    }
+    if (blocks[i].innerBlocks.length) {
+      result.push(...extractPageContentBlockTypesFromTemplateBlocks(blocks[i].innerBlocks));
+    }
+  }
+  return result;
+}
+
+/**
+ * Depending on the post, template and template mode,
+ * returns the appropriate blocks and change handlers for the block editor provider.
+ *
+ * @param {Array}   post     Block list.
+ * @param {boolean} template Whether the page content has focus (and the surrounding template is inert). If `true` return page content blocks. Default `false`.
+ * @param {string}  mode     Rendering mode.
+ * @return {Array} Block editor props.
+ */
+function useBlockEditorProps(post, template, mode) {
+  const rootLevelPost = mode === 'post-only' || !template ? 'post' : 'template';
+  const [postBlocks, onInput, onChange] = (0, _coreData.useEntityBlockEditor)('postType', post.type, {
+    id: post.id
+  });
+  const [templateBlocks, onInputTemplate, onChangeTemplate] = (0, _coreData.useEntityBlockEditor)('postType', template?.type, {
+    id: template?.id
+  });
+  const blocks = (0, _element.useMemo)(() => {
+    if (post.type === 'wp_navigation') {
+      return [(0, _blocks.createBlock)('core/navigation', {
+        ref: post.id,
+        // As the parent editor is locked with `templateLock`, the template locking
+        // must be explicitly "unset" on the block itself to allow the user to modify
+        // the block's content.
+        templateLock: false
+      })];
+    }
+    if (mode === 'post-only') {
+      const postContentBlocks = extractPageContentBlockTypesFromTemplateBlocks(templateBlocks);
+      return [(0, _blocks.createBlock)('core/group', {
+        layout: {
+          type: 'constrained'
+        },
+        style: {
+          spacing: {
+            margin: {
+              top: '4em' // Mimics the post editor.
+            }
+          }
+        }
+      }, postContentBlocks.length ? postContentBlocks : [(0, _blocks.createBlock)('core/post-title'), (0, _blocks.createBlock)('core/post-content')])];
+    }
+    if (rootLevelPost === 'template') {
+      return templateBlocks;
+    }
+    return postBlocks;
+  }, [templateBlocks, postBlocks, rootLevelPost, post.type, post.id, mode]);
+  const disableRootLevelChanges = !!template && mode === 'template-locked' || post.type === 'wp_navigation' || mode === 'post-only';
+  const navigationBlockClientId = post.type === 'wp_navigation' && blocks && blocks[0]?.clientId;
+  useForceFocusModeForNavigation(navigationBlockClientId);
+  if (disableRootLevelChanges) {
+    return [blocks, noop, noop];
+  }
+  return [blocks, rootLevelPost === 'post' ? onInput : onInputTemplate, rootLevelPost === 'post' ? onChange : onChangeTemplate];
+}
 const ExperimentalEditorProvider = (0, _withRegistryProvider.default)(({
-  __unstableTemplate,
   post,
   settings,
   recovery,
   initialEdits,
   children,
-  BlockEditorProviderComponent = ExperimentalBlockEditorProvider
+  BlockEditorProviderComponent = ExperimentalBlockEditorProvider,
+  __unstableTemplate: template
 }) => {
+  const mode = (0, _data.useSelect)(select => select(_store.store).getRenderingMode(), []);
+  const shouldRenderTemplate = !!template && mode !== 'post-only';
+  const rootLevelPost = shouldRenderTemplate ? template : post;
   const defaultBlockContext = (0, _element.useMemo)(() => {
-    if (post.type === 'wp_template') {
-      return {};
-    }
-    return {
+    const postContext = rootLevelPost.type !== 'wp_template' || shouldRenderTemplate && mode !== 'template-only' ? {
       postId: post.id,
       postType: post.type
+    } : {};
+    return {
+      ...postContext,
+      templateSlug: rootLevelPost.type === 'wp_template' ? rootLevelPost.slug : undefined
     };
-  }, [post.id, post.type]);
+  }, [mode, post.id, post.type, rootLevelPost.type, rootLevelPost?.slug, shouldRenderTemplate]);
   const {
     editorSettings,
     selection,
@@ -69,11 +183,9 @@ const ExperimentalEditorProvider = (0, _withRegistryProvider.default)(({
   const {
     id,
     type
-  } = __unstableTemplate !== null && __unstableTemplate !== void 0 ? __unstableTemplate : post;
-  const [blocks, onInput, onChange] = (0, _coreData.useEntityBlockEditor)('postType', type, {
-    id
-  });
-  const blockEditorSettings = (0, _useBlockEditorSettings.default)(editorSettings, !!__unstableTemplate);
+  } = rootLevelPost;
+  const blockEditorSettings = (0, _useBlockEditorSettings.default)(editorSettings, type, id);
+  const [blocks, onInput, onChange] = useBlockEditorProps(post, template, mode);
   const {
     updatePostLock,
     setupEditor,
@@ -110,7 +222,7 @@ const ExperimentalEditorProvider = (0, _withRegistryProvider.default)(({
   // Synchronize the editor settings as they change.
   (0, _element.useEffect)(() => {
     updateEditorSettings(settings);
-  }, [settings]);
+  }, [settings, updateEditorSettings]);
   if (!isReady) {
     return null;
   }
@@ -130,7 +242,7 @@ const ExperimentalEditorProvider = (0, _withRegistryProvider.default)(({
     selection: selection,
     settings: blockEditorSettings,
     useSubRegistry: false
-  }, children, (0, _react.createElement)(PatternsMenuItems, null)))));
+  }, children, (0, _react.createElement)(PatternsMenuItems, null), ['post-only', 'template-locked'].includes(mode) && (0, _react.createElement)(_disableNonPageContentBlocks.default, null)))));
 });
 exports.ExperimentalEditorProvider = ExperimentalEditorProvider;
 function EditorProvider(props) {