@wordpress/edit-site 4.2.0 → 4.3.0

package/build-module/components/global-styles/screen-root.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-root.js"],"names":["__experimentalItemGroup","ItemGroup","__experimentalItem","Item","__experimentalHStack","HStack","__experimentalVStack","VStack","FlexItem","CardBody","Card","CardDivider","isRTL","__","chevronLeft","chevronRight","Icon","useSelect","store","coreStore","NavigationButton","ContextMenu","StylesPreview","ScreenRoot","variations","select","__experimentalGetCurrentThemeGlobalStylesVariations","length"],"mappings":";;AAAA;AACA;AACA;AACA,SACCA,uBAAuB,IAAIC,SAD5B,EAECC,kBAAkB,IAAIC,IAFvB,EAGCC,oBAAoB,IAAIC,MAHzB,EAICC,oBAAoB,IAAIC,MAJzB,EAKCC,QALD,EAMCC,QAND,EAOCC,IAPD,EAQCC,WARD,QASO,uBATP;AAUA,SAASC,KAAT,EAAgBC,EAAhB,QAA0B,iBAA1B;AACA,SAASC,WAAT,EAAsBC,YAAtB,EAAoCC,IAApC,QAAgD,kBAAhD;AACA,SAASC,SAAT,QAA0B,iBAA1B;AACA,SAASC,KAAK,IAAIC,SAAlB,QAAmC,sBAAnC;AAEA;AACA;AACA;;AACA,SAASC,gBAAT,QAAiC,qBAAjC;AACA,OAAOC,WAAP,MAAwB,gBAAxB;AACA,OAAOC,aAAP,MAA0B,WAA1B;;AAEA,SAASC,UAAT,GAAsB;AACrB,QAAM;AAAEC,IAAAA;AAAF,MAAiBP,SAAS,CAAIQ,MAAF,IAAc;AAC/C,WAAO;AACND,MAAAA,UAAU,EAAEC,MAAM,CACjBN,SADiB,CAAN,CAEVO,mDAFU;AADN,KAAP;AAKA,GAN+B,EAM7B,EAN6B,CAAhC;AAQA,SACC,cAAC,IAAD;AAAM,IAAA,IAAI,EAAC;AAAX,KACC,cAAC,QAAD,QACC,cAAC,MAAD;AAAQ,IAAA,OAAO,EAAG;AAAlB,KACC,cAAC,IAAD,QACC,cAAC,aAAD,OADD,CADD,EAIG,CAAC,EAAEF,UAAF,aAAEA,UAAF,eAAEA,UAAU,CAAEG,MAAd,CAAD,IACD,cAAC,gBAAD;AAAkB,IAAA,IAAI,EAAC;AAAvB,KACC,cAAC,MAAD;AAAQ,IAAA,OAAO,EAAC;AAAhB,KACC,cAAC,QAAD,QAAYd,EAAE,CAAE,cAAF,CAAd,CADD,EAEC,cAAC,QAAD,QACC,cAAC,IAAD;AACC,IAAA,IAAI,EACHD,KAAK,KAAKE,WAAL,GAAmBC;AAF1B,IADD,CAFD,CADD,CALF,CADD,CADD,EAuBC,cAAC,QAAD,QACC,cAAC,WAAD,OADD,CAvBD,EA2BC,cAAC,WAAD,OA3BD,EA6BC,cAAC,QAAD,QACC,cAAC,SAAD,QACC,cAAC,IAAD,QACGF,EAAE,CACH,iEADG,CADL,CADD,EAMC,cAAC,gBAAD;AAAkB,IAAA,IAAI,EAAC;AAAvB,KACC,cAAC,MAAD;AAAQ,IAAA,OAAO,EAAC;AAAhB,KACC,cAAC,QAAD,QAAYA,EAAE,CAAE,QAAF,CAAd,CADD,EAEC,cAAC,QAAD,QACC,cAAC,IAAD;AACC,IAAA,IAAI,EACHD,KAAK,KAAKE,WAAL,GAAmBC;AAF1B,IADD,CAFD,CADD,CAND,CADD,CA7BD,CADD;AAqDA;;AAED,eAAeQ,UAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalItem as Item,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\tFlexItem,\n\tCardBody,\n\tCard,\n\tCardDivider,\n} from '@wordpress/components';\nimport { isRTL, __ } from '@wordpress/i18n';\nimport { chevronLeft, chevronRight, Icon } from '@wordpress/icons';\nimport { useSelect } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\n\n/**\n * Internal dependencies\n */\nimport { NavigationButton } from './navigation-button';\nimport ContextMenu from './context-menu';\nimport StylesPreview from './preview';\n\nfunction ScreenRoot() {\n\tconst { variations } = useSelect( ( select ) => {\n\t\treturn {\n\t\t\tvariations: select(\n\t\t\t\tcoreStore\n\t\t\t).__experimentalGetCurrentThemeGlobalStylesVariations(),\n\t\t};\n\t}, [] );\n\n\treturn (\n\t\t<Card size=\"small\">\n\t\t\t<CardBody>\n\t\t\t\t<VStack spacing={ 2 }>\n\t\t\t\t\t<Card>\n\t\t\t\t\t\t<StylesPreview />\n\t\t\t\t\t</Card>\n\t\t\t\t\t{ !! variations?.length && (\n\t\t\t\t\t\t<NavigationButton path=\"/variations\">\n\t\t\t\t\t\t\t<HStack justify=\"space-between\">\n\t\t\t\t\t\t\t\t<FlexItem>{ __( 'Other styles' ) }</FlexItem>\n\t\t\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t\t\t\t\tisRTL() ? chevronLeft : chevronRight\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</FlexItem>\n\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t</NavigationButton>\n\t\t\t\t\t) }\n\t\t\t\t</VStack>\n\t\t\t</CardBody>\n\n\t\t\t<CardBody>\n\t\t\t\t<ContextMenu />\n\t\t\t</CardBody>\n\n\t\t\t<CardDivider />\n\n\t\t\t<CardBody>\n\t\t\t\t<ItemGroup>\n\t\t\t\t\t<Item>\n\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t'Customize the appearance of specific blocks for the whole site.'\n\t\t\t\t\t\t) }\n\t\t\t\t\t</Item>\n\t\t\t\t\t<NavigationButton path=\"/blocks\">\n\t\t\t\t\t\t<HStack justify=\"space-between\">\n\t\t\t\t\t\t\t<FlexItem>{ __( 'Blocks' ) }</FlexItem>\n\t\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t\t\t\tisRTL() ? chevronLeft : chevronRight\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t</HStack>\n\t\t\t\t\t</NavigationButton>\n\t\t\t\t</ItemGroup>\n\t\t\t</CardBody>\n\t\t</Card>\n\t);\n}\n\nexport default ScreenRoot;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-root.js"],"names":["__experimentalItemGroup","ItemGroup","__experimentalItem","Item","__experimentalHStack","HStack","__experimentalVStack","VStack","FlexItem","CardBody","Card","CardDivider","CardMedia","isRTL","__","chevronLeft","chevronRight","useSelect","store","coreStore","IconWithCurrentColor","NavigationButton","ContextMenu","StylesPreview","ScreenRoot","variations","select","__experimentalGetCurrentThemeGlobalStylesVariations","length"],"mappings":";;AAAA;AACA;AACA;AACA,SACCA,uBAAuB,IAAIC,SAD5B,EAECC,kBAAkB,IAAIC,IAFvB,EAGCC,oBAAoB,IAAIC,MAHzB,EAICC,oBAAoB,IAAIC,MAJzB,EAKCC,QALD,EAMCC,QAND,EAOCC,IAPD,EAQCC,WARD,EASCC,SATD,QAUO,uBAVP;AAWA,SAASC,KAAT,EAAgBC,EAAhB,QAA0B,iBAA1B;AACA,SAASC,WAAT,EAAsBC,YAAtB,QAA0C,kBAA1C;AACA,SAASC,SAAT,QAA0B,iBAA1B;AACA,SAASC,KAAK,IAAIC,SAAlB,QAAmC,sBAAnC;AAEA;AACA;AACA;;AACA,SAASC,oBAAT,QAAqC,2BAArC;AACA,SAASC,gBAAT,QAAiC,qBAAjC;AACA,OAAOC,WAAP,MAAwB,gBAAxB;AACA,OAAOC,aAAP,MAA0B,WAA1B;;AAEA,SAASC,UAAT,GAAsB;AACrB,QAAM;AAAEC,IAAAA;AAAF,MAAiBR,SAAS,CAAIS,MAAF,IAAc;AAC/C,WAAO;AACND,MAAAA,UAAU,EAAEC,MAAM,CACjBP,SADiB,CAAN,CAEVQ,mDAFU;AADN,KAAP;AAKA,GAN+B,EAM7B,EAN6B,CAAhC;AAQA,SACC,cAAC,IAAD;AAAM,IAAA,IAAI,EAAC;AAAX,KACC,cAAC,QAAD,QACC,cAAC,MAAD;AAAQ,IAAA,OAAO,EAAG;AAAlB,KACC,cAAC,IAAD,QACC,cAAC,SAAD,QACC,cAAC,aAAD,OADD,CADD,CADD,EAMG,CAAC,EAAEF,UAAF,aAAEA,UAAF,eAAEA,UAAU,CAAEG,MAAd,CAAD,IACD,cAAC,gBAAD;AAAkB,IAAA,IAAI,EAAC;AAAvB,KACC,cAAC,MAAD;AAAQ,IAAA,OAAO,EAAC;AAAhB,KACC,cAAC,QAAD,QAAYd,EAAE,CAAE,eAAF,CAAd,CADD,EAEC,cAAC,oBAAD;AACC,IAAA,IAAI,EACHD,KAAK,KAAKE,WAAL,GAAmBC;AAF1B,IAFD,CADD,CAPF,CADD,CADD,EAuBC,cAAC,QAAD,QACC,cAAC,WAAD,OADD,CAvBD,EA2BC,cAAC,WAAD,OA3BD,EA6BC,cAAC,QAAD,QACC,cAAC,SAAD,QACC,cAAC,IAAD,QACGF,EAAE,CACH,iEADG,CADL,CADD,EAMC,cAAC,gBAAD;AAAkB,IAAA,IAAI,EAAC;AAAvB,KACC,cAAC,MAAD;AAAQ,IAAA,OAAO,EAAC;AAAhB,KACC,cAAC,QAAD,QAAYA,EAAE,CAAE,QAAF,CAAd,CADD,EAEC,cAAC,oBAAD;AACC,IAAA,IAAI,EAAGD,KAAK,KAAKE,WAAL,GAAmBC;AADhC,IAFD,CADD,CAND,CADD,CA7BD,CADD;AAiDA;;AAED,eAAeQ,UAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalItem as Item,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\tFlexItem,\n\tCardBody,\n\tCard,\n\tCardDivider,\n\tCardMedia,\n} from '@wordpress/components';\nimport { isRTL, __ } from '@wordpress/i18n';\nimport { chevronLeft, chevronRight } from '@wordpress/icons';\nimport { useSelect } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\n\n/**\n * Internal dependencies\n */\nimport { IconWithCurrentColor } from './icon-with-current-color';\nimport { NavigationButton } from './navigation-button';\nimport ContextMenu from './context-menu';\nimport StylesPreview from './preview';\n\nfunction ScreenRoot() {\n\tconst { variations } = useSelect( ( select ) => {\n\t\treturn {\n\t\t\tvariations: select(\n\t\t\t\tcoreStore\n\t\t\t).__experimentalGetCurrentThemeGlobalStylesVariations(),\n\t\t};\n\t}, [] );\n\n\treturn (\n\t\t<Card size=\"small\">\n\t\t\t<CardBody>\n\t\t\t\t<VStack spacing={ 2 }>\n\t\t\t\t\t<Card>\n\t\t\t\t\t\t<CardMedia>\n\t\t\t\t\t\t\t<StylesPreview />\n\t\t\t\t\t\t</CardMedia>\n\t\t\t\t\t</Card>\n\t\t\t\t\t{ !! variations?.length && (\n\t\t\t\t\t\t<NavigationButton path=\"/variations\">\n\t\t\t\t\t\t\t<HStack justify=\"space-between\">\n\t\t\t\t\t\t\t\t<FlexItem>{ __( 'Browse styles' ) }</FlexItem>\n\t\t\t\t\t\t\t\t<IconWithCurrentColor\n\t\t\t\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t\t\t\tisRTL() ? chevronLeft : chevronRight\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t</NavigationButton>\n\t\t\t\t\t) }\n\t\t\t\t</VStack>\n\t\t\t</CardBody>\n\n\t\t\t<CardBody>\n\t\t\t\t<ContextMenu />\n\t\t\t</CardBody>\n\n\t\t\t<CardDivider />\n\n\t\t\t<CardBody>\n\t\t\t\t<ItemGroup>\n\t\t\t\t\t<Item>\n\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t'Customize the appearance of specific blocks for the whole site.'\n\t\t\t\t\t\t) }\n\t\t\t\t\t</Item>\n\t\t\t\t\t<NavigationButton path=\"/blocks\">\n\t\t\t\t\t\t<HStack justify=\"space-between\">\n\t\t\t\t\t\t\t<FlexItem>{ __( 'Blocks' ) }</FlexItem>\n\t\t\t\t\t\t\t<IconWithCurrentColor\n\t\t\t\t\t\t\t\ticon={ isRTL() ? chevronLeft : chevronRight }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</HStack>\n\t\t\t\t\t</NavigationButton>\n\t\t\t\t</ItemGroup>\n\t\t\t</CardBody>\n\t\t</Card>\n\t);\n}\n\nexport default ScreenRoot;\n"]}

