@wordpress/edit-site 5.12.8 → 5.12.9

package/build-module/components/page-patterns/patterns-list.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/page-patterns/patterns-list.js"],"names":["useState","useDeferredValue","useId","SearchControl","__experimentalVStack","VStack","Flex","FlexBlock","__experimentalToggleGroupControl","ToggleGroupControl","__experimentalToggleGroupControlOption","ToggleGroupControlOption","__experimentalHeading","Heading","__experimentalText","Text","__","isRTL","chevronLeft","chevronRight","privateApis","routerPrivateApis","useViewportMatch","useAsyncList","PatternsHeader","Grid","NoPatterns","usePatterns","SidebarButton","useDebouncedInput","unlock","SYNC_TYPES","USER_PATTERN_CATEGORY","useLocation","useHistory","SYNC_FILTERS","all","full","unsynced","SYNC_DESCRIPTIONS","PatternsList","categoryId","type","location","history","isMobileViewport","filterValue","setFilterValue","delayedFilterValue","deferredFilterValue","syncFilter","setSyncFilter","deferredSyncedFilter","patterns","isResolving","search","syncStatus","undefined","id","titleId","descriptionId","hasPatterns","length","title","description","shownPatterns","state","backPath","back","push","path","value","Object","entries","map","key","label"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState, useDeferredValue, useId } from '@wordpress/element';\nimport {\n\tSearchControl,\n\t__experimentalVStack as VStack,\n\tFlex,\n\tFlexBlock,\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOption as ToggleGroupControlOption,\n\t__experimentalHeading as Heading,\n\t__experimentalText as Text,\n} from '@wordpress/components';\nimport { __, isRTL } from '@wordpress/i18n';\nimport { chevronLeft, chevronRight } from '@wordpress/icons';\nimport { privateApis as routerPrivateApis } from '@wordpress/router';\nimport { useViewportMatch, useAsyncList } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport PatternsHeader from './header';\nimport Grid from './grid';\nimport NoPatterns from './no-patterns';\nimport usePatterns from './use-patterns';\nimport SidebarButton from '../sidebar-button';\nimport useDebouncedInput from '../../utils/use-debounced-input';\nimport { unlock } from '../../lock-unlock';\nimport { SYNC_TYPES, USER_PATTERN_CATEGORY } from './utils';\n\nconst { useLocation, useHistory } = unlock( routerPrivateApis );\n\nconst SYNC_FILTERS = {\n\tall: __( 'All' ),\n\t[ SYNC_TYPES.full ]: __( 'Synced' ),\n\t[ SYNC_TYPES.unsynced ]: __( 'Standard' ),\n};\n\nconst SYNC_DESCRIPTIONS = {\n\tall: '',\n\t[ SYNC_TYPES.full ]: __(\n\t\t'Patterns that are kept in sync across the site.'\n\t),\n\t[ SYNC_TYPES.unsynced ]: __(\n\t\t'Patterns that can be changed freely without affecting the site.'\n\t),\n};\n\nexport default function PatternsList( { categoryId, type } ) {\n\tconst location = useLocation();\n\tconst history = useHistory();\n\tconst isMobileViewport = useViewportMatch( 'medium', '<' );\n\tconst [ filterValue, setFilterValue, delayedFilterValue ] =\n\t\tuseDebouncedInput( '' );\n\tconst deferredFilterValue = useDeferredValue( delayedFilterValue );\n\n\tconst [ syncFilter, setSyncFilter ] = useState( 'all' );\n\tconst deferredSyncedFilter = useDeferredValue( syncFilter );\n\tconst { patterns, isResolving } = usePatterns( type, categoryId, {\n\t\tsearch: deferredFilterValue,\n\t\tsyncStatus:\n\t\t\tdeferredSyncedFilter === 'all' ? undefined : deferredSyncedFilter,\n\t} );\n\n\tconst id = useId();\n\tconst titleId = `${ id }-title`;\n\tconst descriptionId = `${ id }-description`;\n\n\tconst hasPatterns = patterns.length;\n\tconst title = SYNC_FILTERS[ syncFilter ];\n\tconst description = SYNC_DESCRIPTIONS[ syncFilter ];\n\tconst shownPatterns = useAsyncList( patterns );\n\n\treturn (\n\t\t<VStack spacing={ 6 }>\n\t\t\t<PatternsHeader\n\t\t\t\tcategoryId={ categoryId }\n\t\t\t\ttype={ type }\n\t\t\t\ttitleId={ titleId }\n\t\t\t\tdescriptionId={ descriptionId }\n\t\t\t/>\n\n\t\t\t<Flex alignment=\"stretch\" wrap>\n\t\t\t\t{ isMobileViewport && (\n\t\t\t\t\t<SidebarButton\n\t\t\t\t\t\ticon={ isRTL() ? chevronRight : chevronLeft }\n\t\t\t\t\t\tlabel={ __( 'Back' ) }\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t// Go back in history if we came from the Patterns page.\n\t\t\t\t\t\t\t// Otherwise push a stack onto the history.\n\t\t\t\t\t\t\tif ( location.state?.backPath === '/patterns' ) {\n\t\t\t\t\t\t\t\thistory.back();\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\thistory.push( { path: '/patterns' } );\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t<FlexBlock className=\"edit-site-patterns__search-block\">\n\t\t\t\t\t<SearchControl\n\t\t\t\t\t\tclassName=\"edit-site-patterns__search\"\n\t\t\t\t\t\tonChange={ ( value ) => setFilterValue( value ) }\n\t\t\t\t\t\tplaceholder={ __( 'Search patterns' ) }\n\t\t\t\t\t\tlabel={ __( 'Search patterns' ) }\n\t\t\t\t\t\tvalue={ filterValue }\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t/>\n\t\t\t\t</FlexBlock>\n\t\t\t\t{ categoryId === USER_PATTERN_CATEGORY && (\n\t\t\t\t\t<ToggleGroupControl\n\t\t\t\t\t\tclassName=\"edit-site-patterns__sync-status-filter\"\n\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\tlabel={ __( 'Filter by sync status' ) }\n\t\t\t\t\t\tvalue={ syncFilter }\n\t\t\t\t\t\tisBlock\n\t\t\t\t\t\tonChange={ ( value ) => setSyncFilter( value ) }\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t>\n\t\t\t\t\t\t{ Object.entries( SYNC_FILTERS ).map(\n\t\t\t\t\t\t\t( [ key, label ] ) => (\n\t\t\t\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\t\t\t\tclassName=\"edit-site-patterns__sync-status-filter-option\"\n\t\t\t\t\t\t\t\t\tkey={ key }\n\t\t\t\t\t\t\t\t\tvalue={ key }\n\t\t\t\t\t\t\t\t\tlabel={ label }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t) }\n\t\t\t\t\t</ToggleGroupControl>\n\t\t\t\t) }\n\t\t\t</Flex>\n\t\t\t{ syncFilter !== 'all' && (\n\t\t\t\t<VStack className=\"edit-site-patterns__section-header\">\n\t\t\t\t\t<Heading as=\"h3\" level={ 4 } id={ titleId }>\n\t\t\t\t\t\t{ title }\n\t\t\t\t\t</Heading>\n\t\t\t\t\t{ description ? (\n\t\t\t\t\t\t<Text variant=\"muted\" as=\"p\" id={ descriptionId }>\n\t\t\t\t\t\t\t{ description }\n\t\t\t\t\t\t</Text>\n\t\t\t\t\t) : null }\n\t\t\t\t</VStack>\n\t\t\t) }\n\t\t\t{ hasPatterns && (\n\t\t\t\t<Grid\n\t\t\t\t\tcategoryId={ categoryId }\n\t\t\t\t\titems={ shownPatterns }\n\t\t\t\t\taria-labelledby={ titleId }\n\t\t\t\t\taria-describedby={ descriptionId }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ ! isResolving && ! hasPatterns && <NoPatterns /> }\n\t\t</VStack>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/page-patterns/patterns-list.js"],"names":["useState","useDeferredValue","useId","SearchControl","__experimentalVStack","VStack","Flex","FlexBlock","__experimentalToggleGroupControl","ToggleGroupControl","__experimentalToggleGroupControlOption","ToggleGroupControlOption","__experimentalHeading","Heading","__experimentalText","Text","__","isRTL","chevronLeft","chevronRight","privateApis","routerPrivateApis","useViewportMatch","PatternsHeader","Grid","NoPatterns","usePatterns","SidebarButton","useDebouncedInput","unlock","SYNC_TYPES","USER_PATTERN_CATEGORY","useLocation","useHistory","SYNC_FILTERS","all","full","unsynced","SYNC_DESCRIPTIONS","PatternsList","categoryId","type","location","history","isMobileViewport","filterValue","setFilterValue","delayedFilterValue","deferredFilterValue","syncFilter","setSyncFilter","deferredSyncedFilter","patterns","isResolving","search","syncStatus","undefined","id","titleId","descriptionId","hasPatterns","length","title","description","state","backPath","back","push","path","value","Object","entries","map","key","label"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState, useDeferredValue, useId } from '@wordpress/element';\nimport {\n\tSearchControl,\n\t__experimentalVStack as VStack,\n\tFlex,\n\tFlexBlock,\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOption as ToggleGroupControlOption,\n\t__experimentalHeading as Heading,\n\t__experimentalText as Text,\n} from '@wordpress/components';\nimport { __, isRTL } from '@wordpress/i18n';\nimport { chevronLeft, chevronRight } from '@wordpress/icons';\nimport { privateApis as routerPrivateApis } from '@wordpress/router';\nimport { useViewportMatch } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport PatternsHeader from './header';\nimport Grid from './grid';\nimport NoPatterns from './no-patterns';\nimport usePatterns from './use-patterns';\nimport SidebarButton from '../sidebar-button';\nimport useDebouncedInput from '../../utils/use-debounced-input';\nimport { unlock } from '../../lock-unlock';\nimport { SYNC_TYPES, USER_PATTERN_CATEGORY } from './utils';\n\nconst { useLocation, useHistory } = unlock( routerPrivateApis );\n\nconst SYNC_FILTERS = {\n\tall: __( 'All' ),\n\t[ SYNC_TYPES.full ]: __( 'Synced' ),\n\t[ SYNC_TYPES.unsynced ]: __( 'Standard' ),\n};\n\nconst SYNC_DESCRIPTIONS = {\n\tall: '',\n\t[ SYNC_TYPES.full ]: __(\n\t\t'Patterns that are kept in sync across the site.'\n\t),\n\t[ SYNC_TYPES.unsynced ]: __(\n\t\t'Patterns that can be changed freely without affecting the site.'\n\t),\n};\n\nexport default function PatternsList( { categoryId, type } ) {\n\tconst location = useLocation();\n\tconst history = useHistory();\n\tconst isMobileViewport = useViewportMatch( 'medium', '<' );\n\tconst [ filterValue, setFilterValue, delayedFilterValue ] =\n\t\tuseDebouncedInput( '' );\n\tconst deferredFilterValue = useDeferredValue( delayedFilterValue );\n\n\tconst [ syncFilter, setSyncFilter ] = useState( 'all' );\n\tconst deferredSyncedFilter = useDeferredValue( syncFilter );\n\tconst { patterns, isResolving } = usePatterns( type, categoryId, {\n\t\tsearch: deferredFilterValue,\n\t\tsyncStatus:\n\t\t\tdeferredSyncedFilter === 'all' ? undefined : deferredSyncedFilter,\n\t} );\n\n\tconst id = useId();\n\tconst titleId = `${ id }-title`;\n\tconst descriptionId = `${ id }-description`;\n\n\tconst hasPatterns = patterns.length;\n\tconst title = SYNC_FILTERS[ syncFilter ];\n\tconst description = SYNC_DESCRIPTIONS[ syncFilter ];\n\n\treturn (\n\t\t<VStack spacing={ 6 }>\n\t\t\t<PatternsHeader\n\t\t\t\tcategoryId={ categoryId }\n\t\t\t\ttype={ type }\n\t\t\t\ttitleId={ titleId }\n\t\t\t\tdescriptionId={ descriptionId }\n\t\t\t/>\n\n\t\t\t<Flex alignment=\"stretch\" wrap>\n\t\t\t\t{ isMobileViewport && (\n\t\t\t\t\t<SidebarButton\n\t\t\t\t\t\ticon={ isRTL() ? chevronRight : chevronLeft }\n\t\t\t\t\t\tlabel={ __( 'Back' ) }\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t// Go back in history if we came from the Patterns page.\n\t\t\t\t\t\t\t// Otherwise push a stack onto the history.\n\t\t\t\t\t\t\tif ( location.state?.backPath === '/patterns' ) {\n\t\t\t\t\t\t\t\thistory.back();\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\thistory.push( { path: '/patterns' } );\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t<FlexBlock className=\"edit-site-patterns__search-block\">\n\t\t\t\t\t<SearchControl\n\t\t\t\t\t\tclassName=\"edit-site-patterns__search\"\n\t\t\t\t\t\tonChange={ ( value ) => setFilterValue( value ) }\n\t\t\t\t\t\tplaceholder={ __( 'Search patterns' ) }\n\t\t\t\t\t\tlabel={ __( 'Search patterns' ) }\n\t\t\t\t\t\tvalue={ filterValue }\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t/>\n\t\t\t\t</FlexBlock>\n\t\t\t\t{ categoryId === USER_PATTERN_CATEGORY && (\n\t\t\t\t\t<ToggleGroupControl\n\t\t\t\t\t\tclassName=\"edit-site-patterns__sync-status-filter\"\n\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\tlabel={ __( 'Filter by sync status' ) }\n\t\t\t\t\t\tvalue={ syncFilter }\n\t\t\t\t\t\tisBlock\n\t\t\t\t\t\tonChange={ ( value ) => setSyncFilter( value ) }\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t>\n\t\t\t\t\t\t{ Object.entries( SYNC_FILTERS ).map(\n\t\t\t\t\t\t\t( [ key, label ] ) => (\n\t\t\t\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\t\t\t\tclassName=\"edit-site-patterns__sync-status-filter-option\"\n\t\t\t\t\t\t\t\t\tkey={ key }\n\t\t\t\t\t\t\t\t\tvalue={ key }\n\t\t\t\t\t\t\t\t\tlabel={ label }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t) }\n\t\t\t\t\t</ToggleGroupControl>\n\t\t\t\t) }\n\t\t\t</Flex>\n\t\t\t{ syncFilter !== 'all' && (\n\t\t\t\t<VStack className=\"edit-site-patterns__section-header\">\n\t\t\t\t\t<Heading as=\"h3\" level={ 5 } id={ titleId }>\n\t\t\t\t\t\t{ title }\n\t\t\t\t\t</Heading>\n\t\t\t\t\t{ description ? (\n\t\t\t\t\t\t<Text variant=\"muted\" as=\"p\" id={ descriptionId }>\n\t\t\t\t\t\t\t{ description }\n\t\t\t\t\t\t</Text>\n\t\t\t\t\t) : null }\n\t\t\t\t</VStack>\n\t\t\t) }\n\t\t\t{ hasPatterns && (\n\t\t\t\t<Grid\n\t\t\t\t\tcategoryId={ categoryId }\n\t\t\t\t\titems={ patterns }\n\t\t\t\t\taria-labelledby={ titleId }\n\t\t\t\t\taria-describedby={ descriptionId }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ ! isResolving && ! hasPatterns && <NoPatterns /> }\n\t\t</VStack>\n\t);\n}\n"]}

