@wordpress/block-library 6.0.20 → 6.0.26

package/build/navigation/edit/placeholder/index.js

@@ -23,12 +23,12 @@ var _useNavigationEntities = _interopRequireDefault(require("../../use-navigatio
 
 var _placeholderPreview = _interopRequireDefault(require("./placeholder-preview"));
 
-var _menuItemsToBlocks = _interopRequireDefault(require("../../menu-items-to-blocks"));
-
 var _useNavigationMenu = _interopRequireDefault(require("../../use-navigation-menu"));
 
 var _useCreateNavigationMenu = _interopRequireDefault(require("../use-create-navigation-menu"));
 
+var _useConvertClassicMenu = _interopRequireDefault(require("../../use-convert-classic-menu"));
+
 /**
  * WordPress dependencies
  */
@@ -40,7 +40,6 @@ const ExistingMenusDropdown = _ref => {
   let {
     canSwitchNavigationMenu,
     navigationMenus,
-    setSelectedMenu,
     onFinish,
     menus,
     onCreateFromMenu,
@@ -67,7 +66,6 @@ const ExistingMenusDropdown = _ref => {
     }, canSwitchNavigationMenu && (navigationMenus === null || navigationMenus === void 0 ? void 0 : navigationMenus.map(menu => {
       return (0, _element.createElement)(_components.MenuItem, {
         onClick: () => {
-          setSelectedMenu(menu.id);
           onFinish(menu);
         },
         onClose: onClose,
@@ -78,8 +76,7 @@ const ExistingMenusDropdown = _ref => {
     }, menus === null || menus === void 0 ? void 0 : menus.map(menu => {
       return (0, _element.createElement)(_components.MenuItem, {
         onClick: () => {
-          setSelectedMenu(menu.id);
-          onCreateFromMenu(menu.name);
+          onCreateFromMenu(menu.id, menu.name);
         },
         onClose: onClose,
         key: menu.id
@@ -96,9 +93,6 @@ function NavigationPlaceholder(_ref3) {
     hasResolvedNavigationMenus,
     canUserCreateNavigation = false
   } = _ref3;
-  const [selectedMenu, setSelectedMenu] = (0, _element.useState)();
-  const [isCreatingFromMenu, setIsCreatingFromMenu] = (0, _element.useState)(false);
-  const [menuName, setMenuName] = (0, _element.useState)('');
   const createNavigationMenu = (0, _useCreateNavigationMenu.default)(clientId);
 
   const onFinishMenuCreation = async function (blocks) {
@@ -112,35 +106,15 @@ function NavigationPlaceholder(_ref3) {
     onFinish(navigationMenu, blocks);
   };
 
+  const convertClassicMenu = (0, _useConvertClassicMenu.default)(onFinishMenuCreation);
   const {
     isResolvingPages,
     menus,
     isResolvingMenus,
-    menuItems,
-    hasResolvedMenuItems,
     hasPages,
     hasMenus
-  } = (0, _useNavigationEntities.default)(selectedMenu);
+  } = (0, _useNavigationEntities.default)();
   const isStillLoading = isResolvingPages || isResolvingMenus;
-  const createFromMenu = (0, _element.useCallback)(name => {
-    const {
-      innerBlocks: blocks
-    } = (0, _menuItemsToBlocks.default)(menuItems);
-    onFinishMenuCreation(blocks, name);
-  }, [menuItems, _menuItemsToBlocks.default, onFinish]);
-
-  const onCreateFromMenu = name => {
-    // If we have menu items, create the block right away.
-    if (hasResolvedMenuItems) {
-      createFromMenu(name);
-      return;
-    } // Otherwise, create the block when resolution finishes.
-
-
-    setIsCreatingFromMenu(true); // Store the name to use later.
-
-    setMenuName(name);
-  };
 
   const onCreateEmptyMenu = () => {
     onFinishMenuCreation([]);
@@ -151,14 +125,6 @@ function NavigationPlaceholder(_ref3) {
     onFinishMenuCreation(block);
   };
 
-  (0, _element.useEffect)(() => {
-    // If the user selected a menu but we had to wait for menu items to
-    // finish resolving, then create the block once resolution finishes.
-    if (isCreatingFromMenu && hasResolvedMenuItems) {
-      createFromMenu(menuName);
-      setIsCreatingFromMenu(false);
-    }
-  }, [isCreatingFromMenu, hasResolvedMenuItems, menuName]);
   const {
     navigationMenus
   } = (0, _useNavigationMenu.default)();
@@ -177,10 +143,9 @@ function NavigationPlaceholder(_ref3) {
   }), ' ', (0, _i18n.__)('Navigation')), (0, _element.createElement)("hr", null), hasMenus || navigationMenus !== null && navigationMenus !== void 0 && navigationMenus.length ? (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(ExistingMenusDropdown, {
     canSwitchNavigationMenu: canSwitchNavigationMenu,
     navigationMenus: navigationMenus,
-    setSelectedMenu: setSelectedMenu,
     onFinish: onFinish,
     menus: menus,
-    onCreateFromMenu: onCreateFromMenu,
+    onCreateFromMenu: convertClassicMenu,
     showClassicMenus: canUserCreateNavigation
   }), (0, _element.createElement)("hr", null)) : undefined, canUserCreateNavigation && hasPages ? (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.Button, {
     variant: "tertiary",

package/build/navigation/edit/placeholder/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-library/src/navigation/edit/placeholder/index.js"],"names":["ExistingMenusDropdown","canSwitchNavigationMenu","navigationMenus","setSelectedMenu","onFinish","menus","onCreateFromMenu","showClassicMenus","toggleProps","variant","iconPosition","className","isAlternate","onClose","map","menu","id","title","rendered","name","NavigationPlaceholder","clientId","hasResolvedNavigationMenus","canUserCreateNavigation","selectedMenu","isCreatingFromMenu","setIsCreatingFromMenu","menuName","setMenuName","createNavigationMenu","onFinishMenuCreation","blocks","navigationMenuTitle","navigationMenu","isResolvingPages","isResolvingMenus","menuItems","hasResolvedMenuItems","hasPages","hasMenus","isStillLoading","createFromMenu","innerBlocks","menuItemsToBlocks","onCreateEmptyMenu","onCreateAllPages","block","navigation","length","undefined"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createBlock } from '@wordpress/blocks';\nimport {\n\tPlaceholder,\n\tButton,\n\tDropdownMenu,\n\tMenuGroup,\n\tMenuItem,\n} from '@wordpress/components';\nimport { useCallback, useState, useEffect } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { navigation, Icon } from '@wordpress/icons';\nimport { decodeEntities } from '@wordpress/html-entities';\n\n/**\n * Internal dependencies\n */\n\nimport useNavigationEntities from '../../use-navigation-entities';\nimport PlaceholderPreview from './placeholder-preview';\nimport menuItemsToBlocks from '../../menu-items-to-blocks';\nimport useNavigationMenu from '../../use-navigation-menu';\nimport useCreateNavigationMenu from '../use-create-navigation-menu';\n\nconst ExistingMenusDropdown = ( {\n\tcanSwitchNavigationMenu,\n\tnavigationMenus,\n\tsetSelectedMenu,\n\tonFinish,\n\tmenus,\n\tonCreateFromMenu,\n\tshowClassicMenus = false,\n} ) => {\n\tconst toggleProps = {\n\t\tvariant: 'tertiary',\n\t\ticonPosition: 'right',\n\t\tclassName: 'wp-block-navigation-placeholder__actions__dropdown',\n\t};\n\treturn (\n\t\t<DropdownMenu\n\t\t\ttext={ __( 'Select menu' ) }\n\t\t\ticon={ null }\n\t\t\ttoggleProps={ toggleProps }\n\t\t\tpopoverProps={ { isAlternate: true } }\n\t\t>\n\t\t\t{ ( { onClose } ) => (\n\t\t\t\t<>\n\t\t\t\t\t<MenuGroup label={ __( 'Menus' ) }>\n\t\t\t\t\t\t{ canSwitchNavigationMenu &&\n\t\t\t\t\t\t\tnavigationMenus?.map( ( menu ) => {\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\tsetSelectedMenu( menu.id );\n\t\t\t\t\t\t\t\t\t\t\tonFinish( menu );\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\tonClose={ onClose }\n\t\t\t\t\t\t\t\t\t\tkey={ menu.id }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ decodeEntities(\n\t\t\t\t\t\t\t\t\t\t\tmenu.title.rendered\n\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t</MenuGroup>\n\t\t\t\t\t{ showClassicMenus && (\n\t\t\t\t\t\t<MenuGroup label={ __( 'Classic Menus' ) }>\n\t\t\t\t\t\t\t{ menus?.map( ( menu ) => {\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\tsetSelectedMenu( menu.id );\n\t\t\t\t\t\t\t\t\t\t\tonCreateFromMenu( menu.name );\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\tonClose={ onClose }\n\t\t\t\t\t\t\t\t\t\tkey={ menu.id }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ decodeEntities( menu.name ) }\n\t\t\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t</MenuGroup>\n\t\t\t\t\t) }\n\t\t\t\t</>\n\t\t\t) }\n\t\t</DropdownMenu>\n\t);\n};\n\nexport default function NavigationPlaceholder( {\n\tclientId,\n\tonFinish,\n\tcanSwitchNavigationMenu,\n\thasResolvedNavigationMenus,\n\tcanUserCreateNavigation = false,\n} ) {\n\tconst [ selectedMenu, setSelectedMenu ] = useState();\n\tconst [ isCreatingFromMenu, setIsCreatingFromMenu ] = useState( false );\n\tconst [ menuName, setMenuName ] = useState( '' );\n\tconst createNavigationMenu = useCreateNavigationMenu( clientId );\n\n\tconst onFinishMenuCreation = async (\n\t\tblocks,\n\t\tnavigationMenuTitle = null\n\t) => {\n\t\tif ( ! canUserCreateNavigation ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst navigationMenu = await createNavigationMenu(\n\t\t\tnavigationMenuTitle,\n\t\t\tblocks\n\t\t);\n\t\tonFinish( navigationMenu, blocks );\n\t};\n\n\tconst {\n\t\tisResolvingPages,\n\t\tmenus,\n\t\tisResolvingMenus,\n\t\tmenuItems,\n\t\thasResolvedMenuItems,\n\t\thasPages,\n\t\thasMenus,\n\t} = useNavigationEntities( selectedMenu );\n\n\tconst isStillLoading = isResolvingPages || isResolvingMenus;\n\n\tconst createFromMenu = useCallback(\n\t\t( name ) => {\n\t\t\tconst { innerBlocks: blocks } = menuItemsToBlocks( menuItems );\n\t\t\tonFinishMenuCreation( blocks, name );\n\t\t},\n\t\t[ menuItems, menuItemsToBlocks, onFinish ]\n\t);\n\n\tconst onCreateFromMenu = ( name ) => {\n\t\t// If we have menu items, create the block right away.\n\t\tif ( hasResolvedMenuItems ) {\n\t\t\tcreateFromMenu( name );\n\t\t\treturn;\n\t\t}\n\n\t\t// Otherwise, create the block when resolution finishes.\n\t\tsetIsCreatingFromMenu( true );\n\t\t// Store the name to use later.\n\t\tsetMenuName( name );\n\t};\n\n\tconst onCreateEmptyMenu = () => {\n\t\tonFinishMenuCreation( [] );\n\t};\n\n\tconst onCreateAllPages = () => {\n\t\tconst block = [ createBlock( 'core/page-list' ) ];\n\t\tonFinishMenuCreation( block );\n\t};\n\n\tuseEffect( () => {\n\t\t// If the user selected a menu but we had to wait for menu items to\n\t\t// finish resolving, then create the block once resolution finishes.\n\t\tif ( isCreatingFromMenu && hasResolvedMenuItems ) {\n\t\t\tcreateFromMenu( menuName );\n\t\t\tsetIsCreatingFromMenu( false );\n\t\t}\n\t}, [ isCreatingFromMenu, hasResolvedMenuItems, menuName ] );\n\n\tconst { navigationMenus } = useNavigationMenu();\n\n\treturn (\n\t\t<>\n\t\t\t{ ( ! hasResolvedNavigationMenus || isStillLoading ) && (\n\t\t\t\t<PlaceholderPreview isLoading />\n\t\t\t) }\n\t\t\t{ hasResolvedNavigationMenus && ! isStillLoading && (\n\t\t\t\t<Placeholder className=\"wp-block-navigation-placeholder\">\n\t\t\t\t\t<PlaceholderPreview />\n\t\t\t\t\t<div className=\"wp-block-navigation-placeholder__controls\">\n\t\t\t\t\t\t<div className=\"wp-block-navigation-placeholder__actions\">\n\t\t\t\t\t\t\t<div className=\"wp-block-navigation-placeholder__actions__indicator\">\n\t\t\t\t\t\t\t\t<Icon icon={ navigation } />{ ' ' }\n\t\t\t\t\t\t\t\t{ __( 'Navigation' ) }\n\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t<hr />\n\n\t\t\t\t\t\t\t{ hasMenus || navigationMenus?.length ? (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t<ExistingMenusDropdown\n\t\t\t\t\t\t\t\t\t\tcanSwitchNavigationMenu={\n\t\t\t\t\t\t\t\t\t\t\tcanSwitchNavigationMenu\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tnavigationMenus={ navigationMenus }\n\t\t\t\t\t\t\t\t\t\tsetSelectedMenu={ setSelectedMenu }\n\t\t\t\t\t\t\t\t\t\tonFinish={ onFinish }\n\t\t\t\t\t\t\t\t\t\tmenus={ menus }\n\t\t\t\t\t\t\t\t\t\tonCreateFromMenu={ onCreateFromMenu }\n\t\t\t\t\t\t\t\t\t\tshowClassicMenus={\n\t\t\t\t\t\t\t\t\t\t\tcanUserCreateNavigation\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t<hr />\n\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t) : undefined }\n\t\t\t\t\t\t\t{ canUserCreateNavigation && hasPages ? (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t\t\tonClick={ onCreateAllPages }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ __( 'Add all pages' ) }\n\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t<hr />\n\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t) : undefined }\n\n\t\t\t\t\t\t\t{ canUserCreateNavigation && (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t\tonClick={ onCreateEmptyMenu }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ __( 'Start empty' ) }\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</Placeholder>\n\t\t\t) }\n\t\t</>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/block-library/src/navigation/edit/placeholder/index.js"],"names":["ExistingMenusDropdown","canSwitchNavigationMenu","navigationMenus","onFinish","menus","onCreateFromMenu","showClassicMenus","toggleProps","variant","iconPosition","className","isAlternate","onClose","map","menu","id","title","rendered","name","NavigationPlaceholder","clientId","hasResolvedNavigationMenus","canUserCreateNavigation","createNavigationMenu","onFinishMenuCreation","blocks","navigationMenuTitle","navigationMenu","convertClassicMenu","isResolvingPages","isResolvingMenus","hasPages","hasMenus","isStillLoading","onCreateEmptyMenu","onCreateAllPages","block","navigation","length","undefined"],"mappings":";;;;;;;;;;;AAGA;;AACA;;AAOA;;AACA;;AACA;;AAMA;;AACA;;AACA;;AACA;;AACA;;AAvBA;AACA;AACA;;AAaA;AACA;AACA;AAQA,MAAMA,qBAAqB,GAAG,QAOvB;AAAA,MAPyB;AAC/BC,IAAAA,uBAD+B;AAE/BC,IAAAA,eAF+B;AAG/BC,IAAAA,QAH+B;AAI/BC,IAAAA,KAJ+B;AAK/BC,IAAAA,gBAL+B;AAM/BC,IAAAA,gBAAgB,GAAG;AANY,GAOzB;AACN,QAAMC,WAAW,GAAG;AACnBC,IAAAA,OAAO,EAAE,UADU;AAEnBC,IAAAA,YAAY,EAAE,OAFK;AAGnBC,IAAAA,SAAS,EAAE;AAHQ,GAApB;AAKA,SACC,4BAAC,wBAAD;AACC,IAAA,IAAI,EAAG,cAAI,aAAJ,CADR;AAEC,IAAA,IAAI,EAAG,IAFR;AAGC,IAAA,WAAW,EAAGH,WAHf;AAIC,IAAA,YAAY,EAAG;AAAEI,MAAAA,WAAW,EAAE;AAAf;AAJhB,KAMG;AAAA,QAAE;AAAEC,MAAAA;AAAF,KAAF;AAAA,WACD,qDACC,4BAAC,qBAAD;AAAW,MAAA,KAAK,EAAG,cAAI,OAAJ;AAAnB,OACGX,uBAAuB,KACxBC,eADwB,aACxBA,eADwB,uBACxBA,eAAe,CAAEW,GAAjB,CAAwBC,IAAF,IAAY;AACjC,aACC,4BAAC,oBAAD;AACC,QAAA,OAAO,EAAG,MAAM;AACfX,UAAAA,QAAQ,CAAEW,IAAF,CAAR;AACA,SAHF;AAIC,QAAA,OAAO,EAAGF,OAJX;AAKC,QAAA,GAAG,EAAGE,IAAI,CAACC;AALZ,SAOG,kCACDD,IAAI,CAACE,KAAL,CAAWC,QADV,CAPH,CADD;AAaA,KAdD,CADwB,CAD1B,CADD,EAmBGX,gBAAgB,IACjB,4BAAC,qBAAD;AAAW,MAAA,KAAK,EAAG,cAAI,eAAJ;AAAnB,OACGF,KADH,aACGA,KADH,uBACGA,KAAK,CAAES,GAAP,CAAcC,IAAF,IAAY;AACzB,aACC,4BAAC,oBAAD;AACC,QAAA,OAAO,EAAG,MAAM;AACfT,UAAAA,gBAAgB,CACfS,IAAI,CAACC,EADU,EAEfD,IAAI,CAACI,IAFU,CAAhB;AAIA,SANF;AAOC,QAAA,OAAO,EAAGN,OAPX;AAQC,QAAA,GAAG,EAAGE,IAAI,CAACC;AARZ,SAUG,kCAAgBD,IAAI,CAACI,IAArB,CAVH,CADD;AAcA,KAfC,CADH,CApBF,CADC;AAAA,GANH,CADD;AAmDA,CAhED;;AAkEe,SAASC,qBAAT,QAMX;AAAA,MAN2C;AAC9CC,IAAAA,QAD8C;AAE9CjB,IAAAA,QAF8C;AAG9CF,IAAAA,uBAH8C;AAI9CoB,IAAAA,0BAJ8C;AAK9CC,IAAAA,uBAAuB,GAAG;AALoB,GAM3C;AACH,QAAMC,oBAAoB,GAAG,sCAAyBH,QAAzB,CAA7B;;AAEA,QAAMI,oBAAoB,GAAG,gBAC5BC,MAD4B,EAGxB;AAAA,QADJC,mBACI,uEADkB,IAClB;;AACJ,QAAK,CAAEJ,uBAAP,EAAiC;AAChC;AACA;;AAED,UAAMK,cAAc,GAAG,MAAMJ,oBAAoB,CAChDG,mBADgD,EAEhDD,MAFgD,CAAjD;AAIAtB,IAAAA,QAAQ,CAAEwB,cAAF,EAAkBF,MAAlB,CAAR;AACA,GAbD;;AAeA,QAAMG,kBAAkB,GAAG,oCAAuBJ,oBAAvB,CAA3B;AAEA,QAAM;AACLK,IAAAA,gBADK;AAELzB,IAAAA,KAFK;AAGL0B,IAAAA,gBAHK;AAILC,IAAAA,QAJK;AAKLC,IAAAA;AALK,MAMF,qCANJ;AAQA,QAAMC,cAAc,GAAGJ,gBAAgB,IAAIC,gBAA3C;;AAEA,QAAMI,iBAAiB,GAAG,MAAM;AAC/BV,IAAAA,oBAAoB,CAAE,EAAF,CAApB;AACA,GAFD;;AAIA,QAAMW,gBAAgB,GAAG,MAAM;AAC9B,UAAMC,KAAK,GAAG,CAAE,yBAAa,gBAAb,CAAF,CAAd;AACAZ,IAAAA,oBAAoB,CAAEY,KAAF,CAApB;AACA,GAHD;;AAKA,QAAM;AAAElC,IAAAA;AAAF,MAAsB,iCAA5B;AAEA,SACC,qDACG,CAAE,CAAEmB,0BAAF,IAAgCY,cAAlC,KACD,4BAAC,2BAAD;AAAoB,IAAA,SAAS;AAA7B,IAFF,EAIGZ,0BAA0B,IAAI,CAAEY,cAAhC,IACD,4BAAC,uBAAD;AAAa,IAAA,SAAS,EAAC;AAAvB,KACC,4BAAC,2BAAD,OADD,EAEC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,4BAAC,WAAD;AAAM,IAAA,IAAI,EAAGI;AAAb,IADD,EAC+B,GAD/B,EAEG,cAAI,YAAJ,CAFH,CADD,EAMC,uCAND,EAQGL,QAAQ,IAAI9B,eAAJ,aAAIA,eAAJ,eAAIA,eAAe,CAAEoC,MAA7B,GACD,qDACC,4BAAC,qBAAD;AACC,IAAA,uBAAuB,EACtBrC,uBAFF;AAIC,IAAA,eAAe,EAAGC,eAJnB;AAKC,IAAA,QAAQ,EAAGC,QALZ;AAMC,IAAA,KAAK,EAAGC,KANT;AAOC,IAAA,gBAAgB,EAAGwB,kBAPpB;AAQC,IAAA,gBAAgB,EACfN;AATF,IADD,EAaC,uCAbD,CADC,GAgBEiB,SAxBL,EAyBGjB,uBAAuB,IAAIS,QAA3B,GACD,qDACC,4BAAC,kBAAD;AACC,IAAA,OAAO,EAAC,UADT;AAEC,IAAA,OAAO,EAAGI;AAFX,KAIG,cAAI,eAAJ,CAJH,CADD,EAOC,uCAPD,CADC,GAUEI,SAnCL,EAqCGjB,uBAAuB,IACxB,4BAAC,kBAAD;AACC,IAAA,OAAO,EAAC,UADT;AAEC,IAAA,OAAO,EAAGY;AAFX,KAIG,cAAI,aAAJ,CAJH,CAtCF,CADD,CAFD,CALF,CADD;AA4DA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createBlock } from '@wordpress/blocks';\nimport {\n\tPlaceholder,\n\tButton,\n\tDropdownMenu,\n\tMenuGroup,\n\tMenuItem,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { navigation, Icon } from '@wordpress/icons';\nimport { decodeEntities } from '@wordpress/html-entities';\n\n/**\n * Internal dependencies\n */\n\nimport useNavigationEntities from '../../use-navigation-entities';\nimport PlaceholderPreview from './placeholder-preview';\nimport useNavigationMenu from '../../use-navigation-menu';\nimport useCreateNavigationMenu from '../use-create-navigation-menu';\nimport useConvertClassicMenu from '../../use-convert-classic-menu';\n\nconst ExistingMenusDropdown = ( {\n\tcanSwitchNavigationMenu,\n\tnavigationMenus,\n\tonFinish,\n\tmenus,\n\tonCreateFromMenu,\n\tshowClassicMenus = false,\n} ) => {\n\tconst toggleProps = {\n\t\tvariant: 'tertiary',\n\t\ticonPosition: 'right',\n\t\tclassName: 'wp-block-navigation-placeholder__actions__dropdown',\n\t};\n\treturn (\n\t\t<DropdownMenu\n\t\t\ttext={ __( 'Select menu' ) }\n\t\t\ticon={ null }\n\t\t\ttoggleProps={ toggleProps }\n\t\t\tpopoverProps={ { isAlternate: true } }\n\t\t>\n\t\t\t{ ( { onClose } ) => (\n\t\t\t\t<>\n\t\t\t\t\t<MenuGroup label={ __( 'Menus' ) }>\n\t\t\t\t\t\t{ canSwitchNavigationMenu &&\n\t\t\t\t\t\t\tnavigationMenus?.map( ( menu ) => {\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\tonFinish( menu );\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\tonClose={ onClose }\n\t\t\t\t\t\t\t\t\t\tkey={ menu.id }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ decodeEntities(\n\t\t\t\t\t\t\t\t\t\t\tmenu.title.rendered\n\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t</MenuGroup>\n\t\t\t\t\t{ showClassicMenus && (\n\t\t\t\t\t\t<MenuGroup label={ __( 'Classic Menus' ) }>\n\t\t\t\t\t\t\t{ menus?.map( ( menu ) => {\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\tonCreateFromMenu(\n\t\t\t\t\t\t\t\t\t\t\t\tmenu.id,\n\t\t\t\t\t\t\t\t\t\t\t\tmenu.name\n\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\tonClose={ onClose }\n\t\t\t\t\t\t\t\t\t\tkey={ menu.id }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ decodeEntities( menu.name ) }\n\t\t\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t</MenuGroup>\n\t\t\t\t\t) }\n\t\t\t\t</>\n\t\t\t) }\n\t\t</DropdownMenu>\n\t);\n};\n\nexport default function NavigationPlaceholder( {\n\tclientId,\n\tonFinish,\n\tcanSwitchNavigationMenu,\n\thasResolvedNavigationMenus,\n\tcanUserCreateNavigation = false,\n} ) {\n\tconst createNavigationMenu = useCreateNavigationMenu( clientId );\n\n\tconst onFinishMenuCreation = async (\n\t\tblocks,\n\t\tnavigationMenuTitle = null\n\t) => {\n\t\tif ( ! canUserCreateNavigation ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst navigationMenu = await createNavigationMenu(\n\t\t\tnavigationMenuTitle,\n\t\t\tblocks\n\t\t);\n\t\tonFinish( navigationMenu, blocks );\n\t};\n\n\tconst convertClassicMenu = useConvertClassicMenu( onFinishMenuCreation );\n\n\tconst {\n\t\tisResolvingPages,\n\t\tmenus,\n\t\tisResolvingMenus,\n\t\thasPages,\n\t\thasMenus,\n\t} = useNavigationEntities();\n\n\tconst isStillLoading = isResolvingPages || isResolvingMenus;\n\n\tconst onCreateEmptyMenu = () => {\n\t\tonFinishMenuCreation( [] );\n\t};\n\n\tconst onCreateAllPages = () => {\n\t\tconst block = [ createBlock( 'core/page-list' ) ];\n\t\tonFinishMenuCreation( block );\n\t};\n\n\tconst { navigationMenus } = useNavigationMenu();\n\n\treturn (\n\t\t<>\n\t\t\t{ ( ! hasResolvedNavigationMenus || isStillLoading ) && (\n\t\t\t\t<PlaceholderPreview isLoading />\n\t\t\t) }\n\t\t\t{ hasResolvedNavigationMenus && ! isStillLoading && (\n\t\t\t\t<Placeholder className=\"wp-block-navigation-placeholder\">\n\t\t\t\t\t<PlaceholderPreview />\n\t\t\t\t\t<div className=\"wp-block-navigation-placeholder__controls\">\n\t\t\t\t\t\t<div className=\"wp-block-navigation-placeholder__actions\">\n\t\t\t\t\t\t\t<div className=\"wp-block-navigation-placeholder__actions__indicator\">\n\t\t\t\t\t\t\t\t<Icon icon={ navigation } />{ ' ' }\n\t\t\t\t\t\t\t\t{ __( 'Navigation' ) }\n\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t<hr />\n\n\t\t\t\t\t\t\t{ hasMenus || navigationMenus?.length ? (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t<ExistingMenusDropdown\n\t\t\t\t\t\t\t\t\t\tcanSwitchNavigationMenu={\n\t\t\t\t\t\t\t\t\t\t\tcanSwitchNavigationMenu\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tnavigationMenus={ navigationMenus }\n\t\t\t\t\t\t\t\t\t\tonFinish={ onFinish }\n\t\t\t\t\t\t\t\t\t\tmenus={ menus }\n\t\t\t\t\t\t\t\t\t\tonCreateFromMenu={ convertClassicMenu }\n\t\t\t\t\t\t\t\t\t\tshowClassicMenus={\n\t\t\t\t\t\t\t\t\t\t\tcanUserCreateNavigation\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t<hr />\n\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t) : undefined }\n\t\t\t\t\t\t\t{ canUserCreateNavigation && hasPages ? (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t\t\tonClick={ onCreateAllPages }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ __( 'Add all pages' ) }\n\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t<hr />\n\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t) : undefined }\n\n\t\t\t\t\t\t\t{ canUserCreateNavigation && (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t\tonClick={ onCreateEmptyMenu }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ __( 'Start empty' ) }\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</Placeholder>\n\t\t\t) }\n\t\t</>\n\t);\n}\n"]}

package/build/navigation/use-convert-classic-menu.js

@@ -0,0 +1,59 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useConvertClassicMenu;
+
+var _element = require("@wordpress/element");
+
+var _useNavigationEntities = _interopRequireDefault(require("./use-navigation-entities"));
+
+var _menuItemsToBlocks = _interopRequireDefault(require("./menu-items-to-blocks"));
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+function useConvertClassicMenu(onFinish) {
+  const [selectedMenu, setSelectedMenu] = (0, _element.useState)();
+  const [isAwaitingMenuItemResolution, setIsAwaitingMenuItemResolution] = (0, _element.useState)(false);
+  const [menuName, setMenuName] = (0, _element.useState)('');
+  const {
+    menuItems,
+    hasResolvedMenuItems
+  } = (0, _useNavigationEntities.default)(selectedMenu);
+  const createFromMenu = (0, _element.useCallback)(name => {
+    const {
+      innerBlocks: blocks
+    } = (0, _menuItemsToBlocks.default)(menuItems);
+    onFinish(blocks, name);
+  }, [menuItems, _menuItemsToBlocks.default, onFinish]);
+  (0, _element.useEffect)(() => {
+    // If the user selected a menu but we had to wait for menu items to
+    // finish resolving, then create the block once resolution finishes.
+    if (isAwaitingMenuItemResolution && hasResolvedMenuItems) {
+      createFromMenu(menuName);
+      setIsAwaitingMenuItemResolution(false);
+    }
+  }, [isAwaitingMenuItemResolution, hasResolvedMenuItems, menuName]);
+  return (0, _element.useCallback)((id, name) => {
+    setSelectedMenu(id); // If we have menu items, create the block right away.
+
+    if (hasResolvedMenuItems) {
+      createFromMenu(name);
+      return;
+    } // Otherwise, create the block when resolution finishes.
+
+
+    setIsAwaitingMenuItemResolution(true); // Store the name to use later.
+
+    setMenuName(name);
+  }, [hasResolvedMenuItems, createFromMenu]);
+}
+//# sourceMappingURL=use-convert-classic-menu.js.map

package/build/navigation/use-convert-classic-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-library/src/navigation/use-convert-classic-menu.js"],"names":["useConvertClassicMenu","onFinish","selectedMenu","setSelectedMenu","isAwaitingMenuItemResolution","setIsAwaitingMenuItemResolution","menuName","setMenuName","menuItems","hasResolvedMenuItems","createFromMenu","name","innerBlocks","blocks","menuItemsToBlocks","id"],"mappings":";;;;;;;;;AAGA;;AAKA;;AACA;;AATA;AACA;AACA;;AAGA;AACA;AACA;AAIe,SAASA,qBAAT,CAAgCC,QAAhC,EAA2C;AACzD,QAAM,CAAEC,YAAF,EAAgBC,eAAhB,IAAoC,wBAA1C;AACA,QAAM,CACLC,4BADK,EAELC,+BAFK,IAGF,uBAAU,KAAV,CAHJ;AAIA,QAAM,CAAEC,QAAF,EAAYC,WAAZ,IAA4B,uBAAU,EAAV,CAAlC;AAEA,QAAM;AAAEC,IAAAA,SAAF;AAAaC,IAAAA;AAAb,MAAsC,oCAC3CP,YAD2C,CAA5C;AAIA,QAAMQ,cAAc,GAAG,0BACpBC,IAAF,IAAY;AACX,UAAM;AAAEC,MAAAA,WAAW,EAAEC;AAAf,QAA0B,gCAAmBL,SAAnB,CAAhC;AACAP,IAAAA,QAAQ,CAAEY,MAAF,EAAUF,IAAV,CAAR;AACA,GAJqB,EAKtB,CAAEH,SAAF,EAAaM,0BAAb,EAAgCb,QAAhC,CALsB,CAAvB;AAQA,0BAAW,MAAM;AAChB;AACA;AACA,QAAKG,4BAA4B,IAAIK,oBAArC,EAA4D;AAC3DC,MAAAA,cAAc,CAAEJ,QAAF,CAAd;AACAD,MAAAA,+BAA+B,CAAE,KAAF,CAA/B;AACA;AACD,GAPD,EAOG,CAAED,4BAAF,EAAgCK,oBAAhC,EAAsDH,QAAtD,CAPH;AASA,SAAO,0BACN,CAAES,EAAF,EAAMJ,IAAN,KAAgB;AACfR,IAAAA,eAAe,CAAEY,EAAF,CAAf,CADe,CAGf;;AACA,QAAKN,oBAAL,EAA4B;AAC3BC,MAAAA,cAAc,CAAEC,IAAF,CAAd;AACA;AACA,KAPc,CASf;;;AACAN,IAAAA,+BAA+B,CAAE,IAAF,CAA/B,CAVe,CAWf;;AACAE,IAAAA,WAAW,CAAEI,IAAF,CAAX;AACA,GAdK,EAeN,CAAEF,oBAAF,EAAwBC,cAAxB,CAfM,CAAP;AAiBA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useCallback, useState, useEffect } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport useNavigationEntities from './use-navigation-entities';\nimport menuItemsToBlocks from './menu-items-to-blocks';\n\nexport default function useConvertClassicMenu( onFinish ) {\n\tconst [ selectedMenu, setSelectedMenu ] = useState();\n\tconst [\n\t\tisAwaitingMenuItemResolution,\n\t\tsetIsAwaitingMenuItemResolution,\n\t] = useState( false );\n\tconst [ menuName, setMenuName ] = useState( '' );\n\n\tconst { menuItems, hasResolvedMenuItems } = useNavigationEntities(\n\t\tselectedMenu\n\t);\n\n\tconst createFromMenu = useCallback(\n\t\t( name ) => {\n\t\t\tconst { innerBlocks: blocks } = menuItemsToBlocks( menuItems );\n\t\t\tonFinish( blocks, name );\n\t\t},\n\t\t[ menuItems, menuItemsToBlocks, onFinish ]\n\t);\n\n\tuseEffect( () => {\n\t\t// If the user selected a menu but we had to wait for menu items to\n\t\t// finish resolving, then create the block once resolution finishes.\n\t\tif ( isAwaitingMenuItemResolution && hasResolvedMenuItems ) {\n\t\t\tcreateFromMenu( menuName );\n\t\t\tsetIsAwaitingMenuItemResolution( false );\n\t\t}\n\t}, [ isAwaitingMenuItemResolution, hasResolvedMenuItems, menuName ] );\n\n\treturn useCallback(\n\t\t( id, name ) => {\n\t\t\tsetSelectedMenu( id );\n\n\t\t\t// If we have menu items, create the block right away.\n\t\t\tif ( hasResolvedMenuItems ) {\n\t\t\t\tcreateFromMenu( name );\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// Otherwise, create the block when resolution finishes.\n\t\t\tsetIsAwaitingMenuItemResolution( true );\n\t\t\t// Store the name to use later.\n\t\t\tsetMenuName( name );\n\t\t},\n\t\t[ hasResolvedMenuItems, createFromMenu ]\n\t);\n}\n"]}

package/build/page-list/edit.js

@@ -51,8 +51,9 @@ function PageListEdit(_ref) {
   } = _ref;
   const {
     pagesByParentId,
-    totalPages
-  } = usePagesByParentId();
+    totalPages,
+    hasResolvedPages
+  } = usePageData();
   const isNavigationChild = ('showSubmenuIcon' in context);
   const allowConvertToLinks = isNavigationChild && totalPages <= MAX_PAGE_COUNT;
   const [isOpen, setOpen] = (0, _element.useState)(false);
@@ -79,18 +80,33 @@ function PageListEdit(_ref) {
   }, (0, _i18n.__)('Edit'))), allowConvertToLinks && isOpen && (0, _element.createElement)(_convertToLinksModal.default, {
     onClose: closeModal,
     clientId: clientId
-  }), totalPages === undefined && (0, _element.createElement)("div", blockProps, (0, _element.createElement)(_components.Placeholder, null, (0, _element.createElement)(_components.Spinner, null))), totalPages === 0 && (0, _element.createElement)("div", blockProps, (0, _element.createElement)("span", null, (0, _i18n.__)('Page List: No pages to show.'))), totalPages > 0 && (0, _element.createElement)("ul", blockProps, (0, _element.createElement)(PageItems, {
+  }), !hasResolvedPages && (0, _element.createElement)("div", blockProps, (0, _element.createElement)(_components.Placeholder, null, (0, _element.createElement)(_components.Spinner, null))), hasResolvedPages && totalPages === null && (0, _element.createElement)("div", blockProps, (0, _element.createElement)("div", blockProps, (0, _element.createElement)(_components.Notice, {
+    status: 'warning',
+    isDismissible: false
+  }, (0, _i18n.__)('Page List: Cannot retrieve Pages.')))), totalPages === 0 && (0, _element.createElement)("div", blockProps, (0, _element.createElement)(_components.Notice, {
+    status: 'info',
+    isDismissible: false
+  }, (0, _i18n.__)('Page List: Cannot retrieve Pages.'))), totalPages > 0 && (0, _element.createElement)("ul", blockProps, (0, _element.createElement)(PageItems, {
     context: context,
     pagesByParentId: pagesByParentId
   })));
 }
 
-function usePagesByParentId() {
+function useFrontPageId() {
+  return (0, _data.useSelect)(select => {
+    const site = select(_coreData.store).getEntityRecord('root', 'site');
+    return (site === null || site === void 0 ? void 0 : site.show_on_front) === 'page' && (site === null || site === void 0 ? void 0 : site.page_on_front);
+  }, []);
+}
+
+function usePageData() {
   const {
-    pages
+    pages,
+    hasResolvedPages
   } = (0, _data.useSelect)(select => {
     const {
-      getEntityRecords
+      getEntityRecords,
+      hasFinishedResolution
     } = select(_coreData.store);
     return {
       pages: getEntityRecords('postType', 'page', {
@@ -98,10 +114,18 @@ function usePagesByParentId() {
         order: 'asc',
         _fields: ['id', 'link', 'parent', 'title', 'menu_order'],
         per_page: -1
-      })
+      }),
+      hasResolvedPages: hasFinishedResolution('getEntityRecords', ['postType', 'page', {
+        orderby: 'menu_order',
+        order: 'asc',
+        _fields: ['id', 'link', 'parent', 'title', 'menu_order'],
+        per_page: -1
+      }])
     };
   }, []);
   return (0, _element.useMemo)(() => {
+    var _pages$length;
+
     // TODO: Once the REST API supports passing multiple values to
     // 'orderby', this can be removed.
     // https://core.trac.wordpress.org/ticket/39037
@@ -121,9 +145,10 @@ function usePagesByParentId() {
     }, new Map());
     return {
       pagesByParentId,
-      totalPages: pages === null || pages === void 0 ? void 0 : pages.length
+      hasResolvedPages,
+      totalPages: (_pages$length = pages === null || pages === void 0 ? void 0 : pages.length) !== null && _pages$length !== void 0 ? _pages$length : null
     };
-  }, [pages]);
+  }, [pages, hasResolvedPages]);
 }
 
 const PageItems = (0, _element.memo)(function PageItems(_ref2) {
@@ -134,6 +159,7 @@ const PageItems = (0, _element.memo)(function PageItems(_ref2) {
     depth = 0
   } = _ref2;
   const pages = pagesByParentId.get(parentId);
+  const frontPageId = useFrontPageId();
 
   if (!(pages !== null && pages !== void 0 && pages.length)) {
     return [];
@@ -150,7 +176,8 @@ const PageItems = (0, _element.memo)(function PageItems(_ref2) {
         'has-child': hasChildren,
         'wp-block-navigation-item': isNavigationChild,
         'open-on-click': context.openSubmenusOnClick,
-        'open-on-hover-click': !context.openSubmenusOnClick && context.showSubmenuIcon
+        'open-on-hover-click': !context.openSubmenusOnClick && context.showSubmenuIcon,
+        'menu-item-home': page.id === frontPageId
       })
     }, hasChildren && context.openSubmenusOnClick ? (0, _element.createElement)(ItemSubmenuToggle, {
       title: (_page$title = page.title) === null || _page$title === void 0 ? void 0 : _page$title.rendered

package/build/page-list/edit.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-library/src/page-list/edit.js"],"names":["MAX_PAGE_COUNT","PageListEdit","context","clientId","pagesByParentId","totalPages","usePagesByParentId","isNavigationChild","allowConvertToLinks","isOpen","setOpen","openModal","closeModal","blockProps","className","textColor","backgroundColor","style","color","undefined","pages","select","getEntityRecords","coreStore","orderby","order","_fields","per_page","sortedPages","reduce","accumulator","page","parent","has","get","push","set","Map","length","PageItems","parentId","depth","map","hasChildren","id","openSubmenusOnClick","showSubmenuIcon","title","rendered","link","ItemSubmenuToggle"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport { sortBy } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tBlockControls,\n\tuseBlockProps,\n\tgetColorClassName,\n} from '@wordpress/block-editor';\nimport { ToolbarButton, Placeholder, Spinner } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useMemo, useState, memo } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\n\n/**\n * Internal dependencies\n */\nimport ConvertToLinksModal from './convert-to-links-modal';\nimport { ItemSubmenuIcon } from '../navigation-link/icons';\n\n// We only show the edit option when page count is <= MAX_PAGE_COUNT\n// Performance of Navigation Links is not good past this value.\nconst MAX_PAGE_COUNT = 100;\n\nexport default function PageListEdit( { context, clientId } ) {\n\tconst { pagesByParentId, totalPages } = usePagesByParentId();\n\n\tconst isNavigationChild = 'showSubmenuIcon' in context;\n\tconst allowConvertToLinks =\n\t\tisNavigationChild && totalPages <= MAX_PAGE_COUNT;\n\n\tconst [ isOpen, setOpen ] = useState( false );\n\tconst openModal = () => setOpen( true );\n\tconst closeModal = () => setOpen( false );\n\n\tconst blockProps = useBlockProps( {\n\t\tclassName: classnames( 'wp-block-page-list', {\n\t\t\t'has-text-color': !! context.textColor,\n\t\t\t[ getColorClassName(\n\t\t\t\t'color',\n\t\t\t\tcontext.textColor\n\t\t\t) ]: !! context.textColor,\n\t\t\t'has-background': !! context.backgroundColor,\n\t\t\t[ getColorClassName(\n\t\t\t\t'background-color',\n\t\t\t\tcontext.backgroundColor\n\t\t\t) ]: !! context.backgroundColor,\n\t\t} ),\n\t\tstyle: { ...context.style?.color },\n\t} );\n\n\treturn (\n\t\t<>\n\t\t\t{ allowConvertToLinks && (\n\t\t\t\t<BlockControls group=\"other\">\n\t\t\t\t\t<ToolbarButton title={ __( 'Edit' ) } onClick={ openModal }>\n\t\t\t\t\t\t{ __( 'Edit' ) }\n\t\t\t\t\t</ToolbarButton>\n\t\t\t\t</BlockControls>\n\t\t\t) }\n\t\t\t{ allowConvertToLinks && isOpen && (\n\t\t\t\t<ConvertToLinksModal\n\t\t\t\t\tonClose={ closeModal }\n\t\t\t\t\tclientId={ clientId }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ totalPages === undefined && (\n\t\t\t\t<div { ...blockProps }>\n\t\t\t\t\t<Placeholder>\n\t\t\t\t\t\t<Spinner />\n\t\t\t\t\t</Placeholder>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t{ totalPages === 0 && (\n\t\t\t\t<div { ...blockProps }>\n\t\t\t\t\t<span>{ __( 'Page List: No pages to show.' ) }</span>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t{ totalPages > 0 && (\n\t\t\t\t<ul { ...blockProps }>\n\t\t\t\t\t<PageItems\n\t\t\t\t\t\tcontext={ context }\n\t\t\t\t\t\tpagesByParentId={ pagesByParentId }\n\t\t\t\t\t/>\n\t\t\t\t</ul>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nfunction usePagesByParentId() {\n\tconst { pages } = useSelect( ( select ) => {\n\t\tconst { getEntityRecords } = select( coreStore );\n\n\t\treturn {\n\t\t\tpages: getEntityRecords( 'postType', 'page', {\n\t\t\t\torderby: 'menu_order',\n\t\t\t\torder: 'asc',\n\t\t\t\t_fields: [ 'id', 'link', 'parent', 'title', 'menu_order' ],\n\t\t\t\tper_page: -1,\n\t\t\t} ),\n\t\t};\n\t}, [] );\n\n\treturn useMemo( () => {\n\t\t// TODO: Once the REST API supports passing multiple values to\n\t\t// 'orderby', this can be removed.\n\t\t// https://core.trac.wordpress.org/ticket/39037\n\t\tconst sortedPages = sortBy( pages, [ 'menu_order', 'title.rendered' ] );\n\t\tconst pagesByParentId = sortedPages.reduce( ( accumulator, page ) => {\n\t\t\tconst { parent } = page;\n\t\t\tif ( accumulator.has( parent ) ) {\n\t\t\t\taccumulator.get( parent ).push( page );\n\t\t\t} else {\n\t\t\t\taccumulator.set( parent, [ page ] );\n\t\t\t}\n\t\t\treturn accumulator;\n\t\t}, new Map() );\n\n\t\treturn {\n\t\t\tpagesByParentId,\n\t\t\ttotalPages: pages?.length,\n\t\t};\n\t}, [ pages ] );\n}\n\nconst PageItems = memo( function PageItems( {\n\tcontext,\n\tpagesByParentId,\n\tparentId = 0,\n\tdepth = 0,\n} ) {\n\tconst pages = pagesByParentId.get( parentId );\n\n\tif ( ! pages?.length ) {\n\t\treturn [];\n\t}\n\n\treturn pages.map( ( page ) => {\n\t\tconst hasChildren = pagesByParentId.has( page.id );\n\t\tconst isNavigationChild = 'showSubmenuIcon' in context;\n\t\treturn (\n\t\t\t<li\n\t\t\t\tkey={ page.id }\n\t\t\t\tclassName={ classnames( 'wp-block-pages-list__item', {\n\t\t\t\t\t'has-child': hasChildren,\n\t\t\t\t\t'wp-block-navigation-item': isNavigationChild,\n\t\t\t\t\t'open-on-click': context.openSubmenusOnClick,\n\t\t\t\t\t'open-on-hover-click':\n\t\t\t\t\t\t! context.openSubmenusOnClick &&\n\t\t\t\t\t\tcontext.showSubmenuIcon,\n\t\t\t\t} ) }\n\t\t\t>\n\t\t\t\t{ hasChildren && context.openSubmenusOnClick ? (\n\t\t\t\t\t<ItemSubmenuToggle title={ page.title?.rendered } />\n\t\t\t\t) : (\n\t\t\t\t\t<a\n\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t'wp-block-pages-list__item__link',\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t'wp-block-navigation-item__content': isNavigationChild,\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t) }\n\t\t\t\t\t\thref={ page.link }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ page.title?.rendered }\n\t\t\t\t\t</a>\n\t\t\t\t) }\n\t\t\t\t{ hasChildren && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t{ ! context.openSubmenusOnClick &&\n\t\t\t\t\t\t\tcontext.showSubmenuIcon && <ItemSubmenuToggle /> }\n\t\t\t\t\t\t<ul\n\t\t\t\t\t\t\tclassName={ classnames( 'submenu-container', {\n\t\t\t\t\t\t\t\t'wp-block-navigation__submenu-container': isNavigationChild,\n\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<PageItems\n\t\t\t\t\t\t\t\tcontext={ context }\n\t\t\t\t\t\t\t\tpagesByParentId={ pagesByParentId }\n\t\t\t\t\t\t\t\tparentId={ page.id }\n\t\t\t\t\t\t\t\tdepth={ depth + 1 }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</ul>\n\t\t\t\t\t</>\n\t\t\t\t) }\n\t\t\t</li>\n\t\t);\n\t} );\n} );\n\nfunction ItemSubmenuToggle( { title } ) {\n\treturn (\n\t\t<button\n\t\t\tclassName=\"wp-block-navigation-item__content wp-block-navigation-submenu__toggle\"\n\t\t\taria-expanded=\"false\"\n\t\t>\n\t\t\t{ title }\n\t\t\t<span className=\"wp-block-page-list__submenu-icon wp-block-navigation__submenu-icon\">\n\t\t\t\t<ItemSubmenuIcon />\n\t\t\t</span>\n\t\t</button>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/block-library/src/page-list/edit.js"],"names":["MAX_PAGE_COUNT","PageListEdit","context","clientId","pagesByParentId","totalPages","hasResolvedPages","usePageData","isNavigationChild","allowConvertToLinks","isOpen","setOpen","openModal","closeModal","blockProps","className","textColor","backgroundColor","style","color","useFrontPageId","select","site","coreStore","getEntityRecord","show_on_front","page_on_front","pages","getEntityRecords","hasFinishedResolution","orderby","order","_fields","per_page","sortedPages","reduce","accumulator","page","parent","has","get","push","set","Map","length","PageItems","parentId","depth","frontPageId","map","hasChildren","id","openSubmenusOnClick","showSubmenuIcon","title","rendered","link","ItemSubmenuToggle"],"mappings":";;;;;;;;;AAqBA;;AAlBA;;AACA;;AAKA;;AAKA;;AAMA;;AAEA;;AACA;;AAKA;;AACA;;AA7BA;AACA;AACA;;AAIA;AACA;AACA;;AAiBA;AACA;AACA;AAIA;AACA;AACA,MAAMA,cAAc,GAAG,GAAvB;;AAEe,SAASC,YAAT,OAA+C;AAAA;;AAAA,MAAxB;AAAEC,IAAAA,OAAF;AAAWC,IAAAA;AAAX,GAAwB;AAC7D,QAAM;AAAEC,IAAAA,eAAF;AAAmBC,IAAAA,UAAnB;AAA+BC,IAAAA;AAA/B,MAAoDC,WAAW,EAArE;AAEA,QAAMC,iBAAiB,IAAG,qBAAqBN,OAAxB,CAAvB;AACA,QAAMO,mBAAmB,GACxBD,iBAAiB,IAAIH,UAAU,IAAIL,cADpC;AAGA,QAAM,CAAEU,MAAF,EAAUC,OAAV,IAAsB,uBAAU,KAAV,CAA5B;;AACA,QAAMC,SAAS,GAAG,MAAMD,OAAO,CAAE,IAAF,CAA/B;;AACA,QAAME,UAAU,GAAG,MAAMF,OAAO,CAAE,KAAF,CAAhC;;AAEA,QAAMG,UAAU,GAAG,gCAAe;AACjCC,IAAAA,SAAS,EAAE,yBAAY,oBAAZ,EAAkC;AAC5C,wBAAkB,CAAC,CAAEb,OAAO,CAACc,SADe;AAE5C,OAAE,oCACD,OADC,EAEDd,OAAO,CAACc,SAFP,CAAF,GAGK,CAAC,CAAEd,OAAO,CAACc,SAL4B;AAM5C,wBAAkB,CAAC,CAAEd,OAAO,CAACe,eANe;AAO5C,OAAE,oCACD,kBADC,EAEDf,OAAO,CAACe,eAFP,CAAF,GAGK,CAAC,CAAEf,OAAO,CAACe;AAV4B,KAAlC,CADsB;AAajCC,IAAAA,KAAK,EAAE,EAAE,sBAAGhB,OAAO,CAACgB,KAAX,mDAAG,eAAeC,KAAlB;AAAF;AAb0B,GAAf,CAAnB;AAgBA,SACC,qDACGV,mBAAmB,IACpB,4BAAC,0BAAD;AAAe,IAAA,KAAK,EAAC;AAArB,KACC,4BAAC,yBAAD;AAAe,IAAA,KAAK,EAAG,cAAI,MAAJ,CAAvB;AAAsC,IAAA,OAAO,EAAGG;AAAhD,KACG,cAAI,MAAJ,CADH,CADD,CAFF,EAQGH,mBAAmB,IAAIC,MAAvB,IACD,4BAAC,4BAAD;AACC,IAAA,OAAO,EAAGG,UADX;AAEC,IAAA,QAAQ,EAAGV;AAFZ,IATF,EAcG,CAAEG,gBAAF,IACD,mCAAUQ,UAAV,EACC,4BAAC,uBAAD,QACC,4BAAC,mBAAD,OADD,CADD,CAfF,EAsBGR,gBAAgB,IAAID,UAAU,KAAK,IAAnC,IACD,mCAAUS,UAAV,EACC,mCAAUA,UAAV,EACC,4BAAC,kBAAD;AAAQ,IAAA,MAAM,EAAG,SAAjB;AAA6B,IAAA,aAAa,EAAG;AAA7C,KACG,cAAI,mCAAJ,CADH,CADD,CADD,CAvBF,EAgCGT,UAAU,KAAK,CAAf,IACD,mCAAUS,UAAV,EACC,4BAAC,kBAAD;AAAQ,IAAA,MAAM,EAAG,MAAjB;AAA0B,IAAA,aAAa,EAAG;AAA1C,KACG,cAAI,mCAAJ,CADH,CADD,CAjCF,EAuCGT,UAAU,GAAG,CAAb,IACD,kCAASS,UAAT,EACC,4BAAC,SAAD;AACC,IAAA,OAAO,EAAGZ,OADX;AAEC,IAAA,eAAe,EAAGE;AAFnB,IADD,CAxCF,CADD;AAkDA;;AAED,SAASgB,cAAT,GAA0B;AACzB,SAAO,qBAAaC,MAAF,IAAc;AAC/B,UAAMC,IAAI,GAAGD,MAAM,CAAEE,eAAF,CAAN,CAAoBC,eAApB,CAAqC,MAArC,EAA6C,MAA7C,CAAb;AACA,WAAO,CAAAF,IAAI,SAAJ,IAAAA,IAAI,WAAJ,YAAAA,IAAI,CAAEG,aAAN,MAAwB,MAAxB,KAAkCH,IAAlC,aAAkCA,IAAlC,uBAAkCA,IAAI,CAAEI,aAAxC,CAAP;AACA,GAHM,EAGJ,EAHI,CAAP;AAIA;;AAED,SAASnB,WAAT,GAAuB;AACtB,QAAM;AAAEoB,IAAAA,KAAF;AAASrB,IAAAA;AAAT,MAA8B,qBAAae,MAAF,IAAc;AAC5D,UAAM;AAAEO,MAAAA,gBAAF;AAAoBC,MAAAA;AAApB,QAA8CR,MAAM,CAAEE,eAAF,CAA1D;AAEA,WAAO;AACNI,MAAAA,KAAK,EAAEC,gBAAgB,CAAE,UAAF,EAAc,MAAd,EAAsB;AAC5CE,QAAAA,OAAO,EAAE,YADmC;AAE5CC,QAAAA,KAAK,EAAE,KAFqC;AAG5CC,QAAAA,OAAO,EAAE,CAAE,IAAF,EAAQ,MAAR,EAAgB,QAAhB,EAA0B,OAA1B,EAAmC,YAAnC,CAHmC;AAI5CC,QAAAA,QAAQ,EAAE,CAAC;AAJiC,OAAtB,CADjB;AAON3B,MAAAA,gBAAgB,EAAEuB,qBAAqB,CAAE,kBAAF,EAAsB,CAC5D,UAD4D,EAE5D,MAF4D,EAG5D;AACCC,QAAAA,OAAO,EAAE,YADV;AAECC,QAAAA,KAAK,EAAE,KAFR;AAGCC,QAAAA,OAAO,EAAE,CAAE,IAAF,EAAQ,MAAR,EAAgB,QAAhB,EAA0B,OAA1B,EAAmC,YAAnC,CAHV;AAICC,QAAAA,QAAQ,EAAE,CAAC;AAJZ,OAH4D,CAAtB;AAPjC,KAAP;AAkBA,GArBmC,EAqBjC,EArBiC,CAApC;AAuBA,SAAO,sBAAS,MAAM;AAAA;;AACrB;AACA;AACA;AACA,UAAMC,WAAW,GAAG,oBAAQP,KAAR,EAAe,CAAE,YAAF,EAAgB,gBAAhB,CAAf,CAApB;AACA,UAAMvB,eAAe,GAAG8B,WAAW,CAACC,MAAZ,CAAoB,CAAEC,WAAF,EAAeC,IAAf,KAAyB;AACpE,YAAM;AAAEC,QAAAA;AAAF,UAAaD,IAAnB;;AACA,UAAKD,WAAW,CAACG,GAAZ,CAAiBD,MAAjB,CAAL,EAAiC;AAChCF,QAAAA,WAAW,CAACI,GAAZ,CAAiBF,MAAjB,EAA0BG,IAA1B,CAAgCJ,IAAhC;AACA,OAFD,MAEO;AACND,QAAAA,WAAW,CAACM,GAAZ,CAAiBJ,MAAjB,EAAyB,CAAED,IAAF,CAAzB;AACA;;AACD,aAAOD,WAAP;AACA,KARuB,EAQrB,IAAIO,GAAJ,EARqB,CAAxB;AAUA,WAAO;AACNvC,MAAAA,eADM;AAENE,MAAAA,gBAFM;AAGND,MAAAA,UAAU,mBAAEsB,KAAF,aAAEA,KAAF,uBAAEA,KAAK,CAAEiB,MAAT,yDAAmB;AAHvB,KAAP;AAKA,GApBM,EAoBJ,CAAEjB,KAAF,EAASrB,gBAAT,CApBI,CAAP;AAqBA;;AAED,MAAMuC,SAAS,GAAG,mBAAM,SAASA,SAAT,QAKpB;AAAA,MALwC;AAC3C3C,IAAAA,OAD2C;AAE3CE,IAAAA,eAF2C;AAG3C0C,IAAAA,QAAQ,GAAG,CAHgC;AAI3CC,IAAAA,KAAK,GAAG;AAJmC,GAKxC;AACH,QAAMpB,KAAK,GAAGvB,eAAe,CAACoC,GAAhB,CAAqBM,QAArB,CAAd;AACA,QAAME,WAAW,GAAG5B,cAAc,EAAlC;;AAEA,MAAK,EAAEO,KAAF,aAAEA,KAAF,eAAEA,KAAK,CAAEiB,MAAT,CAAL,EAAuB;AACtB,WAAO,EAAP;AACA;;AAED,SAAOjB,KAAK,CAACsB,GAAN,CAAaZ,IAAF,IAAY;AAAA;;AAC7B,UAAMa,WAAW,GAAG9C,eAAe,CAACmC,GAAhB,CAAqBF,IAAI,CAACc,EAA1B,CAApB;AACA,UAAM3C,iBAAiB,IAAG,qBAAqBN,OAAxB,CAAvB;AACA,WACC;AACC,MAAA,GAAG,EAAGmC,IAAI,CAACc,EADZ;AAEC,MAAA,SAAS,EAAG,yBAAY,2BAAZ,EAAyC;AACpD,qBAAaD,WADuC;AAEpD,oCAA4B1C,iBAFwB;AAGpD,yBAAiBN,OAAO,CAACkD,mBAH2B;AAIpD,+BACC,CAAElD,OAAO,CAACkD,mBAAV,IACAlD,OAAO,CAACmD,eAN2C;AAOpD,0BAAkBhB,IAAI,CAACc,EAAL,KAAYH;AAPsB,OAAzC;AAFb,OAYGE,WAAW,IAAIhD,OAAO,CAACkD,mBAAvB,GACD,4BAAC,iBAAD;AAAmB,MAAA,KAAK,iBAAGf,IAAI,CAACiB,KAAR,gDAAG,YAAYC;AAAvC,MADC,GAGD;AACC,MAAA,SAAS,EAAG,yBACX,iCADW,EAEX;AACC,6CAAqC/C;AADtC,OAFW,CADb;AAOC,MAAA,IAAI,EAAG6B,IAAI,CAACmB;AAPb,uBASGnB,IAAI,CAACiB,KATR,iDASG,aAAYC,QATf,CAfF,EA2BGL,WAAW,IACZ,qDACG,CAAEhD,OAAO,CAACkD,mBAAV,IACDlD,OAAO,CAACmD,eADP,IAC0B,4BAAC,iBAAD,OAF7B,EAGC;AACC,MAAA,SAAS,EAAG,yBAAY,mBAAZ,EAAiC;AAC5C,kDAA0C7C;AADE,OAAjC;AADb,OAKC,4BAAC,SAAD;AACC,MAAA,OAAO,EAAGN,OADX;AAEC,MAAA,eAAe,EAAGE,eAFnB;AAGC,MAAA,QAAQ,EAAGiC,IAAI,CAACc,EAHjB;AAIC,MAAA,KAAK,EAAGJ,KAAK,GAAG;AAJjB,MALD,CAHD,CA5BF,CADD;AAgDA,GAnDM,CAAP;AAoDA,CAjEiB,CAAlB;;AAmEA,SAASU,iBAAT,QAAwC;AAAA,MAAZ;AAAEH,IAAAA;AAAF,GAAY;AACvC,SACC;AACC,IAAA,SAAS,EAAC,uEADX;AAEC,qBAAc;AAFf,KAIGA,KAJH,EAKC;AAAM,IAAA,SAAS,EAAC;AAAhB,KACC,4BAAC,sBAAD,OADD,CALD,CADD;AAWA","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport { sortBy } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tBlockControls,\n\tuseBlockProps,\n\tgetColorClassName,\n} from '@wordpress/block-editor';\nimport {\n\tToolbarButton,\n\tPlaceholder,\n\tSpinner,\n\tNotice,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useMemo, useState, memo } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\n\n/**\n * Internal dependencies\n */\nimport ConvertToLinksModal from './convert-to-links-modal';\nimport { ItemSubmenuIcon } from '../navigation-link/icons';\n\n// We only show the edit option when page count is <= MAX_PAGE_COUNT\n// Performance of Navigation Links is not good past this value.\nconst MAX_PAGE_COUNT = 100;\n\nexport default function PageListEdit( { context, clientId } ) {\n\tconst { pagesByParentId, totalPages, hasResolvedPages } = usePageData();\n\n\tconst isNavigationChild = 'showSubmenuIcon' in context;\n\tconst allowConvertToLinks =\n\t\tisNavigationChild && totalPages <= MAX_PAGE_COUNT;\n\n\tconst [ isOpen, setOpen ] = useState( false );\n\tconst openModal = () => setOpen( true );\n\tconst closeModal = () => setOpen( false );\n\n\tconst blockProps = useBlockProps( {\n\t\tclassName: classnames( 'wp-block-page-list', {\n\t\t\t'has-text-color': !! context.textColor,\n\t\t\t[ getColorClassName(\n\t\t\t\t'color',\n\t\t\t\tcontext.textColor\n\t\t\t) ]: !! context.textColor,\n\t\t\t'has-background': !! context.backgroundColor,\n\t\t\t[ getColorClassName(\n\t\t\t\t'background-color',\n\t\t\t\tcontext.backgroundColor\n\t\t\t) ]: !! context.backgroundColor,\n\t\t} ),\n\t\tstyle: { ...context.style?.color },\n\t} );\n\n\treturn (\n\t\t<>\n\t\t\t{ allowConvertToLinks && (\n\t\t\t\t<BlockControls group=\"other\">\n\t\t\t\t\t<ToolbarButton title={ __( 'Edit' ) } onClick={ openModal }>\n\t\t\t\t\t\t{ __( 'Edit' ) }\n\t\t\t\t\t</ToolbarButton>\n\t\t\t\t</BlockControls>\n\t\t\t) }\n\t\t\t{ allowConvertToLinks && isOpen && (\n\t\t\t\t<ConvertToLinksModal\n\t\t\t\t\tonClose={ closeModal }\n\t\t\t\t\tclientId={ clientId }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ ! hasResolvedPages && (\n\t\t\t\t<div { ...blockProps }>\n\t\t\t\t\t<Placeholder>\n\t\t\t\t\t\t<Spinner />\n\t\t\t\t\t</Placeholder>\n\t\t\t\t</div>\n\t\t\t) }\n\n\t\t\t{ hasResolvedPages && totalPages === null && (\n\t\t\t\t<div { ...blockProps }>\n\t\t\t\t\t<div { ...blockProps }>\n\t\t\t\t\t\t<Notice status={ 'warning' } isDismissible={ false }>\n\t\t\t\t\t\t\t{ __( 'Page List: Cannot retrieve Pages.' ) }\n\t\t\t\t\t\t</Notice>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t) }\n\n\t\t\t{ totalPages === 0 && (\n\t\t\t\t<div { ...blockProps }>\n\t\t\t\t\t<Notice status={ 'info' } isDismissible={ false }>\n\t\t\t\t\t\t{ __( 'Page List: Cannot retrieve Pages.' ) }\n\t\t\t\t\t</Notice>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t{ totalPages > 0 && (\n\t\t\t\t<ul { ...blockProps }>\n\t\t\t\t\t<PageItems\n\t\t\t\t\t\tcontext={ context }\n\t\t\t\t\t\tpagesByParentId={ pagesByParentId }\n\t\t\t\t\t/>\n\t\t\t\t</ul>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nfunction useFrontPageId() {\n\treturn useSelect( ( select ) => {\n\t\tconst site = select( coreStore ).getEntityRecord( 'root', 'site' );\n\t\treturn site?.show_on_front === 'page' && site?.page_on_front;\n\t}, [] );\n}\n\nfunction usePageData() {\n\tconst { pages, hasResolvedPages } = useSelect( ( select ) => {\n\t\tconst { getEntityRecords, hasFinishedResolution } = select( coreStore );\n\n\t\treturn {\n\t\t\tpages: getEntityRecords( 'postType', 'page', {\n\t\t\t\torderby: 'menu_order',\n\t\t\t\torder: 'asc',\n\t\t\t\t_fields: [ 'id', 'link', 'parent', 'title', 'menu_order' ],\n\t\t\t\tper_page: -1,\n\t\t\t} ),\n\t\t\thasResolvedPages: hasFinishedResolution( 'getEntityRecords', [\n\t\t\t\t'postType',\n\t\t\t\t'page',\n\t\t\t\t{\n\t\t\t\t\torderby: 'menu_order',\n\t\t\t\t\torder: 'asc',\n\t\t\t\t\t_fields: [ 'id', 'link', 'parent', 'title', 'menu_order' ],\n\t\t\t\t\tper_page: -1,\n\t\t\t\t},\n\t\t\t] ),\n\t\t};\n\t}, [] );\n\n\treturn useMemo( () => {\n\t\t// TODO: Once the REST API supports passing multiple values to\n\t\t// 'orderby', this can be removed.\n\t\t// https://core.trac.wordpress.org/ticket/39037\n\t\tconst sortedPages = sortBy( pages, [ 'menu_order', 'title.rendered' ] );\n\t\tconst pagesByParentId = sortedPages.reduce( ( accumulator, page ) => {\n\t\t\tconst { parent } = page;\n\t\t\tif ( accumulator.has( parent ) ) {\n\t\t\t\taccumulator.get( parent ).push( page );\n\t\t\t} else {\n\t\t\t\taccumulator.set( parent, [ page ] );\n\t\t\t}\n\t\t\treturn accumulator;\n\t\t}, new Map() );\n\n\t\treturn {\n\t\t\tpagesByParentId,\n\t\t\thasResolvedPages,\n\t\t\ttotalPages: pages?.length ?? null,\n\t\t};\n\t}, [ pages, hasResolvedPages ] );\n}\n\nconst PageItems = memo( function PageItems( {\n\tcontext,\n\tpagesByParentId,\n\tparentId = 0,\n\tdepth = 0,\n} ) {\n\tconst pages = pagesByParentId.get( parentId );\n\tconst frontPageId = useFrontPageId();\n\n\tif ( ! pages?.length ) {\n\t\treturn [];\n\t}\n\n\treturn pages.map( ( page ) => {\n\t\tconst hasChildren = pagesByParentId.has( page.id );\n\t\tconst isNavigationChild = 'showSubmenuIcon' in context;\n\t\treturn (\n\t\t\t<li\n\t\t\t\tkey={ page.id }\n\t\t\t\tclassName={ classnames( 'wp-block-pages-list__item', {\n\t\t\t\t\t'has-child': hasChildren,\n\t\t\t\t\t'wp-block-navigation-item': isNavigationChild,\n\t\t\t\t\t'open-on-click': context.openSubmenusOnClick,\n\t\t\t\t\t'open-on-hover-click':\n\t\t\t\t\t\t! context.openSubmenusOnClick &&\n\t\t\t\t\t\tcontext.showSubmenuIcon,\n\t\t\t\t\t'menu-item-home': page.id === frontPageId,\n\t\t\t\t} ) }\n\t\t\t>\n\t\t\t\t{ hasChildren && context.openSubmenusOnClick ? (\n\t\t\t\t\t<ItemSubmenuToggle title={ page.title?.rendered } />\n\t\t\t\t) : (\n\t\t\t\t\t<a\n\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t'wp-block-pages-list__item__link',\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t'wp-block-navigation-item__content': isNavigationChild,\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t) }\n\t\t\t\t\t\thref={ page.link }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ page.title?.rendered }\n\t\t\t\t\t</a>\n\t\t\t\t) }\n\t\t\t\t{ hasChildren && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t{ ! context.openSubmenusOnClick &&\n\t\t\t\t\t\t\tcontext.showSubmenuIcon && <ItemSubmenuToggle /> }\n\t\t\t\t\t\t<ul\n\t\t\t\t\t\t\tclassName={ classnames( 'submenu-container', {\n\t\t\t\t\t\t\t\t'wp-block-navigation__submenu-container': isNavigationChild,\n\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<PageItems\n\t\t\t\t\t\t\t\tcontext={ context }\n\t\t\t\t\t\t\t\tpagesByParentId={ pagesByParentId }\n\t\t\t\t\t\t\t\tparentId={ page.id }\n\t\t\t\t\t\t\t\tdepth={ depth + 1 }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</ul>\n\t\t\t\t\t</>\n\t\t\t\t) }\n\t\t\t</li>\n\t\t);\n\t} );\n} );\n\nfunction ItemSubmenuToggle( { title } ) {\n\treturn (\n\t\t<button\n\t\t\tclassName=\"wp-block-navigation-item__content wp-block-navigation-submenu__toggle\"\n\t\t\taria-expanded=\"false\"\n\t\t>\n\t\t\t{ title }\n\t\t\t<span className=\"wp-block-page-list__submenu-icon wp-block-navigation__submenu-icon\">\n\t\t\t\t<ItemSubmenuIcon />\n\t\t\t</span>\n\t\t</button>\n\t);\n}\n"]}

package/build/post-featured-image/dimension-controls.js

@@ -1,7 +1,5 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,18 +7,12 @@ exports.default = void 0;
 
 var _element = require("@wordpress/element");
 
-var _classnames = _interopRequireDefault(require("classnames"));
-
 var _i18n = require("@wordpress/i18n");
 
 var _components = require("@wordpress/components");
 
 var _blockEditor = require("@wordpress/block-editor");
 
-/**
- * External dependencies
- */
-
 /**
  * WordPress dependencies
  */
@@ -34,6 +26,7 @@ const SCALE_OPTIONS = (0, _element.createElement)(_element.Fragment, null, (0, _
   value: "fill",
   label: (0, _i18n._x)('Fill', 'Scale option for Image dimension control')
 }));
+const DEFAULT_SCALE = 'cover';
 const scaleHelp = {
   cover: (0, _i18n.__)('Image is scaled and cropped to fill the entire space without being distorted.'),
   contain: (0, _i18n.__)('Image is scaled to fill the space without clipping nor distorting.'),
@@ -42,6 +35,7 @@ const scaleHelp = {
 
 const DimensionControls = _ref => {
   let {
+    clientId,
     attributes: {
       width,
       height,
@@ -69,40 +63,66 @@ const DimensionControls = _ref => {
   };
 
   const scaleLabel = (0, _i18n._x)('Scale', 'Image scaling options');
-  return (0, _element.createElement)(_components.PanelBody, {
-    title: (0, _i18n.__)('Dimensions')
-  }, (0, _element.createElement)(_components.Flex, {
-    justify: "space-between",
-    className: (0, _classnames.default)('block-library-post-featured-image-dimension-controls', {
-      'scale-control-is-visible': !!height
-    })
-  }, (0, _element.createElement)(_components.FlexItem, null, (0, _element.createElement)(_components.__experimentalUnitControl, {
+  return (0, _element.createElement)(_blockEditor.InspectorControls, {
+    __experimentalGroup: "dimensions"
+  }, (0, _element.createElement)(_components.__experimentalToolsPanelItem, {
+    className: "single-column",
+    hasValue: () => !!height,
+    label: (0, _i18n.__)('Height'),
+    onDeselect: () => setAttributes({
+      height: undefined
+    }),
+    resetAllFilter: () => ({
+      height: undefined
+    }),
+    isShownByDefault: true,
+    panelId: clientId
+  }, (0, _element.createElement)(_components.__experimentalUnitControl, {
     label: (0, _i18n.__)('Height'),
     labelPosition: "top",
     value: height || '',
-    onChange: nextHeight => {
-      onDimensionChange('height', nextHeight);
-    },
+    min: 0,
+    onChange: nextHeight => onDimensionChange('height', nextHeight),
     units: units
-  })), (0, _element.createElement)(_components.FlexItem, null, (0, _element.createElement)(_components.__experimentalUnitControl, {
+  })), (0, _element.createElement)(_components.__experimentalToolsPanelItem, {
+    className: "single-column",
+    hasValue: () => !!width,
+    label: (0, _i18n.__)('Width'),
+    onDeselect: () => setAttributes({
+      width: undefined
+    }),
+    resetAllFilter: () => ({
+      width: undefined
+    }),
+    isShownByDefault: true,
+    panelId: clientId
+  }, (0, _element.createElement)(_components.__experimentalUnitControl, {
     label: (0, _i18n.__)('Width'),
     labelPosition: "top",
     value: width || '',
-    onChange: nextWidth => {
-      onDimensionChange('width', nextWidth);
-    },
+    min: 0,
+    onChange: nextWidth => onDimensionChange('width', nextWidth),
     units: units
-  }))), !!height && (0, _element.createElement)(_components.__experimentalToggleGroupControl, {
+  })), !!height && (0, _element.createElement)(_components.__experimentalToolsPanelItem, {
+    hasValue: () => !!scale && scale !== DEFAULT_SCALE,
+    label: scaleLabel,
+    onDeselect: () => setAttributes({
+      scale: DEFAULT_SCALE
+    }),
+    resetAllFilter: () => ({
+      scale: DEFAULT_SCALE
+    }),
+    isShownByDefault: true,
+    panelId: clientId
+  }, (0, _element.createElement)(_components.__experimentalToggleGroupControl, {
     label: scaleLabel,
     value: scale,
     help: scaleHelp[scale],
-    onChange: value => {
-      setAttributes({
-        scale: value
-      });
-    },
+    onChange: value => setAttributes({
+      scale: value
+    }),
     isBlock: true
-  }, SCALE_OPTIONS));
+  }, SCALE_OPTIONS)));
 };
 
 var _default = DimensionControls;

package/build/post-featured-image/dimension-controls.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-library/src/post-featured-image/dimension-controls.js"],"names":["SCALE_OPTIONS","scaleHelp","cover","contain","fill","DimensionControls","attributes","width","height","scale","setAttributes","defaultUnits","units","availableUnits","onDimensionChange","dimension","nextValue","parsedValue","parseFloat","isNaN","scaleLabel","nextHeight","nextWidth","value"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classNames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __, _x } from '@wordpress/i18n';\nimport {\n\tPanelBody,\n\t__experimentalUnitControl as UnitControl,\n\tFlex,\n\tFlexItem,\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOption as ToggleGroupControlOption,\n\t__experimentalUseCustomUnits as useCustomUnits,\n} from '@wordpress/components';\nimport { useSetting } from '@wordpress/block-editor';\n\nconst SCALE_OPTIONS = (\n\t<>\n\t\t<ToggleGroupControlOption\n\t\t\tvalue=\"cover\"\n\t\t\tlabel={ _x( 'Cover', 'Scale option for Image dimension control' ) }\n\t\t/>\n\t\t<ToggleGroupControlOption\n\t\t\tvalue=\"contain\"\n\t\t\tlabel={ _x(\n\t\t\t\t'Contain',\n\t\t\t\t'Scale option for Image dimension control'\n\t\t\t) }\n\t\t/>\n\t\t<ToggleGroupControlOption\n\t\t\tvalue=\"fill\"\n\t\t\tlabel={ _x( 'Fill', 'Scale option for Image dimension control' ) }\n\t\t/>\n\t</>\n);\n\nconst scaleHelp = {\n\tcover: __(\n\t\t'Image is scaled and cropped to fill the entire space without being distorted.'\n\t),\n\tcontain: __(\n\t\t'Image is scaled to fill the space without clipping nor distorting.'\n\t),\n\tfill: __(\n\t\t'Image will be stretched and distorted to completely fill the space.'\n\t),\n};\n\nconst DimensionControls = ( {\n\tattributes: { width, height, scale },\n\tsetAttributes,\n} ) => {\n\tconst defaultUnits = [ 'px', '%', 'vw', 'em', 'rem' ];\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: useSetting( 'spacing.units' ) || defaultUnits,\n\t} );\n\tconst onDimensionChange = ( dimension, nextValue ) => {\n\t\tconst parsedValue = parseFloat( nextValue );\n\t\t/**\n\t\t * If we have no value set and we change the unit,\n\t\t * we don't want to set the attribute, as it would\n\t\t * end up having the unit as value without any number.\n\t\t */\n\t\tif ( isNaN( parsedValue ) && nextValue ) return;\n\t\tsetAttributes( {\n\t\t\t[ dimension ]: parsedValue < 0 ? '0' : nextValue,\n\t\t} );\n\t};\n\tconst scaleLabel = _x( 'Scale', 'Image scaling options' );\n\treturn (\n\t\t<PanelBody title={ __( 'Dimensions' ) }>\n\t\t\t<Flex\n\t\t\t\tjustify=\"space-between\"\n\t\t\t\tclassName={ classNames(\n\t\t\t\t\t'block-library-post-featured-image-dimension-controls',\n\t\t\t\t\t{ 'scale-control-is-visible': !! height }\n\t\t\t\t) }\n\t\t\t>\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<UnitControl\n\t\t\t\t\t\tlabel={ __( 'Height' ) }\n\t\t\t\t\t\tlabelPosition=\"top\"\n\t\t\t\t\t\tvalue={ height || '' }\n\t\t\t\t\t\tonChange={ ( nextHeight ) => {\n\t\t\t\t\t\t\tonDimensionChange( 'height', nextHeight );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tunits={ units }\n\t\t\t\t\t/>\n\t\t\t\t</FlexItem>\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<UnitControl\n\t\t\t\t\t\tlabel={ __( 'Width' ) }\n\t\t\t\t\t\tlabelPosition=\"top\"\n\t\t\t\t\t\tvalue={ width || '' }\n\t\t\t\t\t\tonChange={ ( nextWidth ) => {\n\t\t\t\t\t\t\tonDimensionChange( 'width', nextWidth );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tunits={ units }\n\t\t\t\t\t/>\n\t\t\t\t</FlexItem>\n\t\t\t</Flex>\n\t\t\t{ !! height && (\n\t\t\t\t<ToggleGroupControl\n\t\t\t\t\tlabel={ scaleLabel }\n\t\t\t\t\tvalue={ scale }\n\t\t\t\t\thelp={ scaleHelp[ scale ] }\n\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\tscale: value,\n\t\t\t\t\t\t} );\n\t\t\t\t\t} }\n\t\t\t\t\tisBlock\n\t\t\t\t>\n\t\t\t\t\t{ SCALE_OPTIONS }\n\t\t\t\t</ToggleGroupControl>\n\t\t\t) }\n\t\t</PanelBody>\n\t);\n};\n\nexport default DimensionControls;\n"]}
+{"version":3,"sources":["@wordpress/block-library/src/post-featured-image/dimension-controls.js"],"names":["SCALE_OPTIONS","DEFAULT_SCALE","scaleHelp","cover","contain","fill","DimensionControls","clientId","attributes","width","height","scale","setAttributes","defaultUnits","units","availableUnits","onDimensionChange","dimension","nextValue","parsedValue","parseFloat","isNaN","scaleLabel","undefined","nextHeight","nextWidth","value"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, _x } from '@wordpress/i18n';\nimport {\n\t__experimentalUnitControl as UnitControl,\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOption as ToggleGroupControlOption,\n\t__experimentalUseCustomUnits as useCustomUnits,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n} from '@wordpress/components';\nimport { InspectorControls, useSetting } from '@wordpress/block-editor';\n\nconst SCALE_OPTIONS = (\n\t<>\n\t\t<ToggleGroupControlOption\n\t\t\tvalue=\"cover\"\n\t\t\tlabel={ _x( 'Cover', 'Scale option for Image dimension control' ) }\n\t\t/>\n\t\t<ToggleGroupControlOption\n\t\t\tvalue=\"contain\"\n\t\t\tlabel={ _x(\n\t\t\t\t'Contain',\n\t\t\t\t'Scale option for Image dimension control'\n\t\t\t) }\n\t\t/>\n\t\t<ToggleGroupControlOption\n\t\t\tvalue=\"fill\"\n\t\t\tlabel={ _x( 'Fill', 'Scale option for Image dimension control' ) }\n\t\t/>\n\t</>\n);\n\nconst DEFAULT_SCALE = 'cover';\n\nconst scaleHelp = {\n\tcover: __(\n\t\t'Image is scaled and cropped to fill the entire space without being distorted.'\n\t),\n\tcontain: __(\n\t\t'Image is scaled to fill the space without clipping nor distorting.'\n\t),\n\tfill: __(\n\t\t'Image will be stretched and distorted to completely fill the space.'\n\t),\n};\n\nconst DimensionControls = ( {\n\tclientId,\n\tattributes: { width, height, scale },\n\tsetAttributes,\n} ) => {\n\tconst defaultUnits = [ 'px', '%', 'vw', 'em', 'rem' ];\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: useSetting( 'spacing.units' ) || defaultUnits,\n\t} );\n\tconst onDimensionChange = ( dimension, nextValue ) => {\n\t\tconst parsedValue = parseFloat( nextValue );\n\t\t/**\n\t\t * If we have no value set and we change the unit,\n\t\t * we don't want to set the attribute, as it would\n\t\t * end up having the unit as value without any number.\n\t\t */\n\t\tif ( isNaN( parsedValue ) && nextValue ) return;\n\t\tsetAttributes( {\n\t\t\t[ dimension ]: parsedValue < 0 ? '0' : nextValue,\n\t\t} );\n\t};\n\tconst scaleLabel = _x( 'Scale', 'Image scaling options' );\n\treturn (\n\t\t<InspectorControls __experimentalGroup=\"dimensions\">\n\t\t\t<ToolsPanelItem\n\t\t\t\tclassName=\"single-column\"\n\t\t\t\thasValue={ () => !! height }\n\t\t\t\tlabel={ __( 'Height' ) }\n\t\t\t\tonDeselect={ () => setAttributes( { height: undefined } ) }\n\t\t\t\tresetAllFilter={ () => ( {\n\t\t\t\t\theight: undefined,\n\t\t\t\t} ) }\n\t\t\t\tisShownByDefault={ true }\n\t\t\t\tpanelId={ clientId }\n\t\t\t>\n\t\t\t\t<UnitControl\n\t\t\t\t\tlabel={ __( 'Height' ) }\n\t\t\t\t\tlabelPosition=\"top\"\n\t\t\t\t\tvalue={ height || '' }\n\t\t\t\t\tmin={ 0 }\n\t\t\t\t\tonChange={ ( nextHeight ) =>\n\t\t\t\t\t\tonDimensionChange( 'height', nextHeight )\n\t\t\t\t\t}\n\t\t\t\t\tunits={ units }\n\t\t\t\t/>\n\t\t\t</ToolsPanelItem>\n\t\t\t<ToolsPanelItem\n\t\t\t\tclassName=\"single-column\"\n\t\t\t\thasValue={ () => !! width }\n\t\t\t\tlabel={ __( 'Width' ) }\n\t\t\t\tonDeselect={ () => setAttributes( { width: undefined } ) }\n\t\t\t\tresetAllFilter={ () => ( {\n\t\t\t\t\twidth: undefined,\n\t\t\t\t} ) }\n\t\t\t\tisShownByDefault={ true }\n\t\t\t\tpanelId={ clientId }\n\t\t\t>\n\t\t\t\t<UnitControl\n\t\t\t\t\tlabel={ __( 'Width' ) }\n\t\t\t\t\tlabelPosition=\"top\"\n\t\t\t\t\tvalue={ width || '' }\n\t\t\t\t\tmin={ 0 }\n\t\t\t\t\tonChange={ ( nextWidth ) =>\n\t\t\t\t\t\tonDimensionChange( 'width', nextWidth )\n\t\t\t\t\t}\n\t\t\t\t\tunits={ units }\n\t\t\t\t/>\n\t\t\t</ToolsPanelItem>\n\t\t\t{ !! height && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\thasValue={ () => !! scale && scale !== DEFAULT_SCALE }\n\t\t\t\t\tlabel={ scaleLabel }\n\t\t\t\t\tonDeselect={ () =>\n\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\tscale: DEFAULT_SCALE,\n\t\t\t\t\t\t} )\n\t\t\t\t\t}\n\t\t\t\t\tresetAllFilter={ () => ( {\n\t\t\t\t\t\tscale: DEFAULT_SCALE,\n\t\t\t\t\t} ) }\n\t\t\t\t\tisShownByDefault={ true }\n\t\t\t\t\tpanelId={ clientId }\n\t\t\t\t>\n\t\t\t\t\t<ToggleGroupControl\n\t\t\t\t\t\tlabel={ scaleLabel }\n\t\t\t\t\t\tvalue={ scale }\n\t\t\t\t\t\thelp={ scaleHelp[ scale ] }\n\t\t\t\t\t\tonChange={ ( value ) =>\n\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\tscale: value,\n\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t}\n\t\t\t\t\t\tisBlock\n\t\t\t\t\t>\n\t\t\t\t\t\t{ SCALE_OPTIONS }\n\t\t\t\t\t</ToggleGroupControl>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t</InspectorControls>\n\t);\n};\n\nexport default DimensionControls;\n"]}

package/build/post-featured-image/edit.js

@@ -51,6 +51,7 @@ const placeholderChip = (0, _element.createElement)("div", {
 
 function PostFeaturedImageDisplay(_ref) {
   let {
+    clientId,
     attributes,
     setAttributes,
     context: {
@@ -142,10 +143,11 @@ function PostFeaturedImageDisplay(_ref) {
     });
   }
 
-  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_blockEditor.InspectorControls, null, (0, _element.createElement)(_dimensionControls.default, {
+  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_dimensionControls.default, {
+    clientId: clientId,
     attributes: attributes,
     setAttributes: setAttributes
-  }), (0, _element.createElement)(_components.PanelBody, {
+  }), (0, _element.createElement)(_blockEditor.InspectorControls, null, (0, _element.createElement)(_components.PanelBody, {
     title: (0, _i18n.__)('Link settings')
   }, (0, _element.createElement)(_components.ToggleControl, {
     label: (0, _i18n.sprintf)( // translators: %s: Name of the post type e.g: "post".