@wordpress/edit-post 8.27.0 → 8.28.0

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 8.28.0 (2025-08-07)
+
 ## 8.27.0 (2025-07-23)
 
 ## 8.26.0 (2025-06-25)

package/build/components/browser-url/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.BrowserURL = void 0;
+exports.default = BrowserURL;
 exports.getPostEditURL = getPostEditURL;
 var _element = require("@wordpress/element");
 var _data = require("@wordpress/data");
@@ -26,65 +26,38 @@ function getPostEditURL(postId) {
     action: 'edit'
   });
 }
-class BrowserURL extends _element.Component {
-  constructor() {
-    super(...arguments);
-    this.state = {
-      historyId: null
-    };
-  }
-  componentDidUpdate(prevProps) {
-    const {
-      postId,
-      postStatus
-    } = this.props;
+function BrowserURL() {
+  const [historyId, setHistoryId] = (0, _element.useState)(null);
+  const {
+    postId,
+    postStatus
+  } = (0, _data.useSelect)(select => {
     const {
-      historyId
-    } = this.state;
-    if ((postId !== prevProps.postId || postId !== historyId) && postStatus !== 'auto-draft' && postId) {
-      this.setBrowserURL(postId);
+      getCurrentPost
+    } = select(_editor.store);
+    const post = getCurrentPost();
+    let {
+      id,
+      status,
+      type
+    } = post;
+    const isTemplate = ['wp_template', 'wp_template_part'].includes(type);
+    if (isTemplate) {
+      id = post.wp_id;
     }
-  }
-
-  /**
-   * Replaces the browser URL with a post editor link for the given post ID.
-   *
-   * Note it is important that, since this function may be called when the
-   * editor first loads, the result generated `getPostEditURL` matches that
-   * produced by the server. Otherwise, the URL will change unexpectedly.
-   *
-   * @param {number} postId Post ID for which to generate post editor URL.
-   */
-  setBrowserURL(postId) {
-    window.history.replaceState({
-      id: postId
-    }, 'Post ' + postId, getPostEditURL(postId));
-    this.setState(() => ({
-      historyId: postId
-    }));
-  }
-  render() {
-    return null;
-  }
+    return {
+      postId: id,
+      postStatus: status
+    };
+  }, []);
+  (0, _element.useEffect)(() => {
+    if (postId && postId !== historyId && postStatus !== 'auto-draft') {
+      window.history.replaceState({
+        id: postId
+      }, 'Post ' + postId, getPostEditURL(postId));
+      setHistoryId(postId);
+    }
+  }, [postId, postStatus, historyId]);
+  return null;
 }
-exports.BrowserURL = BrowserURL;
-var _default = exports.default = (0, _data.withSelect)(select => {
-  const {
-    getCurrentPost
-  } = select(_editor.store);
-  const post = getCurrentPost();
-  let {
-    id,
-    status,
-    type
-  } = post;
-  const isTemplate = ['wp_template', 'wp_template_part'].includes(type);
-  if (isTemplate) {
-    id = post.wp_id;
-  }
-  return {
-    postId: id,
-    postStatus: status
-  };
-})(BrowserURL);
 //# sourceMappingURL=index.js.map

package/build/components/browser-url/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_data","_url","_editor","getPostEditURL","postId","addQueryArgs","post","action","BrowserURL","Component","constructor","arguments","state","historyId","componentDidUpdate","prevProps","postStatus","props","setBrowserURL","window","history","replaceState","id","setState","render","exports","_default","default","withSelect","select","getCurrentPost","editorStore","status","type","isTemplate","includes","wp_id"],"sources":["@wordpress/edit-post/src/components/browser-url/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Component } from '@wordpress/element';\nimport { withSelect } from '@wordpress/data';\nimport { addQueryArgs } from '@wordpress/url';\nimport { store as editorStore } from '@wordpress/editor';\n\n/**\n * Returns the Post's Edit URL.\n *\n * @param {number} postId Post ID.\n *\n * @return {string} Post edit URL.\n */\nexport function getPostEditURL( postId ) {\n\treturn addQueryArgs( 'post.php', { post: postId, action: 'edit' } );\n}\n\nexport class BrowserURL extends Component {\n\tconstructor() {\n\t\tsuper( ...arguments );\n\n\t\tthis.state = {\n\t\t\thistoryId: null,\n\t\t};\n\t}\n\n\tcomponentDidUpdate( prevProps ) {\n\t\tconst { postId, postStatus } = this.props;\n\t\tconst { historyId } = this.state;\n\n\t\tif (\n\t\t\t( postId !== prevProps.postId || postId !== historyId ) &&\n\t\t\tpostStatus !== 'auto-draft' &&\n\t\t\tpostId\n\t\t) {\n\t\t\tthis.setBrowserURL( postId );\n\t\t}\n\t}\n\n\t/**\n\t * Replaces the browser URL with a post editor link for the given post ID.\n\t *\n\t * Note it is important that, since this function may be called when the\n\t * editor first loads, the result generated `getPostEditURL` matches that\n\t * produced by the server. Otherwise, the URL will change unexpectedly.\n\t *\n\t * @param {number} postId Post ID for which to generate post editor URL.\n\t */\n\tsetBrowserURL( postId ) {\n\t\twindow.history.replaceState(\n\t\t\t{ id: postId },\n\t\t\t'Post ' + postId,\n\t\t\tgetPostEditURL( postId )\n\t\t);\n\n\t\tthis.setState( () => ( {\n\t\t\thistoryId: postId,\n\t\t} ) );\n\t}\n\n\trender() {\n\t\treturn null;\n\t}\n}\n\nexport default withSelect( ( select ) => {\n\tconst { getCurrentPost } = select( editorStore );\n\tconst post = getCurrentPost();\n\tlet { id, status, type } = post;\n\tconst isTemplate = [ 'wp_template', 'wp_template_part' ].includes( type );\n\tif ( isTemplate ) {\n\t\tid = post.wp_id;\n\t}\n\n\treturn {\n\t\tpostId: id,\n\t\tpostStatus: status,\n\t};\n} )( BrowserURL );\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,IAAA,GAAAF,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AANA;AACA;AACA;;AAMA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASI,cAAcA,CAAEC,MAAM,EAAG;EACxC,OAAO,IAAAC,iBAAY,EAAE,UAAU,EAAE;IAAEC,IAAI,EAAEF,MAAM;IAAEG,MAAM,EAAE;EAAO,CAAE,CAAC;AACpE;AAEO,MAAMC,UAAU,SAASC,kBAAS,CAAC;EACzCC,WAAWA,CAAA,EAAG;IACb,KAAK,CAAE,GAAGC,SAAU,CAAC;IAErB,IAAI,CAACC,KAAK,GAAG;MACZC,SAAS,EAAE;IACZ,CAAC;EACF;EAEAC,kBAAkBA,CAAEC,SAAS,EAAG;IAC/B,MAAM;MAAEX,MAAM;MAAEY;IAAW,CAAC,GAAG,IAAI,CAACC,KAAK;IACzC,MAAM;MAAEJ;IAAU,CAAC,GAAG,IAAI,CAACD,KAAK;IAEhC,IACC,CAAER,MAAM,KAAKW,SAAS,CAACX,MAAM,IAAIA,MAAM,KAAKS,SAAS,KACrDG,UAAU,KAAK,YAAY,IAC3BZ,MAAM,EACL;MACD,IAAI,CAACc,aAAa,CAAEd,MAAO,CAAC;IAC7B;EACD;;EAEA;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACCc,aAAaA,CAAEd,MAAM,EAAG;IACvBe,MAAM,CAACC,OAAO,CAACC,YAAY,CAC1B;MAAEC,EAAE,EAAElB;IAAO,CAAC,EACd,OAAO,GAAGA,MAAM,EAChBD,cAAc,CAAEC,MAAO,CACxB,CAAC;IAED,IAAI,CAACmB,QAAQ,CAAE,OAAQ;MACtBV,SAAS,EAAET;IACZ,CAAC,CAAG,CAAC;EACN;EAEAoB,MAAMA,CAAA,EAAG;IACR,OAAO,IAAI;EACZ;AACD;AAACC,OAAA,CAAAjB,UAAA,GAAAA,UAAA;AAAA,IAAAkB,QAAA,GAAAD,OAAA,CAAAE,OAAA,GAEc,IAAAC,gBAAU,EAAIC,MAAM,IAAM;EACxC,MAAM;IAAEC;EAAe,CAAC,GAAGD,MAAM,CAAEE,aAAY,CAAC;EAChD,MAAMzB,IAAI,GAAGwB,cAAc,CAAC,CAAC;EAC7B,IAAI;IAAER,EAAE;IAAEU,MAAM;IAAEC;EAAK,CAAC,GAAG3B,IAAI;EAC/B,MAAM4B,UAAU,GAAG,CAAE,aAAa,EAAE,kBAAkB,CAAE,CAACC,QAAQ,CAAEF,IAAK,CAAC;EACzE,IAAKC,UAAU,EAAG;IACjBZ,EAAE,GAAGhB,IAAI,CAAC8B,KAAK;EAChB;EAEA,OAAO;IACNhC,MAAM,EAAEkB,EAAE;IACVN,UAAU,EAAEgB;EACb,CAAC;AACF,CAAE,CAAC,CAAExB,UAAW,CAAC","ignoreList":[]}
+{"version":3,"names":["_element","require","_data","_url","_editor","getPostEditURL","postId","addQueryArgs","post","action","BrowserURL","historyId","setHistoryId","useState","postStatus","useSelect","select","getCurrentPost","editorStore","id","status","type","isTemplate","includes","wp_id","useEffect","window","history","replaceState"],"sources":["@wordpress/edit-post/src/components/browser-url/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect, useState } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\nimport { addQueryArgs } from '@wordpress/url';\nimport { store as editorStore } from '@wordpress/editor';\n\n/**\n * Returns the Post's Edit URL.\n *\n * @param {number} postId Post ID.\n *\n * @return {string} Post edit URL.\n */\nexport function getPostEditURL( postId ) {\n\treturn addQueryArgs( 'post.php', { post: postId, action: 'edit' } );\n}\n\nexport default function BrowserURL() {\n\tconst [ historyId, setHistoryId ] = useState( null );\n\tconst { postId, postStatus } = useSelect( ( select ) => {\n\t\tconst { getCurrentPost } = select( editorStore );\n\t\tconst post = getCurrentPost();\n\t\tlet { id, status, type } = post;\n\t\tconst isTemplate = [ 'wp_template', 'wp_template_part' ].includes(\n\t\t\ttype\n\t\t);\n\t\tif ( isTemplate ) {\n\t\t\tid = post.wp_id;\n\t\t}\n\n\t\treturn {\n\t\t\tpostId: id,\n\t\t\tpostStatus: status,\n\t\t};\n\t}, [] );\n\n\tuseEffect( () => {\n\t\tif ( postId && postId !== historyId && postStatus !== 'auto-draft' ) {\n\t\t\twindow.history.replaceState(\n\t\t\t\t{ id: postId },\n\t\t\t\t'Post ' + postId,\n\t\t\t\tgetPostEditURL( postId )\n\t\t\t);\n\t\t\tsetHistoryId( postId );\n\t\t}\n\t}, [ postId, postStatus, historyId ] );\n\n\treturn null;\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,IAAA,GAAAF,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AANA;AACA;AACA;;AAMA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASI,cAAcA,CAAEC,MAAM,EAAG;EACxC,OAAO,IAAAC,iBAAY,EAAE,UAAU,EAAE;IAAEC,IAAI,EAAEF,MAAM;IAAEG,MAAM,EAAE;EAAO,CAAE,CAAC;AACpE;AAEe,SAASC,UAAUA,CAAA,EAAG;EACpC,MAAM,CAAEC,SAAS,EAAEC,YAAY,CAAE,GAAG,IAAAC,iBAAQ,EAAE,IAAK,CAAC;EACpD,MAAM;IAAEP,MAAM;IAAEQ;EAAW,CAAC,GAAG,IAAAC,eAAS,EAAIC,MAAM,IAAM;IACvD,MAAM;MAAEC;IAAe,CAAC,GAAGD,MAAM,CAAEE,aAAY,CAAC;IAChD,MAAMV,IAAI,GAAGS,cAAc,CAAC,CAAC;IAC7B,IAAI;MAAEE,EAAE;MAAEC,MAAM;MAAEC;IAAK,CAAC,GAAGb,IAAI;IAC/B,MAAMc,UAAU,GAAG,CAAE,aAAa,EAAE,kBAAkB,CAAE,CAACC,QAAQ,CAChEF,IACD,CAAC;IACD,IAAKC,UAAU,EAAG;MACjBH,EAAE,GAAGX,IAAI,CAACgB,KAAK;IAChB;IAEA,OAAO;MACNlB,MAAM,EAAEa,EAAE;MACVL,UAAU,EAAEM;IACb,CAAC;EACF,CAAC,EAAE,EAAG,CAAC;EAEP,IAAAK,kBAAS,EAAE,MAAM;IAChB,IAAKnB,MAAM,IAAIA,MAAM,KAAKK,SAAS,IAAIG,UAAU,KAAK,YAAY,EAAG;MACpEY,MAAM,CAACC,OAAO,CAACC,YAAY,CAC1B;QAAET,EAAE,EAAEb;MAAO,CAAC,EACd,OAAO,GAAGA,MAAM,EAChBD,cAAc,CAAEC,MAAO,CACxB,CAAC;MACDM,YAAY,CAAEN,MAAO,CAAC;IACvB;EACD,CAAC,EAAE,CAAEA,MAAM,EAAEQ,UAAU,EAAEH,SAAS,CAAG,CAAC;EAEtC,OAAO,IAAI;AACZ","ignoreList":[]}

package/build-module/components/browser-url/index.js

@@ -1,8 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { Component } from '@wordpress/element';
-import { withSelect } from '@wordpress/data';
+import { useEffect, useState } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
 import { addQueryArgs } from '@wordpress/url';
 import { store as editorStore } from '@wordpress/editor';
 
@@ -19,64 +19,38 @@ export function getPostEditURL(postId) {
     action: 'edit'
   });
 }