package/build-module/components/global-styles/screen-style-variations.js

@@ -11,7 +11,7 @@ import classnames from 'classnames';
 
 import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
-import { useMemo, useContext } from '@wordpress/element';
+import { useMemo, useContext, useState } from '@wordpress/element';
 import { ENTER } from '@wordpress/keycodes';
 import { __experimentalGrid as Grid, Card, CardBody } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
@@ -32,6 +32,7 @@ function Variation(_ref) {
   let {
     variation
   } = _ref;
+  const [isFocused, setIsFocused] = useState(false);
   const {
     base,
     user,
@@ -79,10 +80,16 @@ function Variation(_ref) {
     role: "button",
     onClick: selectVariation,
     onKeyDown: selectOnEnter,
-    tabIndex: "0"
+    tabIndex: "0",
+    "aria-label": variation === null || variation === void 0 ? void 0 : variation.title,
+    onFocus: () => setIsFocused(true),
+    onBlur: () => setIsFocused(false)
+  }, createElement("div", {
+    className: "edit-site-global-styles-variations_item-preview"
   }, createElement(StylesPreview, {
-    height: 100
-  })));
+    label: variation === null || variation === void 0 ? void 0 : variation.title,
+    isFocused: isFocused
+  }))));
 }
 
 function ScreenStyleVariations() {
@@ -95,14 +102,14 @@ function ScreenStyleVariations() {
   }, []);
   const withEmptyVariation = useMemo(() => {
     return [{
-      name: __('Default'),
+      title: __('Default'),
       settings: {},
       styles: {}
     }, ...variations];
   }, [variations]);
   return createElement(Fragment, null, createElement(ScreenHeader, {
     back: "/",
-    title: __('Other styles'),
+    title: __('Browse styles'),
     description: __('Choose a different style combination for the theme styles')
   }), createElement(Card, {
     size: "small",

package/build-module/components/global-styles/screen-style-variations.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-style-variations.js"],"names":["isEqual","classnames","store","coreStore","useSelect","useMemo","useContext","ENTER","__experimentalGrid","Grid","Card","CardBody","__","mergeBaseAndUserConfigs","GlobalStylesContext","StylesPreview","ScreenHeader","compareVariations","a","b","styles","settings","Variation","variation","base","user","setUserConfig","context","merged","selectVariation","selectOnEnter","event","keyCode","preventDefault","isActive","ScreenStyleVariations","variations","select","__experimentalGetCurrentThemeGlobalStylesVariations","withEmptyVariation","name","map","index"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { isEqual } from 'lodash';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useSelect } from '@wordpress/data';\nimport { useMemo, useContext } from '@wordpress/element';\nimport { ENTER } from '@wordpress/keycodes';\nimport {\n\t__experimentalGrid as Grid,\n\tCard,\n\tCardBody,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { mergeBaseAndUserConfigs } from './global-styles-provider';\nimport { GlobalStylesContext } from './context';\nimport StylesPreview from './preview';\nimport ScreenHeader from './header';\n\nfunction compareVariations( a, b ) {\n\treturn isEqual( a.styles, b.styles ) && isEqual( a.settings, b.settings );\n}\n\nfunction Variation( { variation } ) {\n\tconst { base, user, setUserConfig } = useContext( GlobalStylesContext );\n\tconst context = useMemo( () => {\n\t\treturn {\n\t\t\tuser: {\n\t\t\t\tsettings: variation.settings ?? {},\n\t\t\t\tstyles: variation.styles ?? {},\n\t\t\t},\n\t\t\tbase,\n\t\t\tmerged: mergeBaseAndUserConfigs( base, variation ),\n\t\t\tsetUserConfig: () => {},\n\t\t};\n\t}, [ variation, base ] );\n\n\tconst selectVariation = () => {\n\t\tsetUserConfig( () => {\n\t\t\treturn {\n\t\t\t\tsettings: variation.settings,\n\t\t\t\tstyles: variation.styles,\n\t\t\t};\n\t\t} );\n\t};\n\n\tconst selectOnEnter = ( event ) => {\n\t\tif ( event.keyCode === ENTER ) {\n\t\t\tevent.preventDefault();\n\t\t\tselectVariation();\n\t\t}\n\t};\n\n\tconst isActive = useMemo( () => {\n\t\treturn compareVariations( user, variation );\n\t}, [ user, variation ] );\n\n\treturn (\n\t\t<GlobalStylesContext.Provider value={ context }>\n\t\t\t<div\n\t\t\t\tclassName={ classnames(\n\t\t\t\t\t'edit-site-global-styles-variations_item',\n\t\t\t\t\t{\n\t\t\t\t\t\t'is-active': isActive,\n\t\t\t\t\t}\n\t\t\t\t) }\n\t\t\t\trole=\"button\"\n\t\t\t\tonClick={ selectVariation }\n\t\t\t\tonKeyDown={ selectOnEnter }\n\t\t\t\ttabIndex=\"0\"\n\t\t\t>\n\t\t\t\t<StylesPreview height={ 100 } />\n\t\t\t</div>\n\t\t</GlobalStylesContext.Provider>\n\t);\n}\n\nfunction ScreenStyleVariations() {\n\tconst { variations } = useSelect( ( select ) => {\n\t\treturn {\n\t\t\tvariations: select(\n\t\t\t\tcoreStore\n\t\t\t).__experimentalGetCurrentThemeGlobalStylesVariations(),\n\t\t};\n\t}, [] );\n\n\tconst withEmptyVariation = useMemo( () => {\n\t\treturn [\n\t\t\t{\n\t\t\t\tname: __( 'Default' ),\n\t\t\t\tsettings: {},\n\t\t\t\tstyles: {},\n\t\t\t},\n\t\t\t...variations,\n\t\t];\n\t}, [ variations ] );\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\tback=\"/\"\n\t\t\t\ttitle={ __( 'Other styles' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Choose a different style combination for the theme styles'\n\t\t\t\t) }\n\t\t\t/>\n\n\t\t\t<Card size=\"small\" isBorderless>\n\t\t\t\t<CardBody>\n\t\t\t\t\t<Grid columns={ 2 }>\n\t\t\t\t\t\t{ withEmptyVariation?.map( ( variation, index ) => (\n\t\t\t\t\t\t\t<Variation key={ index } variation={ variation } />\n\t\t\t\t\t\t) ) }\n\t\t\t\t\t</Grid>\n\t\t\t\t</CardBody>\n\t\t\t</Card>\n\t\t</>\n\t);\n}\n\nexport default ScreenStyleVariations;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-style-variations.js"],"names":["isEqual","classnames","store","coreStore","useSelect","useMemo","useContext","useState","ENTER","__experimentalGrid","Grid","Card","CardBody","__","mergeBaseAndUserConfigs","GlobalStylesContext","StylesPreview","ScreenHeader","compareVariations","a","b","styles","settings","Variation","variation","isFocused","setIsFocused","base","user","setUserConfig","context","merged","selectVariation","selectOnEnter","event","keyCode","preventDefault","isActive","title","ScreenStyleVariations","variations","select","__experimentalGetCurrentThemeGlobalStylesVariations","withEmptyVariation","map","index"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,OAAT,QAAwB,QAAxB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SAASC,KAAK,IAAIC,SAAlB,QAAmC,sBAAnC;AACA,SAASC,SAAT,QAA0B,iBAA1B;AACA,SAASC,OAAT,EAAkBC,UAAlB,EAA8BC,QAA9B,QAA8C,oBAA9C;AACA,SAASC,KAAT,QAAsB,qBAAtB;AACA,SACCC,kBAAkB,IAAIC,IADvB,EAECC,IAFD,EAGCC,QAHD,QAIO,uBAJP;AAKA,SAASC,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,SAASC,uBAAT,QAAwC,0BAAxC;AACA,SAASC,mBAAT,QAAoC,WAApC;AACA,OAAOC,aAAP,MAA0B,WAA1B;AACA,OAAOC,YAAP,MAAyB,UAAzB;;AAEA,SAASC,iBAAT,CAA4BC,CAA5B,EAA+BC,CAA/B,EAAmC;AAClC,SAAOpB,OAAO,CAAEmB,CAAC,CAACE,MAAJ,EAAYD,CAAC,CAACC,MAAd,CAAP,IAAiCrB,OAAO,CAAEmB,CAAC,CAACG,QAAJ,EAAcF,CAAC,CAACE,QAAhB,CAA/C;AACA;;AAED,SAASC,SAAT,OAAoC;AAAA,MAAhB;AAAEC,IAAAA;AAAF,GAAgB;AACnC,QAAM,CAAEC,SAAF,EAAaC,YAAb,IAA8BnB,QAAQ,CAAE,KAAF,CAA5C;AACA,QAAM;AAAEoB,IAAAA,IAAF;AAAQC,IAAAA,IAAR;AAAcC,IAAAA;AAAd,MAAgCvB,UAAU,CAAES,mBAAF,CAAhD;AACA,QAAMe,OAAO,GAAGzB,OAAO,CAAE,MAAM;AAAA;;AAC9B,WAAO;AACNuB,MAAAA,IAAI,EAAE;AACLN,QAAAA,QAAQ,yBAAEE,SAAS,CAACF,QAAZ,qEAAwB,EAD3B;AAELD,QAAAA,MAAM,uBAAEG,SAAS,CAACH,MAAZ,iEAAsB;AAFvB,OADA;AAKNM,MAAAA,IALM;AAMNI,MAAAA,MAAM,EAAEjB,uBAAuB,CAAEa,IAAF,EAAQH,SAAR,CANzB;AAONK,MAAAA,aAAa,EAAE,MAAM,CAAE;AAPjB,KAAP;AASA,GAVsB,EAUpB,CAAEL,SAAF,EAAaG,IAAb,CAVoB,CAAvB;;AAYA,QAAMK,eAAe,GAAG,MAAM;AAC7BH,IAAAA,aAAa,CAAE,MAAM;AACpB,aAAO;AACNP,QAAAA,QAAQ,EAAEE,SAAS,CAACF,QADd;AAEND,QAAAA,MAAM,EAAEG,SAAS,CAACH;AAFZ,OAAP;AAIA,KALY,CAAb;AAMA,GAPD;;AASA,QAAMY,aAAa,GAAKC,KAAF,IAAa;AAClC,QAAKA,KAAK,CAACC,OAAN,KAAkB3B,KAAvB,EAA+B;AAC9B0B,MAAAA,KAAK,CAACE,cAAN;AACAJ,MAAAA,eAAe;AACf;AACD,GALD;;AAOA,QAAMK,QAAQ,GAAGhC,OAAO,CAAE,MAAM;AAC/B,WAAOa,iBAAiB,CAAEU,IAAF,EAAQJ,SAAR,CAAxB;AACA,GAFuB,EAErB,CAAEI,IAAF,EAAQJ,SAAR,CAFqB,CAAxB;AAIA,SACC,cAAC,mBAAD,CAAqB,QAArB;AAA8B,IAAA,KAAK,EAAGM;AAAtC,KACC;AACC,IAAA,SAAS,EAAG7B,UAAU,CACrB,yCADqB,EAErB;AACC,mBAAaoC;AADd,KAFqB,CADvB;AAOC,IAAA,IAAI,EAAC,QAPN;AAQC,IAAA,OAAO,EAAGL,eARX;AASC,IAAA,SAAS,EAAGC,aATb;AAUC,IAAA,QAAQ,EAAC,GAVV;AAWC,kBAAaT,SAAb,aAAaA,SAAb,uBAAaA,SAAS,CAAEc,KAXzB;AAYC,IAAA,OAAO,EAAG,MAAMZ,YAAY,CAAE,IAAF,CAZ7B;AAaC,IAAA,MAAM,EAAG,MAAMA,YAAY,CAAE,KAAF;AAb5B,KAeC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,cAAC,aAAD;AACC,IAAA,KAAK,EAAGF,SAAH,aAAGA,SAAH,uBAAGA,SAAS,CAAEc,KADpB;AAEC,IAAA,SAAS,EAAGb;AAFb,IADD,CAfD,CADD,CADD;AA0BA;;AAED,SAASc,qBAAT,GAAiC;AAChC,QAAM;AAAEC,IAAAA;AAAF,MAAiBpC,SAAS,CAAIqC,MAAF,IAAc;AAC/C,WAAO;AACND,MAAAA,UAAU,EAAEC,MAAM,CACjBtC,SADiB,CAAN,CAEVuC,mDAFU;AADN,KAAP;AAKA,GAN+B,EAM7B,EAN6B,CAAhC;AAQA,QAAMC,kBAAkB,GAAGtC,OAAO,CAAE,MAAM;AACzC,WAAO,CACN;AACCiC,MAAAA,KAAK,EAAEzB,EAAE,CAAE,SAAF,CADV;AAECS,MAAAA,QAAQ,EAAE,EAFX;AAGCD,MAAAA,MAAM,EAAE;AAHT,KADM,EAMN,GAAGmB,UANG,CAAP;AAQA,GATiC,EAS/B,CAAEA,UAAF,CAT+B,CAAlC;AAWA,SACC,8BACC,cAAC,YAAD;AACC,IAAA,IAAI,EAAC,GADN;AAEC,IAAA,KAAK,EAAG3B,EAAE,CAAE,eAAF,CAFX;AAGC,IAAA,WAAW,EAAGA,EAAE,CACf,2DADe;AAHjB,IADD,EASC,cAAC,IAAD;AAAM,IAAA,IAAI,EAAC,OAAX;AAAmB,IAAA,YAAY;AAA/B,KACC,cAAC,QAAD,QACC,cAAC,IAAD;AAAM,IAAA,OAAO,EAAG;AAAhB,KACG8B,kBADH,aACGA,kBADH,uBACGA,kBAAkB,CAAEC,GAApB,CAAyB,CAAEpB,SAAF,EAAaqB,KAAb,KAC1B,cAAC,SAAD;AAAW,IAAA,GAAG,EAAGA,KAAjB;AAAyB,IAAA,SAAS,EAAGrB;AAArC,IADC,CADH,CADD,CADD,CATD,CADD;AAqBA;;AAED,eAAee,qBAAf","sourcesContent":["/**\n * External dependencies\n */\nimport { isEqual } from 'lodash';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useSelect } from '@wordpress/data';\nimport { useMemo, useContext, useState } from '@wordpress/element';\nimport { ENTER } from '@wordpress/keycodes';\nimport {\n\t__experimentalGrid as Grid,\n\tCard,\n\tCardBody,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { mergeBaseAndUserConfigs } from './global-styles-provider';\nimport { GlobalStylesContext } from './context';\nimport StylesPreview from './preview';\nimport ScreenHeader from './header';\n\nfunction compareVariations( a, b ) {\n\treturn isEqual( a.styles, b.styles ) && isEqual( a.settings, b.settings );\n}\n\nfunction Variation( { variation } ) {\n\tconst [ isFocused, setIsFocused ] = useState( false );\n\tconst { base, user, setUserConfig } = useContext( GlobalStylesContext );\n\tconst context = useMemo( () => {\n\t\treturn {\n\t\t\tuser: {\n\t\t\t\tsettings: variation.settings ?? {},\n\t\t\t\tstyles: variation.styles ?? {},\n\t\t\t},\n\t\t\tbase,\n\t\t\tmerged: mergeBaseAndUserConfigs( base, variation ),\n\t\t\tsetUserConfig: () => {},\n\t\t};\n\t}, [ variation, base ] );\n\n\tconst selectVariation = () => {\n\t\tsetUserConfig( () => {\n\t\t\treturn {\n\t\t\t\tsettings: variation.settings,\n\t\t\t\tstyles: variation.styles,\n\t\t\t};\n\t\t} );\n\t};\n\n\tconst selectOnEnter = ( event ) => {\n\t\tif ( event.keyCode === ENTER ) {\n\t\t\tevent.preventDefault();\n\t\t\tselectVariation();\n\t\t}\n\t};\n\n\tconst isActive = useMemo( () => {\n\t\treturn compareVariations( user, variation );\n\t}, [ user, variation ] );\n\n\treturn (\n\t\t<GlobalStylesContext.Provider value={ context }>\n\t\t\t<div\n\t\t\t\tclassName={ classnames(\n\t\t\t\t\t'edit-site-global-styles-variations_item',\n\t\t\t\t\t{\n\t\t\t\t\t\t'is-active': isActive,\n\t\t\t\t\t}\n\t\t\t\t) }\n\t\t\t\trole=\"button\"\n\t\t\t\tonClick={ selectVariation }\n\t\t\t\tonKeyDown={ selectOnEnter }\n\t\t\t\ttabIndex=\"0\"\n\t\t\t\taria-label={ variation?.title }\n\t\t\t\tonFocus={ () => setIsFocused( true ) }\n\t\t\t\tonBlur={ () => setIsFocused( false ) }\n\t\t\t>\n\t\t\t\t<div className=\"edit-site-global-styles-variations_item-preview\">\n\t\t\t\t\t<StylesPreview\n\t\t\t\t\t\tlabel={ variation?.title }\n\t\t\t\t\t\tisFocused={ isFocused }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</GlobalStylesContext.Provider>\n\t);\n}\n\nfunction ScreenStyleVariations() {\n\tconst { variations } = useSelect( ( select ) => {\n\t\treturn {\n\t\t\tvariations: select(\n\t\t\t\tcoreStore\n\t\t\t).__experimentalGetCurrentThemeGlobalStylesVariations(),\n\t\t};\n\t}, [] );\n\n\tconst withEmptyVariation = useMemo( () => {\n\t\treturn [\n\t\t\t{\n\t\t\t\ttitle: __( 'Default' ),\n\t\t\t\tsettings: {},\n\t\t\t\tstyles: {},\n\t\t\t},\n\t\t\t...variations,\n\t\t];\n\t}, [ variations ] );\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\tback=\"/\"\n\t\t\t\ttitle={ __( 'Browse styles' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Choose a different style combination for the theme styles'\n\t\t\t\t) }\n\t\t\t/>\n\n\t\t\t<Card size=\"small\" isBorderless>\n\t\t\t\t<CardBody>\n\t\t\t\t\t<Grid columns={ 2 }>\n\t\t\t\t\t\t{ withEmptyVariation?.map( ( variation, index ) => (\n\t\t\t\t\t\t\t<Variation key={ index } variation={ variation } />\n\t\t\t\t\t\t) ) }\n\t\t\t\t\t</Grid>\n\t\t\t\t</CardBody>\n\t\t\t</Card>\n\t\t</>\n\t);\n}\n\nexport default ScreenStyleVariations;\n"]}

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

@@ -773,20 +773,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 +1547,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 +1624,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;