@wordpress/edit-site 4.2.0 → 4.3.2

package/build-module/components/sidebar/index.js

@@ -16,6 +16,7 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
 
 import DefaultSidebar from './default-sidebar';
 import GlobalStylesSidebar from './global-styles-sidebar';
+import NavigationMenuSidebar from './navigation-menu-sidebar';
 import { STORE_NAME } from '../../store/constants';
 import SettingsHeader from './settings-header';
 import TemplateCard from './template-card';
@@ -57,6 +58,15 @@ export function SidebarComplementaryAreaFills() {
 
   if (!isEditorSidebarOpened) {
     sidebarName = hasBlockSelection ? SIDEBAR_BLOCK : SIDEBAR_TEMPLATE;
+  } // Conditionally include NavMenu sidebar in Plugin only.
+  // Optimise for dead code elimination.
+  // See https://github.com/WordPress/gutenberg/blob/trunk/docs/how-to-guides/feature-flags.md#dead-code-elimination.
+
+
+  let MaybeNavigationMenuSidebar = 'Fragment';
+
+  if (process.env.IS_GUTENBERG_PLUGIN) {
+    MaybeNavigationMenuSidebar = NavigationMenuSidebar;
   }
 
   return createElement(Fragment, null, createElement(DefaultSidebar, {
@@ -70,6 +80,6 @@ export function SidebarComplementaryAreaFills() {
     headerClassName: "edit-site-sidebar__panel-tabs"
   }, sidebarName === SIDEBAR_TEMPLATE && createElement(PanelBody, null, createElement(TemplateCard, null)), sidebarName === SIDEBAR_BLOCK && createElement(InspectorSlot, {
     bubblesVirtually: true
-  })), createElement(GlobalStylesSidebar, null));
+  })), createElement(GlobalStylesSidebar, null), createElement(MaybeNavigationMenuSidebar, null));
 }
 //# sourceMappingURL=index.js.map