-export class BrowserURL extends Component {
-  constructor() {
-    super(...arguments);
-    this.state = {
-      historyId: null
-    };
-  }
-  componentDidUpdate(prevProps) {
-    const {
-      postId,
-      postStatus
-    } = this.props;
+export default function BrowserURL() {
+  const [historyId, setHistoryId] = useState(null);
+  const {
+    postId,
+    postStatus
+  } = useSelect(select => {
     const {
-      historyId
-    } = this.state;
-    if ((postId !== prevProps.postId || postId !== historyId) && postStatus !== 'auto-draft' && postId) {
-      this.setBrowserURL(postId);
+      getCurrentPost
+    } = select(editorStore);
+    const post = getCurrentPost();
+    let {
+      id,
+      status,
+      type
+    } = post;
+    const isTemplate = ['wp_template', 'wp_template_part'].includes(type);
+    if (isTemplate) {
+      id = post.wp_id;
     }
-  }
-
-  /**
-   * Replaces the browser URL with a post editor link for the given post ID.
-   *
-   * Note it is important that, since this function may be called when the
-   * editor first loads, the result generated `getPostEditURL` matches that
-   * produced by the server. Otherwise, the URL will change unexpectedly.
-   *
-   * @param {number} postId Post ID for which to generate post editor URL.
-   */
-  setBrowserURL(postId) {
-    window.history.replaceState({
-      id: postId
-    }, 'Post ' + postId, getPostEditURL(postId));
-    this.setState(() => ({
-      historyId: postId
-    }));
-  }
-  render() {
-    return null;
-  }
+    return {
+      postId: id,
+      postStatus: status
+    };
+  }, []);
+  useEffect(() => {
+    if (postId && postId !== historyId && postStatus !== 'auto-draft') {
+      window.history.replaceState({
+        id: postId
+      }, 'Post ' + postId, getPostEditURL(postId));
+      setHistoryId(postId);
+    }
+  }, [postId, postStatus, historyId]);
+  return null;
 }
-export default withSelect(select => {
-  const {
-    getCurrentPost
-  } = select(editorStore);
-  const post = getCurrentPost();
-  let {
-    id,
-    status,
-    type
-  } = post;
-  const isTemplate = ['wp_template', 'wp_template_part'].includes(type);
-  if (isTemplate) {
-    id = post.wp_id;
-  }
-  return {
-    postId: id,
-    postStatus: status
-  };
-})(BrowserURL);
 //# sourceMappingURL=index.js.map

package/build-module/components/browser-url/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["Component","withSelect","addQueryArgs","store","editorStore","getPostEditURL","postId","post","action","BrowserURL","constructor","arguments","state","historyId","componentDidUpdate","prevProps","postStatus","props","setBrowserURL","window","history","replaceState","id","setState","render","select","getCurrentPost","status","type","isTemplate","includes","wp_id"],"sources":["@wordpress/edit-post/src/components/browser-url/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Component } from '@wordpress/element';\nimport { withSelect } from '@wordpress/data';\nimport { addQueryArgs } from '@wordpress/url';\nimport { store as editorStore } from '@wordpress/editor';\n\n/**\n * Returns the Post's Edit URL.\n *\n * @param {number} postId Post ID.\n *\n * @return {string} Post edit URL.\n */\nexport function getPostEditURL( postId ) {\n\treturn addQueryArgs( 'post.php', { post: postId, action: 'edit' } );\n}\n\nexport class BrowserURL extends Component {\n\tconstructor() {\n\t\tsuper( ...arguments );\n\n\t\tthis.state = {\n\t\t\thistoryId: null,\n\t\t};\n\t}\n\n\tcomponentDidUpdate( prevProps ) {\n\t\tconst { postId, postStatus } = this.props;\n\t\tconst { historyId } = this.state;\n\n\t\tif (\n\t\t\t( postId !== prevProps.postId || postId !== historyId ) &&\n\t\t\tpostStatus !== 'auto-draft' &&\n\t\t\tpostId\n\t\t) {\n\t\t\tthis.setBrowserURL( postId );\n\t\t}\n\t}\n\n\t/**\n\t * Replaces the browser URL with a post editor link for the given post ID.\n\t *\n\t * Note it is important that, since this function may be called when the\n\t * editor first loads, the result generated `getPostEditURL` matches that\n\t * produced by the server. Otherwise, the URL will change unexpectedly.\n\t *\n\t * @param {number} postId Post ID for which to generate post editor URL.\n\t */\n\tsetBrowserURL( postId ) {\n\t\twindow.history.replaceState(\n\t\t\t{ id: postId },\n\t\t\t'Post ' + postId,\n\t\t\tgetPostEditURL( postId )\n\t\t);\n\n\t\tthis.setState( () => ( {\n\t\t\thistoryId: postId,\n\t\t} ) );\n\t}\n\n\trender() {\n\t\treturn null;\n\t}\n}\n\nexport default withSelect( ( select ) => {\n\tconst { getCurrentPost } = select( editorStore );\n\tconst post = getCurrentPost();\n\tlet { id, status, type } = post;\n\tconst isTemplate = [ 'wp_template', 'wp_template_part' ].includes( type );\n\tif ( isTemplate ) {\n\t\tid = post.wp_id;\n\t}\n\n\treturn {\n\t\tpostId: id,\n\t\tpostStatus: status,\n\t};\n} )( BrowserURL );\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,SAAS,QAAQ,oBAAoB;AAC9C,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,YAAY,QAAQ,gBAAgB;AAC7C,SAASC,KAAK,IAAIC,WAAW,QAAQ,mBAAmB;;AAExD;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,cAAcA,CAAEC,MAAM,EAAG;EACxC,OAAOJ,YAAY,CAAE,UAAU,EAAE;IAAEK,IAAI,EAAED,MAAM;IAAEE,MAAM,EAAE;EAAO,CAAE,CAAC;AACpE;AAEA,OAAO,MAAMC,UAAU,SAAST,SAAS,CAAC;EACzCU,WAAWA,CAAA,EAAG;IACb,KAAK,CAAE,GAAGC,SAAU,CAAC;IAErB,IAAI,CAACC,KAAK,GAAG;MACZC,SAAS,EAAE;IACZ,CAAC;EACF;EAEAC,kBAAkBA,CAAEC,SAAS,EAAG;IAC/B,MAAM;MAAET,MAAM;MAAEU;IAAW,CAAC,GAAG,IAAI,CAACC,KAAK;IACzC,MAAM;MAAEJ;IAAU,CAAC,GAAG,IAAI,CAACD,KAAK;IAEhC,IACC,CAAEN,MAAM,KAAKS,SAAS,CAACT,MAAM,IAAIA,MAAM,KAAKO,SAAS,KACrDG,UAAU,KAAK,YAAY,IAC3BV,MAAM,EACL;MACD,IAAI,CAACY,aAAa,CAAEZ,MAAO,CAAC;IAC7B;EACD;;EAEA;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACCY,aAAaA,CAAEZ,MAAM,EAAG;IACvBa,MAAM,CAACC,OAAO,CAACC,YAAY,CAC1B;MAAEC,EAAE,EAAEhB;IAAO,CAAC,EACd,OAAO,GAAGA,MAAM,EAChBD,cAAc,CAAEC,MAAO,CACxB,CAAC;IAED,IAAI,CAACiB,QAAQ,CAAE,OAAQ;MACtBV,SAAS,EAAEP;IACZ,CAAC,CAAG,CAAC;EACN;EAEAkB,MAAMA,CAAA,EAAG;IACR,OAAO,IAAI;EACZ;AACD;AAEA,eAAevB,UAAU,CAAIwB,MAAM,IAAM;EACxC,MAAM;IAAEC;EAAe,CAAC,GAAGD,MAAM,CAAErB,WAAY,CAAC;EAChD,MAAMG,IAAI,GAAGmB,cAAc,CAAC,CAAC;EAC7B,IAAI;IAAEJ,EAAE;IAAEK,MAAM;IAAEC;EAAK,CAAC,GAAGrB,IAAI;EAC/B,MAAMsB,UAAU,GAAG,CAAE,aAAa,EAAE,kBAAkB,CAAE,CAACC,QAAQ,CAAEF,IAAK,CAAC;EACzE,IAAKC,UAAU,EAAG;IACjBP,EAAE,GAAGf,IAAI,CAACwB,KAAK;EAChB;EAEA,OAAO;IACNzB,MAAM,EAAEgB,EAAE;IACVN,UAAU,EAAEW;EACb,CAAC;AACF,CAAE,CAAC,CAAElB,UAAW,CAAC","ignoreList":[]}
+{"version":3,"names":["useEffect","useState","useSelect","addQueryArgs","store","editorStore","getPostEditURL","postId","post","action","BrowserURL","historyId","setHistoryId","postStatus","select","getCurrentPost","id","status","type","isTemplate","includes","wp_id","window","history","replaceState"],"sources":["@wordpress/edit-post/src/components/browser-url/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect, useState } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\nimport { addQueryArgs } from '@wordpress/url';\nimport { store as editorStore } from '@wordpress/editor';\n\n/**\n * Returns the Post's Edit URL.\n *\n * @param {number} postId Post ID.\n *\n * @return {string} Post edit URL.\n */\nexport function getPostEditURL( postId ) {\n\treturn addQueryArgs( 'post.php', { post: postId, action: 'edit' } );\n}\n\nexport default function BrowserURL() {\n\tconst [ historyId, setHistoryId ] = useState( null );\n\tconst { postId, postStatus } = useSelect( ( select ) => {\n\t\tconst { getCurrentPost } = select( editorStore );\n\t\tconst post = getCurrentPost();\n\t\tlet { id, status, type } = post;\n\t\tconst isTemplate = [ 'wp_template', 'wp_template_part' ].includes(\n\t\t\ttype\n\t\t);\n\t\tif ( isTemplate ) {\n\t\t\tid = post.wp_id;\n\t\t}\n\n\t\treturn {\n\t\t\tpostId: id,\n\t\t\tpostStatus: status,\n\t\t};\n\t}, [] );\n\n\tuseEffect( () => {\n\t\tif ( postId && postId !== historyId && postStatus !== 'auto-draft' ) {\n\t\t\twindow.history.replaceState(\n\t\t\t\t{ id: postId },\n\t\t\t\t'Post ' + postId,\n\t\t\t\tgetPostEditURL( postId )\n\t\t\t);\n\t\t\tsetHistoryId( postId );\n\t\t}\n\t}, [ postId, postStatus, historyId ] );\n\n\treturn null;\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,SAAS,EAAEC,QAAQ,QAAQ,oBAAoB;AACxD,SAASC,SAAS,QAAQ,iBAAiB;AAC3C,SAASC,YAAY,QAAQ,gBAAgB;AAC7C,SAASC,KAAK,IAAIC,WAAW,QAAQ,mBAAmB;;AAExD;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,cAAcA,CAAEC,MAAM,EAAG;EACxC,OAAOJ,YAAY,CAAE,UAAU,EAAE;IAAEK,IAAI,EAAED,MAAM;IAAEE,MAAM,EAAE;EAAO,CAAE,CAAC;AACpE;AAEA,eAAe,SAASC,UAAUA,CAAA,EAAG;EACpC,MAAM,CAAEC,SAAS,EAAEC,YAAY,CAAE,GAAGX,QAAQ,CAAE,IAAK,CAAC;EACpD,MAAM;IAAEM,MAAM;IAAEM;EAAW,CAAC,GAAGX,SAAS,CAAIY,MAAM,IAAM;IACvD,MAAM;MAAEC;IAAe,CAAC,GAAGD,MAAM,CAAET,WAAY,CAAC;IAChD,MAAMG,IAAI,GAAGO,cAAc,CAAC,CAAC;IAC7B,IAAI;MAAEC,EAAE;MAAEC,MAAM;MAAEC;IAAK,CAAC,GAAGV,IAAI;IAC/B,MAAMW,UAAU,GAAG,CAAE,aAAa,EAAE,kBAAkB,CAAE,CAACC,QAAQ,CAChEF,IACD,CAAC;IACD,IAAKC,UAAU,EAAG;MACjBH,EAAE,GAAGR,IAAI,CAACa,KAAK;IAChB;IAEA,OAAO;MACNd,MAAM,EAAES,EAAE;MACVH,UAAU,EAAEI;IACb,CAAC;EACF,CAAC,EAAE,EAAG,CAAC;EAEPjB,SAAS,CAAE,MAAM;IAChB,IAAKO,MAAM,IAAIA,MAAM,KAAKI,SAAS,IAAIE,UAAU,KAAK,YAAY,EAAG;MACpES,MAAM,CAACC,OAAO,CAACC,YAAY,CAC1B;QAAER,EAAE,EAAET;MAAO,CAAC,EACd,OAAO,GAAGA,MAAM,EAChBD,cAAc,CAAEC,MAAO,CACxB,CAAC;MACDK,YAAY,CAAEL,MAAO,CAAC;IACvB;EACD,CAAC,EAAE,CAAEA,MAAM,EAAEM,UAAU,EAAEF,SAAS,CAAG,CAAC;EAEtC,OAAO,IAAI;AACZ","ignoreList":[]}

package/build-style/style-rtl.css

@@ -246,8 +246,8 @@
     background: #1e1e1e;
     color: #fff;
     border-radius: 0;
-    height: 60px;
-    width: 60px;
+    height: 64px;
+    width: 64px;
     position: relative;
   }
   .edit-post-fullscreen-mode-close.components-button:active {
@@ -300,7 +300,7 @@
  *  Show icon label overrides.
  */
 .show-icon-labels .editor-header .edit-post-fullscreen-mode-close.has-icon {
-  width: 60px;
+  width: 64px;
 }
 .show-icon-labels .editor-header .edit-post-fullscreen-mode-close.has-icon svg {
   display: block;
@@ -623,25 +623,9 @@ body.js.block-editor-page .media-frame select.attachment-filters:last-of-type {
   }
 }
 
-.editor-header,
-.editor-text-editor,
-.editor-sidebar,
-.editor-post-publish-panel,
 .edit-post-visual-editor.is-iframed {
   box-sizing: border-box;
 }
-.editor-header *,
-.editor-header *::before,
-.editor-header *::after,
-.editor-text-editor *,
-.editor-text-editor *::before,
-.editor-text-editor *::after,
-.editor-sidebar *,
-.editor-sidebar *::before,
-.editor-sidebar *::after,
-.editor-post-publish-panel *,
-.editor-post-publish-panel *::before,
-.editor-post-publish-panel *::after,
 .edit-post-visual-editor.is-iframed *,
 .edit-post-visual-editor.is-iframed *::before,
 .edit-post-visual-editor.is-iframed *::after {

package/build-style/style.css

@@ -246,8 +246,8 @@
     background: #1e1e1e;
     color: #fff;
     border-radius: 0;
-    height: 60px;
-    width: 60px;
+    height: 64px;
+    width: 64px;
     position: relative;
   }
   .edit-post-fullscreen-mode-close.components-button:active {
@@ -300,7 +300,7 @@
  *  Show icon label overrides.
  */
 .show-icon-labels .editor-header .edit-post-fullscreen-mode-close.has-icon {
-  width: 60px;
+  width: 64px;
 }
 .show-icon-labels .editor-header .edit-post-fullscreen-mode-close.has-icon svg {
   display: block;
@@ -623,25 +623,9 @@ body.js.block-editor-page .media-frame select.attachment-filters:last-of-type {
   }
 }
 
-.editor-header,
-.editor-text-editor,
-.editor-sidebar,
-.editor-post-publish-panel,
 .edit-post-visual-editor.is-iframed {
   box-sizing: border-box;
 }
-.editor-header *,
-.editor-header *::before,
-.editor-header *::after,
-.editor-text-editor *,
-.editor-text-editor *::before,
-.editor-text-editor *::after,
-.editor-sidebar *,
-.editor-sidebar *::before,
-.editor-sidebar *::after,
-.editor-post-publish-panel *,
-.editor-post-publish-panel *::before,
-.editor-post-publish-panel *::after,
 .edit-post-visual-editor.is-iframed *,
 .edit-post-visual-editor.is-iframed *::before,
 .edit-post-visual-editor.is-iframed *::after {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-post",
-	"version": "8.27.0",
+	"version": "8.28.0",
 	"description": "Edit Post module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -29,35 +29,35 @@
 	"wpScript": true,
 	"dependencies": {
 		"@babel/runtime": "7.25.7",
-		"@wordpress/a11y": "^4.27.0",
-		"@wordpress/api-fetch": "^7.27.0",
-		"@wordpress/block-editor": "^15.0.0",
-		"@wordpress/block-library": "^9.27.0",
-		"@wordpress/blocks": "^15.0.0",
-		"@wordpress/commands": "^1.27.0",
-		"@wordpress/components": "^30.0.0",
-		"@wordpress/compose": "^7.27.0",
-		"@wordpress/core-commands": "^1.27.0",
-		"@wordpress/core-data": "^7.27.0",
-		"@wordpress/data": "^10.27.0",
-		"@wordpress/deprecated": "^4.27.0",
-		"@wordpress/dom": "^4.27.0",
-		"@wordpress/editor": "^14.27.0",
-		"@wordpress/element": "^6.27.0",
-		"@wordpress/hooks": "^4.27.0",
-		"@wordpress/html-entities": "^4.27.0",
-		"@wordpress/i18n": "^6.0.0",
-		"@wordpress/icons": "^10.27.0",
-		"@wordpress/keyboard-shortcuts": "^5.27.0",
-		"@wordpress/keycodes": "^4.27.0",
-		"@wordpress/notices": "^5.27.0",
-		"@wordpress/plugins": "^7.27.0",
-		"@wordpress/preferences": "^4.27.0",
-		"@wordpress/private-apis": "^1.27.0",
-		"@wordpress/url": "^4.27.0",
-		"@wordpress/viewport": "^6.27.0",
-		"@wordpress/warning": "^3.27.0",
-		"@wordpress/widgets": "^4.27.0",
+		"@wordpress/a11y": "^4.28.0",
+		"@wordpress/api-fetch": "^7.28.0",
+		"@wordpress/block-editor": "^15.1.0",
+		"@wordpress/block-library": "^9.28.0",
+		"@wordpress/blocks": "^15.1.0",
+		"@wordpress/commands": "^1.28.0",
+		"@wordpress/components": "^30.1.0",
+		"@wordpress/compose": "^7.28.0",
+		"@wordpress/core-commands": "^1.28.0",
+		"@wordpress/core-data": "^7.28.0",
+		"@wordpress/data": "^10.28.0",
+		"@wordpress/deprecated": "^4.28.0",
+		"@wordpress/dom": "^4.28.0",
+		"@wordpress/editor": "^14.28.0",
+		"@wordpress/element": "^6.28.0",
+		"@wordpress/hooks": "^4.28.0",
+		"@wordpress/html-entities": "^4.28.0",
+		"@wordpress/i18n": "^6.1.0",
+		"@wordpress/icons": "^10.28.0",
+		"@wordpress/keyboard-shortcuts": "^5.28.0",
+		"@wordpress/keycodes": "^4.28.0",
+		"@wordpress/notices": "^5.28.0",
+		"@wordpress/plugins": "^7.28.0",
+		"@wordpress/preferences": "^4.28.0",
+		"@wordpress/private-apis": "^1.28.0",
+		"@wordpress/url": "^4.28.0",
+		"@wordpress/viewport": "^6.28.0",
+		"@wordpress/warning": "^3.28.0",
+		"@wordpress/widgets": "^4.28.0",
 		"clsx": "^2.1.1",
 		"memize": "^2.1.0"
 	},
@@ -68,5 +68,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "abe06a6f2aef8d03c30ea9d5b3e133f041e523b1"
+	"gitHead": "28cc2098f5ee28f89096b638533796538f495f72"
 }

package/src/components/browser-url/index.js

@@ -1,8 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { Component } from '@wordpress/element';
-import { withSelect } from '@wordpress/data';
+import { useEffect, useState } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
 import { addQueryArgs } from '@wordpress/url';
 import { store as editorStore } from '@wordpress/editor';
 
@@ -17,65 +17,35 @@ export function getPostEditURL( postId ) {
 	return addQueryArgs( 'post.php', { post: postId, action: 'edit' } );
 }
 
-export class BrowserURL extends Component {
-	constructor() {
-		super( ...arguments );
+export default function BrowserURL() {
+	const [ historyId, setHistoryId ] = useState( null );
+	const { postId, postStatus } = useSelect( ( select ) => {
+		const { getCurrentPost } = select( editorStore );
+		const post = getCurrentPost();
+		let { id, status, type } = post;
+		const isTemplate = [ 'wp_template', 'wp_template_part' ].includes(
+			type
+		);
+		if ( isTemplate ) {
+			id = post.wp_id;
+		}
 
-		this.state = {
-			historyId: null,
+		return {
+			postId: id,
+			postStatus: status,
 		};
-	}
-
-	componentDidUpdate( prevProps ) {
-		const { postId, postStatus } = this.props;
-		const { historyId } = this.state;
-
-		if (
-			( postId !== prevProps.postId || postId !== historyId ) &&
-			postStatus !== 'auto-draft' &&
-			postId
-		) {
-			this.setBrowserURL( postId );
+	}, [] );
+
+	useEffect( () => {
+		if ( postId && postId !== historyId && postStatus !== 'auto-draft' ) {
+			window.history.replaceState(
+				{ id: postId },
+				'Post ' + postId,
+				getPostEditURL( postId )
+			);
+			setHistoryId( postId );
 		}
-	}
+	}, [ postId, postStatus, historyId ] );
 
-	/**
-	 * Replaces the browser URL with a post editor link for the given post ID.
-	 *
-	 * Note it is important that, since this function may be called when the
-	 * editor first loads, the result generated `getPostEditURL` matches that
-	 * produced by the server. Otherwise, the URL will change unexpectedly.
-	 *
-	 * @param {number} postId Post ID for which to generate post editor URL.
-	 */
-	setBrowserURL( postId ) {
-		window.history.replaceState(
-			{ id: postId },
-			'Post ' + postId,
-			getPostEditURL( postId )
-		);
-
-		this.setState( () => ( {
-			historyId: postId,
-		} ) );
-	}
-
-	render() {
-		return null;
-	}
+	return null;
 }
-
-export default withSelect( ( select ) => {
-	const { getCurrentPost } = select( editorStore );
-	const post = getCurrentPost();
-	let { id, status, type } = post;
-	const isTemplate = [ 'wp_template', 'wp_template_part' ].includes( type );
-	if ( isTemplate ) {
-		id = post.wp_id;
-	}
-
-	return {
-		postId: id,
-		postStatus: status,
-	};
-} )( BrowserURL );

package/src/components/browser-url/test/index.js

@@ -3,10 +3,26 @@
  */
 import { render } from '@testing-library/react';
 
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+
 /**
  * Internal dependencies
  */
-import { getPostEditURL, BrowserURL } from '../';
+import { default as BrowserURL, getPostEditURL } from '../';
+
+jest.mock( '@wordpress/data/src/components/use-select', () => jest.fn() );
+
+function setupUseSelectMock( { postId, postStatus } ) {
+	useSelect.mockImplementation( () => {
+		return {
+			postId,
+			postStatus,
+		};
+	} );
+}
 
 describe( 'getPostEditURL', () => {
 	it( 'should generate relative path with post and action arguments', () => {
@@ -32,20 +48,28 @@ describe( 'BrowserURL', () => {
 	} );
 
 	it( 'not update URL if post is auto-draft', () => {
-		const { rerender } = render( <BrowserURL /> );
-
-		rerender( <BrowserURL postId={ 1 } postStatus="auto-draft" /> );
+		setupUseSelectMock( {
+			postId: 1,
+			postStatus: 'auto-draft',
+		} );
 
+		render( <BrowserURL /> );
 		expect( replaceStateSpy ).not.toHaveBeenCalled();
 	} );
 
 	it( 'update URL if post is no longer auto-draft', () => {
+		setupUseSelectMock( {
+			postId: 1,
+			postStatus: 'auto-draft',
+		} );
 		const { rerender } = render( <BrowserURL /> );
 
-		rerender( <BrowserURL postId={ 1 } postStatus="auto-draft" /> );
-
-		rerender( <BrowserURL postId={ 1 } postStatus="draft" /> );
+		setupUseSelectMock( {
+			postId: 1,
+			postStatus: 'draft',
+		} );
 
+		rerender( <BrowserURL /> );
 		expect( replaceStateSpy ).toHaveBeenCalledWith(
 			{ id: 1 },
 			'Post 1',
@@ -54,26 +78,32 @@ describe( 'BrowserURL', () => {
 	} );
 
 	it( 'not update URL if history is already set', () => {
+		setupUseSelectMock( {
+			postId: 1,
+			postStatus: 'draft',
+		} );
 		const { rerender } = render( <BrowserURL /> );
 
-		rerender( <BrowserURL postId={ 1 } postStatus="draft" /> );
-
 		replaceStateSpy.mockReset();
 
-		rerender( <BrowserURL postId={ 1 } postStatus="draft" /> );
-
+		rerender( <BrowserURL /> );
 		expect( replaceStateSpy ).not.toHaveBeenCalled();
 	} );
 
 	it( 'update URL if post ID changes', () => {
+		setupUseSelectMock( {
+			postId: 1,
+			postStatus: 'draft',
+		} );
 		const { rerender } = render( <BrowserURL /> );
 
-		rerender( <BrowserURL postId={ 1 } postStatus="draft" /> );
-
+		setupUseSelectMock( {
+			postId: 2,
+			postStatus: 'draft',
+		} );
 		replaceStateSpy.mockReset();
 
-		rerender( <BrowserURL postId={ 2 } postStatus="draft" /> );
-
+		rerender( <BrowserURL /> );
 		expect( replaceStateSpy ).toHaveBeenCalledWith(
 			{ id: 2 },
 			'Post 2',

package/src/style.scss

@@ -15,12 +15,6 @@ body.js.block-editor-page {
 	}
 }
 
-// Target the editor UI excluding the non-iframed visual editor contents, metaboxes
-//  and custom fields areas.
-.editor-header,
-.editor-text-editor,
-.editor-sidebar,
-.editor-post-publish-panel,
 .edit-post-visual-editor.is-iframed {
 	@include reset;
 }