package/build-module/components/page-template-parts/add-new-template-part.js

@@ -0,0 +1,58 @@
+import { createElement, Fragment } from "@wordpress/element";
+
+/**
+ * WordPress dependencies
+ */
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { useState } from '@wordpress/element';
+import { Button } from '@wordpress/components';
+/**
+ * Internal dependencies
+ */
+
+import { unlock } from '../../lock-unlock';
+import { store as editSiteStore } from '../../store';
+import CreateTemplatePartModal from '../create-template-part-modal';
+const {
+  useHistory
+} = unlock(routerPrivateApis);
+export default function AddNewTemplatePart() {
+  const {
+    canCreate,
+    postType
+  } = useSelect(select => {
+    const {
+      supportsTemplatePartsMode
+    } = select(editSiteStore).getSettings();
+    return {
+      canCreate: !supportsTemplatePartsMode,
+      postType: select(coreStore).getPostType('wp_template_part')
+    };
+  }, []);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const history = useHistory();
+
+  if (!canCreate || !postType) {
+    return null;
+  }
+
+  return createElement(Fragment, null, createElement(Button, {
+    variant: "primary",
+    onClick: () => setIsModalOpen(true)
+  }, postType.labels.add_new_item), isModalOpen && createElement(CreateTemplatePartModal, {
+    closeModal: () => setIsModalOpen(false),
+    blocks: [],
+    onCreate: templatePart => {
+      setIsModalOpen(false);
+      history.push({
+        postId: templatePart.id,
+        postType: 'wp_template_part',
+        canvas: 'edit'
+      });
+    },
+    onError: () => setIsModalOpen(false)
+  }));
+}
+//# sourceMappingURL=add-new-template-part.js.map

package/build-module/components/page-template-parts/add-new-template-part.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/edit-site/src/components/page-template-parts/add-new-template-part.js"],"names":["privateApis","routerPrivateApis","useSelect","store","coreStore","useState","Button","unlock","editSiteStore","CreateTemplatePartModal","useHistory","AddNewTemplatePart","canCreate","postType","select","supportsTemplatePartsMode","getSettings","getPostType","isModalOpen","setIsModalOpen","history","labels","add_new_item","templatePart","push","postId","id","canvas"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,WAAW,IAAIC,iBAAxB,QAAiD,mBAAjD;AACA,SAASC,SAAT,QAA0B,iBAA1B;AACA,SAASC,KAAK,IAAIC,SAAlB,QAAmC,sBAAnC;AACA,SAASC,QAAT,QAAyB,oBAAzB;AACA,SAASC,MAAT,QAAuB,uBAAvB;AAEA;AACA;AACA;;AACA,SAASC,MAAT,QAAuB,mBAAvB;AACA,SAASJ,KAAK,IAAIK,aAAlB,QAAuC,aAAvC;AACA,OAAOC,uBAAP,MAAoC,+BAApC;AAEA,MAAM;AAAEC,EAAAA;AAAF,IAAiBH,MAAM,CAAEN,iBAAF,CAA7B;AAEA,eAAe,SAASU,kBAAT,GAA8B;AAC5C,QAAM;AAAEC,IAAAA,SAAF;AAAaC,IAAAA;AAAb,MAA0BX,SAAS,CAAIY,MAAF,IAAc;AACxD,UAAM;AAAEC,MAAAA;AAAF,QACLD,MAAM,CAAEN,aAAF,CAAN,CAAwBQ,WAAxB,EADD;AAEA,WAAO;AACNJ,MAAAA,SAAS,EAAE,CAAEG,yBADP;AAENF,MAAAA,QAAQ,EAAEC,MAAM,CAAEV,SAAF,CAAN,CAAoBa,WAApB,CAAiC,kBAAjC;AAFJ,KAAP;AAIA,GAPwC,EAOtC,EAPsC,CAAzC;AAQA,QAAM,CAAEC,WAAF,EAAeC,cAAf,IAAkCd,QAAQ,CAAE,KAAF,CAAhD;AACA,QAAMe,OAAO,GAAGV,UAAU,EAA1B;;AAEA,MAAK,CAAEE,SAAF,IAAe,CAAEC,QAAtB,EAAiC;AAChC,WAAO,IAAP;AACA;;AAED,SACC,8BACC,cAAC,MAAD;AAAQ,IAAA,OAAO,EAAC,SAAhB;AAA0B,IAAA,OAAO,EAAG,MAAMM,cAAc,CAAE,IAAF;AAAxD,KACGN,QAAQ,CAACQ,MAAT,CAAgBC,YADnB,CADD,EAIGJ,WAAW,IACZ,cAAC,uBAAD;AACC,IAAA,UAAU,EAAG,MAAMC,cAAc,CAAE,KAAF,CADlC;AAEC,IAAA,MAAM,EAAG,EAFV;AAGC,IAAA,QAAQ,EAAKI,YAAF,IAAoB;AAC9BJ,MAAAA,cAAc,CAAE,KAAF,CAAd;AACAC,MAAAA,OAAO,CAACI,IAAR,CAAc;AACbC,QAAAA,MAAM,EAAEF,YAAY,CAACG,EADR;AAEbb,QAAAA,QAAQ,EAAE,kBAFG;AAGbc,QAAAA,MAAM,EAAE;AAHK,OAAd;AAKA,KAVF;AAWC,IAAA,OAAO,EAAG,MAAMR,cAAc,CAAE,KAAF;AAX/B,IALF,CADD;AAsBA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { privateApis as routerPrivateApis } from '@wordpress/router';\nimport { useSelect } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useState } from '@wordpress/element';\nimport { Button } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport { store as editSiteStore } from '../../store';\nimport CreateTemplatePartModal from '../create-template-part-modal';\n\nconst { useHistory } = unlock( routerPrivateApis );\n\nexport default function AddNewTemplatePart() {\n\tconst { canCreate, postType } = useSelect( ( select ) => {\n\t\tconst { supportsTemplatePartsMode } =\n\t\t\tselect( editSiteStore ).getSettings();\n\t\treturn {\n\t\t\tcanCreate: ! supportsTemplatePartsMode,\n\t\t\tpostType: select( coreStore ).getPostType( 'wp_template_part' ),\n\t\t};\n\t}, [] );\n\tconst [ isModalOpen, setIsModalOpen ] = useState( false );\n\tconst history = useHistory();\n\n\tif ( ! canCreate || ! postType ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<Button variant=\"primary\" onClick={ () => setIsModalOpen( true ) }>\n\t\t\t\t{ postType.labels.add_new_item }\n\t\t\t</Button>\n\t\t\t{ isModalOpen && (\n\t\t\t\t<CreateTemplatePartModal\n\t\t\t\t\tcloseModal={ () => setIsModalOpen( false ) }\n\t\t\t\t\tblocks={ [] }\n\t\t\t\t\tonCreate={ ( templatePart ) => {\n\t\t\t\t\t\tsetIsModalOpen( false );\n\t\t\t\t\t\thistory.push( {\n\t\t\t\t\t\t\tpostId: templatePart.id,\n\t\t\t\t\t\t\tpostType: 'wp_template_part',\n\t\t\t\t\t\t\tcanvas: 'edit',\n\t\t\t\t\t\t} );\n\t\t\t\t\t} }\n\t\t\t\t\tonError={ () => setIsModalOpen( false ) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n"]}

package/build-module/components/page-template-parts/index.js

@@ -5,8 +5,7 @@ import { createElement } from "@wordpress/element";
  */
 import { VisuallyHidden, __experimentalHeading as Heading, __experimentalVStack as VStack } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useSelect } from '@wordpress/data';