package/build-module/components/sidebar/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/sidebar/index.js"],"names":["createSlotFill","PanelBody","__","cog","useEffect","useSelect","useDispatch","store","interfaceStore","blockEditorStore","DefaultSidebar","GlobalStylesSidebar","STORE_NAME","SettingsHeader","TemplateCard","SIDEBAR_BLOCK","SIDEBAR_TEMPLATE","Slot","InspectorSlot","Fill","InspectorFill","SidebarInspectorFill","SidebarComplementaryAreaFills","sidebar","isEditorSidebarOpened","hasBlockSelection","select","_sidebar","getActiveComplementaryArea","_isEditorSidebarOpened","includes","getBlockSelectionStart","enableComplementaryArea","sidebarName"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,cAAT,EAAyBC,SAAzB,QAA0C,uBAA1C;AACA,SAASC,EAAT,QAAmB,iBAAnB;AACA,SAASC,GAAT,QAAoB,kBAApB;AACA,SAASC,SAAT,QAA0B,oBAA1B;AACA,SAASC,SAAT,EAAoBC,WAApB,QAAuC,iBAAvC;AACA,SAASC,KAAK,IAAIC,cAAlB,QAAwC,sBAAxC;AACA,SAASD,KAAK,IAAIE,gBAAlB,QAA0C,yBAA1C;AAEA;AACA;AACA;;AACA,OAAOC,cAAP,MAA2B,mBAA3B;AACA,OAAOC,mBAAP,MAAgC,yBAAhC;AACA,SAASC,UAAT,QAA2B,uBAA3B;AACA,OAAOC,cAAP,MAA2B,mBAA3B;AACA,OAAOC,YAAP,MAAyB,iBAAzB;AACA,SAASC,aAAT,EAAwBC,gBAAxB,QAAgD,aAAhD;AAEA,MAAM;AAAEC,EAAAA,IAAI,EAAEC,aAAR;AAAuBC,EAAAA,IAAI,EAAEC;AAA7B,IAA+CpB,cAAc,CAClE,0BADkE,CAAnE;AAGA,OAAO,MAAMqB,oBAAoB,GAAGD,aAA7B;AAEP,OAAO,SAASE,6BAAT,GAAyC;AAC/C,QAAM;AAAEC,IAAAA,OAAF;AAAWC,IAAAA,qBAAX;AAAkCC,IAAAA;AAAlC,MAAwDpB,SAAS,CACpEqB,MAAF,IAAc;AACb,UAAMC,QAAQ,GAAGD,MAAM,CACtBlB,cADsB,CAAN,CAEfoB,0BAFe,CAEahB,UAFb,CAAjB;;AAGA,UAAMiB,sBAAsB,GAAG,CAC9Bd,aAD8B,EAE9BC,gBAF8B,EAG7Bc,QAH6B,CAGnBH,QAHmB,CAA/B;;AAIA,WAAO;AACNJ,MAAAA,OAAO,EAAEI,QADH;AAENH,MAAAA,qBAAqB,EAAEK,sBAFjB;AAGNJ,MAAAA,iBAAiB,EAAE,CAAC,CAAEC,MAAM,CAC3BjB,gBAD2B,CAAN,CAEpBsB,sBAFoB;AAHhB,KAAP;AAOA,GAhBqE,EAiBtE,EAjBsE,CAAvE;AAmBA,QAAM;AAAEC,IAAAA;AAAF,MAA8B1B,WAAW,CAAEE,cAAF,CAA/C;AACAJ,EAAAA,SAAS,CAAE,MAAM;AAChB,QAAK,CAAEoB,qBAAP,EAA+B;;AAC/B,QAAKC,iBAAL,EAAyB;AACxBO,MAAAA,uBAAuB,CAAEpB,UAAF,EAAcG,aAAd,CAAvB;AACA,KAFD,MAEO;AACNiB,MAAAA,uBAAuB,CAAEpB,UAAF,EAAcI,gBAAd,CAAvB;AACA;AACD,GAPQ,EAON,CAAES,iBAAF,EAAqBD,qBAArB,CAPM,CAAT;AAQA,MAAIS,WAAW,GAAGV,OAAlB;;AACA,MAAK,CAAEC,qBAAP,EAA+B;AAC9BS,IAAAA,WAAW,GAAGR,iBAAiB,GAAGV,aAAH,GAAmBC,gBAAlD;AACA;;AACD,SACC,8BACC,cAAC,cAAD;AACC,IAAA,UAAU,EAAGiB,WADd;AAEC,IAAA,KAAK,EAAG/B,EAAE,CAAE,UAAF,CAFX;AAGC,IAAA,IAAI,EAAGC,GAHR;AAIC,IAAA,UAAU,EAAGD,EAAE,CAAE,wBAAF,CAJhB;AAKC,IAAA,MAAM,EAAG,cAAC,cAAD;AAAgB,MAAA,WAAW,EAAG+B;AAA9B,MALV;AAMC,IAAA,eAAe,EAAC;AANjB,KAQGA,WAAW,KAAKjB,gBAAhB,IACD,cAAC,SAAD,QACC,cAAC,YAAD,OADD,CATF,EAaGiB,WAAW,KAAKlB,aAAhB,IACD,cAAC,aAAD;AAAe,IAAA,gBAAgB;AAA/B,IAdF,CADD,EAkBC,cAAC,mBAAD,OAlBD,CADD;AAsBA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createSlotFill, PanelBody } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { cog } from '@wordpress/icons';\nimport { useEffect } from '@wordpress/element';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { store as interfaceStore } from '@wordpress/interface';\nimport { store as blockEditorStore } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport DefaultSidebar from './default-sidebar';\nimport GlobalStylesSidebar from './global-styles-sidebar';\nimport { STORE_NAME } from '../../store/constants';\nimport SettingsHeader from './settings-header';\nimport TemplateCard from './template-card';\nimport { SIDEBAR_BLOCK, SIDEBAR_TEMPLATE } from './constants';\n\nconst { Slot: InspectorSlot, Fill: InspectorFill } = createSlotFill(\n\t'EditSiteSidebarInspector'\n);\nexport const SidebarInspectorFill = InspectorFill;\n\nexport function SidebarComplementaryAreaFills() {\n\tconst { sidebar, isEditorSidebarOpened, hasBlockSelection } = useSelect(\n\t\t( select ) => {\n\t\t\tconst _sidebar = select(\n\t\t\t\tinterfaceStore\n\t\t\t).getActiveComplementaryArea( STORE_NAME );\n\t\t\tconst _isEditorSidebarOpened = [\n\t\t\t\tSIDEBAR_BLOCK,\n\t\t\t\tSIDEBAR_TEMPLATE,\n\t\t\t].includes( _sidebar );\n\t\t\treturn {\n\t\t\t\tsidebar: _sidebar,\n\t\t\t\tisEditorSidebarOpened: _isEditorSidebarOpened,\n\t\t\t\thasBlockSelection: !! select(\n\t\t\t\t\tblockEditorStore\n\t\t\t\t).getBlockSelectionStart(),\n\t\t\t};\n\t\t},\n\t\t[]\n\t);\n\tconst { enableComplementaryArea } = useDispatch( interfaceStore );\n\tuseEffect( () => {\n\t\tif ( ! isEditorSidebarOpened ) return;\n\t\tif ( hasBlockSelection ) {\n\t\t\tenableComplementaryArea( STORE_NAME, SIDEBAR_BLOCK );\n\t\t} else {\n\t\t\tenableComplementaryArea( STORE_NAME, SIDEBAR_TEMPLATE );\n\t\t}\n\t}, [ hasBlockSelection, isEditorSidebarOpened ] );\n\tlet sidebarName = sidebar;\n\tif ( ! isEditorSidebarOpened ) {\n\t\tsidebarName = hasBlockSelection ? SIDEBAR_BLOCK : SIDEBAR_TEMPLATE;\n\t}\n\treturn (\n\t\t<>\n\t\t\t<DefaultSidebar\n\t\t\t\tidentifier={ sidebarName }\n\t\t\t\ttitle={ __( 'Settings' ) }\n\t\t\t\ticon={ cog }\n\t\t\t\tcloseLabel={ __( 'Close settings sidebar' ) }\n\t\t\t\theader={ <SettingsHeader sidebarName={ sidebarName } /> }\n\t\t\t\theaderClassName=\"edit-site-sidebar__panel-tabs\"\n\t\t\t>\n\t\t\t\t{ sidebarName === SIDEBAR_TEMPLATE && (\n\t\t\t\t\t<PanelBody>\n\t\t\t\t\t\t<TemplateCard />\n\t\t\t\t\t</PanelBody>\n\t\t\t\t) }\n\t\t\t\t{ sidebarName === SIDEBAR_BLOCK && (\n\t\t\t\t\t<InspectorSlot bubblesVirtually />\n\t\t\t\t) }\n\t\t\t</DefaultSidebar>\n\t\t\t<GlobalStylesSidebar />\n\t\t</>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/sidebar/index.js"],"names":["createSlotFill","PanelBody","__","cog","useEffect","useSelect","useDispatch","store","interfaceStore","blockEditorStore","DefaultSidebar","GlobalStylesSidebar","NavigationMenuSidebar","STORE_NAME","SettingsHeader","TemplateCard","SIDEBAR_BLOCK","SIDEBAR_TEMPLATE","Slot","InspectorSlot","Fill","InspectorFill","SidebarInspectorFill","SidebarComplementaryAreaFills","sidebar","isEditorSidebarOpened","hasBlockSelection","select","_sidebar","getActiveComplementaryArea","_isEditorSidebarOpened","includes","getBlockSelectionStart","enableComplementaryArea","sidebarName","MaybeNavigationMenuSidebar","process","env","IS_GUTENBERG_PLUGIN"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createSlotFill, PanelBody } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { cog } from '@wordpress/icons';\nimport { useEffect } from '@wordpress/element';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { store as interfaceStore } from '@wordpress/interface';\nimport { store as blockEditorStore } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport DefaultSidebar from './default-sidebar';\nimport GlobalStylesSidebar from './global-styles-sidebar';\nimport NavigationMenuSidebar from './navigation-menu-sidebar';\nimport { STORE_NAME } from '../../store/constants';\nimport SettingsHeader from './settings-header';\nimport TemplateCard from './template-card';\nimport { SIDEBAR_BLOCK, SIDEBAR_TEMPLATE } from './constants';\n\nconst { Slot: InspectorSlot, Fill: InspectorFill } = createSlotFill(\n\t'EditSiteSidebarInspector'\n);\nexport const SidebarInspectorFill = InspectorFill;\n\nexport function SidebarComplementaryAreaFills() {\n\tconst { sidebar, isEditorSidebarOpened, hasBlockSelection } = useSelect(\n\t\t( select ) => {\n\t\t\tconst _sidebar = select(\n\t\t\t\tinterfaceStore\n\t\t\t).getActiveComplementaryArea( STORE_NAME );\n\t\t\tconst _isEditorSidebarOpened = [\n\t\t\t\tSIDEBAR_BLOCK,\n\t\t\t\tSIDEBAR_TEMPLATE,\n\t\t\t].includes( _sidebar );\n\t\t\treturn {\n\t\t\t\tsidebar: _sidebar,\n\t\t\t\tisEditorSidebarOpened: _isEditorSidebarOpened,\n\t\t\t\thasBlockSelection: !! select(\n\t\t\t\t\tblockEditorStore\n\t\t\t\t).getBlockSelectionStart(),\n\t\t\t};\n\t\t},\n\t\t[]\n\t);\n\tconst { enableComplementaryArea } = useDispatch( interfaceStore );\n\tuseEffect( () => {\n\t\tif ( ! isEditorSidebarOpened ) return;\n\t\tif ( hasBlockSelection ) {\n\t\t\tenableComplementaryArea( STORE_NAME, SIDEBAR_BLOCK );\n\t\t} else {\n\t\t\tenableComplementaryArea( STORE_NAME, SIDEBAR_TEMPLATE );\n\t\t}\n\t}, [ hasBlockSelection, isEditorSidebarOpened ] );\n\tlet sidebarName = sidebar;\n\tif ( ! isEditorSidebarOpened ) {\n\t\tsidebarName = hasBlockSelection ? SIDEBAR_BLOCK : SIDEBAR_TEMPLATE;\n\t}\n\n\t// Conditionally include NavMenu sidebar in Plugin only.\n\t// Optimise for dead code elimination.\n\t// See https://github.com/WordPress/gutenberg/blob/trunk/docs/how-to-guides/feature-flags.md#dead-code-elimination.\n\tlet MaybeNavigationMenuSidebar = 'Fragment';\n\n\tif ( process.env.IS_GUTENBERG_PLUGIN ) {\n\t\tMaybeNavigationMenuSidebar = NavigationMenuSidebar;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<DefaultSidebar\n\t\t\t\tidentifier={ sidebarName }\n\t\t\t\ttitle={ __( 'Settings' ) }\n\t\t\t\ticon={ cog }\n\t\t\t\tcloseLabel={ __( 'Close settings sidebar' ) }\n\t\t\t\theader={ <SettingsHeader sidebarName={ sidebarName } /> }\n\t\t\t\theaderClassName=\"edit-site-sidebar__panel-tabs\"\n\t\t\t>\n\t\t\t\t{ sidebarName === SIDEBAR_TEMPLATE && (\n\t\t\t\t\t<PanelBody>\n\t\t\t\t\t\t<TemplateCard />\n\t\t\t\t\t</PanelBody>\n\t\t\t\t) }\n\t\t\t\t{ sidebarName === SIDEBAR_BLOCK && (\n\t\t\t\t\t<InspectorSlot bubblesVirtually />\n\t\t\t\t) }\n\t\t\t</DefaultSidebar>\n\t\t\t<GlobalStylesSidebar />\n\t\t\t<MaybeNavigationMenuSidebar />\n\t\t</>\n\t);\n}\n"]}

package/build-module/components/sidebar/navigation-menu-sidebar/index.js

@@ -0,0 +1,26 @@
+import { createElement } from "@wordpress/element";
+
+/**
+ * WordPress dependencies
+ */
+import { FlexBlock, Flex } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { navigation } from '@wordpress/icons';
+/**
+ * Internal dependencies
+ */
+
+import DefaultSidebar from '../default-sidebar';
+import NavigationInspector from './navigation-inspector';
+export default function NavigationMenuSidebar() {
+  return createElement(DefaultSidebar, {
+    className: "edit-site-navigation-menu-sidebar",
+    identifier: "edit-site/navigation-menu",
+    title: __('Navigation Menus'),
+    icon: navigation,
+    closeLabel: __('Close navigation menu sidebar'),
+    panelClassName: "edit-site-navigation-menu-sidebar__panel",
+    header: createElement(Flex, null, createElement(FlexBlock, null, createElement("strong", null, __('Navigation Menus'))))
+  }, createElement(NavigationInspector, null));
+}
+//# sourceMappingURL=index.js.map

package/build-module/components/sidebar/navigation-menu-sidebar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/edit-site/src/components/sidebar/navigation-menu-sidebar/index.js"],"names":["FlexBlock","Flex","__","navigation","DefaultSidebar","NavigationInspector","NavigationMenuSidebar"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,SAAT,EAAoBC,IAApB,QAAgC,uBAAhC;AACA,SAASC,EAAT,QAAmB,iBAAnB;AACA,SAASC,UAAT,QAA2B,kBAA3B;AAEA;AACA;AACA;;AACA,OAAOC,cAAP,MAA2B,oBAA3B;AACA,OAAOC,mBAAP,MAAgC,wBAAhC;AAEA,eAAe,SAASC,qBAAT,GAAiC;AAC/C,SACC,cAAC,cAAD;AACC,IAAA,SAAS,EAAC,mCADX;AAEC,IAAA,UAAU,EAAC,2BAFZ;AAGC,IAAA,KAAK,EAAGJ,EAAE,CAAE,kBAAF,CAHX;AAIC,IAAA,IAAI,EAAGC,UAJR;AAKC,IAAA,UAAU,EAAGD,EAAE,CAAE,+BAAF,CALhB;AAMC,IAAA,cAAc,EAAC,0CANhB;AAOC,IAAA,MAAM,EACL,cAAC,IAAD,QACC,cAAC,SAAD,QACC,8BAAUA,EAAE,CAAE,kBAAF,CAAZ,CADD,CADD;AARF,KAeC,cAAC,mBAAD,OAfD,CADD;AAmBA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { FlexBlock, Flex } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { navigation } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport DefaultSidebar from '../default-sidebar';\nimport NavigationInspector from './navigation-inspector';\n\nexport default function NavigationMenuSidebar() {\n\treturn (\n\t\t<DefaultSidebar\n\t\t\tclassName=\"edit-site-navigation-menu-sidebar\"\n\t\t\tidentifier=\"edit-site/navigation-menu\"\n\t\t\ttitle={ __( 'Navigation Menus' ) }\n\t\t\ticon={ navigation }\n\t\t\tcloseLabel={ __( 'Close navigation menu sidebar' ) }\n\t\t\tpanelClassName=\"edit-site-navigation-menu-sidebar__panel\"\n\t\t\theader={\n\t\t\t\t<Flex>\n\t\t\t\t\t<FlexBlock>\n\t\t\t\t\t\t<strong>{ __( 'Navigation Menus' ) }</strong>\n\t\t\t\t\t</FlexBlock>\n\t\t\t\t</Flex>\n\t\t\t}\n\t\t>\n\t\t\t<NavigationInspector />\n\t\t</DefaultSidebar>\n\t);\n}\n"]}

