@wordpress/edit-site 5.10.0 → 5.12.0

package/build/components/sidebar-navigation-screen-navigation-menus/navigation-menu-content.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -15,13 +17,11 @@ var _blocks = require("@wordpress/blocks");
 
 var _components = require("@wordpress/components");
 
-var _dom = require("@wordpress/dom");
-
 var _coreData = require("@wordpress/core-data");
 
 var _privateApis = require("../../private-apis");
 
-var _loader = require("./loader");
+var _leafMoreMenu = _interopRequireDefault(require("./leaf-more-menu"));
 
 /**
  * WordPress dependencies
@@ -30,45 +30,7 @@ var _loader = require("./loader");
 /**
  * Internal dependencies
  */
-function CustomLinkAdditionalBlockUI(_ref) {
-  let {
-    block,
-    onClose
-  } = _ref;
-  const {
-    updateBlockAttributes
-  } = (0, _data.useDispatch)(_blockEditor.store);
-  const {
-    label,
-    url,
-    opensInNewTab
-  } = block.attributes;
-  const link = {
-    url,
-    opensInNewTab,
-    title: label && (0, _dom.__unstableStripHTML)(label)
-  };
-  return (0, _element.createElement)(_components.Popover, {
-    placement: "bottom",
-    shift: true,
-    onClose: onClose
-  }, (0, _element.createElement)(_blockEditor.__experimentalLinkControl, {
-    hasTextControl: true,
-    hasRichPreviews: true,
-    value: link,
-    onChange: updatedValue => {
-      updateBlockAttributes(block.clientId, {
-        label: updatedValue.title,
-        url: updatedValue.url,
-        opensInNewTab: updatedValue.opensInNewTab
-      });
-      onClose();
-    },
-    onCancel: onClose
-  }));
-} // Needs to be kept in sync with the query used at packages/block-library/src/page-list/edit.js.
-
-
+// Needs to be kept in sync with the query used at packages/block-library/src/page-list/edit.js.
 const MAX_PAGE_COUNT = 100;
 const PAGES_QUERY = ['postType', 'page', {
   per_page: MAX_PAGE_COUNT,
@@ -80,11 +42,10 @@ const PAGES_QUERY = ['postType', 'page', {
   order: 'asc'
 }];
 
-function NavigationMenuContent(_ref2) {
-  let {
-    rootClientId,
-    onSelect
-  } = _ref2;
+function NavigationMenuContent({
+  rootClientId,
+  onSelect
+}) {
   const [isLoading, setIsLoading] = (0, _element.useState)(true);
   const {
     clientIdsTree,
@@ -115,20 +76,7 @@ function NavigationMenuContent(_ref2) {
   const {
     replaceBlock,
     __unstableMarkNextChangeAsNotPersistent
-  } = (0, _data.useDispatch)(_blockEditor.store);
-  const [customLinkEditPopoverOpenId, setIsCustomLinkEditPopoverOpenId] = (0, _element.useState)(false);
-  const renderAdditionalBlockUICallback = (0, _element.useCallback)(block => {
-    if (customLinkEditPopoverOpenId && block.clientId === customLinkEditPopoverOpenId) {
-      return (0, _element.createElement)(CustomLinkAdditionalBlockUI, {
-        block: block,
-        onClose: () => {
-          setIsCustomLinkEditPopoverOpenId(false);
-        }
-      });
-    }
-
-    return null;
-  }, [customLinkEditPopoverOpenId, setIsCustomLinkEditPopoverOpenId]); // Delay loading stop by 50ms to avoid flickering.
+  } = (0, _data.useDispatch)(_blockEditor.store); // Delay loading stop by 50ms to avoid flickering.
 
   (0, _element.useEffect)(() => {
     let timeoutId;
@@ -151,32 +99,26 @@ function NavigationMenuContent(_ref2) {
     };
   }, [shouldKeepLoading, clientIdsTree, isLoading]);
   const {
-    PrivateListView,
-    LeafMoreMenu
+    PrivateListView
   } = (0, _privateApis.unlock)(_blockEditor.privateApis);
   const offCanvasOnselect = (0, _element.useCallback)(block => {
     if (block.name === 'core/navigation-link' && !block.attributes.url) {
       __unstableMarkNextChangeAsNotPersistent();
 
       replaceBlock(block.clientId, (0, _blocks.createBlock)('core/navigation-link', block.attributes));
-    } else if (block.name === 'core/navigation-link' && block.attributes.kind === 'custom' && block.attributes.url) {
-      setIsCustomLinkEditPopoverOpenId(block.clientId);
     } else {
       onSelect(block);
     }
-  }, [onSelect, __unstableMarkNextChangeAsNotPersistent, replaceBlock, setIsCustomLinkEditPopoverOpenId]); // The hidden block is needed because it makes block edit side effects trigger.
+  }, [onSelect, __unstableMarkNextChangeAsNotPersistent, replaceBlock]); // The hidden block is needed because it makes block edit side effects trigger.
   // For example a navigation page list load its items has an effect on edit to load its items.
 
-  return (0, _element.createElement)(_element.Fragment, null, isLoading && (0, _element.createElement)(_loader.NavigationMenuLoader, null), !isLoading && (0, _element.createElement)(PrivateListView, {
+  return (0, _element.createElement)(_element.Fragment, null, !isLoading && (0, _element.createElement)(PrivateListView, {
     blocks: isSinglePageList ? clientIdsTree[0].innerBlocks : clientIdsTree,
     onSelect: offCanvasOnselect,
-    blockSettingsMenu: LeafMoreMenu,
-    showAppender: false,
-    renderAdditionalBlockUI: renderAdditionalBlockUICallback
-  }), (0, _element.createElement)("div", {
-    style: {
-      visibility: 'hidden'
-    }
+    blockSettingsMenu: _leafMoreMenu.default,
+    showAppender: false
+  }), (0, _element.createElement)(_components.VisuallyHidden, {
+    "aria-hidden": "true"
   }, (0, _element.createElement)(_blockEditor.BlockTools, null, (0, _element.createElement)(_blockEditor.BlockList, null))));
 }
 //# sourceMappingURL=navigation-menu-content.js.map

package/build/components/sidebar-navigation-screen-navigation-menus/navigation-menu-content.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/sidebar-navigation-screen-navigation-menus/navigation-menu-content.js"],"names":["CustomLinkAdditionalBlockUI","block","onClose","updateBlockAttributes","blockEditorStore","label","url","opensInNewTab","attributes","link","title","updatedValue","clientId","MAX_PAGE_COUNT","PAGES_QUERY","per_page","_fields","orderby","order","NavigationMenuContent","rootClientId","onSelect","isLoading","setIsLoading","clientIdsTree","shouldKeepLoading","isSinglePageList","select","__unstableGetClientIdsTree","areInnerBlocksControlled","getBlockName","isResolving","coreStore","_clientIdsTree","hasOnlyPageListBlock","length","isLoadingPages","innerBlocks","replaceBlock","__unstableMarkNextChangeAsNotPersistent","customLinkEditPopoverOpenId","setIsCustomLinkEditPopoverOpenId","renderAdditionalBlockUICallback","timeoutId","setTimeout","undefined","clearTimeout","PrivateListView","LeafMoreMenu","blockEditorPrivateApis","offCanvasOnselect","name","kind","visibility"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tprivateApis as blockEditorPrivateApis,\n\tstore as blockEditorStore,\n\tBlockList,\n\tBlockTools,\n\t__experimentalLinkControl as LinkControl,\n} from '@wordpress/block-editor';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { createBlock } from '@wordpress/blocks';\nimport { Popover } from '@wordpress/components';\nimport { __unstableStripHTML as stripHTML } from '@wordpress/dom';\nimport { useCallback, useEffect, useState } from '@wordpress/element';\nimport { store as coreStore } from '@wordpress/core-data';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../private-apis';\nimport { NavigationMenuLoader } from './loader';\n\nfunction CustomLinkAdditionalBlockUI( { block, onClose } ) {\n\tconst { updateBlockAttributes } = useDispatch( blockEditorStore );\n\tconst { label, url, opensInNewTab } = block.attributes;\n\tconst link = {\n\t\turl,\n\t\topensInNewTab,\n\t\ttitle: label && stripHTML( label ),\n\t};\n\treturn (\n\t\t<Popover placement=\"bottom\" shift onClose={ onClose }>\n\t\t\t<LinkControl\n\t\t\t\thasTextControl\n\t\t\t\thasRichPreviews\n\t\t\t\tvalue={ link }\n\t\t\t\tonChange={ ( updatedValue ) => {\n\t\t\t\t\tupdateBlockAttributes( block.clientId, {\n\t\t\t\t\t\tlabel: updatedValue.title,\n\t\t\t\t\t\turl: updatedValue.url,\n\t\t\t\t\t\topensInNewTab: updatedValue.opensInNewTab,\n\t\t\t\t\t} );\n\t\t\t\t\tonClose();\n\t\t\t\t} }\n\t\t\t\tonCancel={ onClose }\n\t\t\t/>\n\t\t</Popover>\n\t);\n}\n// Needs to be kept in sync with the query used at packages/block-library/src/page-list/edit.js.\nconst MAX_PAGE_COUNT = 100;\nconst PAGES_QUERY = [\n\t'postType',\n\t'page',\n\t{\n\t\tper_page: MAX_PAGE_COUNT,\n\t\t_fields: [ 'id', 'link', 'menu_order', 'parent', 'title', 'type' ],\n\t\t// TODO: When https://core.trac.wordpress.org/ticket/39037 REST API support for multiple orderby\n\t\t// values is resolved, update 'orderby' to [ 'menu_order', 'post_title' ] to provide a consistent\n\t\t// sort.\n\t\torderby: 'menu_order',\n\t\torder: 'asc',\n\t},\n];\n\nexport default function NavigationMenuContent( { rootClientId, onSelect } ) {\n\tconst [ isLoading, setIsLoading ] = useState( true );\n\tconst { clientIdsTree, shouldKeepLoading, isSinglePageList } = useSelect(\n\t\t( select ) => {\n\t\t\tconst {\n\t\t\t\t__unstableGetClientIdsTree,\n\t\t\t\tareInnerBlocksControlled,\n\t\t\t\tgetBlockName,\n\t\t\t} = select( blockEditorStore );\n\t\t\tconst { isResolving } = select( coreStore );\n\n\t\t\tconst _clientIdsTree = __unstableGetClientIdsTree( rootClientId );\n\t\t\tconst hasOnlyPageListBlock =\n\t\t\t\t_clientIdsTree.length === 1 &&\n\t\t\t\tgetBlockName( _clientIdsTree[ 0 ].clientId ) ===\n\t\t\t\t\t'core/page-list';\n\t\t\tconst isLoadingPages = isResolving(\n\t\t\t\t'getEntityRecords',\n\t\t\t\tPAGES_QUERY\n\t\t\t);\n\t\t\treturn {\n\t\t\t\tclientIdsTree: _clientIdsTree,\n\t\t\t\t// This is a small hack to wait for the navigation block\n\t\t\t\t// to actually load its inner blocks.\n\t\t\t\tshouldKeepLoading:\n\t\t\t\t\t! areInnerBlocksControlled( rootClientId ) ||\n\t\t\t\t\tisLoadingPages,\n\t\t\t\tisSinglePageList:\n\t\t\t\t\thasOnlyPageListBlock &&\n\t\t\t\t\t! isLoadingPages &&\n\t\t\t\t\t_clientIdsTree[ 0 ].innerBlocks.length > 0,\n\t\t\t};\n\t\t},\n\t\t[ rootClientId ]\n\t);\n\tconst { replaceBlock, __unstableMarkNextChangeAsNotPersistent } =\n\t\tuseDispatch( blockEditorStore );\n\n\tconst [ customLinkEditPopoverOpenId, setIsCustomLinkEditPopoverOpenId ] =\n\t\tuseState( false );\n\n\tconst renderAdditionalBlockUICallback = useCallback(\n\t\t( block ) => {\n\t\t\tif (\n\t\t\t\tcustomLinkEditPopoverOpenId &&\n\t\t\t\tblock.clientId === customLinkEditPopoverOpenId\n\t\t\t) {\n\t\t\t\treturn (\n\t\t\t\t\t<CustomLinkAdditionalBlockUI\n\t\t\t\t\t\tblock={ block }\n\t\t\t\t\t\tonClose={ () => {\n\t\t\t\t\t\t\tsetIsCustomLinkEditPopoverOpenId( false );\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t}\n\t\t\treturn null;\n\t\t},\n\t\t[ customLinkEditPopoverOpenId, setIsCustomLinkEditPopoverOpenId ]\n\t);\n\n\t// Delay loading stop by 50ms to avoid flickering.\n\tuseEffect( () => {\n\t\tlet timeoutId;\n\t\tif ( shouldKeepLoading && ! isLoading ) {\n\t\t\tsetIsLoading( true );\n\t\t}\n\t\tif ( ! shouldKeepLoading && isLoading ) {\n\t\t\ttimeoutId = setTimeout( () => {\n\t\t\t\tsetIsLoading( false );\n\t\t\t\ttimeoutId = undefined;\n\t\t\t}, 50 );\n\t\t}\n\t\treturn () => {\n\t\t\tif ( timeoutId ) {\n\t\t\t\tclearTimeout( timeoutId );\n\t\t\t}\n\t\t};\n\t}, [ shouldKeepLoading, clientIdsTree, isLoading ] );\n\n\tconst { PrivateListView, LeafMoreMenu } = unlock( blockEditorPrivateApis );\n\n\tconst offCanvasOnselect = useCallback(\n\t\t( block ) => {\n\t\t\tif (\n\t\t\t\tblock.name === 'core/navigation-link' &&\n\t\t\t\t! block.attributes.url\n\t\t\t) {\n\t\t\t\t__unstableMarkNextChangeAsNotPersistent();\n\t\t\t\treplaceBlock(\n\t\t\t\t\tblock.clientId,\n\t\t\t\t\tcreateBlock( 'core/navigation-link', block.attributes )\n\t\t\t\t);\n\t\t\t} else if (\n\t\t\t\tblock.name === 'core/navigation-link' &&\n\t\t\t\tblock.attributes.kind === 'custom' &&\n\t\t\t\tblock.attributes.url\n\t\t\t) {\n\t\t\t\tsetIsCustomLinkEditPopoverOpenId( block.clientId );\n\t\t\t} else {\n\t\t\t\tonSelect( block );\n\t\t\t}\n\t\t},\n\t\t[\n\t\t\tonSelect,\n\t\t\t__unstableMarkNextChangeAsNotPersistent,\n\t\t\treplaceBlock,\n\t\t\tsetIsCustomLinkEditPopoverOpenId,\n\t\t]\n\t);\n\n\t// The hidden block is needed because it makes block edit side effects trigger.\n\t// For example a navigation page list load its items has an effect on edit to load its items.\n\treturn (\n\t\t<>\n\t\t\t{ isLoading && <NavigationMenuLoader /> }\n\t\t\t{ ! isLoading && (\n\t\t\t\t<PrivateListView\n\t\t\t\t\tblocks={\n\t\t\t\t\t\tisSinglePageList\n\t\t\t\t\t\t\t? clientIdsTree[ 0 ].innerBlocks\n\t\t\t\t\t\t\t: clientIdsTree\n\t\t\t\t\t}\n\t\t\t\t\tonSelect={ offCanvasOnselect }\n\t\t\t\t\tblockSettingsMenu={ LeafMoreMenu }\n\t\t\t\t\tshowAppender={ false }\n\t\t\t\t\trenderAdditionalBlockUI={ renderAdditionalBlockUICallback }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t<div style={ { visibility: 'hidden' } }>\n\t\t\t\t<BlockTools>\n\t\t\t\t\t<BlockList />\n\t\t\t\t</BlockTools>\n\t\t\t</div>\n\t\t</>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/sidebar-navigation-screen-navigation-menus/navigation-menu-content.js"],"names":["MAX_PAGE_COUNT","PAGES_QUERY","per_page","_fields","orderby","order","NavigationMenuContent","rootClientId","onSelect","isLoading","setIsLoading","clientIdsTree","shouldKeepLoading","isSinglePageList","select","__unstableGetClientIdsTree","areInnerBlocksControlled","getBlockName","blockEditorStore","isResolving","coreStore","_clientIdsTree","hasOnlyPageListBlock","length","clientId","isLoadingPages","innerBlocks","replaceBlock","__unstableMarkNextChangeAsNotPersistent","timeoutId","setTimeout","undefined","clearTimeout","PrivateListView","blockEditorPrivateApis","offCanvasOnselect","block","name","attributes","url","LeafMoreMenu"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tprivateApis as blockEditorPrivateApis,\n\tstore as blockEditorStore,\n\tBlockList,\n\tBlockTools,\n} from '@wordpress/block-editor';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { createBlock } from '@wordpress/blocks';\nimport { VisuallyHidden } from '@wordpress/components';\nimport { useCallback, useEffect, useState } from '@wordpress/element';\nimport { store as coreStore } from '@wordpress/core-data';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../private-apis';\nimport LeafMoreMenu from './leaf-more-menu';\n\n// Needs to be kept in sync with the query used at packages/block-library/src/page-list/edit.js.\nconst MAX_PAGE_COUNT = 100;\nconst PAGES_QUERY = [\n\t'postType',\n\t'page',\n\t{\n\t\tper_page: MAX_PAGE_COUNT,\n\t\t_fields: [ 'id', 'link', 'menu_order', 'parent', 'title', 'type' ],\n\t\t// TODO: When https://core.trac.wordpress.org/ticket/39037 REST API support for multiple orderby\n\t\t// values is resolved, update 'orderby' to [ 'menu_order', 'post_title' ] to provide a consistent\n\t\t// sort.\n\t\torderby: 'menu_order',\n\t\torder: 'asc',\n\t},\n];\n\nexport default function NavigationMenuContent( { rootClientId, onSelect } ) {\n\tconst [ isLoading, setIsLoading ] = useState( true );\n\tconst { clientIdsTree, shouldKeepLoading, isSinglePageList } = useSelect(\n\t\t( select ) => {\n\t\t\tconst {\n\t\t\t\t__unstableGetClientIdsTree,\n\t\t\t\tareInnerBlocksControlled,\n\t\t\t\tgetBlockName,\n\t\t\t} = select( blockEditorStore );\n\t\t\tconst { isResolving } = select( coreStore );\n\n\t\t\tconst _clientIdsTree = __unstableGetClientIdsTree( rootClientId );\n\t\t\tconst hasOnlyPageListBlock =\n\t\t\t\t_clientIdsTree.length === 1 &&\n\t\t\t\tgetBlockName( _clientIdsTree[ 0 ].clientId ) ===\n\t\t\t\t\t'core/page-list';\n\t\t\tconst isLoadingPages = isResolving(\n\t\t\t\t'getEntityRecords',\n\t\t\t\tPAGES_QUERY\n\t\t\t);\n\t\t\treturn {\n\t\t\t\tclientIdsTree: _clientIdsTree,\n\t\t\t\t// This is a small hack to wait for the navigation block\n\t\t\t\t// to actually load its inner blocks.\n\t\t\t\tshouldKeepLoading:\n\t\t\t\t\t! areInnerBlocksControlled( rootClientId ) ||\n\t\t\t\t\tisLoadingPages,\n\t\t\t\tisSinglePageList:\n\t\t\t\t\thasOnlyPageListBlock &&\n\t\t\t\t\t! isLoadingPages &&\n\t\t\t\t\t_clientIdsTree[ 0 ].innerBlocks.length > 0,\n\t\t\t};\n\t\t},\n\t\t[ rootClientId ]\n\t);\n\tconst { replaceBlock, __unstableMarkNextChangeAsNotPersistent } =\n\t\tuseDispatch( blockEditorStore );\n\n\t// Delay loading stop by 50ms to avoid flickering.\n\tuseEffect( () => {\n\t\tlet timeoutId;\n\t\tif ( shouldKeepLoading && ! isLoading ) {\n\t\t\tsetIsLoading( true );\n\t\t}\n\t\tif ( ! shouldKeepLoading && isLoading ) {\n\t\t\ttimeoutId = setTimeout( () => {\n\t\t\t\tsetIsLoading( false );\n\t\t\t\ttimeoutId = undefined;\n\t\t\t}, 50 );\n\t\t}\n\t\treturn () => {\n\t\t\tif ( timeoutId ) {\n\t\t\t\tclearTimeout( timeoutId );\n\t\t\t}\n\t\t};\n\t}, [ shouldKeepLoading, clientIdsTree, isLoading ] );\n\n\tconst { PrivateListView } = unlock( blockEditorPrivateApis );\n\tconst offCanvasOnselect = useCallback(\n\t\t( block ) => {\n\t\t\tif (\n\t\t\t\tblock.name === 'core/navigation-link' &&\n\t\t\t\t! block.attributes.url\n\t\t\t) {\n\t\t\t\t__unstableMarkNextChangeAsNotPersistent();\n\t\t\t\treplaceBlock(\n\t\t\t\t\tblock.clientId,\n\t\t\t\t\tcreateBlock( 'core/navigation-link', block.attributes )\n\t\t\t\t);\n\t\t\t} else {\n\t\t\t\tonSelect( block );\n\t\t\t}\n\t\t},\n\t\t[ onSelect, __unstableMarkNextChangeAsNotPersistent, replaceBlock ]\n\t);\n\n\t// The hidden block is needed because it makes block edit side effects trigger.\n\t// For example a navigation page list load its items has an effect on edit to load its items.\n\treturn (\n\t\t<>\n\t\t\t{ ! isLoading && (\n\t\t\t\t<PrivateListView\n\t\t\t\t\tblocks={\n\t\t\t\t\t\tisSinglePageList\n\t\t\t\t\t\t\t? clientIdsTree[ 0 ].innerBlocks\n\t\t\t\t\t\t\t: clientIdsTree\n\t\t\t\t\t}\n\t\t\t\t\tonSelect={ offCanvasOnselect }\n\t\t\t\t\tblockSettingsMenu={ LeafMoreMenu }\n\t\t\t\t\tshowAppender={ false }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t<VisuallyHidden aria-hidden=\"true\">\n\t\t\t\t<BlockTools>\n\t\t\t\t\t<BlockList />\n\t\t\t\t</BlockTools>\n\t\t\t</VisuallyHidden>\n\t\t</>\n\t);\n}\n"]}

package/build/components/sidebar-navigation-screen-navigation-menus/navigator-button.js

@@ -0,0 +1,52 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = SidebarNavigationScreenNavigationMenuButton;
+
+var _element = require("@wordpress/element");
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _components = require("@wordpress/components");
+
+var _coreData = require("@wordpress/core-data");
+
+var _constants = require("./constants");
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+function SidebarNavigationScreenNavigationMenuButton({
+  children,
+  ...props
+}) {
+  const {
+    records: navigationMenus,
+    isResolving: isLoading
+  } = (0, _coreData.useEntityRecords)('postType', `wp_navigation`, _constants.PRELOADED_NAVIGATION_MENUS_QUERY);
+  const hasNavigationMenus = !!navigationMenus?.length;
+  const hasSingleNavigationMenu = navigationMenus?.length === 1;
+  const firstNavigationMenu = navigationMenus?.[0];
+  const showNavigationScreen = process.env.IS_GUTENBERG_PLUGIN ? hasNavigationMenus : false; // If there is a single menu then we can go directly to that menu.
+  // Otherwise we go to the navigation listing screen.
+
+  const path = hasSingleNavigationMenu ? `/navigation/wp_navigation/${firstNavigationMenu?.id}` : '/navigation';
+
+  if (!showNavigationScreen) {
+    return null;
+  }
+
+  return (0, _element.createElement)(_components.__experimentalNavigatorButton, (0, _extends2.default)({}, props, {
+    disabled: isLoading,
+    path: path
+  }), children);
+}
+//# sourceMappingURL=navigator-button.js.map

package/build/components/sidebar-navigation-screen-navigation-menus/navigator-button.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/edit-site/src/components/sidebar-navigation-screen-navigation-menus/navigator-button.js"],"names":["SidebarNavigationScreenNavigationMenuButton","children","props","records","navigationMenus","isResolving","isLoading","PRELOADED_NAVIGATION_MENUS_QUERY","hasNavigationMenus","length","hasSingleNavigationMenu","firstNavigationMenu","showNavigationScreen","process","env","IS_GUTENBERG_PLUGIN","path","id"],"mappings":";;;;;;;;;;;;;AAIA;;AACA;;AAKA;;AAVA;AACA;AACA;;AAKA;AACA;AACA;AAGe,SAASA,2CAAT,CAAsD;AACpEC,EAAAA,QADoE;AAEpE,KAAGC;AAFiE,CAAtD,EAGX;AACH,QAAM;AAAEC,IAAAA,OAAO,EAAEC,eAAX;AAA4BC,IAAAA,WAAW,EAAEC;AAAzC,MACL,gCACC,UADD,EAEE,eAFF,EAGCC,2CAHD,CADD;AAOA,QAAMC,kBAAkB,GAAG,CAAC,CAAEJ,eAAe,EAAEK,MAA/C;AACA,QAAMC,uBAAuB,GAAGN,eAAe,EAAEK,MAAjB,KAA4B,CAA5D;AACA,QAAME,mBAAmB,GAAGP,eAAe,GAAI,CAAJ,CAA3C;AAEA,QAAMQ,oBAAoB,GAAGC,OAAO,CAACC,GAAR,CAAYC,mBAAZ,GAC1BP,kBAD0B,GAE1B,KAFH,CAZG,CAgBH;AACA;;AACA,QAAMQ,IAAI,GAAGN,uBAAuB,GAChC,6BAA6BC,mBAAmB,EAAEM,EAAI,EADtB,GAEjC,aAFH;;AAIA,MAAK,CAAEL,oBAAP,EAA8B;AAC7B,WAAO,IAAP;AACA;;AAED,SACC,4BAAC,yCAAD,6BAAsBV,KAAtB;AAA8B,IAAA,QAAQ,EAAGI,SAAzC;AAAqD,IAAA,IAAI,EAAGU;AAA5D,MACGf,QADH,CADD;AAKA","sourcesContent":["/**\n * WordPress dependencies\n */\n\nimport { __experimentalNavigatorButton as NavigatorButton } from '@wordpress/components';\nimport { useEntityRecords } from '@wordpress/core-data';\n\n/**\n * Internal dependencies\n */\nimport { PRELOADED_NAVIGATION_MENUS_QUERY } from './constants';\n\nexport default function SidebarNavigationScreenNavigationMenuButton( {\n\tchildren,\n\t...props\n} ) {\n\tconst { records: navigationMenus, isResolving: isLoading } =\n\t\tuseEntityRecords(\n\t\t\t'postType',\n\t\t\t`wp_navigation`,\n\t\t\tPRELOADED_NAVIGATION_MENUS_QUERY\n\t\t);\n\n\tconst hasNavigationMenus = !! navigationMenus?.length;\n\tconst hasSingleNavigationMenu = navigationMenus?.length === 1;\n\tconst firstNavigationMenu = navigationMenus?.[ 0 ];\n\n\tconst showNavigationScreen = process.env.IS_GUTENBERG_PLUGIN\n\t\t? hasNavigationMenus\n\t\t: false;\n\n\t// If there is a single menu then we can go directly to that menu.\n\t// Otherwise we go to the navigation listing screen.\n\tconst path = hasSingleNavigationMenu\n\t\t? `/navigation/wp_navigation/${ firstNavigationMenu?.id }`\n\t\t: '/navigation';\n\n\tif ( ! showNavigationScreen ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<NavigatorButton { ...props } disabled={ isLoading } path={ path }>\n\t\t\t{ children }\n\t\t</NavigatorButton>\n\t);\n}\n"]}

package/build/components/sidebar-navigation-screen-page/index.js

@@ -9,6 +9,8 @@ exports.default = SidebarNavigationScreenPage;
 
 var _element = require("@wordpress/element");
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _i18n = require("@wordpress/i18n");
 
 var _data = require("@wordpress/data");
@@ -21,6 +23,12 @@ var _htmlEntities = require("@wordpress/html-entities");
 
 var _icons = require("@wordpress/icons");
 
+var _date = require("@wordpress/date");
+
+var _dom = require("@wordpress/dom");
+
+var _escapeHtml = require("@wordpress/escape-html");
+
 var _sidebarNavigationScreen = _interopRequireDefault(require("../sidebar-navigation-screen"));
 
 var _privateApis = require("../../private-apis");
@@ -29,6 +37,16 @@ var _store = require("../../store");
 
 var _sidebarButton = _interopRequireDefault(require("../sidebar-button"));
 
+var _sidebarNavigationSubtitle = _interopRequireDefault(require("../sidebar-navigation-subtitle"));
+
+var _pageDetails = _interopRequireDefault(require("./page-details"));
+
+var _pageActions = _interopRequireDefault(require("../page-actions"));
+
+/**
+ * External dependencies
+ */
+
 /**
  * WordPress dependencies
  */
@@ -37,8 +55,7 @@ var _sidebarButton = _interopRequireDefault(require("../sidebar-button"));
  * Internal dependencies
  */
 function SidebarNavigationScreenPage() {
-  var _record$title, _record$description;
-
+  const navigator = (0, _components.__experimentalUseNavigator)();
   const {
     setCanvasMode
   } = (0, _privateApis.unlock)((0, _data.useDispatch)(_store.store));
@@ -50,18 +67,72 @@ function SidebarNavigationScreenPage() {
   const {
     record
   } = (0, _coreData.useEntityRecord)('postType', 'page', postId);
-  return (0, _element.createElement)(_sidebarNavigationScreen.default, {
-    title: record ? (0, _htmlEntities.decodeEntities)(record === null || record === void 0 ? void 0 : (_record$title = record.title) === null || _record$title === void 0 ? void 0 : _record$title.rendered) : null,
-    actions: (0, _element.createElement)(_sidebarButton.default, {
+  const {
+    featuredMediaAltText,
+    featuredMediaSourceUrl
+  } = (0, _data.useSelect)(select => {
+    const {
+      getEntityRecord
+    } = select(_coreData.store); // Featured image.
+
+    const attachedMedia = record?.featured_media ? getEntityRecord('postType', 'attachment', record?.featured_media) : null;
+    return {
+      featuredMediaSourceUrl: attachedMedia?.media_details.sizes?.medium?.source_url || attachedMedia?.source_url,
+      featuredMediaAltText: (0, _escapeHtml.escapeAttribute)(attachedMedia?.alt_text || attachedMedia?.description?.raw || '')
+    };
+  }, [record]);
+  const featureImageAltText = featuredMediaAltText ? (0, _htmlEntities.decodeEntities)(featuredMediaAltText) : (0, _htmlEntities.decodeEntities)(record?.title?.rendered || (0, _i18n.__)('Featured image'));
+  return record ? (0, _element.createElement)(_sidebarNavigationScreen.default, {
+    title: (0, _htmlEntities.decodeEntities)(record?.title?.rendered || (0, _i18n.__)('(no title)')),
+    actions: (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_pageActions.default, {
+      postId: postId,
+      toggleProps: {
+        as: _sidebarButton.default
+      },
+      onRemove: () => {
+        navigator.goTo('/page');
+      }
+    }), (0, _element.createElement)(_sidebarButton.default, {
       onClick: () => setCanvasMode('edit'),
       label: (0, _i18n.__)('Edit'),
       icon: _icons.pencil
-    }),
-    description: (0, _i18n.__)('Pages are static and are not listed by date. Pages do not use tags or categories.'),
-    content: (0, _element.createElement)(_element.Fragment, null, record !== null && record !== void 0 && record.link ? (0, _element.createElement)(_components.ExternalLink, {
+    })),
+    meta: (0, _element.createElement)(_components.ExternalLink, {
       className: "edit-site-sidebar-navigation-screen__page-link",
       href: record.link
-    }, record.link) : null, record ? (0, _htmlEntities.decodeEntities)(record === null || record === void 0 ? void 0 : (_record$description = record.description) === null || _record$description === void 0 ? void 0 : _record$description.rendered) : null)
-  });
+    }, record.link.replace(/^(https?:\/\/)?/, '')),
+    content: (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.__experimentalVStack, {
+      className: "edit-site-sidebar-navigation-screen-page__featured-image-wrapper",
+      alignment: "left",
+      spacing: 2
+    }, (0, _element.createElement)("div", {
+      className: (0, _classnames.default)('edit-site-sidebar-navigation-screen-page__featured-image', {
+        'has-image': !!featuredMediaSourceUrl
+      })
+    }, !!featuredMediaSourceUrl && (0, _element.createElement)("img", {
+      alt: featureImageAltText,
+      src: featuredMediaSourceUrl
+    }), !record?.featured_media && (0, _element.createElement)("p", null, (0, _i18n.__)('No featured image')))), !!record?.excerpt?.rendered && (0, _element.createElement)(_components.__experimentalTruncate, {
+      className: "edit-site-sidebar-navigation-screen-page__excerpt",
+      numberOfLines: 3
+    }, (0, _dom.__unstableStripHTML)(record.excerpt.rendered)), (0, _element.createElement)(_sidebarNavigationSubtitle.default, null, (0, _i18n.__)('Details')), (0, _element.createElement)(_pageDetails.default, {
+      id: postId
+    })),
+    footer: !!record?.modified && (0, _element.createElement)(_components.__experimentalHStack, {
+      spacing: 5,
+      alignment: "left",
+      className: "edit-site-sidebar-navigation-screen-page__details edit-site-sidebar-navigation-screen-page__footer"
+    }, (0, _element.createElement)(_components.__experimentalText, {
+      className: "edit-site-sidebar-navigation-screen-page__details-label"
+    }, (0, _i18n.__)('Last modified')), (0, _element.createElement)(_components.__experimentalText, {
+      className: "edit-site-sidebar-navigation-screen-page__details-value"
+    }, (0, _element.createInterpolateElement)((0, _i18n.sprintf)(
+    /* translators: %s: is the relative time when the post was last modified. */
+    (0, _i18n.__)('<time>%s</time>'), (0, _date.humanTimeDiff)(record.modified)), {
+      time: (0, _element.createElement)("time", {
+        dateTime: record.modified
+      })
+    })))
+  }) : null;
 }
 //# sourceMappingURL=index.js.map

package/build/components/sidebar-navigation-screen-page/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/sidebar-navigation-screen-page/index.js"],"names":["SidebarNavigationScreenPage","setCanvasMode","editSiteStore","params","postId","record","title","rendered","pencil","link","description"],"mappings":";;;;;;;;;;;AAGA;;AACA;;AACA;;AAIA;;AACA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AAnBA;AACA;AACA;;AAWA;AACA;AACA;AAMe,SAASA,2BAAT,GAAuC;AAAA;;AACrD,QAAM;AAAEC,IAAAA;AAAF,MAAoB,yBAAQ,uBAAaC,YAAb,CAAR,CAA1B;AACA,QAAM;AACLC,IAAAA,MAAM,EAAE;AAAEC,MAAAA;AAAF;AADH,MAEF,6CAFJ;AAGA,QAAM;AAAEC,IAAAA;AAAF,MAAa,+BAAiB,UAAjB,EAA6B,MAA7B,EAAqCD,MAArC,CAAnB;AAEA,SACC,4BAAC,gCAAD;AACC,IAAA,KAAK,EAAGC,MAAM,GAAG,kCAAgBA,MAAhB,aAAgBA,MAAhB,wCAAgBA,MAAM,CAAEC,KAAxB,kDAAgB,cAAeC,QAA/B,CAAH,GAA+C,IAD9D;AAEC,IAAA,OAAO,EACN,4BAAC,sBAAD;AACC,MAAA,OAAO,EAAG,MAAMN,aAAa,CAAE,MAAF,CAD9B;AAEC,MAAA,KAAK,EAAG,cAAI,MAAJ,CAFT;AAGC,MAAA,IAAI,EAAGO;AAHR,MAHF;AASC,IAAA,WAAW,EAAG,cACb,mFADa,CATf;AAYC,IAAA,OAAO,EACN,qDACGH,MAAM,SAAN,IAAAA,MAAM,WAAN,IAAAA,MAAM,CAAEI,IAAR,GACD,4BAAC,wBAAD;AACC,MAAA,SAAS,EAAC,gDADX;AAEC,MAAA,IAAI,EAAGJ,MAAM,CAACI;AAFf,OAIGJ,MAAM,CAACI,IAJV,CADC,GAOE,IARL,EASGJ,MAAM,GACL,kCAAgBA,MAAhB,aAAgBA,MAAhB,8CAAgBA,MAAM,CAAEK,WAAxB,wDAAgB,oBAAqBH,QAArC,CADK,GAEL,IAXJ;AAbF,IADD;AA8BA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useDispatch } from '@wordpress/data';\nimport {\n\t__experimentalUseNavigator as useNavigator,\n\tExternalLink,\n} from '@wordpress/components';\nimport { useEntityRecord } from '@wordpress/core-data';\nimport { decodeEntities } from '@wordpress/html-entities';\nimport { pencil } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport SidebarNavigationScreen from '../sidebar-navigation-screen';\nimport { unlock } from '../../private-apis';\nimport { store as editSiteStore } from '../../store';\nimport SidebarButton from '../sidebar-button';\n\nexport default function SidebarNavigationScreenPage() {\n\tconst { setCanvasMode } = unlock( useDispatch( editSiteStore ) );\n\tconst {\n\t\tparams: { postId },\n\t} = useNavigator();\n\tconst { record } = useEntityRecord( 'postType', 'page', postId );\n\n\treturn (\n\t\t<SidebarNavigationScreen\n\t\t\ttitle={ record ? decodeEntities( record?.title?.rendered ) : null }\n\t\t\tactions={\n\t\t\t\t<SidebarButton\n\t\t\t\t\tonClick={ () => setCanvasMode( 'edit' ) }\n\t\t\t\t\tlabel={ __( 'Edit' ) }\n\t\t\t\t\ticon={ pencil }\n\t\t\t\t/>\n\t\t\t}\n\t\t\tdescription={ __(\n\t\t\t\t'Pages are static and are not listed by date. Pages do not use tags or categories.'\n\t\t\t) }\n\t\t\tcontent={\n\t\t\t\t<>\n\t\t\t\t\t{ record?.link ? (\n\t\t\t\t\t\t<ExternalLink\n\t\t\t\t\t\t\tclassName=\"edit-site-sidebar-navigation-screen__page-link\"\n\t\t\t\t\t\t\thref={ record.link }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ record.link }\n\t\t\t\t\t\t</ExternalLink>\n\t\t\t\t\t) : null }\n\t\t\t\t\t{ record\n\t\t\t\t\t\t? decodeEntities( record?.description?.rendered )\n\t\t\t\t\t\t: null }\n\t\t\t\t</>\n\t\t\t}\n\t\t/>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/sidebar-navigation-screen-page/index.js"],"names":["SidebarNavigationScreenPage","navigator","setCanvasMode","editSiteStore","params","postId","record","featuredMediaAltText","featuredMediaSourceUrl","select","getEntityRecord","coreStore","attachedMedia","featured_media","media_details","sizes","medium","source_url","alt_text","description","raw","featureImageAltText","title","rendered","as","SidebarButton","goTo","pencil","link","replace","excerpt","modified","time"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport {\n\t__experimentalUseNavigator as useNavigator,\n\t__experimentalVStack as VStack,\n\tExternalLink,\n\t__experimentalTruncate as Truncate,\n\t__experimentalHStack as HStack,\n\t__experimentalText as Text,\n} from '@wordpress/components';\nimport { store as coreStore, useEntityRecord } from '@wordpress/core-data';\nimport { decodeEntities } from '@wordpress/html-entities';\nimport { pencil } from '@wordpress/icons';\nimport { humanTimeDiff } from '@wordpress/date';\nimport { createInterpolateElement } from '@wordpress/element';\nimport { __unstableStripHTML as stripHTML } from '@wordpress/dom';\nimport { escapeAttribute } from '@wordpress/escape-html';\n\n/**\n * Internal dependencies\n */\nimport SidebarNavigationScreen from '../sidebar-navigation-screen';\nimport { unlock } from '../../private-apis';\nimport { store as editSiteStore } from '../../store';\nimport SidebarButton from '../sidebar-button';\nimport SidebarNavigationSubtitle from '../sidebar-navigation-subtitle';\nimport PageDetails from './page-details';\nimport PageActions from '../page-actions';\n\nexport default function SidebarNavigationScreenPage() {\n\tconst navigator = useNavigator();\n\tconst { setCanvasMode } = unlock( useDispatch( editSiteStore ) );\n\tconst {\n\t\tparams: { postId },\n\t} = useNavigator();\n\tconst { record } = useEntityRecord( 'postType', 'page', postId );\n\n\tconst { featuredMediaAltText, featuredMediaSourceUrl } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getEntityRecord } = select( coreStore );\n\t\t\t// Featured image.\n\t\t\tconst attachedMedia = record?.featured_media\n\t\t\t\t? getEntityRecord(\n\t\t\t\t\t\t'postType',\n\t\t\t\t\t\t'attachment',\n\t\t\t\t\t\trecord?.featured_media\n\t\t\t\t  )\n\t\t\t\t: null;\n\n\t\t\treturn {\n\t\t\t\tfeaturedMediaSourceUrl:\n\t\t\t\t\tattachedMedia?.media_details.sizes?.medium?.source_url ||\n\t\t\t\t\tattachedMedia?.source_url,\n\t\t\t\tfeaturedMediaAltText: escapeAttribute(\n\t\t\t\t\tattachedMedia?.alt_text ||\n\t\t\t\t\t\tattachedMedia?.description?.raw ||\n\t\t\t\t\t\t''\n\t\t\t\t),\n\t\t\t};\n\t\t},\n\t\t[ record ]\n\t);\n\n\tconst featureImageAltText = featuredMediaAltText\n\t\t? decodeEntities( featuredMediaAltText )\n\t\t: decodeEntities( record?.title?.rendered || __( 'Featured image' ) );\n\n\treturn record ? (\n\t\t<SidebarNavigationScreen\n\t\t\ttitle={ decodeEntities(\n\t\t\t\trecord?.title?.rendered || __( '(no title)' )\n\t\t\t) }\n\t\t\tactions={\n\t\t\t\t<>\n\t\t\t\t\t<PageActions\n\t\t\t\t\t\tpostId={ postId }\n\t\t\t\t\t\ttoggleProps={ { as: SidebarButton } }\n\t\t\t\t\t\tonRemove={ () => {\n\t\t\t\t\t\t\tnavigator.goTo( '/page' );\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t\t<SidebarButton\n\t\t\t\t\t\tonClick={ () => setCanvasMode( 'edit' ) }\n\t\t\t\t\t\tlabel={ __( 'Edit' ) }\n\t\t\t\t\t\ticon={ pencil }\n\t\t\t\t\t/>\n\t\t\t\t</>\n\t\t\t}\n\t\t\tmeta={\n\t\t\t\t<ExternalLink\n\t\t\t\t\tclassName=\"edit-site-sidebar-navigation-screen__page-link\"\n\t\t\t\t\thref={ record.link }\n\t\t\t\t>\n\t\t\t\t\t{ record.link.replace( /^(https?:\\/\\/)?/, '' ) }\n\t\t\t\t</ExternalLink>\n\t\t\t}\n\t\t\tcontent={\n\t\t\t\t<>\n\t\t\t\t\t<VStack\n\t\t\t\t\t\tclassName=\"edit-site-sidebar-navigation-screen-page__featured-image-wrapper\"\n\t\t\t\t\t\talignment=\"left\"\n\t\t\t\t\t\tspacing={ 2 }\n\t\t\t\t\t>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t\t'edit-site-sidebar-navigation-screen-page__featured-image',\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t'has-image': !! featuredMediaSourceUrl,\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ !! featuredMediaSourceUrl && (\n\t\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\t\talt={ featureImageAltText }\n\t\t\t\t\t\t\t\t\tsrc={ featuredMediaSourceUrl }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t{ ! record?.featured_media && (\n\t\t\t\t\t\t\t\t<p>{ __( 'No featured image' ) }</p>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</VStack>\n\t\t\t\t\t{ !! record?.excerpt?.rendered && (\n\t\t\t\t\t\t<Truncate\n\t\t\t\t\t\t\tclassName=\"edit-site-sidebar-navigation-screen-page__excerpt\"\n\t\t\t\t\t\t\tnumberOfLines={ 3 }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ stripHTML( record.excerpt.rendered ) }\n\t\t\t\t\t\t</Truncate>\n\t\t\t\t\t) }\n\t\t\t\t\t<SidebarNavigationSubtitle>\n\t\t\t\t\t\t{ __( 'Details' ) }\n\t\t\t\t\t</SidebarNavigationSubtitle>\n\t\t\t\t\t<PageDetails id={ postId } />\n\t\t\t\t</>\n\t\t\t}\n\t\t\tfooter={\n\t\t\t\t!! record?.modified && (\n\t\t\t\t\t<HStack\n\t\t\t\t\t\tspacing={ 5 }\n\t\t\t\t\t\talignment=\"left\"\n\t\t\t\t\t\tclassName=\"edit-site-sidebar-navigation-screen-page__details edit-site-sidebar-navigation-screen-page__footer\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<Text className=\"edit-site-sidebar-navigation-screen-page__details-label\">\n\t\t\t\t\t\t\t{ __( 'Last modified' ) }\n\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t<Text className=\"edit-site-sidebar-navigation-screen-page__details-value\">\n\t\t\t\t\t\t\t{ createInterpolateElement(\n\t\t\t\t\t\t\t\tsprintf(\n\t\t\t\t\t\t\t\t\t/* translators: %s: is the relative time when the post was last modified. */\n\t\t\t\t\t\t\t\t\t__( '<time>%s</time>' ),\n\t\t\t\t\t\t\t\t\thumanTimeDiff( record.modified )\n\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\ttime: <time dateTime={ record.modified } />,\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</Text>\n\t\t\t\t\t</HStack>\n\t\t\t\t)\n\t\t\t}\n\t\t/>\n\t) : null;\n}\n"]}

package/build/components/sidebar-navigation-screen-page/page-details.js

@@ -0,0 +1,148 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = PageDetails;
+
+var _element = require("@wordpress/element");
+
+var _i18n = require("@wordpress/i18n");
+
+var _components = require("@wordpress/components");
+
+var _wordcount = require("@wordpress/wordcount");
+
+var _data = require("@wordpress/data");
+
+var _htmlEntities = require("@wordpress/html-entities");
+
+var _coreData = require("@wordpress/core-data");
+
+var _statusLabel = _interopRequireDefault(require("./status-label"));
+
+var _privateApis = require("../../private-apis");
+
+var _store = require("../../store");
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+// Taken from packages/editor/src/components/time-to-read/index.js.
+const AVERAGE_READING_RATE = 189;
+
+function getPageDetails(page) {
+  if (!page) {
+    return [];
+  }
+
+  const details = [{
+    label: (0, _i18n.__)('Status'),
+    value: (0, _element.createElement)(_statusLabel.default, {
+      status: page?.password ? 'protected' : page.status,
+      date: page?.date
+    })
+  }, {
+    label: (0, _i18n.__)('Slug'),
+    value: (0, _element.createElement)(_components.__experimentalTruncate, {
+      numberOfLines: 1
+    }, page.slug)
+  }];
+
+  if (page?.templateTitle) {
+    details.push({
+      label: (0, _i18n.__)('Template'),
+      value: (0, _htmlEntities.decodeEntities)(page.templateTitle)
+    });
+  }
+
+  details.push({
+    label: (0, _i18n.__)('Parent'),
+    // `null` indicates no parent.
+    value: null === page?.parentTitle ? (0, _i18n.__)('Top level') : (0, _htmlEntities.decodeEntities)(page?.parentTitle || (0, _i18n.__)('(no title)'))
+  });
+  /*
+   * translators: If your word count is based on single characters (e.g. East Asian characters),
+   * enter 'characters_excluding_spaces' or 'characters_including_spaces'. Otherwise, enter 'words'.
+   * Do not translate into your own language.
+   */
+
+  const wordCountType = (0, _i18n._x)('words', 'Word count type. Do not translate!');
+  const wordsCounted = page?.content?.rendered ? (0, _wordcount.count)(page.content.rendered, wordCountType) : 0;
+  const readingTime = Math.round(wordsCounted / AVERAGE_READING_RATE);
+
+  if (wordsCounted) {
+    details.push({
+      label: (0, _i18n.__)('Words'),
+      value: wordsCounted.toLocaleString() || (0, _i18n.__)('Unknown')
+    }, {
+      label: (0, _i18n.__)('Time to read'),
+      value: readingTime > 1 ? (0, _i18n.sprintf)(
+      /* translators: %s: is the number of minutes. */
+      (0, _i18n.__)('%s mins'), readingTime.toLocaleString()) : (0, _i18n.__)('< 1 min')
+    });
+  }
+
+  return details;
+}
+
+function PageDetails({
+  id
+}) {
+  const {
+    record
+  } = (0, _coreData.useEntityRecord)('postType', 'page', id);
+  const {
+    parentTitle,
+    templateTitle
+  } = (0, _data.useSelect)(select => {
+    const {
+      getEditedPostContext,
+      getSettings
+    } = (0, _privateApis.unlock)(select(_store.store));
+    const defaultTemplateTypes = getSettings()?.defaultTemplateTypes;
+    const postContext = getEditedPostContext(); // Template title.
+
+    const templateSlug = // Checks that the post type matches the current theme's post type, otherwise
+    // the templateSlug returns 'home'.
+    postContext?.postType === 'page' ? postContext?.templateSlug : null;
+
+    const _templateTitle = defaultTemplateTypes && templateSlug ? defaultTemplateTypes.find(template => template.slug === templateSlug)?.title : null; // Parent page title.
+
+
+    const _parentTitle = record?.parent ? select(_coreData.store).getEntityRecord('postType', 'page', record.parent, {
+      _fields: ['title']
+    })?.title?.rendered : null;
+
+    return {
+      parentTitle: _parentTitle,
+      templateTitle: _templateTitle
+    };
+  }, [record]);
+  return (0, _element.createElement)(_components.__experimentalVStack, {
+    spacing: 5
+  }, getPageDetails({
+    parentTitle,
+    templateTitle,
+    ...record
+  }).map(({
+    label,
+    value
+  }) => (0, _element.createElement)(_components.__experimentalHStack, {
+    key: label,
+    spacing: 5,
+    alignment: "left",
+    className: "edit-site-sidebar-navigation-screen-page__details"
+  }, (0, _element.createElement)(_components.__experimentalText, {
+    className: "edit-site-sidebar-navigation-screen-page__details-label"
+  }, label), (0, _element.createElement)(_components.__experimentalText, {
+    className: "edit-site-sidebar-navigation-screen-page__details-value"
+  }, value))));
+}
+//# sourceMappingURL=page-details.js.map

package/build/components/sidebar-navigation-screen-page/page-details.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/edit-site/src/components/sidebar-navigation-screen-page/page-details.js"],"names":["AVERAGE_READING_RATE","getPageDetails","page","details","label","value","password","status","date","slug","templateTitle","push","parentTitle","wordCountType","wordsCounted","content","rendered","readingTime","Math","round","toLocaleString","PageDetails","id","record","select","getEditedPostContext","getSettings","editSiteStore","defaultTemplateTypes","postContext","templateSlug","postType","_templateTitle","find","template","title","_parentTitle","parent","coreStore","getEntityRecord","_fields","map"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, _x, sprintf } from '@wordpress/i18n';\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalText as Text,\n\t__experimentalVStack as VStack,\n\t__experimentalTruncate as Truncate,\n} from '@wordpress/components';\nimport { count as wordCount } from '@wordpress/wordcount';\nimport { useSelect } from '@wordpress/data';\nimport { decodeEntities } from '@wordpress/html-entities';\nimport { store as coreStore, useEntityRecord } from '@wordpress/core-data';\n\n/**\n * Internal dependencies\n */\nimport StatusLabel from './status-label';\nimport { unlock } from '../../private-apis';\nimport { store as editSiteStore } from '../../store';\n\n// Taken from packages/editor/src/components/time-to-read/index.js.\nconst AVERAGE_READING_RATE = 189;\n\nfunction getPageDetails( page ) {\n\tif ( ! page ) {\n\t\treturn [];\n\t}\n\n\tconst details = [\n\t\t{\n\t\t\tlabel: __( 'Status' ),\n\t\t\tvalue: (\n\t\t\t\t<StatusLabel\n\t\t\t\t\tstatus={ page?.password ? 'protected' : page.status }\n\t\t\t\t\tdate={ page?.date }\n\t\t\t\t/>\n\t\t\t),\n\t\t},\n\t\t{\n\t\t\tlabel: __( 'Slug' ),\n\t\t\tvalue: <Truncate numberOfLines={ 1 }>{ page.slug }</Truncate>,\n\t\t},\n\t];\n\n\tif ( page?.templateTitle ) {\n\t\tdetails.push( {\n\t\t\tlabel: __( 'Template' ),\n\t\t\tvalue: decodeEntities( page.templateTitle ),\n\t\t} );\n\t}\n\n\tdetails.push( {\n\t\tlabel: __( 'Parent' ),\n\t\t// `null` indicates no parent.\n\t\tvalue:\n\t\t\tnull === page?.parentTitle\n\t\t\t\t? __( 'Top level' )\n\t\t\t\t: decodeEntities( page?.parentTitle || __( '(no title)' ) ),\n\t} );\n\n\t/*\n\t * translators: If your word count is based on single characters (e.g. East Asian characters),\n\t * enter 'characters_excluding_spaces' or 'characters_including_spaces'. Otherwise, enter 'words'.\n\t * Do not translate into your own language.\n\t */\n\tconst wordCountType = _x( 'words', 'Word count type. Do not translate!' );\n\tconst wordsCounted = page?.content?.rendered\n\t\t? wordCount( page.content.rendered, wordCountType )\n\t\t: 0;\n\tconst readingTime = Math.round( wordsCounted / AVERAGE_READING_RATE );\n\n\tif ( wordsCounted ) {\n\t\tdetails.push(\n\t\t\t{\n\t\t\t\tlabel: __( 'Words' ),\n\t\t\t\tvalue: wordsCounted.toLocaleString() || __( 'Unknown' ),\n\t\t\t},\n\t\t\t{\n\t\t\t\tlabel: __( 'Time to read' ),\n\t\t\t\tvalue:\n\t\t\t\t\treadingTime > 1\n\t\t\t\t\t\t? sprintf(\n\t\t\t\t\t\t\t\t/* translators: %s: is the number of minutes. */\n\t\t\t\t\t\t\t\t__( '%s mins' ),\n\t\t\t\t\t\t\t\treadingTime.toLocaleString()\n\t\t\t\t\t\t  )\n\t\t\t\t\t\t: __( '< 1 min' ),\n\t\t\t}\n\t\t);\n\t}\n\treturn details;\n}\n\nexport default function PageDetails( { id } ) {\n\tconst { record } = useEntityRecord( 'postType', 'page', id );\n\n\tconst { parentTitle, templateTitle } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getEditedPostContext, getSettings } = unlock(\n\t\t\t\tselect( editSiteStore )\n\t\t\t);\n\t\t\tconst defaultTemplateTypes = getSettings()?.defaultTemplateTypes;\n\t\t\tconst postContext = getEditedPostContext();\n\n\t\t\t// Template title.\n\t\t\tconst templateSlug =\n\t\t\t\t// Checks that the post type matches the current theme's post type, otherwise\n\t\t\t\t// the templateSlug returns 'home'.\n\t\t\t\tpostContext?.postType === 'page'\n\t\t\t\t\t? postContext?.templateSlug\n\t\t\t\t\t: null;\n\t\t\tconst _templateTitle =\n\t\t\t\tdefaultTemplateTypes && templateSlug\n\t\t\t\t\t? defaultTemplateTypes.find(\n\t\t\t\t\t\t\t( template ) => template.slug === templateSlug\n\t\t\t\t\t  )?.title\n\t\t\t\t\t: null;\n\n\t\t\t// Parent page title.\n\t\t\tconst _parentTitle = record?.parent\n\t\t\t\t? select( coreStore ).getEntityRecord(\n\t\t\t\t\t\t'postType',\n\t\t\t\t\t\t'page',\n\t\t\t\t\t\trecord.parent,\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t_fields: [ 'title' ],\n\t\t\t\t\t\t}\n\t\t\t\t  )?.title?.rendered\n\t\t\t\t: null;\n\n\t\t\treturn {\n\t\t\t\tparentTitle: _parentTitle,\n\t\t\t\ttemplateTitle: _templateTitle,\n\t\t\t};\n\t\t},\n\t\t[ record ]\n\t);\n\treturn (\n\t\t<VStack spacing={ 5 }>\n\t\t\t{ getPageDetails( {\n\t\t\t\tparentTitle,\n\t\t\t\ttemplateTitle,\n\t\t\t\t...record,\n\t\t\t} ).map( ( { label, value } ) => (\n\t\t\t\t<HStack\n\t\t\t\t\tkey={ label }\n\t\t\t\t\tspacing={ 5 }\n\t\t\t\t\talignment=\"left\"\n\t\t\t\t\tclassName=\"edit-site-sidebar-navigation-screen-page__details\"\n\t\t\t\t>\n\t\t\t\t\t<Text className=\"edit-site-sidebar-navigation-screen-page__details-label\">\n\t\t\t\t\t\t{ label }\n\t\t\t\t\t</Text>\n\t\t\t\t\t<Text className=\"edit-site-sidebar-navigation-screen-page__details-value\">\n\t\t\t\t\t\t{ value }\n\t\t\t\t\t</Text>\n\t\t\t\t</HStack>\n\t\t\t) ) }\n\t\t</VStack>\n\t);\n}\n"]}