-import { store as coreStore, useEntityRecords } from '@wordpress/core-data';
+import { useEntityRecords } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
 /**
  * Internal dependencies
@@ -17,25 +16,13 @@ import Table from '../table';
 import Link from '../routes/link';
 import AddedBy from '../list/added-by';
 import TemplateActions from '../template-actions';
-import AddNewTemplate from '../add-new-template';
-import { store as editSiteStore } from '../../store';
+import AddNewTemplatePart from './add-new-template-part';
 export default function PageTemplateParts() {
   const {
     records: templateParts
   } = useEntityRecords('postType', 'wp_template_part', {
     per_page: -1
   });
-  const {
-    canCreate
-  } = useSelect(select => {
-    const {
-      supportsTemplatePartsMode
-    } = select(editSiteStore).getSettings();
-    return {
-      postType: select(coreStore).getPostType('wp_template_part'),
-      canCreate: !supportsTemplatePartsMode
-    };
-  });
   const columns = [{
     header: __('Template Part'),
     cell: templatePart => createElement(VStack, null, createElement(Heading, {
@@ -67,13 +54,7 @@ export default function PageTemplateParts() {
   }];
   return createElement(Page, {
     title: __('Template Parts'),
-    actions: canCreate && createElement(AddNewTemplate, {
-      templateType: 'wp_template_part',
-      showIcon: false,
-      toggleProps: {
-        variant: 'primary'
-      }
-    })
+    actions: createElement(AddNewTemplatePart, null)
   }, templateParts && createElement(Table, {
     data: templateParts,
     columns: columns

package/build-module/components/page-template-parts/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/page-template-parts/index.js"],"names":["VisuallyHidden","__experimentalHeading","Heading","__experimentalVStack","VStack","__","useSelect","store","coreStore","useEntityRecords","decodeEntities","Page","Table","Link","AddedBy","TemplateActions","AddNewTemplate","editSiteStore","PageTemplateParts","records","templateParts","per_page","canCreate","select","supportsTemplatePartsMode","getSettings","postType","getPostType","columns","header","cell","templatePart","postId","id","type","canvas","backPath","title","rendered","slug","maxWidth","variant"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tVisuallyHidden,\n\t__experimentalHeading as Heading,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useSelect } from '@wordpress/data';\nimport { store as coreStore, useEntityRecords } from '@wordpress/core-data';\nimport { decodeEntities } from '@wordpress/html-entities';\n\n/**\n * Internal dependencies\n */\nimport Page from '../page';\nimport Table from '../table';\nimport Link from '../routes/link';\nimport AddedBy from '../list/added-by';\nimport TemplateActions from '../template-actions';\nimport AddNewTemplate from '../add-new-template';\nimport { store as editSiteStore } from '../../store';\n\nexport default function PageTemplateParts() {\n\tconst { records: templateParts } = useEntityRecords(\n\t\t'postType',\n\t\t'wp_template_part',\n\t\t{\n\t\t\tper_page: -1,\n\t\t}\n\t);\n\n\tconst { canCreate } = useSelect( ( select ) => {\n\t\tconst { supportsTemplatePartsMode } =\n\t\t\tselect( editSiteStore ).getSettings();\n\t\treturn {\n\t\t\tpostType: select( coreStore ).getPostType( 'wp_template_part' ),\n\t\t\tcanCreate: ! supportsTemplatePartsMode,\n\t\t};\n\t} );\n\n\tconst columns = [\n\t\t{\n\t\t\theader: __( 'Template Part' ),\n\t\t\tcell: ( templatePart ) => (\n\t\t\t\t<VStack>\n\t\t\t\t\t<Heading as=\"h3\" level={ 5 }>\n\t\t\t\t\t\t<Link\n\t\t\t\t\t\t\tparams={ {\n\t\t\t\t\t\t\t\tpostId: templatePart.id,\n\t\t\t\t\t\t\t\tpostType: templatePart.type,\n\t\t\t\t\t\t\t\tcanvas: 'view',\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tstate={ { backPath: '/wp_template_part/all' } }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ decodeEntities(\n\t\t\t\t\t\t\t\ttemplatePart.title?.rendered ||\n\t\t\t\t\t\t\t\t\ttemplatePart.slug\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</Link>\n\t\t\t\t\t</Heading>\n\t\t\t\t</VStack>\n\t\t\t),\n\t\t\tmaxWidth: 400,\n\t\t},\n\t\t{\n\t\t\theader: __( 'Added by' ),\n\t\t\tcell: ( templatePart ) => (\n\t\t\t\t<AddedBy\n\t\t\t\t\tpostType={ templatePart.type }\n\t\t\t\t\tpostId={ templatePart.id }\n\t\t\t\t/>\n\t\t\t),\n\t\t},\n\t\t{\n\t\t\theader: <VisuallyHidden>{ __( 'Actions' ) }</VisuallyHidden>,\n\t\t\tcell: ( templatePart ) => (\n\t\t\t\t<TemplateActions\n\t\t\t\t\tpostType={ templatePart.type }\n\t\t\t\t\tpostId={ templatePart.id }\n\t\t\t\t/>\n\t\t\t),\n\t\t},\n\t];\n\n\treturn (\n\t\t<Page\n\t\t\ttitle={ __( 'Template Parts' ) }\n\t\t\tactions={\n\t\t\t\tcanCreate && (\n\t\t\t\t\t<AddNewTemplate\n\t\t\t\t\t\ttemplateType={ 'wp_template_part' }\n\t\t\t\t\t\tshowIcon={ false }\n\t\t\t\t\t\ttoggleProps={ { variant: 'primary' } }\n\t\t\t\t\t/>\n\t\t\t\t)\n\t\t\t}\n\t\t>\n\t\t\t{ templateParts && (\n\t\t\t\t<Table data={ templateParts } columns={ columns } />\n\t\t\t) }\n\t\t</Page>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/page-template-parts/index.js"],"names":["VisuallyHidden","__experimentalHeading","Heading","__experimentalVStack","VStack","__","useEntityRecords","decodeEntities","Page","Table","Link","AddedBy","TemplateActions","AddNewTemplatePart","PageTemplateParts","records","templateParts","per_page","columns","header","cell","templatePart","postId","id","postType","type","canvas","backPath","title","rendered","slug","maxWidth"],"mappings":";;AAAA;AACA;AACA;AACA,SACCA,cADD,EAECC,qBAAqB,IAAIC,OAF1B,EAGCC,oBAAoB,IAAIC,MAHzB,QAIO,uBAJP;AAKA,SAASC,EAAT,QAAmB,iBAAnB;AACA,SAASC,gBAAT,QAAiC,sBAAjC;AACA,SAASC,cAAT,QAA+B,0BAA/B;AAEA;AACA;AACA;;AACA,OAAOC,IAAP,MAAiB,SAAjB;AACA,OAAOC,KAAP,MAAkB,UAAlB;AACA,OAAOC,IAAP,MAAiB,gBAAjB;AACA,OAAOC,OAAP,MAAoB,kBAApB;AACA,OAAOC,eAAP,MAA4B,qBAA5B;AACA,OAAOC,kBAAP,MAA+B,yBAA/B;AAEA,eAAe,SAASC,iBAAT,GAA6B;AAC3C,QAAM;AAAEC,IAAAA,OAAO,EAAEC;AAAX,MAA6BV,gBAAgB,CAClD,UADkD,EAElD,kBAFkD,EAGlD;AACCW,IAAAA,QAAQ,EAAE,CAAC;AADZ,GAHkD,CAAnD;AAQA,QAAMC,OAAO,GAAG,CACf;AACCC,IAAAA,MAAM,EAAEd,EAAE,CAAE,eAAF,CADX;AAECe,IAAAA,IAAI,EAAIC,YAAF,IACL,cAAC,MAAD,QACC,cAAC,OAAD;AAAS,MAAA,EAAE,EAAC,IAAZ;AAAiB,MAAA,KAAK,EAAG;AAAzB,OACC,cAAC,IAAD;AACC,MAAA,MAAM,EAAG;AACRC,QAAAA,MAAM,EAAED,YAAY,CAACE,EADb;AAERC,QAAAA,QAAQ,EAAEH,YAAY,CAACI,IAFf;AAGRC,QAAAA,MAAM,EAAE;AAHA,OADV;AAMC,MAAA,KAAK,EAAG;AAAEC,QAAAA,QAAQ,EAAE;AAAZ;AANT,OAQGpB,cAAc,CACfc,YAAY,CAACO,KAAb,EAAoBC,QAApB,IACCR,YAAY,CAACS,IAFC,CARjB,CADD,CADD,CAHF;AAqBCC,IAAAA,QAAQ,EAAE;AArBX,GADe,EAwBf;AACCZ,IAAAA,MAAM,EAAEd,EAAE,CAAE,UAAF,CADX;AAECe,IAAAA,IAAI,EAAIC,YAAF,IACL,cAAC,OAAD;AACC,MAAA,QAAQ,EAAGA,YAAY,CAACI,IADzB;AAEC,MAAA,MAAM,EAAGJ,YAAY,CAACE;AAFvB;AAHF,GAxBe,EAiCf;AACCJ,IAAAA,MAAM,EAAE,cAAC,cAAD,QAAkBd,EAAE,CAAE,SAAF,CAApB,CADT;AAECe,IAAAA,IAAI,EAAIC,YAAF,IACL,cAAC,eAAD;AACC,MAAA,QAAQ,EAAGA,YAAY,CAACI,IADzB;AAEC,MAAA,MAAM,EAAGJ,YAAY,CAACE;AAFvB;AAHF,GAjCe,CAAhB;AA4CA,SACC,cAAC,IAAD;AACC,IAAA,KAAK,EAAGlB,EAAE,CAAE,gBAAF,CADX;AAEC,IAAA,OAAO,EAAG,cAAC,kBAAD;AAFX,KAIGW,aAAa,IACd,cAAC,KAAD;AAAO,IAAA,IAAI,EAAGA,aAAd;AAA8B,IAAA,OAAO,EAAGE;AAAxC,IALF,CADD;AAUA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tVisuallyHidden,\n\t__experimentalHeading as Heading,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useEntityRecords } from '@wordpress/core-data';\nimport { decodeEntities } from '@wordpress/html-entities';\n\n/**\n * Internal dependencies\n */\nimport Page from '../page';\nimport Table from '../table';\nimport Link from '../routes/link';\nimport AddedBy from '../list/added-by';\nimport TemplateActions from '../template-actions';\nimport AddNewTemplatePart from './add-new-template-part';\n\nexport default function PageTemplateParts() {\n\tconst { records: templateParts } = useEntityRecords(\n\t\t'postType',\n\t\t'wp_template_part',\n\t\t{\n\t\t\tper_page: -1,\n\t\t}\n\t);\n\n\tconst columns = [\n\t\t{\n\t\t\theader: __( 'Template Part' ),\n\t\t\tcell: ( templatePart ) => (\n\t\t\t\t<VStack>\n\t\t\t\t\t<Heading as=\"h3\" level={ 5 }>\n\t\t\t\t\t\t<Link\n\t\t\t\t\t\t\tparams={ {\n\t\t\t\t\t\t\t\tpostId: templatePart.id,\n\t\t\t\t\t\t\t\tpostType: templatePart.type,\n\t\t\t\t\t\t\t\tcanvas: 'view',\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tstate={ { backPath: '/wp_template_part/all' } }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ decodeEntities(\n\t\t\t\t\t\t\t\ttemplatePart.title?.rendered ||\n\t\t\t\t\t\t\t\t\ttemplatePart.slug\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</Link>\n\t\t\t\t\t</Heading>\n\t\t\t\t</VStack>\n\t\t\t),\n\t\t\tmaxWidth: 400,\n\t\t},\n\t\t{\n\t\t\theader: __( 'Added by' ),\n\t\t\tcell: ( templatePart ) => (\n\t\t\t\t<AddedBy\n\t\t\t\t\tpostType={ templatePart.type }\n\t\t\t\t\tpostId={ templatePart.id }\n\t\t\t\t/>\n\t\t\t),\n\t\t},\n\t\t{\n\t\t\theader: <VisuallyHidden>{ __( 'Actions' ) }</VisuallyHidden>,\n\t\t\tcell: ( templatePart ) => (\n\t\t\t\t<TemplateActions\n\t\t\t\t\tpostType={ templatePart.type }\n\t\t\t\t\tpostId={ templatePart.id }\n\t\t\t\t/>\n\t\t\t),\n\t\t},\n\t];\n\n\treturn (\n\t\t<Page\n\t\t\ttitle={ __( 'Template Parts' ) }\n\t\t\tactions={ <AddNewTemplatePart /> }\n\t\t>\n\t\t\t{ templateParts && (\n\t\t\t\t<Table data={ templateParts } columns={ columns } />\n\t\t\t) }\n\t\t</Page>\n\t);\n}\n"]}

package/build-module/components/resizable-frame/index.js

@@ -1,4 +1,4 @@
-import { createElement } from "@wordpress/element";
+import { createElement, Fragment } from "@wordpress/element";
 
 /**
  * External dependencies
@@ -9,8 +9,10 @@ import classnames from 'classnames';
  */
 
 import { useState, useRef, useEffect } from '@wordpress/element';
-import { ResizableBox, __unstableMotion as motion } from '@wordpress/components';
-import { useDispatch } from '@wordpress/data';
+import { ResizableBox, Tooltip, __unstableMotion as motion } from '@wordpress/components';
+import { useInstanceId } from '@wordpress/compose';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
@@ -30,7 +32,7 @@ const HANDLE_STYLES_OVERRIDE = {
   left: undefined
 }; // The minimum width of the frame (in px) while resizing.
 
-const FRAME_MIN_WIDTH = 340; // The reference width of the frame (in px) used to calculate the aspect ratio.
+const FRAME_MIN_WIDTH = 320; // The reference width of the frame (in px) used to calculate the aspect ratio.
 
 const FRAME_REFERENCE_WIDTH = 1300; // 9 : 19.5 is the target aspect ratio enforced (when possible) while resizing.
 
@@ -38,7 +40,12 @@ const FRAME_TARGET_ASPECT_RATIO = 9 / 19.5; // The minimum distance (in px) betw
 // viewport's edge. If the frame is resized to be closer to the viewport's edge
 // than this distance, then "canvas mode" will be enabled.
 
-const SNAP_TO_EDIT_CANVAS_MODE_THRESHOLD = 200;
+const SNAP_TO_EDIT_CANVAS_MODE_THRESHOLD = 200; // Default size for the `frameSize` state.
+
+const INITIAL_FRAME_SIZE = {
+  width: '100%',
+  height: '100%'
+};
 
 function calculateNewHeight(width, initialAspectRatio) {
   const lerp = (a, b, amount) => {
@@ -60,16 +67,14 @@ function ResizableFrame({
   oversizedClassName,
   innerContentStyle
 }) {
-  const [frameSize, setFrameSize] = useState({
-    width: '100%',
-    height: '100%'
-  }); // The width of the resizable frame when a new resize gesture starts.
+  const [frameSize, setFrameSize] = useState(INITIAL_FRAME_SIZE); // The width of the resizable frame when a new resize gesture starts.
 
   const [startingWidth, setStartingWidth] = useState();
   const [isResizing, setIsResizing] = useState(false);
-  const [isHovering, setIsHovering] = useState(false);
+  const [shouldShowHandle, setShouldShowHandle] = useState(false);
   const [isOversized, setIsOversized] = useState(false);
   const [resizeRatio, setResizeRatio] = useState(1);
+  const canvasMode = useSelect(select => unlock(select(editSiteStore)).getCanvasMode(), []);
   const {
     setCanvasMode
   } = unlock(useDispatch(editSiteStore));
@@ -80,7 +85,8 @@ function ResizableFrame({
     type: 'tween',
     duration: isResizing ? 0 : 0.5
   };
-  const frameRef = useRef(null); // Remember frame dimensions on initial render.
+  const frameRef = useRef(null);
+  const resizableHandleHelpId = useInstanceId(ResizableFrame, 'edit-site-resizable-frame-handle-help'); // Remember frame dimensions on initial render.
 
   useEffect(() => {
     const {
@@ -130,14 +136,27 @@ function ResizableFrame({
     if (remainingWidth > SNAP_TO_EDIT_CANVAS_MODE_THRESHOLD) {
       // Reset the initial aspect ratio if the frame is resized slightly
       // above the sidebar but not far enough to trigger full screen.
-      setFrameSize({
-        width: '100%',
-        height: '100%'
-      });
+      setFrameSize(INITIAL_FRAME_SIZE);
     } else {
       // Trigger full screen if the frame is resized far enough to the left.
       setCanvasMode('edit');
     }
+  }; // Handle resize by arrow keys
+
+
+  const handleResizableHandleKeyDown = event => {
+    if (!['ArrowLeft', 'ArrowRight'].includes(event.key)) {
+      return;
+    }
+
+    event.preventDefault();
+    const step = 20 * (event.shiftKey ? 5 : 1);
+    const delta = step * (event.key === 'ArrowLeft' ? 1 : -1);
+    const newWidth = Math.min(Math.max(FRAME_MIN_WIDTH, frameRef.current.resizable.offsetWidth + delta), initialComputedWidthRef.current);
+    setFrameSize({
+      width: newWidth,
+      height: calculateNewHeight(newWidth, initialAspectRatioRef.current)
+    });
   };
 
   const frameAnimationVariants = {
@@ -151,16 +170,29 @@ function ResizableFrame({
     }
   };
   const resizeHandleVariants = {
-    default: {
+    hidden: {
+      opacity: 0,
+      left: 0
+    },
+    visible: {
       opacity: 1,
       left: -16
     },
-    resizing: {
+    active: {
       opacity: 1,
       left: -16,
       scaleY: 1.3
     }
   };
+
+  const currentResizeHandleVariant = (() => {
+    if (isResizing) {
+      return 'active';
+    }
+
+    return shouldShowHandle ? 'visible' : 'hidden';
+  })();
+
   return createElement(ResizableBox, {
     as: motion.div,
     ref: frameRef,
@@ -195,27 +227,36 @@ function ResizableFrame({
     minWidth: FRAME_MIN_WIDTH,
     maxWidth: isFullWidth ? '100%' : '150%',
     maxHeight: '100%',
-    onMouseOver: () => setIsHovering(true),
-    onMouseOut: () => setIsHovering(false),
+    onFocus: () => setShouldShowHandle(true),
+    onBlur: () => setShouldShowHandle(false),
+    onMouseOver: () => setShouldShowHandle(true),
+    onMouseOut: () => setShouldShowHandle(false),
     handleComponent: {
-      left: isHovering || isResizing ? createElement(motion.div, {
+      left: canvasMode === 'view' && createElement(Fragment, null, createElement(Tooltip, {
+        text: __('Drag to resize')
+      }, createElement(motion.button, {
         key: "handle",
-        className: "edit-site-resizable-frame__handle",
+        role: "separator",
+        "aria-orientation": "vertical",
+        className: classnames('edit-site-resizable-frame__handle', {
+          'is-resizing': isResizing
+        }),
         variants: resizeHandleVariants,
-        animate: isResizing ? 'resizing' : 'default',
-        title: "Drag to resize",
-        initial: {
-          opacity: 0,
-          left: 0
-        },
-        exit: {
-          opacity: 0,
-          left: 0
-        },
-        whileHover: {
-          scaleY: 1.3
-        }
-      }) : null
+        animate: currentResizeHandleVariant,
+        "aria-label": __('Drag to resize'),
+        "aria-describedby": resizableHandleHelpId,
+        "aria-valuenow": frameRef.current?.resizable?.offsetWidth || undefined,
+        "aria-valuemin": FRAME_MIN_WIDTH,
+        "aria-valuemax": initialComputedWidthRef.current,
+        onKeyDown: handleResizableHandleKeyDown,
+        initial: "hidden",
+        exit: "hidden",
+        whileFocus: "active",
+        whileHover: "active"
+      })), createElement("div", {
+        hidden: true,
+        id: resizableHandleHelpId
+      }, __('Use left and right arrow keys to resize the canvas. Hold shift to resize in larger increments.')))
     },
     onResizeStart: handleResizeStart,
     onResize: handleResize,

package/build-module/components/resizable-frame/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/resizable-frame/index.js"],"names":["classnames","useState","useRef","useEffect","ResizableBox","__unstableMotion","motion","useDispatch","unlock","store","editSiteStore","HANDLE_STYLES_OVERRIDE","position","undefined","userSelect","cursor","width","height","top","right","bottom","left","FRAME_MIN_WIDTH","FRAME_REFERENCE_WIDTH","FRAME_TARGET_ASPECT_RATIO","SNAP_TO_EDIT_CANVAS_MODE_THRESHOLD","calculateNewHeight","initialAspectRatio","lerp","a","b","amount","lerpFactor","Math","max","min","intermediateAspectRatio","ResizableFrame","isFullWidth","isReady","children","oversizedClassName","innerContentStyle","frameSize","setFrameSize","startingWidth","setStartingWidth","isResizing","setIsResizing","isHovering","setIsHovering","isOversized","setIsOversized","resizeRatio","setResizeRatio","setCanvasMode","initialAspectRatioRef","initialComputedWidthRef","FRAME_TRANSITION","type","duration","frameRef","offsetWidth","offsetHeight","current","resizable","handleResizeStart","_event","_direction","ref","handleResize","_ref","delta","normalizedDelta","deltaAbs","abs","maxDoubledDelta","deltaToDouble","doubleSegment","singleSegment","updatedWidth","handleResizeStop","remainingWidth","ownerDocument","documentElement","frameAnimationVariants","default","flexGrow","fullWidth","resizeHandleVariants","opacity","resizing","scaleY","div","definition","topRight","bottomRight","bottomLeft","topLeft","borderRadius"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useRef, useEffect } from '@wordpress/element';\nimport {\n\tResizableBox,\n\t__unstableMotion as motion,\n} from '@wordpress/components';\nimport { useDispatch } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport { store as editSiteStore } from '../../store';\n\n// Removes the inline styles in the drag handles.\nconst HANDLE_STYLES_OVERRIDE = {\n\tposition: undefined,\n\tuserSelect: undefined,\n\tcursor: undefined,\n\twidth: undefined,\n\theight: undefined,\n\ttop: undefined,\n\tright: undefined,\n\tbottom: undefined,\n\tleft: undefined,\n};\n\n// The minimum width of the frame (in px) while resizing.\nconst FRAME_MIN_WIDTH = 340;\n// The reference width of the frame (in px) used to calculate the aspect ratio.\nconst FRAME_REFERENCE_WIDTH = 1300;\n// 9 : 19.5 is the target aspect ratio enforced (when possible) while resizing.\nconst FRAME_TARGET_ASPECT_RATIO = 9 / 19.5;\n// The minimum distance (in px) between the frame resize handle and the\n// viewport's edge. If the frame is resized to be closer to the viewport's edge\n// than this distance, then \"canvas mode\" will be enabled.\nconst SNAP_TO_EDIT_CANVAS_MODE_THRESHOLD = 200;\n\nfunction calculateNewHeight( width, initialAspectRatio ) {\n\tconst lerp = ( a, b, amount ) => {\n\t\treturn a + ( b - a ) * amount;\n\t};\n\n\t// Calculate the intermediate aspect ratio based on the current width.\n\tconst lerpFactor =\n\t\t1 -\n\t\tMath.max(\n\t\t\t0,\n\t\t\tMath.min(\n\t\t\t\t1,\n\t\t\t\t( width - FRAME_MIN_WIDTH ) /\n\t\t\t\t\t( FRAME_REFERENCE_WIDTH - FRAME_MIN_WIDTH )\n\t\t\t)\n\t\t);\n\n\t// Calculate the height based on the intermediate aspect ratio\n\t// ensuring the frame arrives at the target aspect ratio.\n\tconst intermediateAspectRatio = lerp(\n\t\tinitialAspectRatio,\n\t\tFRAME_TARGET_ASPECT_RATIO,\n\t\tlerpFactor\n\t);\n\n\treturn width / intermediateAspectRatio;\n}\n\nfunction ResizableFrame( {\n\tisFullWidth,\n\tisReady,\n\tchildren,\n\toversizedClassName,\n\tinnerContentStyle,\n} ) {\n\tconst [ frameSize, setFrameSize ] = useState( {\n\t\twidth: '100%',\n\t\theight: '100%',\n\t} );\n\t// The width of the resizable frame when a new resize gesture starts.\n\tconst [ startingWidth, setStartingWidth ] = useState();\n\tconst [ isResizing, setIsResizing ] = useState( false );\n\tconst [ isHovering, setIsHovering ] = useState( false );\n\tconst [ isOversized, setIsOversized ] = useState( false );\n\tconst [ resizeRatio, setResizeRatio ] = useState( 1 );\n\tconst { setCanvasMode } = unlock( useDispatch( editSiteStore ) );\n\tconst initialAspectRatioRef = useRef( null );\n\t// The width of the resizable frame on initial render.\n\tconst initialComputedWidthRef = useRef( null );\n\tconst FRAME_TRANSITION = { type: 'tween', duration: isResizing ? 0 : 0.5 };\n\tconst frameRef = useRef( null );\n\n\t// Remember frame dimensions on initial render.\n\tuseEffect( () => {\n\t\tconst { offsetWidth, offsetHeight } = frameRef.current.resizable;\n\t\tinitialComputedWidthRef.current = offsetWidth;\n\t\tinitialAspectRatioRef.current = offsetWidth / offsetHeight;\n\t}, [] );\n\n\tconst handleResizeStart = ( _event, _direction, ref ) => {\n\t\t// Remember the starting width so we don't have to get `ref.offsetWidth` on\n\t\t// every resize event thereafter, which will cause layout thrashing.\n\t\tsetStartingWidth( ref.offsetWidth );\n\t\tsetIsResizing( true );\n\t};\n\n\t// Calculate the frame size based on the window width as its resized.\n\tconst handleResize = ( _event, _direction, _ref, delta ) => {\n\t\tconst normalizedDelta = delta.width / resizeRatio;\n\t\tconst deltaAbs = Math.abs( normalizedDelta );\n\t\tconst maxDoubledDelta =\n\t\t\tdelta.width < 0 // is shrinking\n\t\t\t\t? deltaAbs\n\t\t\t\t: ( initialComputedWidthRef.current - startingWidth ) / 2;\n\t\tconst deltaToDouble = Math.min( deltaAbs, maxDoubledDelta );\n\t\tconst doubleSegment = deltaAbs === 0 ? 0 : deltaToDouble / deltaAbs;\n\t\tconst singleSegment = 1 - doubleSegment;\n\n\t\tsetResizeRatio( singleSegment + doubleSegment * 2 );\n\n\t\tconst updatedWidth = startingWidth + delta.width;\n\n\t\tsetIsOversized( updatedWidth > initialComputedWidthRef.current );\n\n\t\t// Width will be controlled by the library (via `resizeRatio`),\n\t\t// so we only need to update the height.\n\t\tsetFrameSize( {\n\t\t\theight: isOversized\n\t\t\t\t? '100%'\n\t\t\t\t: calculateNewHeight(\n\t\t\t\t\t\tupdatedWidth,\n\t\t\t\t\t\tinitialAspectRatioRef.current\n\t\t\t\t  ),\n\t\t} );\n\t};\n\n\tconst handleResizeStop = ( _event, _direction, ref ) => {\n\t\tsetIsResizing( false );\n\n\t\tif ( ! isOversized ) {\n\t\t\treturn;\n\t\t}\n\n\t\tsetIsOversized( false );\n\n\t\tconst remainingWidth =\n\t\t\tref.ownerDocument.documentElement.offsetWidth - ref.offsetWidth;\n\n\t\tif ( remainingWidth > SNAP_TO_EDIT_CANVAS_MODE_THRESHOLD ) {\n\t\t\t// Reset the initial aspect ratio if the frame is resized slightly\n\t\t\t// above the sidebar but not far enough to trigger full screen.\n\t\t\tsetFrameSize( { width: '100%', height: '100%' } );\n\t\t} else {\n\t\t\t// Trigger full screen if the frame is resized far enough to the left.\n\t\t\tsetCanvasMode( 'edit' );\n\t\t}\n\t};\n\n\tconst frameAnimationVariants = {\n\t\tdefault: {\n\t\t\tflexGrow: 0,\n\t\t\theight: frameSize.height,\n\t\t},\n\t\tfullWidth: {\n\t\t\tflexGrow: 1,\n\t\t\theight: frameSize.height,\n\t\t},\n\t};\n\n\tconst resizeHandleVariants = {\n\t\tdefault: {\n\t\t\topacity: 1,\n\t\t\tleft: -16,\n\t\t},\n\t\tresizing: {\n\t\t\topacity: 1,\n\t\t\tleft: -16,\n\t\t\tscaleY: 1.3,\n\t\t},\n\t};\n\n\treturn (\n\t\t<ResizableBox\n\t\t\tas={ motion.div }\n\t\t\tref={ frameRef }\n\t\t\tinitial={ false }\n\t\t\tvariants={ frameAnimationVariants }\n\t\t\tanimate={ isFullWidth ? 'fullWidth' : 'default' }\n\t\t\tonAnimationComplete={ ( definition ) => {\n\t\t\t\tif ( definition === 'fullWidth' )\n\t\t\t\t\tsetFrameSize( { width: '100%', height: '100%' } );\n\t\t\t} }\n\t\t\ttransition={ FRAME_TRANSITION }\n\t\t\tsize={ frameSize }\n\t\t\tenable={ {\n\t\t\t\ttop: false,\n\t\t\t\tright: false,\n\t\t\t\tbottom: false,\n\t\t\t\t// Resizing will be disabled until the editor content is loaded.\n\t\t\t\tleft: isReady,\n\t\t\t\ttopRight: false,\n\t\t\t\tbottomRight: false,\n\t\t\t\tbottomLeft: false,\n\t\t\t\ttopLeft: false,\n\t\t\t} }\n\t\t\tresizeRatio={ resizeRatio }\n\t\t\thandleClasses={ undefined }\n\t\t\thandleStyles={ {\n\t\t\t\tleft: HANDLE_STYLES_OVERRIDE,\n\t\t\t\tright: HANDLE_STYLES_OVERRIDE,\n\t\t\t} }\n\t\t\tminWidth={ FRAME_MIN_WIDTH }\n\t\t\tmaxWidth={ isFullWidth ? '100%' : '150%' }\n\t\t\tmaxHeight={ '100%' }\n\t\t\tonMouseOver={ () => setIsHovering( true ) }\n\t\t\tonMouseOut={ () => setIsHovering( false ) }\n\t\t\thandleComponent={ {\n\t\t\t\tleft:\n\t\t\t\t\tisHovering || isResizing ? (\n\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\tkey=\"handle\"\n\t\t\t\t\t\t\tclassName=\"edit-site-resizable-frame__handle\"\n\t\t\t\t\t\t\tvariants={ resizeHandleVariants }\n\t\t\t\t\t\t\tanimate={ isResizing ? 'resizing' : 'default' }\n\t\t\t\t\t\t\ttitle=\"Drag to resize\"\n\t\t\t\t\t\t\tinitial={ {\n\t\t\t\t\t\t\t\topacity: 0,\n\t\t\t\t\t\t\t\tleft: 0,\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\texit={ {\n\t\t\t\t\t\t\t\topacity: 0,\n\t\t\t\t\t\t\t\tleft: 0,\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\twhileHover={ { scaleY: 1.3 } }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : null,\n\t\t\t} }\n\t\t\tonResizeStart={ handleResizeStart }\n\t\t\tonResize={ handleResize }\n\t\t\tonResizeStop={ handleResizeStop }\n\t\t\tclassName={ classnames( 'edit-site-resizable-frame__inner', {\n\t\t\t\t'is-resizing': isResizing,\n\t\t\t\t[ oversizedClassName ]: isOversized,\n\t\t\t} ) }\n\t\t>\n\t\t\t<motion.div\n\t\t\t\tclassName=\"edit-site-resizable-frame__inner-content\"\n\t\t\t\tanimate={ {\n\t\t\t\t\tborderRadius: isFullWidth ? 0 : 8,\n\t\t\t\t} }\n\t\t\t\ttransition={ FRAME_TRANSITION }\n\t\t\t\tstyle={ innerContentStyle }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</motion.div>\n\t\t</ResizableBox>\n\t);\n}\n\nexport default ResizableFrame;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/resizable-frame/index.js"],"names":["classnames","useState","useRef","useEffect","ResizableBox","Tooltip","__unstableMotion","motion","useInstanceId","useDispatch","useSelect","__","unlock","store","editSiteStore","HANDLE_STYLES_OVERRIDE","position","undefined","userSelect","cursor","width","height","top","right","bottom","left","FRAME_MIN_WIDTH","FRAME_REFERENCE_WIDTH","FRAME_TARGET_ASPECT_RATIO","SNAP_TO_EDIT_CANVAS_MODE_THRESHOLD","INITIAL_FRAME_SIZE","calculateNewHeight","initialAspectRatio","lerp","a","b","amount","lerpFactor","Math","max","min","intermediateAspectRatio","ResizableFrame","isFullWidth","isReady","children","oversizedClassName","innerContentStyle","frameSize","setFrameSize","startingWidth","setStartingWidth","isResizing","setIsResizing","shouldShowHandle","setShouldShowHandle","isOversized","setIsOversized","resizeRatio","setResizeRatio","canvasMode","select","getCanvasMode","setCanvasMode","initialAspectRatioRef","initialComputedWidthRef","FRAME_TRANSITION","type","duration","frameRef","resizableHandleHelpId","offsetWidth","offsetHeight","current","resizable","handleResizeStart","_event","_direction","ref","handleResize","_ref","delta","normalizedDelta","deltaAbs","abs","maxDoubledDelta","deltaToDouble","doubleSegment","singleSegment","updatedWidth","handleResizeStop","remainingWidth","ownerDocument","documentElement","handleResizableHandleKeyDown","event","includes","key","preventDefault","step","shiftKey","newWidth","frameAnimationVariants","default","flexGrow","fullWidth","resizeHandleVariants","hidden","opacity","visible","active","scaleY","currentResizeHandleVariant","div","definition","topRight","bottomRight","bottomLeft","topLeft","borderRadius"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useRef, useEffect } from '@wordpress/element';\nimport {\n\tResizableBox,\n\tTooltip,\n\t__unstableMotion as motion,\n} from '@wordpress/components';\nimport { useInstanceId } from '@wordpress/compose';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport { store as editSiteStore } from '../../store';\n\n// Removes the inline styles in the drag handles.\nconst HANDLE_STYLES_OVERRIDE = {\n\tposition: undefined,\n\tuserSelect: undefined,\n\tcursor: undefined,\n\twidth: undefined,\n\theight: undefined,\n\ttop: undefined,\n\tright: undefined,\n\tbottom: undefined,\n\tleft: undefined,\n};\n\n// The minimum width of the frame (in px) while resizing.\nconst FRAME_MIN_WIDTH = 320;\n// The reference width of the frame (in px) used to calculate the aspect ratio.\nconst FRAME_REFERENCE_WIDTH = 1300;\n// 9 : 19.5 is the target aspect ratio enforced (when possible) while resizing.\nconst FRAME_TARGET_ASPECT_RATIO = 9 / 19.5;\n// The minimum distance (in px) between the frame resize handle and the\n// viewport's edge. If the frame is resized to be closer to the viewport's edge\n// than this distance, then \"canvas mode\" will be enabled.\nconst SNAP_TO_EDIT_CANVAS_MODE_THRESHOLD = 200;\n// Default size for the `frameSize` state.\nconst INITIAL_FRAME_SIZE = { width: '100%', height: '100%' };\n\nfunction calculateNewHeight( width, initialAspectRatio ) {\n\tconst lerp = ( a, b, amount ) => {\n\t\treturn a + ( b - a ) * amount;\n\t};\n\n\t// Calculate the intermediate aspect ratio based on the current width.\n\tconst lerpFactor =\n\t\t1 -\n\t\tMath.max(\n\t\t\t0,\n\t\t\tMath.min(\n\t\t\t\t1,\n\t\t\t\t( width - FRAME_MIN_WIDTH ) /\n\t\t\t\t\t( FRAME_REFERENCE_WIDTH - FRAME_MIN_WIDTH )\n\t\t\t)\n\t\t);\n\n\t// Calculate the height based on the intermediate aspect ratio\n\t// ensuring the frame arrives at the target aspect ratio.\n\tconst intermediateAspectRatio = lerp(\n\t\tinitialAspectRatio,\n\t\tFRAME_TARGET_ASPECT_RATIO,\n\t\tlerpFactor\n\t);\n\n\treturn width / intermediateAspectRatio;\n}\n\nfunction ResizableFrame( {\n\tisFullWidth,\n\tisReady,\n\tchildren,\n\toversizedClassName,\n\tinnerContentStyle,\n} ) {\n\tconst [ frameSize, setFrameSize ] = useState( INITIAL_FRAME_SIZE );\n\t// The width of the resizable frame when a new resize gesture starts.\n\tconst [ startingWidth, setStartingWidth ] = useState();\n\tconst [ isResizing, setIsResizing ] = useState( false );\n\tconst [ shouldShowHandle, setShouldShowHandle ] = useState( false );\n\tconst [ isOversized, setIsOversized ] = useState( false );\n\tconst [ resizeRatio, setResizeRatio ] = useState( 1 );\n\tconst canvasMode = useSelect(\n\t\t( select ) => unlock( select( editSiteStore ) ).getCanvasMode(),\n\t\t[]\n\t);\n\tconst { setCanvasMode } = unlock( useDispatch( editSiteStore ) );\n\tconst initialAspectRatioRef = useRef( null );\n\t// The width of the resizable frame on initial render.\n\tconst initialComputedWidthRef = useRef( null );\n\tconst FRAME_TRANSITION = { type: 'tween', duration: isResizing ? 0 : 0.5 };\n\tconst frameRef = useRef( null );\n\tconst resizableHandleHelpId = useInstanceId(\n\t\tResizableFrame,\n\t\t'edit-site-resizable-frame-handle-help'\n\t);\n\n\t// Remember frame dimensions on initial render.\n\tuseEffect( () => {\n\t\tconst { offsetWidth, offsetHeight } = frameRef.current.resizable;\n\t\tinitialComputedWidthRef.current = offsetWidth;\n\t\tinitialAspectRatioRef.current = offsetWidth / offsetHeight;\n\t}, [] );\n\n\tconst handleResizeStart = ( _event, _direction, ref ) => {\n\t\t// Remember the starting width so we don't have to get `ref.offsetWidth` on\n\t\t// every resize event thereafter, which will cause layout thrashing.\n\t\tsetStartingWidth( ref.offsetWidth );\n\t\tsetIsResizing( true );\n\t};\n\n\t// Calculate the frame size based on the window width as its resized.\n\tconst handleResize = ( _event, _direction, _ref, delta ) => {\n\t\tconst normalizedDelta = delta.width / resizeRatio;\n\t\tconst deltaAbs = Math.abs( normalizedDelta );\n\t\tconst maxDoubledDelta =\n\t\t\tdelta.width < 0 // is shrinking\n\t\t\t\t? deltaAbs\n\t\t\t\t: ( initialComputedWidthRef.current - startingWidth ) / 2;\n\t\tconst deltaToDouble = Math.min( deltaAbs, maxDoubledDelta );\n\t\tconst doubleSegment = deltaAbs === 0 ? 0 : deltaToDouble / deltaAbs;\n\t\tconst singleSegment = 1 - doubleSegment;\n\n\t\tsetResizeRatio( singleSegment + doubleSegment * 2 );\n\n\t\tconst updatedWidth = startingWidth + delta.width;\n\n\t\tsetIsOversized( updatedWidth > initialComputedWidthRef.current );\n\n\t\t// Width will be controlled by the library (via `resizeRatio`),\n\t\t// so we only need to update the height.\n\t\tsetFrameSize( {\n\t\t\theight: isOversized\n\t\t\t\t? '100%'\n\t\t\t\t: calculateNewHeight(\n\t\t\t\t\t\tupdatedWidth,\n\t\t\t\t\t\tinitialAspectRatioRef.current\n\t\t\t\t  ),\n\t\t} );\n\t};\n\n\tconst handleResizeStop = ( _event, _direction, ref ) => {\n\t\tsetIsResizing( false );\n\n\t\tif ( ! isOversized ) {\n\t\t\treturn;\n\t\t}\n\n\t\tsetIsOversized( false );\n\n\t\tconst remainingWidth =\n\t\t\tref.ownerDocument.documentElement.offsetWidth - ref.offsetWidth;\n\n\t\tif ( remainingWidth > SNAP_TO_EDIT_CANVAS_MODE_THRESHOLD ) {\n\t\t\t// Reset the initial aspect ratio if the frame is resized slightly\n\t\t\t// above the sidebar but not far enough to trigger full screen.\n\t\t\tsetFrameSize( INITIAL_FRAME_SIZE );\n\t\t} else {\n\t\t\t// Trigger full screen if the frame is resized far enough to the left.\n\t\t\tsetCanvasMode( 'edit' );\n\t\t}\n\t};\n\n\t// Handle resize by arrow keys\n\tconst handleResizableHandleKeyDown = ( event ) => {\n\t\tif ( ! [ 'ArrowLeft', 'ArrowRight' ].includes( event.key ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\tevent.preventDefault();\n\n\t\tconst step = 20 * ( event.shiftKey ? 5 : 1 );\n\t\tconst delta = step * ( event.key === 'ArrowLeft' ? 1 : -1 );\n\t\tconst newWidth = Math.min(\n\t\t\tMath.max(\n\t\t\t\tFRAME_MIN_WIDTH,\n\t\t\t\tframeRef.current.resizable.offsetWidth + delta\n\t\t\t),\n\t\t\tinitialComputedWidthRef.current\n\t\t);\n\n\t\tsetFrameSize( {\n\t\t\twidth: newWidth,\n\t\t\theight: calculateNewHeight(\n\t\t\t\tnewWidth,\n\t\t\t\tinitialAspectRatioRef.current\n\t\t\t),\n\t\t} );\n\t};\n\n\tconst frameAnimationVariants = {\n\t\tdefault: {\n\t\t\tflexGrow: 0,\n\t\t\theight: frameSize.height,\n\t\t},\n\t\tfullWidth: {\n\t\t\tflexGrow: 1,\n\t\t\theight: frameSize.height,\n\t\t},\n\t};\n\n\tconst resizeHandleVariants = {\n\t\thidden: {\n\t\t\topacity: 0,\n\t\t\tleft: 0,\n\t\t},\n\t\tvisible: {\n\t\t\topacity: 1,\n\t\t\tleft: -16,\n\t\t},\n\t\tactive: {\n\t\t\topacity: 1,\n\t\t\tleft: -16,\n\t\t\tscaleY: 1.3,\n\t\t},\n\t};\n\tconst currentResizeHandleVariant = ( () => {\n\t\tif ( isResizing ) {\n\t\t\treturn 'active';\n\t\t}\n\t\treturn shouldShowHandle ? 'visible' : 'hidden';\n\t} )();\n\n\treturn (\n\t\t<ResizableBox\n\t\t\tas={ motion.div }\n\t\t\tref={ frameRef }\n\t\t\tinitial={ false }\n\t\t\tvariants={ frameAnimationVariants }\n\t\t\tanimate={ isFullWidth ? 'fullWidth' : 'default' }\n\t\t\tonAnimationComplete={ ( definition ) => {\n\t\t\t\tif ( definition === 'fullWidth' )\n\t\t\t\t\tsetFrameSize( { width: '100%', height: '100%' } );\n\t\t\t} }\n\t\t\ttransition={ FRAME_TRANSITION }\n\t\t\tsize={ frameSize }\n\t\t\tenable={ {\n\t\t\t\ttop: false,\n\t\t\t\tright: false,\n\t\t\t\tbottom: false,\n\t\t\t\t// Resizing will be disabled until the editor content is loaded.\n\t\t\t\tleft: isReady,\n\t\t\t\ttopRight: false,\n\t\t\t\tbottomRight: false,\n\t\t\t\tbottomLeft: false,\n\t\t\t\ttopLeft: false,\n\t\t\t} }\n\t\t\tresizeRatio={ resizeRatio }\n\t\t\thandleClasses={ undefined }\n\t\t\thandleStyles={ {\n\t\t\t\tleft: HANDLE_STYLES_OVERRIDE,\n\t\t\t\tright: HANDLE_STYLES_OVERRIDE,\n\t\t\t} }\n\t\t\tminWidth={ FRAME_MIN_WIDTH }\n\t\t\tmaxWidth={ isFullWidth ? '100%' : '150%' }\n\t\t\tmaxHeight={ '100%' }\n\t\t\tonFocus={ () => setShouldShowHandle( true ) }\n\t\t\tonBlur={ () => setShouldShowHandle( false ) }\n\t\t\tonMouseOver={ () => setShouldShowHandle( true ) }\n\t\t\tonMouseOut={ () => setShouldShowHandle( false ) }\n\t\t\thandleComponent={ {\n\t\t\t\tleft: canvasMode === 'view' && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<Tooltip text={ __( 'Drag to resize' ) }>\n\t\t\t\t\t\t\t{ /* Disable reason: role=\"separator\" does in fact support aria-valuenow */ }\n\t\t\t\t\t\t\t{ /* eslint-disable-next-line jsx-a11y/role-supports-aria-props */ }\n\t\t\t\t\t\t\t<motion.button\n\t\t\t\t\t\t\t\tkey=\"handle\"\n\t\t\t\t\t\t\t\trole=\"separator\"\n\t\t\t\t\t\t\t\taria-orientation=\"vertical\"\n\t\t\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t\t\t'edit-site-resizable-frame__handle',\n\t\t\t\t\t\t\t\t\t{ 'is-resizing': isResizing }\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tvariants={ resizeHandleVariants }\n\t\t\t\t\t\t\t\tanimate={ currentResizeHandleVariant }\n\t\t\t\t\t\t\t\taria-label={ __( 'Drag to resize' ) }\n\t\t\t\t\t\t\t\taria-describedby={ resizableHandleHelpId }\n\t\t\t\t\t\t\t\taria-valuenow={\n\t\t\t\t\t\t\t\t\tframeRef.current?.resizable?.offsetWidth ||\n\t\t\t\t\t\t\t\t\tundefined\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\taria-valuemin={ FRAME_MIN_WIDTH }\n\t\t\t\t\t\t\t\taria-valuemax={\n\t\t\t\t\t\t\t\t\tinitialComputedWidthRef.current\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tonKeyDown={ handleResizableHandleKeyDown }\n\t\t\t\t\t\t\t\tinitial=\"hidden\"\n\t\t\t\t\t\t\t\texit=\"hidden\"\n\t\t\t\t\t\t\t\twhileFocus=\"active\"\n\t\t\t\t\t\t\t\twhileHover=\"active\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t<div hidden id={ resizableHandleHelpId }>\n\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t'Use left and right arrow keys to resize the canvas. Hold shift to resize in larger increments.'\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</>\n\t\t\t\t),\n\t\t\t} }\n\t\t\tonResizeStart={ handleResizeStart }\n\t\t\tonResize={ handleResize }\n\t\t\tonResizeStop={ handleResizeStop }\n\t\t\tclassName={ classnames( 'edit-site-resizable-frame__inner', {\n\t\t\t\t'is-resizing': isResizing,\n\t\t\t\t[ oversizedClassName ]: isOversized,\n\t\t\t} ) }\n\t\t>\n\t\t\t<motion.div\n\t\t\t\tclassName=\"edit-site-resizable-frame__inner-content\"\n\t\t\t\tanimate={ {\n\t\t\t\t\tborderRadius: isFullWidth ? 0 : 8,\n\t\t\t\t} }\n\t\t\t\ttransition={ FRAME_TRANSITION }\n\t\t\t\tstyle={ innerContentStyle }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</motion.div>\n\t\t</ResizableBox>\n\t);\n}\n\nexport default ResizableFrame;\n"]}

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

@@ -3,7 +3,7 @@ import { createElement, Fragment } from "@wordpress/element";
 /**
  * WordPress dependencies
  */
-import { __experimentalHStack as HStack, __experimentalHeading as Heading, __experimentalNavigatorToParentButton as NavigatorToParentButton, __experimentalUseNavigator as useNavigator, __experimentalVStack as VStack } from '@wordpress/components';
+import { __experimentalHStack as HStack, __experimentalHeading as Heading, __experimentalUseNavigator as useNavigator, __experimentalVStack as VStack } from '@wordpress/components';
 import { isRTL, __, sprintf } from '@wordpress/i18n';
 import { chevronRight, chevronLeft } from '@wordpress/icons';
 import { store as coreStore } from '@wordpress/core-data';
@@ -39,9 +39,7 @@ export default function SidebarNavigationScreen({
   const {
     getTheme
   } = useSelect(coreStore);
-  const {
-    goTo
-  } = useNavigator();
+  const navigator = useNavigator();
   const theme = getTheme(currentlyPreviewingTheme());
   const icon = isRTL() ? chevronRight : chevronLeft;
   return createElement(Fragment, null, createElement(VStack, {
@@ -52,13 +50,21 @@ export default function SidebarNavigationScreen({
     spacing: 4,
     alignment: "flex-start",
     className: "edit-site-sidebar-navigation-screen__title-icon"
-  }, !isRoot && !backPath && createElement(NavigatorToParentButton, {
-    as: SidebarButton,
-    icon: isRTL() ? chevronRight : chevronLeft,
+  }, !isRoot && !backPath && createElement(SidebarButton, {
+    onClick: () => {
+      if (navigator.location.isInitial) {
+        navigator.goToParent({
+          replace: true
+        });
+      } else {
+        navigator.goBack();
+      }
+    },
+    icon: icon,
     label: __('Back'),
     showTooltip: false
   }), !isRoot && backPath && createElement(SidebarButton, {
-    onClick: () => goTo(backPath, {
+    onClick: () => navigator.goTo(backPath, {
       isBack: true
     }),
     icon: icon,

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/sidebar-navigation-screen/index.js"],"names":["__experimentalHStack","HStack","__experimentalHeading","Heading","__experimentalNavigatorToParentButton","NavigatorToParentButton","__experimentalUseNavigator","useNavigator","__experimentalVStack","VStack","isRTL","__","sprintf","chevronRight","chevronLeft","store","coreStore","useSelect","editSiteStore","unlock","SidebarButton","isPreviewingTheme","currentlyPreviewingTheme","SidebarNavigationScreen","isRoot","title","actions","meta","content","footer","description","backPath","dashboardLink","select","getSettings","__experimentalDashboardLink","getTheme","goTo","theme","icon","isBack","name","rendered"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalHeading as Heading,\n\t__experimentalNavigatorToParentButton as NavigatorToParentButton,\n\t__experimentalUseNavigator as useNavigator,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\nimport { isRTL, __, sprintf } from '@wordpress/i18n';\nimport { chevronRight, chevronLeft } from '@wordpress/icons';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { store as editSiteStore } from '../../store';\nimport { unlock } from '../../lock-unlock';\nimport SidebarButton from '../sidebar-button';\nimport {\n\tisPreviewingTheme,\n\tcurrentlyPreviewingTheme,\n} from '../../utils/is-previewing-theme';\n\nexport default function SidebarNavigationScreen( {\n\tisRoot,\n\ttitle,\n\tactions,\n\tmeta,\n\tcontent,\n\tfooter,\n\tdescription,\n\tbackPath,\n} ) {\n\tconst { dashboardLink } = useSelect( ( select ) => {\n\t\tconst { getSettings } = unlock( select( editSiteStore ) );\n\t\treturn {\n\t\t\tdashboardLink: getSettings().__experimentalDashboardLink,\n\t\t};\n\t}, [] );\n\tconst { getTheme } = useSelect( coreStore );\n\tconst { goTo } = useNavigator();\n\tconst theme = getTheme( currentlyPreviewingTheme() );\n\tconst icon = isRTL() ? chevronRight : chevronLeft;\n\n\treturn (\n\t\t<>\n\t\t\t<VStack\n\t\t\t\tclassName=\"edit-site-sidebar-navigation-screen__main\"\n\t\t\t\tspacing={ 0 }\n\t\t\t\tjustify=\"flex-start\"\n\t\t\t>\n\t\t\t\t<HStack\n\t\t\t\t\tspacing={ 4 }\n\t\t\t\t\talignment=\"flex-start\"\n\t\t\t\t\tclassName=\"edit-site-sidebar-navigation-screen__title-icon\"\n\t\t\t\t>\n\t\t\t\t\t{ ! isRoot && ! backPath && (\n\t\t\t\t\t\t<NavigatorToParentButton\n\t\t\t\t\t\t\tas={ SidebarButton }\n\t\t\t\t\t\t\ticon={ isRTL() ? chevronRight : chevronLeft }\n\t\t\t\t\t\t\tlabel={ __( 'Back' ) }\n\t\t\t\t\t\t\tshowTooltip={ false }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! isRoot && backPath && (\n\t\t\t\t\t\t<SidebarButton\n\t\t\t\t\t\t\tonClick={ () => goTo( backPath, { isBack: true } ) }\n\t\t\t\t\t\t\ticon={ icon }\n\t\t\t\t\t\t\tlabel={ __( 'Back' ) }\n\t\t\t\t\t\t\tshowTooltip={ false }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ isRoot && (\n\t\t\t\t\t\t<SidebarButton\n\t\t\t\t\t\t\ticon={ icon }\n\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\t! isPreviewingTheme()\n\t\t\t\t\t\t\t\t\t? __( 'Go to the Dashboard' )\n\t\t\t\t\t\t\t\t\t: __( 'Go back to the theme showcase' )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\thref={\n\t\t\t\t\t\t\t\t! isPreviewingTheme()\n\t\t\t\t\t\t\t\t\t? dashboardLink || 'index.php'\n\t\t\t\t\t\t\t\t\t: 'themes.php'\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t<Heading\n\t\t\t\t\t\tclassName=\"edit-site-sidebar-navigation-screen__title\"\n\t\t\t\t\t\tcolor={ '#e0e0e0' /* $gray-200 */ }\n\t\t\t\t\t\tlevel={ 1 }\n\t\t\t\t\t\tsize={ 20 }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ ! isPreviewingTheme()\n\t\t\t\t\t\t\t? title\n\t\t\t\t\t\t\t: sprintf(\n\t\t\t\t\t\t\t\t\t'Previewing %1$s: %2$s',\n\t\t\t\t\t\t\t\t\ttheme?.name?.rendered,\n\t\t\t\t\t\t\t\t\ttitle\n\t\t\t\t\t\t\t  ) }\n\t\t\t\t\t</Heading>\n\t\t\t\t\t{ actions && (\n\t\t\t\t\t\t<div className=\"edit-site-sidebar-navigation-screen__actions\">\n\t\t\t\t\t\t\t{ actions }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) }\n\t\t\t\t</HStack>\n\t\t\t\t{ meta && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<div className=\"edit-site-sidebar-navigation-screen__meta\">\n\t\t\t\t\t\t\t{ meta }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</>\n\t\t\t\t) }\n\n\t\t\t\t<div className=\"edit-site-sidebar-navigation-screen__content\">\n\t\t\t\t\t{ description && (\n\t\t\t\t\t\t<p className=\"edit-site-sidebar-navigation-screen__description\">\n\t\t\t\t\t\t\t{ description }\n\t\t\t\t\t\t</p>\n\t\t\t\t\t) }\n\t\t\t\t\t{ content }\n\t\t\t\t</div>\n\t\t\t</VStack>\n\t\t\t{ footer && (\n\t\t\t\t<footer className=\"edit-site-sidebar-navigation-screen__footer\">\n\t\t\t\t\t{ footer }\n\t\t\t\t</footer>\n\t\t\t) }\n\t\t</>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/sidebar-navigation-screen/index.js"],"names":["__experimentalHStack","HStack","__experimentalHeading","Heading","__experimentalUseNavigator","useNavigator","__experimentalVStack","VStack","isRTL","__","sprintf","chevronRight","chevronLeft","store","coreStore","useSelect","editSiteStore","unlock","SidebarButton","isPreviewingTheme","currentlyPreviewingTheme","SidebarNavigationScreen","isRoot","title","actions","meta","content","footer","description","backPath","dashboardLink","select","getSettings","__experimentalDashboardLink","getTheme","navigator","theme","icon","location","isInitial","goToParent","replace","goBack","goTo","isBack","name","rendered"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalHeading as Heading,\n\t__experimentalUseNavigator as useNavigator,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\nimport { isRTL, __, sprintf } from '@wordpress/i18n';\nimport { chevronRight, chevronLeft } from '@wordpress/icons';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { store as editSiteStore } from '../../store';\nimport { unlock } from '../../lock-unlock';\nimport SidebarButton from '../sidebar-button';\nimport {\n\tisPreviewingTheme,\n\tcurrentlyPreviewingTheme,\n} from '../../utils/is-previewing-theme';\n\nexport default function SidebarNavigationScreen( {\n\tisRoot,\n\ttitle,\n\tactions,\n\tmeta,\n\tcontent,\n\tfooter,\n\tdescription,\n\tbackPath,\n} ) {\n\tconst { dashboardLink } = useSelect( ( select ) => {\n\t\tconst { getSettings } = unlock( select( editSiteStore ) );\n\t\treturn {\n\t\t\tdashboardLink: getSettings().__experimentalDashboardLink,\n\t\t};\n\t}, [] );\n\tconst { getTheme } = useSelect( coreStore );\n\tconst navigator = useNavigator();\n\tconst theme = getTheme( currentlyPreviewingTheme() );\n\tconst icon = isRTL() ? chevronRight : chevronLeft;\n\n\treturn (\n\t\t<>\n\t\t\t<VStack\n\t\t\t\tclassName=\"edit-site-sidebar-navigation-screen__main\"\n\t\t\t\tspacing={ 0 }\n\t\t\t\tjustify=\"flex-start\"\n\t\t\t>\n\t\t\t\t<HStack\n\t\t\t\t\tspacing={ 4 }\n\t\t\t\t\talignment=\"flex-start\"\n\t\t\t\t\tclassName=\"edit-site-sidebar-navigation-screen__title-icon\"\n\t\t\t\t>\n\t\t\t\t\t{ ! isRoot && ! backPath && (\n\t\t\t\t\t\t<SidebarButton\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tif ( navigator.location.isInitial ) {\n\t\t\t\t\t\t\t\t\tnavigator.goToParent( { replace: true } );\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\tnavigator.goBack();\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\ticon={ icon }\n\t\t\t\t\t\t\tlabel={ __( 'Back' ) }\n\t\t\t\t\t\t\tshowTooltip={ false }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! isRoot && backPath && (\n\t\t\t\t\t\t<SidebarButton\n\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\tnavigator.goTo( backPath, { isBack: true } )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\ticon={ icon }\n\t\t\t\t\t\t\tlabel={ __( 'Back' ) }\n\t\t\t\t\t\t\tshowTooltip={ false }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ isRoot && (\n\t\t\t\t\t\t<SidebarButton\n\t\t\t\t\t\t\ticon={ icon }\n\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\t! isPreviewingTheme()\n\t\t\t\t\t\t\t\t\t? __( 'Go to the Dashboard' )\n\t\t\t\t\t\t\t\t\t: __( 'Go back to the theme showcase' )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\thref={\n\t\t\t\t\t\t\t\t! isPreviewingTheme()\n\t\t\t\t\t\t\t\t\t? dashboardLink || 'index.php'\n\t\t\t\t\t\t\t\t\t: 'themes.php'\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t<Heading\n\t\t\t\t\t\tclassName=\"edit-site-sidebar-navigation-screen__title\"\n\t\t\t\t\t\tcolor={ '#e0e0e0' /* $gray-200 */ }\n\t\t\t\t\t\tlevel={ 1 }\n\t\t\t\t\t\tsize={ 20 }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ ! isPreviewingTheme()\n\t\t\t\t\t\t\t? title\n\t\t\t\t\t\t\t: sprintf(\n\t\t\t\t\t\t\t\t\t'Previewing %1$s: %2$s',\n\t\t\t\t\t\t\t\t\ttheme?.name?.rendered,\n\t\t\t\t\t\t\t\t\ttitle\n\t\t\t\t\t\t\t  ) }\n\t\t\t\t\t</Heading>\n\t\t\t\t\t{ actions && (\n\t\t\t\t\t\t<div className=\"edit-site-sidebar-navigation-screen__actions\">\n\t\t\t\t\t\t\t{ actions }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) }\n\t\t\t\t</HStack>\n\t\t\t\t{ meta && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<div className=\"edit-site-sidebar-navigation-screen__meta\">\n\t\t\t\t\t\t\t{ meta }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</>\n\t\t\t\t) }\n\n\t\t\t\t<div className=\"edit-site-sidebar-navigation-screen__content\">\n\t\t\t\t\t{ description && (\n\t\t\t\t\t\t<p className=\"edit-site-sidebar-navigation-screen__description\">\n\t\t\t\t\t\t\t{ description }\n\t\t\t\t\t\t</p>\n\t\t\t\t\t) }\n\t\t\t\t\t{ content }\n\t\t\t\t</div>\n\t\t\t</VStack>\n\t\t\t{ footer && (\n\t\t\t\t<footer className=\"edit-site-sidebar-navigation-screen__footer\">\n\t\t\t\t\t{ footer }\n\t\t\t\t</footer>\n\t\t\t) }\n\t\t</>\n\t);\n}\n"]}

package/build-module/components/sidebar-navigation-screen-main/template-part-hint.js

@@ -28,6 +28,6 @@ export default function TemplatePartHint() {
     onRemove: () => {
       setPreference('core', PREFERENCE_NAME, false);
     }
-  }, __('Looking for template parts? You can now find them in the new "Patterns" page.'));
+  }, __('Looking for template parts? Find them in "Patterns".'));
 }
 //# sourceMappingURL=template-part-hint.js.map

package/build-module/components/sidebar-navigation-screen-main/template-part-hint.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/sidebar-navigation-screen-main/template-part-hint.js"],"names":["Notice","useDispatch","useSelect","__","store","preferencesStore","PREFERENCE_NAME","TemplatePartHint","showTemplatePartHint","select","get","set","setPreference"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,MAAT,QAAuB,uBAAvB;AACA,SAASC,WAAT,EAAsBC,SAAtB,QAAuC,iBAAvC;AACA,SAASC,EAAT,QAAmB,iBAAnB;AACA,SAASC,KAAK,IAAIC,gBAAlB,QAA0C,wBAA1C;AAEA,MAAMC,eAAe,GAAG,+BAAxB;AAEA,eAAe,SAASC,gBAAT,GAA4B;AAC1C,QAAMC,oBAAoB,GAAGN,SAAS,CACnCO,MAAF;AAAA;;AAAA,0BACCA,MAAM,CAAEJ,gBAAF,CAAN,CAA2BK,GAA3B,CAAgC,MAAhC,EAAwCJ,eAAxC,CADD,qDAC8D,IAD9D;AAAA,GADqC,EAGrC,EAHqC,CAAtC;AAMA,QAAM;AAAEK,IAAAA,GAAG,EAAEC;AAAP,MAAyBX,WAAW,CAAEI,gBAAF,CAA1C;;AACA,MAAK,CAAEG,oBAAP,EAA8B;AAC7B,WAAO,IAAP;AACA;;AAED,SACC,cAAC,MAAD;AACC,IAAA,UAAU,EAAC,QADZ;AAEC,IAAA,SAAS,EAAC,2BAFX;AAGC,IAAA,QAAQ,EAAG,MAAM;AAChBI,MAAAA,aAAa,CAAE,MAAF,EAAUN,eAAV,EAA2B,KAA3B,CAAb;AACA;AALF,KAOGH,EAAE,CACH,+EADG,CAPL,CADD;AAaA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Notice } from '@wordpress/components';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { __ } from '@wordpress/i18n';\nimport { store as preferencesStore } from '@wordpress/preferences';\n\nconst PREFERENCE_NAME = 'isTemplatePartMoveHintVisible';\n\nexport default function TemplatePartHint() {\n\tconst showTemplatePartHint = useSelect(\n\t\t( select ) =>\n\t\t\tselect( preferencesStore ).get( 'core', PREFERENCE_NAME ) ?? true,\n\t\t[]\n\t);\n\n\tconst { set: setPreference } = useDispatch( preferencesStore );\n\tif ( ! showTemplatePartHint ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<Notice\n\t\t\tpoliteness=\"polite\"\n\t\t\tclassName=\"edit-site-sidebar__notice\"\n\t\t\tonRemove={ () => {\n\t\t\t\tsetPreference( 'core', PREFERENCE_NAME, false );\n\t\t\t} }\n\t\t>\n\t\t\t{ __(\n\t\t\t\t'Looking for template parts? You can now find them in the new \"Patterns\" page.'\n\t\t\t) }\n\t\t</Notice>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/sidebar-navigation-screen-main/template-part-hint.js"],"names":["Notice","useDispatch","useSelect","__","store","preferencesStore","PREFERENCE_NAME","TemplatePartHint","showTemplatePartHint","select","get","set","setPreference"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,MAAT,QAAuB,uBAAvB;AACA,SAASC,WAAT,EAAsBC,SAAtB,QAAuC,iBAAvC;AACA,SAASC,EAAT,QAAmB,iBAAnB;AACA,SAASC,KAAK,IAAIC,gBAAlB,QAA0C,wBAA1C;AAEA,MAAMC,eAAe,GAAG,+BAAxB;AAEA,eAAe,SAASC,gBAAT,GAA4B;AAC1C,QAAMC,oBAAoB,GAAGN,SAAS,CACnCO,MAAF;AAAA;;AAAA,0BACCA,MAAM,CAAEJ,gBAAF,CAAN,CAA2BK,GAA3B,CAAgC,MAAhC,EAAwCJ,eAAxC,CADD,qDAC8D,IAD9D;AAAA,GADqC,EAGrC,EAHqC,CAAtC;AAMA,QAAM;AAAEK,IAAAA,GAAG,EAAEC;AAAP,MAAyBX,WAAW,CAAEI,gBAAF,CAA1C;;AACA,MAAK,CAAEG,oBAAP,EAA8B;AAC7B,WAAO,IAAP;AACA;;AAED,SACC,cAAC,MAAD;AACC,IAAA,UAAU,EAAC,QADZ;AAEC,IAAA,SAAS,EAAC,2BAFX;AAGC,IAAA,QAAQ,EAAG,MAAM;AAChBI,MAAAA,aAAa,CAAE,MAAF,EAAUN,eAAV,EAA2B,KAA3B,CAAb;AACA;AALF,KAOGH,EAAE,CAAE,sDAAF,CAPL,CADD;AAWA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Notice } from '@wordpress/components';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { __ } from '@wordpress/i18n';\nimport { store as preferencesStore } from '@wordpress/preferences';\n\nconst PREFERENCE_NAME = 'isTemplatePartMoveHintVisible';\n\nexport default function TemplatePartHint() {\n\tconst showTemplatePartHint = useSelect(\n\t\t( select ) =>\n\t\t\tselect( preferencesStore ).get( 'core', PREFERENCE_NAME ) ?? true,\n\t\t[]\n\t);\n\n\tconst { set: setPreference } = useDispatch( preferencesStore );\n\tif ( ! showTemplatePartHint ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<Notice\n\t\t\tpoliteness=\"polite\"\n\t\t\tclassName=\"edit-site-sidebar__notice\"\n\t\t\tonRemove={ () => {\n\t\t\t\tsetPreference( 'core', PREFERENCE_NAME, false );\n\t\t\t} }\n\t\t>\n\t\t\t{ __( 'Looking for template parts? Find them in \"Patterns\".' ) }\n\t\t</Notice>\n\t);\n}\n"]}

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

@@ -37,6 +37,7 @@ export default function ScreenNavigationMoreMenu(props) {
 
   return createElement(Fragment, null, createElement(DropdownMenu, {
     className: "sidebar-navigation__more-menu",
+    label: __('Actions'),
     icon: moreVertical,
     popoverProps: POPOVER_PROPS
   }, ({