package/build-module/components/sidebar/navigation-menu-sidebar/navigation-inspector.js

@@ -0,0 +1,168 @@
+import { createElement, Fragment } from "@wordpress/element";
+
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { useState, useEffect } from '@wordpress/element';
+import { SelectControl } from '@wordpress/components';
+import { store as coreStore, useEntityBlockEditor } from '@wordpress/core-data';
+import { store as blockEditorStore, BlockEditorProvider } from '@wordpress/block-editor';
+import { speak } from '@wordpress/a11y';
+import { useInstanceId } from '@wordpress/compose';
+import { __ } from '@wordpress/i18n';
+/**
+ * Internal dependencies
+ */
+
+import NavigationMenu from './navigation-menu';
+const NAVIGATION_MENUS_QUERY = [{
+  per_page: -1,
+  status: 'publish'
+}];
+export default function NavigationInspector() {
+  var _navigationMenus$;
+
+  const {
+    selectedNavigationBlockId,
+    clientIdToRef,
+    navigationMenus,
+    isResolvingNavigationMenus,
+    hasResolvedNavigationMenus,
+    firstNavigationBlockId
+  } = useSelect(select => {
+    const {
+      __experimentalGetActiveBlockIdByBlockNames,
+      __experimentalGetGlobalBlocksByName,
+      getBlock
+    } = select(blockEditorStore);
+    const {
+      getEntityRecords,
+      hasFinishedResolution,
+      isResolving
+    } = select(coreStore);
+    const navigationMenusQuery = ['postType', 'wp_navigation', NAVIGATION_MENUS_QUERY[0]]; // Get the active Navigation block (if present).
+
+    const selectedNavId = __experimentalGetActiveBlockIdByBlockNames('core/navigation'); // Get all Navigation blocks currently within the editor canvas.
+
+
+    const navBlockIds = __experimentalGetGlobalBlocksByName('core/navigation');
+
+    const idToRef = {};
+    navBlockIds.forEach(id => {
+      var _getBlock, _getBlock$attributes;
+
+      idToRef[id] = (_getBlock = getBlock(id)) === null || _getBlock === void 0 ? void 0 : (_getBlock$attributes = _getBlock.attributes) === null || _getBlock$attributes === void 0 ? void 0 : _getBlock$attributes.ref;
+    });
+    return {
+      selectedNavigationBlockId: selectedNavId,
+      firstNavigationBlockId: navBlockIds === null || navBlockIds === void 0 ? void 0 : navBlockIds[0],
+      clientIdToRef: idToRef,
+      navigationMenus: getEntityRecords(...navigationMenusQuery),
+      isResolvingNavigationMenus: isResolving('getEntityRecords', navigationMenusQuery),
+      hasResolvedNavigationMenus: hasFinishedResolution('getEntityRecords', navigationMenusQuery)
+    };
+  }, []);
+  const navMenuListId = useInstanceId(NavigationMenu, 'edit-site-navigation-inspector-menu');
+  const firstNavRefInTemplate = clientIdToRef[firstNavigationBlockId];
+  const firstNavigationMenuRef = navigationMenus === null || navigationMenus === void 0 ? void 0 : (_navigationMenus$ = navigationMenus[0]) === null || _navigationMenus$ === void 0 ? void 0 : _navigationMenus$.id; // Default Navigation Menu is either:
+  // - the Navigation Menu referenced by the first Nav block within the template.
+  // - the first of the available Navigation Menus (`wp_navigation`) posts.
+
+  const defaultNavigationMenuId = firstNavRefInTemplate || firstNavigationMenuRef; // The Navigation Menu manually selected by the user within the Nav inspector.
+
+  const [currentMenuId, setCurrentMenuId] = useState(firstNavRefInTemplate); // If a Nav block is selected within the canvas then set the
+  // Navigation Menu referenced by it's `ref` attribute  to be
+  // active within the Navigation sidebar.
+
+  useEffect(() => {
+    if (selectedNavigationBlockId) {
+      setCurrentMenuId(clientIdToRef[selectedNavigationBlockId]);
+    }
+  }, [selectedNavigationBlockId]);
+  let options = [];
+
+  if (navigationMenus) {
+    options = navigationMenus.map(_ref => {
+      let {
+        id,
+        title
+      } = _ref;
+      return {
+        value: id,
+        label: title.rendered
+      };
+    });
+  }
+
+  const [innerBlocks, onInput, onChange] = useEntityBlockEditor('postType', 'wp_navigation', {
+    id: currentMenuId || defaultNavigationMenuId
+  });
+  const {
+    isLoadingInnerBlocks,
+    hasLoadedInnerBlocks
+  } = useSelect(select => {
+    const {
+      isResolving,
+      hasFinishedResolution
+    } = select(coreStore);
+    return {
+      isLoadingInnerBlocks: isResolving('getEntityRecord', ['postType', 'wp_navigation', currentMenuId || defaultNavigationMenuId]),
+      hasLoadedInnerBlocks: hasFinishedResolution('getEntityRecord', ['postType', 'wp_navigation', currentMenuId || defaultNavigationMenuId])
+    };
+  }, [currentMenuId, defaultNavigationMenuId]);
+  const isLoading = !(hasResolvedNavigationMenus && hasLoadedInnerBlocks);
+  const hasMoreThanOneNavigationMenu = (navigationMenus === null || navigationMenus === void 0 ? void 0 : navigationMenus.length) > 1;
+  const hasNavigationMenus = !!(navigationMenus !== null && navigationMenus !== void 0 && navigationMenus.length); // Entity block editor will return entities that are not currently published.
+  // Guard by only allowing their usage if there are published Nav Menus.
+
+  const publishedInnerBlocks = hasNavigationMenus ? innerBlocks : [];
+  const hasInnerBlocks = !!(publishedInnerBlocks !== null && publishedInnerBlocks !== void 0 && publishedInnerBlocks.length);
+  useEffect(() => {
+    if (isResolvingNavigationMenus) {
+      speak('Loading Navigation sidebar menus.');
+    }
+
+    if (hasResolvedNavigationMenus) {
+      speak('Navigation sidebar menus have loaded.');
+    }
+  }, [isResolvingNavigationMenus, hasResolvedNavigationMenus]);
+  useEffect(() => {
+    if (isLoadingInnerBlocks) {
+      speak('Loading Navigation sidebar selected menu items.');
+    }
+
+    if (hasLoadedInnerBlocks) {
+      speak('Navigation sidebar selected menu items have loaded.');
+    }
+  }, [isLoadingInnerBlocks, hasLoadedInnerBlocks]);
+  return createElement("div", {
+    className: "edit-site-navigation-inspector"
+  }, hasResolvedNavigationMenus && !hasNavigationMenus && createElement("p", {
+    className: "edit-site-navigation-inspector__empty-msg"
+  }, __('There are no Navigation Menus.')), !hasResolvedNavigationMenus && createElement("div", {
+    className: "edit-site-navigation-inspector__placeholder"
+  }), hasResolvedNavigationMenus && hasMoreThanOneNavigationMenu && createElement(SelectControl, {
+    "aria-controls": // aria-controls should only apply when referenced element is in DOM
+    hasLoadedInnerBlocks ? navMenuListId : undefined,
+    value: currentMenuId || defaultNavigationMenuId,
+    options: options,
+    onChange: newMenuId => setCurrentMenuId(Number(newMenuId))
+  }), isLoading && createElement(Fragment, null, createElement("div", {
+    className: "edit-site-navigation-inspector__placeholder is-child"
+  }), createElement("div", {
+    className: "edit-site-navigation-inspector__placeholder is-child"
+  }), createElement("div", {
+    className: "edit-site-navigation-inspector__placeholder is-child"
+  })), hasInnerBlocks && !isLoading && createElement(BlockEditorProvider, {
+    value: publishedInnerBlocks,
+    onChange: onChange,
+    onInput: onInput
+  }, createElement(NavigationMenu, {
+    id: navMenuListId,
+    innerBlocks: publishedInnerBlocks
+  })), !hasInnerBlocks && !isLoading && createElement("p", {
+    className: "edit-site-navigation-inspector__empty-msg"
+  }, __('Navigation Menu is empty.')));
+}
+//# sourceMappingURL=navigation-inspector.js.map

