@wordpress/edit-site 5.3.3 → 5.3.5

package/build-module/components/sync-state-with-url/use-sync-path-with-url.js

@@ -11,33 +11,82 @@ import { useLocation, useHistory } from '../routes';
 export default function useSyncPathWithURL() {
   const history = useHistory();
   const {
-    params
+    params: urlParams
   } = useLocation();
   const {
-    path = '/'
-  } = params;
-  const {
-    location,
+    location: navigatorLocation,
+    params: navigatorParams,
     goTo
   } = useNavigator();
-  const currentPath = useRef(path);
-  const currentNavigatorLocation = useRef(location.path);
+  const currentUrlParams = useRef(urlParams);
+  const currentPath = useRef();
   useEffect(() => {
-    currentPath.current = path;
+    // Don't trust the navigator path on initial render.
+    if (currentPath.current === null) {
+      return;
+    }
 
-    if (path !== currentNavigatorLocation.current) {
-      goTo(path);
+    function updateUrlParams(newUrlParams) {
+      if (Object.entries(newUrlParams).every(_ref => {
+        let [key, value] = _ref;
+        return currentUrlParams.current[key] === value;
+      })) {
+        return;
+      }
+
+      const updatedParams = { ...currentUrlParams.current,
+        ...newUrlParams
+      };
+      currentUrlParams.current = updatedParams;
+      history.push(updatedParams);
     }
-  }, [path]);
-  useEffect(() => {
-    currentNavigatorLocation.current = location.path;
 
-    if (location.path !== currentPath.current) {
-      history.push({ ...params,
-        path: location.path
+    if (navigatorParams !== null && navigatorParams !== void 0 && navigatorParams.postType && navigatorParams !== null && navigatorParams !== void 0 && navigatorParams.postId) {
+      updateUrlParams({
+        postType: navigatorParams === null || navigatorParams === void 0 ? void 0 : navigatorParams.postType,
+        postId: navigatorParams === null || navigatorParams === void 0 ? void 0 : navigatorParams.postId,
+        path: undefined
+      });
+    } else if (navigatorParams !== null && navigatorParams !== void 0 && navigatorParams.postType && !(navigatorParams !== null && navigatorParams !== void 0 && navigatorParams.postId)) {
+      updateUrlParams({
+        postType: navigatorParams === null || navigatorParams === void 0 ? void 0 : navigatorParams.postType,
+        path: navigatorLocation.path,
+        postId: undefined
       });
+    } else {
+      updateUrlParams({
+        postType: undefined,
+        postId: undefined,
+        path: navigatorLocation.path
+      });
+    }
+  }, [navigatorLocation === null || navigatorLocation === void 0 ? void 0 : navigatorLocation.path, navigatorParams, history]);
+  useEffect(() => {
+    var _urlParams$path;
+
+    currentUrlParams.current = urlParams;
+    let path = (_urlParams$path = urlParams === null || urlParams === void 0 ? void 0 : urlParams.path) !== null && _urlParams$path !== void 0 ? _urlParams$path : '/'; // Compute the navigator path based on the URL params.
+
+    if (urlParams !== null && urlParams !== void 0 && urlParams.postType && urlParams !== null && urlParams !== void 0 && urlParams.postId && // This is just a special case to support old WP versions that perform redirects.
+    // This code should be removed when we minimum WP version becomes 6.2.
+    (urlParams === null || urlParams === void 0 ? void 0 : urlParams.postId) !== 'none') {
+      switch (urlParams.postType) {
+        case 'wp_template':
+        case 'wp_template_part':
+          path = `/${encodeURIComponent(urlParams.postType)}/${encodeURIComponent(urlParams.postId)}`;
+          break;
+
+        default:
+          path = `/navigation/${encodeURIComponent(urlParams.postType)}/${encodeURIComponent(urlParams.postId)}`;
+      }
     }
-  }, [location.path, history]);
-  return path;
+
+    if (currentPath.current !== path) {
+      currentPath.current = path;
+      goTo(path);
+    }
+
+    goTo(path);
+  }, [urlParams, goTo]);
 }
 //# sourceMappingURL=use-sync-path-with-url.js.map

package/build-module/components/sync-state-with-url/use-sync-path-with-url.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/sync-state-with-url/use-sync-path-with-url.js"],"names":["__experimentalUseNavigator","useNavigator","useEffect","useRef","useLocation","useHistory","useSyncPathWithURL","history","params","path","location","goTo","currentPath","currentNavigatorLocation","current","push"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,0BAA0B,IAAIC,YAAvC,QAA2D,uBAA3D;AACA,SAASC,SAAT,EAAoBC,MAApB,QAAkC,oBAAlC;AAEA;AACA;AACA;;AACA,SAASC,WAAT,EAAsBC,UAAtB,QAAwC,WAAxC;AAEA,eAAe,SAASC,kBAAT,GAA8B;AAC5C,QAAMC,OAAO,GAAGF,UAAU,EAA1B;AACA,QAAM;AAAEG,IAAAA;AAAF,MAAaJ,WAAW,EAA9B;AACA,QAAM;AAAEK,IAAAA,IAAI,GAAG;AAAT,MAAiBD,MAAvB;AACA,QAAM;AAAEE,IAAAA,QAAF;AAAYC,IAAAA;AAAZ,MAAqBV,YAAY,EAAvC;AACA,QAAMW,WAAW,GAAGT,MAAM,CAAEM,IAAF,CAA1B;AACA,QAAMI,wBAAwB,GAAGV,MAAM,CAAEO,QAAQ,CAACD,IAAX,CAAvC;AACAP,EAAAA,SAAS,CAAE,MAAM;AAChBU,IAAAA,WAAW,CAACE,OAAZ,GAAsBL,IAAtB;;AACA,QAAKA,IAAI,KAAKI,wBAAwB,CAACC,OAAvC,EAAiD;AAChDH,MAAAA,IAAI,CAAEF,IAAF,CAAJ;AACA;AACD,GALQ,EAKN,CAAEA,IAAF,CALM,CAAT;AAMAP,EAAAA,SAAS,CAAE,MAAM;AAChBW,IAAAA,wBAAwB,CAACC,OAAzB,GAAmCJ,QAAQ,CAACD,IAA5C;;AACA,QAAKC,QAAQ,CAACD,IAAT,KAAkBG,WAAW,CAACE,OAAnC,EAA6C;AAC5CP,MAAAA,OAAO,CAACQ,IAAR,CAAc,EACb,GAAGP,MADU;AAEbC,QAAAA,IAAI,EAAEC,QAAQ,CAACD;AAFF,OAAd;AAIA;AACD,GARQ,EAQN,CAAEC,QAAQ,CAACD,IAAX,EAAiBF,OAAjB,CARM,CAAT;AAUA,SAAOE,IAAP;AACA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __experimentalUseNavigator as useNavigator } from '@wordpress/components';\nimport { useEffect, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { useLocation, useHistory } from '../routes';\n\nexport default function useSyncPathWithURL() {\n\tconst history = useHistory();\n\tconst { params } = useLocation();\n\tconst { path = '/' } = params;\n\tconst { location, goTo } = useNavigator();\n\tconst currentPath = useRef( path );\n\tconst currentNavigatorLocation = useRef( location.path );\n\tuseEffect( () => {\n\t\tcurrentPath.current = path;\n\t\tif ( path !== currentNavigatorLocation.current ) {\n\t\t\tgoTo( path );\n\t\t}\n\t}, [ path ] );\n\tuseEffect( () => {\n\t\tcurrentNavigatorLocation.current = location.path;\n\t\tif ( location.path !== currentPath.current ) {\n\t\t\thistory.push( {\n\t\t\t\t...params,\n\t\t\t\tpath: location.path,\n\t\t\t} );\n\t\t}\n\t}, [ location.path, history ] );\n\n\treturn path;\n}\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/sync-state-with-url/use-sync-path-with-url.js"],"names":["__experimentalUseNavigator","useNavigator","useEffect","useRef","useLocation","useHistory","useSyncPathWithURL","history","params","urlParams","location","navigatorLocation","navigatorParams","goTo","currentUrlParams","currentPath","current","updateUrlParams","newUrlParams","Object","entries","every","key","value","updatedParams","push","postType","postId","path","undefined","encodeURIComponent"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,0BAA0B,IAAIC,YAAvC,QAA2D,uBAA3D;AACA,SAASC,SAAT,EAAoBC,MAApB,QAAkC,oBAAlC;AAEA;AACA;AACA;;AACA,SAASC,WAAT,EAAsBC,UAAtB,QAAwC,WAAxC;AAEA,eAAe,SAASC,kBAAT,GAA8B;AAC5C,QAAMC,OAAO,GAAGF,UAAU,EAA1B;AACA,QAAM;AAAEG,IAAAA,MAAM,EAAEC;AAAV,MAAwBL,WAAW,EAAzC;AACA,QAAM;AACLM,IAAAA,QAAQ,EAAEC,iBADL;AAELH,IAAAA,MAAM,EAAEI,eAFH;AAGLC,IAAAA;AAHK,MAIFZ,YAAY,EAJhB;AAKA,QAAMa,gBAAgB,GAAGX,MAAM,CAAEM,SAAF,CAA/B;AACA,QAAMM,WAAW,GAAGZ,MAAM,EAA1B;AAEAD,EAAAA,SAAS,CAAE,MAAM;AAChB;AACA,QAAKa,WAAW,CAACC,OAAZ,KAAwB,IAA7B,EAAoC;AACnC;AACA;;AACD,aAASC,eAAT,CAA0BC,YAA1B,EAAyC;AACxC,UACCC,MAAM,CAACC,OAAP,CAAgBF,YAAhB,EAA+BG,KAA/B,CAAsC,QAAsB;AAAA,YAApB,CAAEC,GAAF,EAAOC,KAAP,CAAoB;AAC3D,eAAOT,gBAAgB,CAACE,OAAjB,CAA0BM,GAA1B,MAAoCC,KAA3C;AACA,OAFD,CADD,EAIE;AACD;AACA;;AACD,YAAMC,aAAa,GAAG,EACrB,GAAGV,gBAAgB,CAACE,OADC;AAErB,WAAGE;AAFkB,OAAtB;AAIAJ,MAAAA,gBAAgB,CAACE,OAAjB,GAA2BQ,aAA3B;AACAjB,MAAAA,OAAO,CAACkB,IAAR,CAAcD,aAAd;AACA;;AAED,QAAKZ,eAAe,SAAf,IAAAA,eAAe,WAAf,IAAAA,eAAe,CAAEc,QAAjB,IAA6Bd,eAA7B,aAA6BA,eAA7B,eAA6BA,eAAe,CAAEe,MAAnD,EAA4D;AAC3DV,MAAAA,eAAe,CAAE;AAChBS,QAAAA,QAAQ,EAAEd,eAAF,aAAEA,eAAF,uBAAEA,eAAe,CAAEc,QADX;AAEhBC,QAAAA,MAAM,EAAEf,eAAF,aAAEA,eAAF,uBAAEA,eAAe,CAAEe,MAFT;AAGhBC,QAAAA,IAAI,EAAEC;AAHU,OAAF,CAAf;AAKA,KAND,MAMO,IAAKjB,eAAe,SAAf,IAAAA,eAAe,WAAf,IAAAA,eAAe,CAAEc,QAAjB,IAA6B,EAAEd,eAAF,aAAEA,eAAF,eAAEA,eAAe,CAAEe,MAAnB,CAAlC,EAA8D;AACpEV,MAAAA,eAAe,CAAE;AAChBS,QAAAA,QAAQ,EAAEd,eAAF,aAAEA,eAAF,uBAAEA,eAAe,CAAEc,QADX;AAEhBE,QAAAA,IAAI,EAAEjB,iBAAiB,CAACiB,IAFR;AAGhBD,QAAAA,MAAM,EAAEE;AAHQ,OAAF,CAAf;AAKA,KANM,MAMA;AACNZ,MAAAA,eAAe,CAAE;AAChBS,QAAAA,QAAQ,EAAEG,SADM;AAEhBF,QAAAA,MAAM,EAAEE,SAFQ;AAGhBD,QAAAA,IAAI,EAAEjB,iBAAiB,CAACiB;AAHR,OAAF,CAAf;AAKA;AACD,GAxCQ,EAwCN,CAAEjB,iBAAF,aAAEA,iBAAF,uBAAEA,iBAAiB,CAAEiB,IAArB,EAA2BhB,eAA3B,EAA4CL,OAA5C,CAxCM,CAAT;AA0CAL,EAAAA,SAAS,CAAE,MAAM;AAAA;;AAChBY,IAAAA,gBAAgB,CAACE,OAAjB,GAA2BP,SAA3B;AACA,QAAImB,IAAI,sBAAGnB,SAAH,aAAGA,SAAH,uBAAGA,SAAS,CAAEmB,IAAd,6DAAsB,GAA9B,CAFgB,CAIhB;;AACA,QACCnB,SAAS,SAAT,IAAAA,SAAS,WAAT,IAAAA,SAAS,CAAEiB,QAAX,IACAjB,SADA,aACAA,SADA,eACAA,SAAS,CAAEkB,MADX,IAEA;AACA;AACA,KAAAlB,SAAS,SAAT,IAAAA,SAAS,WAAT,YAAAA,SAAS,CAAEkB,MAAX,MAAsB,MALvB,EAME;AACD,cAASlB,SAAS,CAACiB,QAAnB;AACC,aAAK,aAAL;AACA,aAAK,kBAAL;AACCE,UAAAA,IAAI,GAAI,IAAIE,kBAAkB,CAC7BrB,SAAS,CAACiB,QADmB,CAE3B,IAAII,kBAAkB,CAAErB,SAAS,CAACkB,MAAZ,CAAsB,EAF/C;AAGA;;AACD;AACCC,UAAAA,IAAI,GAAI,eAAeE,kBAAkB,CACxCrB,SAAS,CAACiB,QAD8B,CAEtC,IAAII,kBAAkB,CAAErB,SAAS,CAACkB,MAAZ,CAAsB,EAF/C;AARF;AAYA;;AAED,QAAKZ,WAAW,CAACC,OAAZ,KAAwBY,IAA7B,EAAoC;AACnCb,MAAAA,WAAW,CAACC,OAAZ,GAAsBY,IAAtB;AACAf,MAAAA,IAAI,CAAEe,IAAF,CAAJ;AACA;;AACDf,IAAAA,IAAI,CAAEe,IAAF,CAAJ;AACA,GA/BQ,EA+BN,CAAEnB,SAAF,EAAaI,IAAb,CA/BM,CAAT;AAgCA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __experimentalUseNavigator as useNavigator } from '@wordpress/components';\nimport { useEffect, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { useLocation, useHistory } from '../routes';\n\nexport default function useSyncPathWithURL() {\n\tconst history = useHistory();\n\tconst { params: urlParams } = useLocation();\n\tconst {\n\t\tlocation: navigatorLocation,\n\t\tparams: navigatorParams,\n\t\tgoTo,\n\t} = useNavigator();\n\tconst currentUrlParams = useRef( urlParams );\n\tconst currentPath = useRef();\n\n\tuseEffect( () => {\n\t\t// Don't trust the navigator path on initial render.\n\t\tif ( currentPath.current === null ) {\n\t\t\treturn;\n\t\t}\n\t\tfunction updateUrlParams( newUrlParams ) {\n\t\t\tif (\n\t\t\t\tObject.entries( newUrlParams ).every( ( [ key, value ] ) => {\n\t\t\t\t\treturn currentUrlParams.current[ key ] === value;\n\t\t\t\t} )\n\t\t\t) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst updatedParams = {\n\t\t\t\t...currentUrlParams.current,\n\t\t\t\t...newUrlParams,\n\t\t\t};\n\t\t\tcurrentUrlParams.current = updatedParams;\n\t\t\thistory.push( updatedParams );\n\t\t}\n\n\t\tif ( navigatorParams?.postType && navigatorParams?.postId ) {\n\t\t\tupdateUrlParams( {\n\t\t\t\tpostType: navigatorParams?.postType,\n\t\t\t\tpostId: navigatorParams?.postId,\n\t\t\t\tpath: undefined,\n\t\t\t} );\n\t\t} else if ( navigatorParams?.postType && ! navigatorParams?.postId ) {\n\t\t\tupdateUrlParams( {\n\t\t\t\tpostType: navigatorParams?.postType,\n\t\t\t\tpath: navigatorLocation.path,\n\t\t\t\tpostId: undefined,\n\t\t\t} );\n\t\t} else {\n\t\t\tupdateUrlParams( {\n\t\t\t\tpostType: undefined,\n\t\t\t\tpostId: undefined,\n\t\t\t\tpath: navigatorLocation.path,\n\t\t\t} );\n\t\t}\n\t}, [ navigatorLocation?.path, navigatorParams, history ] );\n\n\tuseEffect( () => {\n\t\tcurrentUrlParams.current = urlParams;\n\t\tlet path = urlParams?.path ?? '/';\n\n\t\t// Compute the navigator path based on the URL params.\n\t\tif (\n\t\t\turlParams?.postType &&\n\t\t\turlParams?.postId &&\n\t\t\t// This is just a special case to support old WP versions that perform redirects.\n\t\t\t// This code should be removed when we minimum WP version becomes 6.2.\n\t\t\turlParams?.postId !== 'none'\n\t\t) {\n\t\t\tswitch ( urlParams.postType ) {\n\t\t\t\tcase 'wp_template':\n\t\t\t\tcase 'wp_template_part':\n\t\t\t\t\tpath = `/${ encodeURIComponent(\n\t\t\t\t\t\turlParams.postType\n\t\t\t\t\t) }/${ encodeURIComponent( urlParams.postId ) }`;\n\t\t\t\t\tbreak;\n\t\t\t\tdefault:\n\t\t\t\t\tpath = `/navigation/${ encodeURIComponent(\n\t\t\t\t\t\turlParams.postType\n\t\t\t\t\t) }/${ encodeURIComponent( urlParams.postId ) }`;\n\t\t\t}\n\t\t}\n\n\t\tif ( currentPath.current !== path ) {\n\t\t\tcurrentPath.current = path;\n\t\t\tgoTo( path );\n\t\t}\n\t\tgoTo( path );\n\t}, [ urlParams, goTo ] );\n}\n"]}

package/build-module/utils/get-is-list-page.js

@@ -10,6 +10,6 @@ export default function getIsListPage(_ref) {
   let {
     path
   } = _ref;
-  return path === '/templates/all' || path === '/template-parts/all';
+  return path === '/wp_template/all' || path === '/wp_template_part/all';
 }
 //# sourceMappingURL=get-is-list-page.js.map

package/build-module/utils/get-is-list-page.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/utils/get-is-list-page.js"],"names":["getIsListPage","path"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,SAASA,aAAT,OAAmC;AAAA,MAAX;AAAEC,IAAAA;AAAF,GAAW;AACjD,SAAOA,IAAI,KAAK,gBAAT,IAA6BA,IAAI,KAAK,qBAA7C;AACA","sourcesContent":["/**\n * Returns if the params match the list page route.\n *\n * @param {Object} params      The url params.\n * @param {string} params.path The current path.\n *\n * @return {boolean} Is list page or not.\n */\nexport default function getIsListPage( { path } ) {\n\treturn path === '/templates/all' || path === '/template-parts/all';\n}\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/utils/get-is-list-page.js"],"names":["getIsListPage","path"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,SAASA,aAAT,OAAmC;AAAA,MAAX;AAAEC,IAAAA;AAAF,GAAW;AACjD,SAAOA,IAAI,KAAK,kBAAT,IAA+BA,IAAI,KAAK,uBAA/C;AACA","sourcesContent":["/**\n * Returns if the params match the list page route.\n *\n * @param {Object} params      The url params.\n * @param {string} params.path The current path.\n *\n * @return {boolean} Is list page or not.\n */\nexport default function getIsListPage( { path } ) {\n\treturn path === '/wp_template/all' || path === '/wp_template_part/all';\n}\n"]}

package/build-style/style-rtl.css

@@ -413,15 +413,18 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   }
 }
 .interface-interface-skeleton__actions:focus, .interface-interface-skeleton__actions:focus-within {
-  top: 46px;
+  top: auto;
   bottom: 0;
 }
+.is-entity-save-view-open .interface-interface-skeleton__actions:focus, .is-entity-save-view-open .interface-interface-skeleton__actions:focus-within {
+  top: 46px;
+}
 @media (min-width: 782px) {
-  .interface-interface-skeleton__actions:focus, .interface-interface-skeleton__actions:focus-within {
+  .is-entity-save-view-open .interface-interface-skeleton__actions:focus, .is-entity-save-view-open .interface-interface-skeleton__actions:focus-within {
     border-right: 1px solid #ddd;
     top: 32px;
   }
-  .is-fullscreen-mode .interface-interface-skeleton__actions:focus, .is-fullscreen-mode .interface-interface-skeleton__actions:focus-within {
+  .is-fullscreen-mode .is-entity-save-view-open .interface-interface-skeleton__actions:focus, .is-fullscreen-mode .is-entity-save-view-open .interface-interface-skeleton__actions:focus-within {
     top: 0;
   }
 }
@@ -1694,6 +1697,14 @@ body.is-fullscreen-mode .edit-site-list-header {
   margin: 0;
 }
 
+.show-icon-labels .edit-site-global-styles-sidebar__header .components-button.has-icon svg {
+  display: none;
+}
+.show-icon-labels .edit-site-global-styles-sidebar__header .components-button.has-icon::after {
+  content: attr(aria-label);
+  font-size: 12px;
+}
+
 .components-panel__header.edit-site-sidebar-edit-mode__panel-tabs {
   justify-content: flex-start;
   padding-right: 0;
@@ -1847,10 +1858,6 @@ h3.edit-site-template-card__template-areas-title {
   display: flex;
   justify-content: center;
 }
-.edit-site-layout__actions:focus .edit-site-editor__toggle-save-panel, .edit-site-layout__actions:focus-within .edit-site-editor__toggle-save-panel {
-  top: auto;
-  bottom: 0;
-}
 
 .edit-site .components-editor-notices__snackbar {
   position: fixed;
@@ -2323,9 +2330,12 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
   background: #fff;
 }
 .edit-site-layout__actions:focus, .edit-site-layout__actions:focus-within {
-  top: 0;
+  top: auto;
   bottom: 0;
 }
+.edit-site-layout__actions.is-entity-save-view-open:focus, .edit-site-layout__actions.is-entity-save-view-open:focus-within {
+  top: 0;
+}
 @media (min-width: 782px) {
   .edit-site-layout__actions {
     border-right: 1px solid #ddd;
@@ -2447,7 +2457,7 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
 .edit-site-sidebar-navigation-screen__back {
   color: #e0e0e0;
 }
-.edit-site-sidebar-navigation-screen__back:hover, .edit-site-sidebar-navigation-screen__back:not([aria-disabled=true]):active {
+.edit-site-sidebar-navigation-screen__back:hover, .edit-site-sidebar-navigation-screen__back:focus, .edit-site-sidebar-navigation-screen__back:not([aria-disabled=true]):active {
   color: #fff;
 }
 

package/build-style/style.css

@@ -413,15 +413,18 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   }
 }
 .interface-interface-skeleton__actions:focus, .interface-interface-skeleton__actions:focus-within {
-  top: 46px;
+  top: auto;
   bottom: 0;
 }
+.is-entity-save-view-open .interface-interface-skeleton__actions:focus, .is-entity-save-view-open .interface-interface-skeleton__actions:focus-within {
+  top: 46px;
+}
 @media (min-width: 782px) {
-  .interface-interface-skeleton__actions:focus, .interface-interface-skeleton__actions:focus-within {
+  .is-entity-save-view-open .interface-interface-skeleton__actions:focus, .is-entity-save-view-open .interface-interface-skeleton__actions:focus-within {
     border-left: 1px solid #ddd;
     top: 32px;
   }
-  .is-fullscreen-mode .interface-interface-skeleton__actions:focus, .is-fullscreen-mode .interface-interface-skeleton__actions:focus-within {
+  .is-fullscreen-mode .is-entity-save-view-open .interface-interface-skeleton__actions:focus, .is-fullscreen-mode .is-entity-save-view-open .interface-interface-skeleton__actions:focus-within {
     top: 0;
   }
 }
@@ -1694,6 +1697,14 @@ body.is-fullscreen-mode .edit-site-list-header {
   margin: 0;
 }
 
+.show-icon-labels .edit-site-global-styles-sidebar__header .components-button.has-icon svg {
+  display: none;
+}
+.show-icon-labels .edit-site-global-styles-sidebar__header .components-button.has-icon::after {
+  content: attr(aria-label);
+  font-size: 12px;
+}
+
 .components-panel__header.edit-site-sidebar-edit-mode__panel-tabs {
   justify-content: flex-start;
   padding-left: 0;
@@ -1847,10 +1858,6 @@ h3.edit-site-template-card__template-areas-title {
   display: flex;
   justify-content: center;
 }
-.edit-site-layout__actions:focus .edit-site-editor__toggle-save-panel, .edit-site-layout__actions:focus-within .edit-site-editor__toggle-save-panel {
-  top: auto;
-  bottom: 0;
-}
 
 .edit-site .components-editor-notices__snackbar {
   position: fixed;
@@ -2323,9 +2330,12 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
   background: #fff;
 }
 .edit-site-layout__actions:focus, .edit-site-layout__actions:focus-within {
-  top: 0;
+  top: auto;
   bottom: 0;
 }
+.edit-site-layout__actions.is-entity-save-view-open:focus, .edit-site-layout__actions.is-entity-save-view-open:focus-within {
+  top: 0;
+}
 @media (min-width: 782px) {
   .edit-site-layout__actions {
     border-left: 1px solid #ddd;
@@ -2447,7 +2457,7 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
 .edit-site-sidebar-navigation-screen__back {
   color: #e0e0e0;
 }
-.edit-site-sidebar-navigation-screen__back:hover, .edit-site-sidebar-navigation-screen__back:not([aria-disabled=true]):active {
+.edit-site-sidebar-navigation-screen__back:hover, .edit-site-sidebar-navigation-screen__back:focus, .edit-site-sidebar-navigation-screen__back:not([aria-disabled=true]):active {
   color: #fff;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "5.3.3",
+	"version": "5.3.5",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -29,33 +29,33 @@
 		"@babel/runtime": "^7.16.0",
 		"@wordpress/a11y": "^3.26.1",
 		"@wordpress/api-fetch": "^6.23.1",
-		"@wordpress/block-editor": "^11.3.3",
-		"@wordpress/block-library": "^8.3.3",
-		"@wordpress/blocks": "^12.3.2",
-		"@wordpress/components": "^23.3.2",
-		"@wordpress/compose": "^6.3.2",
-		"@wordpress/core-data": "^6.3.2",
-		"@wordpress/data": "^8.3.2",
+		"@wordpress/block-editor": "^11.3.5",
+		"@wordpress/block-library": "^8.3.5",
+		"@wordpress/blocks": "^12.3.3",
+		"@wordpress/components": "^23.3.4",
+		"@wordpress/compose": "^6.3.3",
+		"@wordpress/core-data": "^6.3.3",
+		"@wordpress/data": "^8.3.3",
 		"@wordpress/deprecated": "^3.26.1",
-		"@wordpress/editor": "^13.3.3",
-		"@wordpress/element": "^5.3.1",
+		"@wordpress/editor": "^13.3.5",
+		"@wordpress/element": "^5.3.2",
 		"@wordpress/hooks": "^3.26.1",
 		"@wordpress/html-entities": "^3.26.1",
 		"@wordpress/i18n": "^4.26.1",
-		"@wordpress/icons": "^9.17.1",
-		"@wordpress/interface": "^5.3.3",
-		"@wordpress/keyboard-shortcuts": "^4.3.2",
+		"@wordpress/icons": "^9.17.2",
+		"@wordpress/interface": "^5.3.5",
+		"@wordpress/keyboard-shortcuts": "^4.3.3",
 		"@wordpress/keycodes": "^3.26.2",
-		"@wordpress/media-utils": "^4.17.1",
-		"@wordpress/notices": "^3.26.2",
-		"@wordpress/plugins": "^5.3.2",
-		"@wordpress/preferences": "^3.3.2",
+		"@wordpress/media-utils": "^4.17.2",
+		"@wordpress/notices": "^3.26.3",
+		"@wordpress/plugins": "^5.3.3",
+		"@wordpress/preferences": "^3.3.4",
 		"@wordpress/private-apis": "^0.8.1",
-		"@wordpress/reusable-blocks": "^4.3.3",
+		"@wordpress/reusable-blocks": "^4.3.5",
 		"@wordpress/style-engine": "^1.9.1",
 		"@wordpress/url": "^3.27.1",
-		"@wordpress/viewport": "^5.3.2",
-		"@wordpress/widgets": "^3.3.3",
+		"@wordpress/viewport": "^5.3.3",
+		"@wordpress/widgets": "^3.3.5",
 		"classnames": "^2.3.1",
 		"colord": "^2.9.2",
 		"downloadjs": "^1.4.7",
@@ -73,5 +73,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "1bf01c01a8238ce3a681ad1e517f86033818b78d"
+	"gitHead": "1e2b2f680c6378f789d6660bc04b30e35e3a33a3"
 }

package/src/components/add-new-template/new-template-part.js

@@ -67,12 +67,9 @@ export default function NewTemplatePart( {
 			setCanvasMode( 'edit' );
 
 			// Navigate to the created template part editor.
-			window.queueMicrotask( () => {
-				history.push( {
-					postId: templatePart.id,
-					postType: 'wp_template_part',
-					path: '/template-parts/single',
-				} );
+			history.push( {
+				postId: templatePart.id,
+				postType: 'wp_template_part',
 			} );
 
 			// TODO: Add a success notice?

package/src/components/add-new-template/new-template.js

@@ -143,12 +143,9 @@ export default function NewTemplate( {
 			setCanvasMode( 'edit' );
 
 			// Navigate to the created template editor.
-			window.queueMicrotask( () => {
-				history.push( {
-					postId: newTemplate.id,
-					postType: newTemplate.type,
-					path: '/templates/single',
-				} );
+			history.push( {
+				postId: newTemplate.id,
+				postType: newTemplate.type,
 			} );
 
 			createSuccessNotice(

package/src/components/editor/style.scss

@@ -6,12 +6,6 @@
 	padding: $grid-unit-30;
 	display: flex;
 	justify-content: center;
-
-	.edit-site-layout__actions:focus &,
-	.edit-site-layout__actions:focus-within & {
-		top: auto;
-		bottom: 0;
-	}
 }
 
 // Adjust the position of the notices

package/src/components/global-styles/screen-border.js

@@ -16,7 +16,7 @@ function ScreenBorder( { name, variation = '' } ) {
 	const variationClassName = getVariationClassName( variation );
 	return (
 		<>
-			<ScreenHeader title={ __( 'Border & Shadow' ) } />
+			<ScreenHeader title={ __( 'Border' ) } />
 			<BlockPreviewPanel name={ name } variation={ variationClassName } />
 			{ hasBorderPanel && (
 				<BorderPanel name={ name } variation={ variation } />

package/src/components/global-styles/ui.js

@@ -68,7 +68,7 @@ function GlobalStylesActionMenu() {
 		<GlobalStylesMenuFill>
 			<DropdownMenu
 				icon={ moreVertical }
-				label={ __( 'More Styles actions' ) }
+				label={ __( 'Styles actions' ) }
 				controls={ [
 					{
 						title: __( 'Reset to defaults' ),

package/src/components/layout/style.scss

@@ -207,10 +207,17 @@
 
 	&:focus,
 	&:focus-within {
-		top: 0;
+		top: auto;
 		bottom: 0;
 	}
 
+	&.is-entity-save-view-open {
+		&:focus,
+		&:focus-within {
+			top: 0;
+		}
+	}
+
 	@include break-medium {
 		border-left: $border-width solid $gray-300;
 	}

package/src/components/list/table.js

@@ -84,10 +84,6 @@ export default function Table( { templateType } ) {
 							<Heading level={ 4 }>
 								<Link
 									params={ {
-										path:
-											template.type === 'wp_template'
-												? '/templates/single'
-												: '/template-parts/single',
 										postId: template.id,
 										postType: template.type,
 									} }

package/src/components/navigation-inspector/navigation-menu.js

@@ -39,7 +39,7 @@ const ALLOWED_BLOCKS = {
 export default function NavigationMenu( { innerBlocks, onSelect } ) {
 	const { updateBlockListSettings } = useDispatch( blockEditorStore );
 
-	const { OffCanvasEditor } = unlock( blockEditorPrivateApis );
+	const { OffCanvasEditor, LeafMoreMenu } = unlock( blockEditorPrivateApis );
 
 	//TODO: Block settings are normally updated as a side effect of rendering InnerBlocks in BlockList
 	//Think through a better way of doing this, possible with adding allowed blocks to block library metadata
@@ -56,5 +56,11 @@ export default function NavigationMenu( { innerBlocks, onSelect } ) {
 		} );
 	}, [ updateBlockListSettings, innerBlocks ] );
 
-	return <OffCanvasEditor blocks={ innerBlocks } onSelect={ onSelect } />;
+	return (
+		<OffCanvasEditor
+			blocks={ innerBlocks }
+			onSelect={ onSelect }
+			LeafMoreMenu={ LeafMoreMenu }
+		/>
+	);
 }

package/src/components/save-panel/index.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -46,7 +51,9 @@ export default function SavePanel() {
 
 	return (
 		<NavigableRegion
-			className="edit-site-layout__actions"
+			className={ classnames( 'edit-site-layout__actions', {
+				'is-entity-save-view-open': isSaveViewOpen,
+			} ) }
 			ariaLabel={ __( 'Save sidebar' ) }
 		>
 			{ isSaveViewOpen ? (

package/src/components/sidebar/index.js

@@ -2,9 +2,10 @@
  * WordPress dependencies
  */
 import { memo } from '@wordpress/element';
-import { useSelect } from '@wordpress/data';
-import { __experimentalNavigatorProvider as NavigatorProvider } from '@wordpress/components';
-import { store as coreStore } from '@wordpress/core-data';
+import {
+	__experimentalNavigatorProvider as NavigatorProvider,
+	__experimentalNavigatorScreen as NavigatorScreen,
+} from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -23,30 +24,29 @@ function SidebarScreens() {
 
 	return (
 		<>
-			<SidebarNavigationScreenMain />
-			<SidebarNavigationScreenNavigationMenus />
-			<SidebarNavigationScreenNavigationItem />
-			<SidebarNavigationScreenTemplates postType="wp_template" />
-			<SidebarNavigationScreenTemplates postType="wp_template_part" />
-			<SidebarNavigationScreenTemplate postType="wp_template" />
-			<SidebarNavigationScreenTemplate postType="wp_template_part" />
-			<SidebarNavigationScreenTemplatesBrowse postType="wp_template" />
-			<SidebarNavigationScreenTemplatesBrowse postType="wp_template_part" />
+			<NavigatorScreen path="/">
+				<SidebarNavigationScreenMain />
+			</NavigatorScreen>
+			<NavigatorScreen path="/navigation">
+				<SidebarNavigationScreenNavigationMenus />
+			</NavigatorScreen>
+			<NavigatorScreen path="/navigation/:postType/:postId">
+				<SidebarNavigationScreenNavigationItem />
+			</NavigatorScreen>
+			<NavigatorScreen path="/:postType(wp_template|wp_template_part)">
+				<SidebarNavigationScreenTemplates />
+			</NavigatorScreen>
+			<NavigatorScreen path="/:postType(wp_template|wp_template_part)/all">
+				<SidebarNavigationScreenTemplatesBrowse />
+			</NavigatorScreen>
+			<NavigatorScreen path="/:postType(wp_template|wp_template_part)/:postId">
+				<SidebarNavigationScreenTemplate />
+			</NavigatorScreen>
 		</>
 	);
 }
 
 function Sidebar() {
-	const { isDirty } = useSelect( ( select ) => {
-		const { __experimentalGetDirtyEntityRecords } = select( coreStore );
-		const dirtyEntityRecords = __experimentalGetDirtyEntityRecords();
-		// The currently selected entity to display.
-		// Typically template or template part in the site editor.
-		return {
-			isDirty: dirtyEntityRecords.length > 0,
-		};
-	}, [] );
-
 	return (
 		<>
 			<NavigatorProvider
@@ -55,11 +55,10 @@ function Sidebar() {
 			>
 				<SidebarScreens />
 			</NavigatorProvider>
-			{ isDirty && (
-				<div className="edit-site-sidebar__footer">
-					<SaveButton />
-				</div>
-			) }
+
+			<div className="edit-site-sidebar__footer">
+				<SaveButton />
+			</div>
 		</>
 	);
 }

package/src/components/sidebar-edit-mode/global-styles-sidebar.js

@@ -37,18 +37,14 @@ export default function GlobalStylesSidebar() {
 			closeLabel={ __( 'Close Styles sidebar' ) }
 			panelClassName="edit-site-global-styles-sidebar__panel"
 			header={
-				<Flex>
-					<FlexBlock>
+				<Flex className="edit-site-global-styles-sidebar__header">
+					<FlexBlock style={ { minWidth: 'min-content' } }>
 						<strong>{ __( 'Styles' ) }</strong>
 					</FlexBlock>
 					<FlexItem>
 						<Button
 							icon={ seen }
-							label={
-								isStyleBookOpened
-									? __( 'Close Style Book' )
-									: __( 'Open Style Book' )
-							}
+							label={ __( 'Style Book' ) }
 							isPressed={ isStyleBookOpened }
 							disabled={ editorMode !== 'visual' }
 							onClick={ () => {

package/src/components/sidebar-edit-mode/style.scss

@@ -83,3 +83,19 @@
 .edit-site-global-styles-sidebar hr {
 	margin: 0;
 }
+
+.show-icon-labels {
+	.edit-site-global-styles-sidebar__header {
+		.components-button.has-icon {
+			// Hide the button icons when labels are set to display...
+			svg {
+				display: none;
+			}
+			// ... and display labels.
+			&::after {
+				content: attr(aria-label);
+				font-size: $helptext-font-size;
+			}
+		}
+	}
+}