package/build-module/components/sidebar/navigation-menu-sidebar/navigation-inspector.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/edit-site/src/components/sidebar/navigation-menu-sidebar/navigation-inspector.js"],"names":["useSelect","useState","useEffect","SelectControl","store","coreStore","useEntityBlockEditor","blockEditorStore","BlockEditorProvider","speak","useInstanceId","__","NavigationMenu","NAVIGATION_MENUS_QUERY","per_page","status","NavigationInspector","selectedNavigationBlockId","clientIdToRef","navigationMenus","isResolvingNavigationMenus","hasResolvedNavigationMenus","firstNavigationBlockId","select","__experimentalGetActiveBlockIdByBlockNames","__experimentalGetGlobalBlocksByName","getBlock","getEntityRecords","hasFinishedResolution","isResolving","navigationMenusQuery","selectedNavId","navBlockIds","idToRef","forEach","id","attributes","ref","navMenuListId","firstNavRefInTemplate","firstNavigationMenuRef","defaultNavigationMenuId","currentMenuId","setCurrentMenuId","options","map","title","value","label","rendered","innerBlocks","onInput","onChange","isLoadingInnerBlocks","hasLoadedInnerBlocks","isLoading","hasMoreThanOneNavigationMenu","length","hasNavigationMenus","publishedInnerBlocks","hasInnerBlocks","undefined","newMenuId","Number"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\nimport { useState, useEffect } from '@wordpress/element';\nimport { SelectControl } from '@wordpress/components';\nimport { store as coreStore, useEntityBlockEditor } from '@wordpress/core-data';\nimport {\n\tstore as blockEditorStore,\n\tBlockEditorProvider,\n} from '@wordpress/block-editor';\nimport { speak } from '@wordpress/a11y';\nimport { useInstanceId } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport NavigationMenu from './navigation-menu';\n\nconst NAVIGATION_MENUS_QUERY = [ { per_page: -1, status: 'publish' } ];\n\nexport default function NavigationInspector() {\n\tconst {\n\t\tselectedNavigationBlockId,\n\t\tclientIdToRef,\n\t\tnavigationMenus,\n\t\tisResolvingNavigationMenus,\n\t\thasResolvedNavigationMenus,\n\t\tfirstNavigationBlockId,\n\t} = useSelect( ( select ) => {\n\t\tconst {\n\t\t\t__experimentalGetActiveBlockIdByBlockNames,\n\t\t\t__experimentalGetGlobalBlocksByName,\n\t\t\tgetBlock,\n\t\t} = select( blockEditorStore );\n\n\t\tconst { getEntityRecords, hasFinishedResolution, isResolving } = select(\n\t\t\tcoreStore\n\t\t);\n\n\t\tconst navigationMenusQuery = [\n\t\t\t'postType',\n\t\t\t'wp_navigation',\n\t\t\tNAVIGATION_MENUS_QUERY[ 0 ],\n\t\t];\n\n\t\t// Get the active Navigation block (if present).\n\t\tconst selectedNavId = __experimentalGetActiveBlockIdByBlockNames(\n\t\t\t'core/navigation'\n\t\t);\n\n\t\t// Get all Navigation blocks currently within the editor canvas.\n\t\tconst navBlockIds = __experimentalGetGlobalBlocksByName(\n\t\t\t'core/navigation'\n\t\t);\n\t\tconst idToRef = {};\n\t\tnavBlockIds.forEach( ( id ) => {\n\t\t\tidToRef[ id ] = getBlock( id )?.attributes?.ref;\n\t\t} );\n\t\treturn {\n\t\t\tselectedNavigationBlockId: selectedNavId,\n\t\t\tfirstNavigationBlockId: navBlockIds?.[ 0 ],\n\t\t\tclientIdToRef: idToRef,\n\t\t\tnavigationMenus: getEntityRecords( ...navigationMenusQuery ),\n\t\t\tisResolvingNavigationMenus: isResolving(\n\t\t\t\t'getEntityRecords',\n\t\t\t\tnavigationMenusQuery\n\t\t\t),\n\t\t\thasResolvedNavigationMenus: hasFinishedResolution(\n\t\t\t\t'getEntityRecords',\n\t\t\t\tnavigationMenusQuery\n\t\t\t),\n\t\t};\n\t}, [] );\n\n\tconst navMenuListId = useInstanceId(\n\t\tNavigationMenu,\n\t\t'edit-site-navigation-inspector-menu'\n\t);\n\n\tconst firstNavRefInTemplate = clientIdToRef[ firstNavigationBlockId ];\n\tconst firstNavigationMenuRef = navigationMenus?.[ 0 ]?.id;\n\n\t// Default Navigation Menu is either:\n\t// - the Navigation Menu referenced by the first Nav block within the template.\n\t// - the first of the available Navigation Menus (`wp_navigation`) posts.\n\tconst defaultNavigationMenuId =\n\t\tfirstNavRefInTemplate || firstNavigationMenuRef;\n\n\t// The Navigation Menu manually selected by the user within the Nav inspector.\n\tconst [ currentMenuId, setCurrentMenuId ] = useState(\n\t\tfirstNavRefInTemplate\n\t);\n\n\t// If a Nav block is selected within the canvas then set the\n\t// Navigation Menu referenced by it's `ref` attribute  to be\n\t// active within the Navigation sidebar.\n\tuseEffect( () => {\n\t\tif ( selectedNavigationBlockId ) {\n\t\t\tsetCurrentMenuId( clientIdToRef[ selectedNavigationBlockId ] );\n\t\t}\n\t}, [ selectedNavigationBlockId ] );\n\n\tlet options = [];\n\tif ( navigationMenus ) {\n\t\toptions = navigationMenus.map( ( { id, title } ) => ( {\n\t\t\tvalue: id,\n\t\t\tlabel: title.rendered,\n\t\t} ) );\n\t}\n\n\tconst [ innerBlocks, onInput, onChange ] = useEntityBlockEditor(\n\t\t'postType',\n\t\t'wp_navigation',\n\t\t{ id: currentMenuId || defaultNavigationMenuId }\n\t);\n\n\tconst { isLoadingInnerBlocks, hasLoadedInnerBlocks } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { isResolving, hasFinishedResolution } = select( coreStore );\n\t\t\treturn {\n\t\t\t\tisLoadingInnerBlocks: isResolving( 'getEntityRecord', [\n\t\t\t\t\t'postType',\n\t\t\t\t\t'wp_navigation',\n\t\t\t\t\tcurrentMenuId || defaultNavigationMenuId,\n\t\t\t\t] ),\n\t\t\t\thasLoadedInnerBlocks: hasFinishedResolution(\n\t\t\t\t\t'getEntityRecord',\n\t\t\t\t\t[\n\t\t\t\t\t\t'postType',\n\t\t\t\t\t\t'wp_navigation',\n\t\t\t\t\t\tcurrentMenuId || defaultNavigationMenuId,\n\t\t\t\t\t]\n\t\t\t\t),\n\t\t\t};\n\t\t},\n\t\t[ currentMenuId, defaultNavigationMenuId ]\n\t);\n\n\tconst isLoading = ! ( hasResolvedNavigationMenus && hasLoadedInnerBlocks );\n\n\tconst hasMoreThanOneNavigationMenu = navigationMenus?.length > 1;\n\n\tconst hasNavigationMenus = !! navigationMenus?.length;\n\n\t// Entity block editor will return entities that are not currently published.\n\t// Guard by only allowing their usage if there are published Nav Menus.\n\tconst publishedInnerBlocks = hasNavigationMenus ? innerBlocks : [];\n\n\tconst hasInnerBlocks = !! publishedInnerBlocks?.length;\n\n\tuseEffect( () => {\n\t\tif ( isResolvingNavigationMenus ) {\n\t\t\tspeak( 'Loading Navigation sidebar menus.' );\n\t\t}\n\n\t\tif ( hasResolvedNavigationMenus ) {\n\t\t\tspeak( 'Navigation sidebar menus have loaded.' );\n\t\t}\n\t}, [ isResolvingNavigationMenus, hasResolvedNavigationMenus ] );\n\n\tuseEffect( () => {\n\t\tif ( isLoadingInnerBlocks ) {\n\t\t\tspeak( 'Loading Navigation sidebar selected menu items.' );\n\t\t}\n\n\t\tif ( hasLoadedInnerBlocks ) {\n\t\t\tspeak( 'Navigation sidebar selected menu items have loaded.' );\n\t\t}\n\t}, [ isLoadingInnerBlocks, hasLoadedInnerBlocks ] );\n\n\treturn (\n\t\t<div className=\"edit-site-navigation-inspector\">\n\t\t\t{ hasResolvedNavigationMenus && ! hasNavigationMenus && (\n\t\t\t\t<p className=\"edit-site-navigation-inspector__empty-msg\">\n\t\t\t\t\t{ __( 'There are no Navigation Menus.' ) }\n\t\t\t\t</p>\n\t\t\t) }\n\n\t\t\t{ ! hasResolvedNavigationMenus && (\n\t\t\t\t<div className=\"edit-site-navigation-inspector__placeholder\" />\n\t\t\t) }\n\t\t\t{ hasResolvedNavigationMenus && hasMoreThanOneNavigationMenu && (\n\t\t\t\t<SelectControl\n\t\t\t\t\taria-controls={\n\t\t\t\t\t\t// aria-controls should only apply when referenced element is in DOM\n\t\t\t\t\t\thasLoadedInnerBlocks ? navMenuListId : undefined\n\t\t\t\t\t}\n\t\t\t\t\tvalue={ currentMenuId || defaultNavigationMenuId }\n\t\t\t\t\toptions={ options }\n\t\t\t\t\tonChange={ ( newMenuId ) =>\n\t\t\t\t\t\tsetCurrentMenuId( Number( newMenuId ) )\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ isLoading && (\n\t\t\t\t<>\n\t\t\t\t\t<div className=\"edit-site-navigation-inspector__placeholder is-child\" />\n\t\t\t\t\t<div className=\"edit-site-navigation-inspector__placeholder is-child\" />\n\t\t\t\t\t<div className=\"edit-site-navigation-inspector__placeholder is-child\" />\n\t\t\t\t</>\n\t\t\t) }\n\t\t\t{ hasInnerBlocks && ! isLoading && (\n\t\t\t\t<BlockEditorProvider\n\t\t\t\t\tvalue={ publishedInnerBlocks }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tonInput={ onInput }\n\t\t\t\t>\n\t\t\t\t\t<NavigationMenu\n\t\t\t\t\t\tid={ navMenuListId }\n\t\t\t\t\t\tinnerBlocks={ publishedInnerBlocks }\n\t\t\t\t\t/>\n\t\t\t\t</BlockEditorProvider>\n\t\t\t) }\n\n\t\t\t{ ! hasInnerBlocks && ! isLoading && (\n\t\t\t\t<p className=\"edit-site-navigation-inspector__empty-msg\">\n\t\t\t\t\t{ __( 'Navigation Menu is empty.' ) }\n\t\t\t\t</p>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n"]}

package/build-module/components/sidebar/navigation-menu-sidebar/navigation-menu.js

@@ -0,0 +1,45 @@
+import { createElement, Fragment } from "@wordpress/element";
+
+/**
+ * WordPress dependencies
+ */
+import { __experimentalListView as ListView, store as blockEditorStore } from '@wordpress/block-editor';
+import { useEffect } from '@wordpress/element';
+import { useDispatch } from '@wordpress/data';
+const ALLOWED_BLOCKS = {
+  'core/navigation': ['core/navigation-link', 'core/search', 'core/social-links', 'core/page-list', 'core/spacer', 'core/home-link', 'core/site-title', 'core/site-logo', 'core/navigation-submenu'],
+  'core/social-links': ['core/social-link'],
+  'core/navigation-submenu': ['core/navigation-link', 'core/navigation-submenu'],
+  'core/navigation-link': ['core/navigation-link', 'core/navigation-submenu']
+};
+export default function NavigationMenu(_ref) {
+  let {
+    innerBlocks,
+    id
+  } = _ref;
+  const {
+    updateBlockListSettings
+  } = useDispatch(blockEditorStore); //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
+
+  useEffect(() => {
+    updateBlockListSettings('', {
+      allowedBlocks: ALLOWED_BLOCKS['core/navigation']
+    });
+    innerBlocks.forEach(block => {
+      if (ALLOWED_BLOCKS[block.name]) {
+        updateBlockListSettings(block.clientId, {
+          allowedBlocks: ALLOWED_BLOCKS[block.name]
+        });
+      }
+    });
+  }, [updateBlockListSettings, innerBlocks]);
+  return createElement(Fragment, null, createElement(ListView, {
+    id: id,
+    showNestedBlocks: true,
+    expandNested: false,
+    __experimentalFeatures: true,
+    __experimentalPersistentListViewFeatures: true
+  }));
+}
+//# sourceMappingURL=navigation-menu.js.map

package/build-module/components/sidebar/navigation-menu-sidebar/navigation-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/edit-site/src/components/sidebar/navigation-menu-sidebar/navigation-menu.js"],"names":["__experimentalListView","ListView","store","blockEditorStore","useEffect","useDispatch","ALLOWED_BLOCKS","NavigationMenu","innerBlocks","id","updateBlockListSettings","allowedBlocks","forEach","block","name","clientId"],"mappings":";;AAAA;AACA;AACA;AACA,SACCA,sBAAsB,IAAIC,QAD3B,EAECC,KAAK,IAAIC,gBAFV,QAGO,yBAHP;AAIA,SAASC,SAAT,QAA0B,oBAA1B;AACA,SAASC,WAAT,QAA4B,iBAA5B;AAEA,MAAMC,cAAc,GAAG;AACtB,qBAAmB,CAClB,sBADkB,EAElB,aAFkB,EAGlB,mBAHkB,EAIlB,gBAJkB,EAKlB,aALkB,EAMlB,gBANkB,EAOlB,iBAPkB,EAQlB,gBARkB,EASlB,yBATkB,CADG;AAYtB,uBAAqB,CAAE,kBAAF,CAZC;AAatB,6BAA2B,CAC1B,sBAD0B,EAE1B,yBAF0B,CAbL;AAiBtB,0BAAwB,CACvB,sBADuB,EAEvB,yBAFuB;AAjBF,CAAvB;AAuBA,eAAe,SAASC,cAAT,OAA+C;AAAA,MAAtB;AAAEC,IAAAA,WAAF;AAAeC,IAAAA;AAAf,GAAsB;AAC7D,QAAM;AAAEC,IAAAA;AAAF,MAA8BL,WAAW,CAAEF,gBAAF,CAA/C,CAD6D,CAG7D;AACA;;AACAC,EAAAA,SAAS,CAAE,MAAM;AAChBM,IAAAA,uBAAuB,CAAE,EAAF,EAAM;AAC5BC,MAAAA,aAAa,EAAEL,cAAc,CAAE,iBAAF;AADD,KAAN,CAAvB;AAGAE,IAAAA,WAAW,CAACI,OAAZ,CAAuBC,KAAF,IAAa;AACjC,UAAKP,cAAc,CAAEO,KAAK,CAACC,IAAR,CAAnB,EAAoC;AACnCJ,QAAAA,uBAAuB,CAAEG,KAAK,CAACE,QAAR,EAAkB;AACxCJ,UAAAA,aAAa,EAAEL,cAAc,CAAEO,KAAK,CAACC,IAAR;AADW,SAAlB,CAAvB;AAGA;AACD,KAND;AAOA,GAXQ,EAWN,CAAEJ,uBAAF,EAA2BF,WAA3B,CAXM,CAAT;AAYA,SACC,8BACC,cAAC,QAAD;AACC,IAAA,EAAE,EAAGC,EADN;AAEC,IAAA,gBAAgB,MAFjB;AAGC,IAAA,YAAY,EAAG,KAHhB;AAIC,IAAA,sBAAsB,MAJvB;AAKC,IAAA,wCAAwC;AALzC,IADD,CADD;AAWA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalListView as ListView,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\nimport { useEffect } from '@wordpress/element';\nimport { useDispatch } from '@wordpress/data';\n\nconst ALLOWED_BLOCKS = {\n\t'core/navigation': [\n\t\t'core/navigation-link',\n\t\t'core/search',\n\t\t'core/social-links',\n\t\t'core/page-list',\n\t\t'core/spacer',\n\t\t'core/home-link',\n\t\t'core/site-title',\n\t\t'core/site-logo',\n\t\t'core/navigation-submenu',\n\t],\n\t'core/social-links': [ 'core/social-link' ],\n\t'core/navigation-submenu': [\n\t\t'core/navigation-link',\n\t\t'core/navigation-submenu',\n\t],\n\t'core/navigation-link': [\n\t\t'core/navigation-link',\n\t\t'core/navigation-submenu',\n\t],\n};\n\nexport default function NavigationMenu( { innerBlocks, id } ) {\n\tconst { updateBlockListSettings } = useDispatch( blockEditorStore );\n\n\t//TODO: Block settings are normally updated as a side effect of rendering InnerBlocks in BlockList\n\t//Think through a better way of doing this, possible with adding allowed blocks to block library metadata\n\tuseEffect( () => {\n\t\tupdateBlockListSettings( '', {\n\t\t\tallowedBlocks: ALLOWED_BLOCKS[ 'core/navigation' ],\n\t\t} );\n\t\tinnerBlocks.forEach( ( block ) => {\n\t\t\tif ( ALLOWED_BLOCKS[ block.name ] ) {\n\t\t\t\tupdateBlockListSettings( block.clientId, {\n\t\t\t\t\tallowedBlocks: ALLOWED_BLOCKS[ block.name ],\n\t\t\t\t} );\n\t\t\t}\n\t\t} );\n\t}, [ updateBlockListSettings, innerBlocks ] );\n\treturn (\n\t\t<>\n\t\t\t<ListView\n\t\t\t\tid={ id }\n\t\t\t\tshowNestedBlocks\n\t\t\t\texpandNested={ false }\n\t\t\t\t__experimentalFeatures\n\t\t\t\t__experimentalPersistentListViewFeatures\n\t\t\t/>\n\t\t</>\n\t);\n}\n"]}

package/build-module/components/template-part-converter/convert-to-regular.js

@@ -17,6 +17,12 @@ export default function ConvertToRegularBlocks(_ref) {
   const {
     replaceBlocks
   } = useDispatch(blockEditorStore);
+  const canRemove = useSelect(select => select(blockEditorStore).canRemoveBlock(clientId), [clientId]);
+
+  if (!canRemove) {
+    return null;
+  }
+
   return createElement(BlockSettingsMenuControls, null, _ref2 => {
     let {
       onClose

package/build-module/components/template-part-converter/convert-to-regular.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/template-part-converter/convert-to-regular.js"],"names":["useSelect","useDispatch","BlockSettingsMenuControls","store","blockEditorStore","MenuItem","__","ConvertToRegularBlocks","clientId","getBlocks","replaceBlocks","onClose"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,SAAT,EAAoBC,WAApB,QAAuC,iBAAvC;AACA,SACCC,yBADD,EAECC,KAAK,IAAIC,gBAFV,QAGO,yBAHP;AAIA,SAASC,QAAT,QAAyB,uBAAzB;AACA,SAASC,EAAT,QAAmB,iBAAnB;AAEA,eAAe,SAASC,sBAAT,OAAgD;AAAA,MAAf;AAAEC,IAAAA;AAAF,GAAe;AAC9D,QAAM;AAAEC,IAAAA;AAAF,MAAgBT,SAAS,CAAEI,gBAAF,CAA/B;AACA,QAAM;AAAEM,IAAAA;AAAF,MAAoBT,WAAW,CAAEG,gBAAF,CAArC;AAEA,SACC,cAAC,yBAAD,QACG;AAAA,QAAE;AAAEO,MAAAA;AAAF,KAAF;AAAA,WACD,cAAC,QAAD;AACC,MAAA,OAAO,EAAG,MAAM;AACfD,QAAAA,aAAa,CAAEF,QAAF,EAAYC,SAAS,CAAED,QAAF,CAArB,CAAb;AACAG,QAAAA,OAAO;AACP;AAJF,OAMGL,EAAE,CAAE,kCAAF,CANL,CADC;AAAA,GADH,CADD;AAcA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport {\n\tBlockSettingsMenuControls,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\nimport { MenuItem } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\nexport default function ConvertToRegularBlocks( { clientId } ) {\n\tconst { getBlocks } = useSelect( blockEditorStore );\n\tconst { replaceBlocks } = useDispatch( blockEditorStore );\n\n\treturn (\n\t\t<BlockSettingsMenuControls>\n\t\t\t{ ( { onClose } ) => (\n\t\t\t\t<MenuItem\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\treplaceBlocks( clientId, getBlocks( clientId ) );\n\t\t\t\t\t\tonClose();\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Detach blocks from template part' ) }\n\t\t\t\t</MenuItem>\n\t\t\t) }\n\t\t</BlockSettingsMenuControls>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/template-part-converter/convert-to-regular.js"],"names":["useSelect","useDispatch","BlockSettingsMenuControls","store","blockEditorStore","MenuItem","__","ConvertToRegularBlocks","clientId","getBlocks","replaceBlocks","canRemove","select","canRemoveBlock","onClose"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,SAAT,EAAoBC,WAApB,QAAuC,iBAAvC;AACA,SACCC,yBADD,EAECC,KAAK,IAAIC,gBAFV,QAGO,yBAHP;AAIA,SAASC,QAAT,QAAyB,uBAAzB;AACA,SAASC,EAAT,QAAmB,iBAAnB;AAEA,eAAe,SAASC,sBAAT,OAAgD;AAAA,MAAf;AAAEC,IAAAA;AAAF,GAAe;AAC9D,QAAM;AAAEC,IAAAA;AAAF,MAAgBT,SAAS,CAAEI,gBAAF,CAA/B;AACA,QAAM;AAAEM,IAAAA;AAAF,MAAoBT,WAAW,CAAEG,gBAAF,CAArC;AAEA,QAAMO,SAAS,GAAGX,SAAS,CACxBY,MAAF,IAAcA,MAAM,CAAER,gBAAF,CAAN,CAA2BS,cAA3B,CAA2CL,QAA3C,CADY,EAE1B,CAAEA,QAAF,CAF0B,CAA3B;;AAKA,MAAK,CAAEG,SAAP,EAAmB;AAClB,WAAO,IAAP;AACA;;AAED,SACC,cAAC,yBAAD,QACG;AAAA,QAAE;AAAEG,MAAAA;AAAF,KAAF;AAAA,WACD,cAAC,QAAD;AACC,MAAA,OAAO,EAAG,MAAM;AACfJ,QAAAA,aAAa,CAAEF,QAAF,EAAYC,SAAS,CAAED,QAAF,CAArB,CAAb;AACAM,QAAAA,OAAO;AACP;AAJF,OAMGR,EAAE,CAAE,kCAAF,CANL,CADC;AAAA,GADH,CADD;AAcA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport {\n\tBlockSettingsMenuControls,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\nimport { MenuItem } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\nexport default function ConvertToRegularBlocks( { clientId } ) {\n\tconst { getBlocks } = useSelect( blockEditorStore );\n\tconst { replaceBlocks } = useDispatch( blockEditorStore );\n\n\tconst canRemove = useSelect(\n\t\t( select ) => select( blockEditorStore ).canRemoveBlock( clientId ),\n\t\t[ clientId ]\n\t);\n\n\tif ( ! canRemove ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<BlockSettingsMenuControls>\n\t\t\t{ ( { onClose } ) => (\n\t\t\t\t<MenuItem\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\treplaceBlocks( clientId, getBlocks( clientId ) );\n\t\t\t\t\t\tonClose();\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Detach blocks from template part' ) }\n\t\t\t\t</MenuItem>\n\t\t\t) }\n\t\t</BlockSettingsMenuControls>\n\t);\n}\n"]}

package/build-style/style-rtl.css

@@ -745,7 +745,8 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
   background: linear-gradient(45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
 }
 
-.edit-site-global-styles-header__description {
+.edit-site-global-styles-header__description,
+.edit-site-block-types-search {
   padding: 0 16px;
 }
 
@@ -773,20 +774,30 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
 
 .edit-site-global-styles-variations_item {
   box-sizing: border-box;
+}
+.edit-site-global-styles-variations_item .edit-site-global-styles-variations_item-preview {
   padding: 2px;
   border-radius: 2px;
   border: #e0e0e0 1px solid;
 }
-.edit-site-global-styles-variations_item.is-active {
+.edit-site-global-styles-variations_item.is-active .edit-site-global-styles-variations_item-preview {
   border: #1e1e1e 1px solid;
 }
-.edit-site-global-styles-variations_item:hover {
+.edit-site-global-styles-variations_item:hover .edit-site-global-styles-variations_item-preview {
   border: var(--wp-admin-theme-color) 1px solid;
 }
-.edit-site-global-styles-variations_item:focus {
+.edit-site-global-styles-variations_item:focus .edit-site-global-styles-variations_item-preview {
   border: var(--wp-admin-theme-color) 1px solid;
 }
 
+.edit-site-global-styles-icon-with-current-color {
+  fill: currentColor;
+}
+
+.edit-site-global-styles__color-indicator-wrapper {
+  height: 24px;
+}
+
 .edit-site-header {
   align-items: center;
   background-color: #fff;
@@ -1537,7 +1548,7 @@ body.is-fullscreen-mode .edit-site-list-header {
   padding: 0 8px;
   height: 24px;
   border-radius: 2px;
-  background-color: #000;
+  background-color: #1e1e1e;
   color: #fff;
   align-items: center;
   font-size: 12px;
@@ -1614,6 +1625,43 @@ body.is-fullscreen-mode .edit-site-list-header {
   box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 -4px 0 0 var(--wp-admin-theme-color);
 }
 
+@keyframes loadingpulse {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.edit-site-navigation-inspector {
+  padding: 16px;
+}
+.edit-site-navigation-inspector .block-editor-list-view-leaf .block-editor-list-view-block-contents {
+  align-items: flex-start;
+  white-space: normal;
+}
+.edit-site-navigation-inspector .block-editor-list-view-block__title {
+  margin-top: 3px;
+}
+.edit-site-navigation-inspector .block-editor-list-view-block__menu-cell {
+  padding-left: 0;
+}
+
+.edit-site-navigation-inspector__placeholder {
+  padding: 8px;
+  margin: 8px;
+  background-color: #f0f0f0;
+  animation: loadingpulse 1s linear infinite;
+  animation-delay: 0.5s;
+}
+.edit-site-navigation-inspector__placeholder.is-child {
+  margin-right: 24px;
+  width: 50%;
+}
+
 .edit-site-template-card {
   display: flex;
   align-items: flex-start;

package/build-style/style.css

@@ -745,7 +745,8 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
   background: linear-gradient(-45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
 }
 
-.edit-site-global-styles-header__description {
+.edit-site-global-styles-header__description,
+.edit-site-block-types-search {
   padding: 0 16px;
 }
 
@@ -773,20 +774,30 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
 
 .edit-site-global-styles-variations_item {
   box-sizing: border-box;
+}
+.edit-site-global-styles-variations_item .edit-site-global-styles-variations_item-preview {
   padding: 2px;
   border-radius: 2px;
   border: #e0e0e0 1px solid;
 }
-.edit-site-global-styles-variations_item.is-active {
+.edit-site-global-styles-variations_item.is-active .edit-site-global-styles-variations_item-preview {
   border: #1e1e1e 1px solid;
 }
-.edit-site-global-styles-variations_item:hover {
+.edit-site-global-styles-variations_item:hover .edit-site-global-styles-variations_item-preview {
   border: var(--wp-admin-theme-color) 1px solid;
 }
-.edit-site-global-styles-variations_item:focus {
+.edit-site-global-styles-variations_item:focus .edit-site-global-styles-variations_item-preview {
   border: var(--wp-admin-theme-color) 1px solid;
 }
 
+.edit-site-global-styles-icon-with-current-color {
+  fill: currentColor;
+}
+
+.edit-site-global-styles__color-indicator-wrapper {
+  height: 24px;
+}
+
 .edit-site-header {
   align-items: center;
   background-color: #fff;
@@ -1537,7 +1548,7 @@ body.is-fullscreen-mode .edit-site-list-header {
   padding: 0 8px;
   height: 24px;
   border-radius: 2px;
-  background-color: #000;
+  background-color: #1e1e1e;
   color: #fff;
   align-items: center;
   font-size: 12px;
@@ -1614,6 +1625,43 @@ body.is-fullscreen-mode .edit-site-list-header {
   box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 -4px 0 0 var(--wp-admin-theme-color);
 }
 
+@keyframes loadingpulse {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.edit-site-navigation-inspector {
+  padding: 16px;
+}
+.edit-site-navigation-inspector .block-editor-list-view-leaf .block-editor-list-view-block-contents {
+  align-items: flex-start;
+  white-space: normal;
+}
+.edit-site-navigation-inspector .block-editor-list-view-block__title {
+  margin-top: 3px;
+}
+.edit-site-navigation-inspector .block-editor-list-view-block__menu-cell {
+  padding-right: 0;
+}
+
+.edit-site-navigation-inspector__placeholder {
+  padding: 8px;
+  margin: 8px;
+  background-color: #f0f0f0;
+  animation: loadingpulse 1s linear infinite;
+  animation-delay: 0.5s;
+}
+.edit-site-navigation-inspector__placeholder.is-child {
+  margin-left: 24px;
+  width: 50%;
+}
+
 .edit-site-template-card {
   display: flex;
   align-items: flex-start;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "4.2.0",
+	"version": "4.3.2",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,33 +27,33 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.5.0",
-		"@wordpress/api-fetch": "^6.2.0",
-		"@wordpress/block-editor": "^8.4.0",
-		"@wordpress/block-library": "^7.2.0",
-		"@wordpress/blocks": "^11.4.0",
-		"@wordpress/components": "^19.7.0",
-		"@wordpress/compose": "^5.3.0",
-		"@wordpress/core-data": "^4.3.0",
-		"@wordpress/data": "^6.5.0",
-		"@wordpress/deprecated": "^3.5.0",
-		"@wordpress/editor": "^12.4.0",
-		"@wordpress/element": "^4.3.0",
-		"@wordpress/hooks": "^3.5.0",
-		"@wordpress/html-entities": "^3.5.0",
-		"@wordpress/i18n": "^4.5.0",
-		"@wordpress/icons": "^8.1.0",
-		"@wordpress/interface": "^4.4.0",
-		"@wordpress/keyboard-shortcuts": "^3.3.0",
-		"@wordpress/keycodes": "^3.5.0",
-		"@wordpress/media-utils": "^3.3.0",
-		"@wordpress/notices": "^3.5.0",
-		"@wordpress/plugins": "^4.3.0",
-		"@wordpress/preferences": "^1.1.0",
-		"@wordpress/reusable-blocks": "^3.3.0",
-		"@wordpress/style-engine": "^0.4.0",
-		"@wordpress/url": "^3.6.0",
-		"@wordpress/viewport": "^4.3.0",
+		"@wordpress/a11y": "^3.6.1",
+		"@wordpress/api-fetch": "^6.3.1",
+		"@wordpress/block-editor": "^8.5.2",
+		"@wordpress/block-library": "^7.3.2",
+		"@wordpress/blocks": "^11.5.2",
+		"@wordpress/components": "^19.8.1",
+		"@wordpress/compose": "^5.4.1",
+		"@wordpress/core-data": "^4.4.2",
+		"@wordpress/data": "^6.6.1",
+		"@wordpress/deprecated": "^3.6.1",
+		"@wordpress/editor": "^12.5.2",
+		"@wordpress/element": "^4.4.1",
+		"@wordpress/hooks": "^3.6.1",
+		"@wordpress/html-entities": "^3.6.1",
+		"@wordpress/i18n": "^4.6.1",
+		"@wordpress/icons": "^8.2.1",
+		"@wordpress/interface": "^4.5.1",
+		"@wordpress/keyboard-shortcuts": "^3.4.1",
+		"@wordpress/keycodes": "^3.6.1",
+		"@wordpress/media-utils": "^3.4.1",
+		"@wordpress/notices": "^3.6.1",
+		"@wordpress/plugins": "^4.4.1",
+		"@wordpress/preferences": "^1.2.1",
+		"@wordpress/reusable-blocks": "^3.4.2",
+		"@wordpress/style-engine": "^0.5.1",
+		"@wordpress/url": "^3.7.1",
+		"@wordpress/viewport": "^4.4.1",
 		"classnames": "^2.3.1",
 		"downloadjs": "^1.4.7",
 		"history": "^5.1.0",
@@ -68,5 +68,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "aa003c3634016cc4ab6348b2106907e371c648e1"
+	"gitHead": "446565ecaa40370173c18926535e975ec5652b71"
 }