@wordpress/edit-site 5.14.0 → 5.15.0

package/build/components/page-patterns/use-patterns.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/page-patterns/use-patterns.js"],"names":["EMPTY_PATTERN_LIST","createTemplatePartId","theme","slug","templatePartToPattern","templatePart","blocks","content","raw","categories","area","description","keywords","name","title","rendered","type","templatePartCategories","templatePartHasCategory","item","category","includes","useTemplatePartsAsPatterns","categoryId","postType","TEMPLATE_PARTS","filterValue","templateParts","isResolving","select","getEntityRecords","_isResolving","coreStore","query","per_page","rawTemplateParts","partsAsPatterns","map","filteredTemplateParts","hasCategory","useThemePatterns","PATTERNS","blockPatterns","getSettings","editSiteStore","settings","__experimentalAdditionalBlockPatterns","__experimentalBlockPatterns","restBlockPatterns","getBlockPatterns","patterns","filter","pattern","CORE_PATTERN_SOURCES","source","filterOutDuplicatesByName","filteredPatterns","currentCategory","reusableBlockToPattern","reusableBlock","wp_pattern","id","syncStatus","wp_pattern_sync_status","SYNC_TYPES","full","useUserPatterns","categoryType","USER_PATTERNS","unfilteredPatterns","USER_PATTERN_CATEGORY","records","record","length","syncedPatterns","unsyncedPatterns","forEach","push","usePatterns"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { parse } from '@wordpress/blocks';\nimport { useSelect } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport {\n\tCORE_PATTERN_SOURCES,\n\tPATTERNS,\n\tSYNC_TYPES,\n\tTEMPLATE_PARTS,\n\tUSER_PATTERNS,\n\tUSER_PATTERN_CATEGORY,\n\tfilterOutDuplicatesByName,\n} from './utils';\nimport { unlock } from '../../lock-unlock';\nimport { searchItems } from './search-items';\nimport { store as editSiteStore } from '../../store';\n\nconst EMPTY_PATTERN_LIST = [];\n\nconst createTemplatePartId = ( theme, slug ) =>\n\ttheme && slug ? theme + '//' + slug : null;\n\nconst templatePartToPattern = ( templatePart ) => ( {\n\tblocks: parse( templatePart.content.raw ),\n\tcategories: [ templatePart.area ],\n\tdescription: templatePart.description || '',\n\tkeywords: templatePart.keywords || [],\n\tname: createTemplatePartId( templatePart.theme, templatePart.slug ),\n\ttitle: templatePart.title.rendered,\n\ttype: templatePart.type,\n\ttemplatePart,\n} );\n\nconst templatePartCategories = [ 'header', 'footer', 'sidebar' ];\nconst templatePartHasCategory = ( item, category ) => {\n\tif ( category === 'uncategorized' ) {\n\t\treturn ! templatePartCategories.includes( item.templatePart.area );\n\t}\n\n\treturn item.templatePart.area === category;\n};\n\nconst useTemplatePartsAsPatterns = (\n\tcategoryId,\n\tpostType = TEMPLATE_PARTS,\n\tfilterValue = ''\n) => {\n\tconst { templateParts, isResolving } = useSelect(\n\t\t( select ) => {\n\t\t\tif ( postType !== TEMPLATE_PARTS ) {\n\t\t\t\treturn {\n\t\t\t\t\ttemplateParts: EMPTY_PATTERN_LIST,\n\t\t\t\t\tisResolving: false,\n\t\t\t\t};\n\t\t\t}\n\n\t\t\tconst { getEntityRecords, isResolving: _isResolving } =\n\t\t\t\tselect( coreStore );\n\t\t\tconst query = { per_page: -1 };\n\t\t\tconst rawTemplateParts = getEntityRecords(\n\t\t\t\t'postType',\n\t\t\t\tpostType,\n\t\t\t\tquery\n\t\t\t);\n\t\t\tconst partsAsPatterns = rawTemplateParts?.map( ( templatePart ) =>\n\t\t\t\ttemplatePartToPattern( templatePart )\n\t\t\t);\n\n\t\t\treturn {\n\t\t\t\ttemplateParts: partsAsPatterns,\n\t\t\t\tisResolving: _isResolving( 'getEntityRecords', [\n\t\t\t\t\t'postType',\n\t\t\t\t\t'wp_template_part',\n\t\t\t\t\tquery,\n\t\t\t\t] ),\n\t\t\t};\n\t\t},\n\t\t[ postType ]\n\t);\n\n\tconst filteredTemplateParts = useMemo( () => {\n\t\tif ( ! templateParts ) {\n\t\t\treturn EMPTY_PATTERN_LIST;\n\t\t}\n\n\t\treturn searchItems( templateParts, filterValue, {\n\t\t\tcategoryId,\n\t\t\thasCategory: templatePartHasCategory,\n\t\t} );\n\t}, [ templateParts, filterValue, categoryId ] );\n\n\treturn { templateParts: filteredTemplateParts, isResolving };\n};\n\nconst useThemePatterns = (\n\tcategoryId,\n\tpostType = PATTERNS,\n\tfilterValue = ''\n) => {\n\tconst blockPatterns = useSelect( ( select ) => {\n\t\tconst { getSettings } = unlock( select( editSiteStore ) );\n\t\tconst settings = getSettings();\n\t\treturn (\n\t\t\tsettings.__experimentalAdditionalBlockPatterns ??\n\t\t\tsettings.__experimentalBlockPatterns\n\t\t);\n\t} );\n\n\tconst restBlockPatterns = useSelect( ( select ) =>\n\t\tselect( coreStore ).getBlockPatterns()\n\t);\n\n\tconst patterns = useMemo(\n\t\t() =>\n\t\t\t[ ...( blockPatterns || [] ), ...( restBlockPatterns || [] ) ]\n\t\t\t\t.filter(\n\t\t\t\t\t( pattern ) =>\n\t\t\t\t\t\t! CORE_PATTERN_SOURCES.includes( pattern.source )\n\t\t\t\t)\n\t\t\t\t.filter( filterOutDuplicatesByName )\n\t\t\t\t.map( ( pattern ) => ( {\n\t\t\t\t\t...pattern,\n\t\t\t\t\tkeywords: pattern.keywords || [],\n\t\t\t\t\ttype: 'pattern',\n\t\t\t\t\tblocks: parse( pattern.content ),\n\t\t\t\t} ) ),\n\t\t[ blockPatterns, restBlockPatterns ]\n\t);\n\n\tconst filteredPatterns = useMemo( () => {\n\t\tif ( postType !== PATTERNS ) {\n\t\t\treturn EMPTY_PATTERN_LIST;\n\t\t}\n\n\t\treturn searchItems( patterns, filterValue, {\n\t\t\tcategoryId,\n\t\t\thasCategory: ( item, currentCategory ) =>\n\t\t\t\titem.categories?.includes( currentCategory ),\n\t\t} );\n\t}, [ patterns, filterValue, categoryId, postType ] );\n\n\treturn filteredPatterns;\n};\n\nconst reusableBlockToPattern = ( reusableBlock ) => ( {\n\tblocks: parse( reusableBlock.content.raw ),\n\tcategories: reusableBlock.wp_pattern,\n\tid: reusableBlock.id,\n\tname: reusableBlock.slug,\n\tsyncStatus: reusableBlock.wp_pattern_sync_status || SYNC_TYPES.full,\n\ttitle: reusableBlock.title.raw,\n\ttype: reusableBlock.type,\n\treusableBlock,\n} );\n\nconst useUserPatterns = (\n\tcategoryId,\n\tcategoryType = PATTERNS,\n\tfilterValue = ''\n) => {\n\tconst postType = categoryType === PATTERNS ? USER_PATTERNS : categoryType;\n\tconst unfilteredPatterns = useSelect(\n\t\t( select ) => {\n\t\t\tif (\n\t\t\t\tpostType !== USER_PATTERNS ||\n\t\t\t\tcategoryId !== USER_PATTERN_CATEGORY\n\t\t\t) {\n\t\t\t\treturn EMPTY_PATTERN_LIST;\n\t\t\t}\n\n\t\t\tconst { getEntityRecords } = select( coreStore );\n\t\t\tconst records = getEntityRecords( 'postType', postType, {\n\t\t\t\tper_page: -1,\n\t\t\t} );\n\n\t\t\tif ( ! records ) {\n\t\t\t\treturn EMPTY_PATTERN_LIST;\n\t\t\t}\n\n\t\t\treturn records.map( ( record ) =>\n\t\t\t\treusableBlockToPattern( record )\n\t\t\t);\n\t\t},\n\t\t[ postType, categoryId ]\n\t);\n\n\tconst filteredPatterns = useMemo( () => {\n\t\tif ( ! unfilteredPatterns.length ) {\n\t\t\treturn EMPTY_PATTERN_LIST;\n\t\t}\n\n\t\treturn searchItems( unfilteredPatterns, filterValue, {\n\t\t\t// We exit user pattern retrieval early if we aren't in the\n\t\t\t// catch-all category for user created patterns, so it has\n\t\t\t// to be in the category.\n\t\t\thasCategory: () => true,\n\t\t} );\n\t}, [ unfilteredPatterns, filterValue ] );\n\n\tconst patterns = { syncedPatterns: [], unsyncedPatterns: [] };\n\n\tfilteredPatterns.forEach( ( pattern ) => {\n\t\tif ( pattern.syncStatus === SYNC_TYPES.full ) {\n\t\t\tpatterns.syncedPatterns.push( pattern );\n\t\t} else {\n\t\t\tpatterns.unsyncedPatterns.push( pattern );\n\t\t}\n\t} );\n\n\treturn patterns;\n};\n\nexport const usePatterns = ( categoryType, categoryId, filterValue ) => {\n\tconst blockPatterns = useThemePatterns(\n\t\tcategoryId,\n\t\tcategoryType,\n\t\tfilterValue\n\t);\n\n\tconst { syncedPatterns = [], unsyncedPatterns = [] } = useUserPatterns(\n\t\tcategoryId,\n\t\tcategoryType,\n\t\tfilterValue\n\t);\n\n\tconst { templateParts, isResolving } = useTemplatePartsAsPatterns(\n\t\tcategoryId,\n\t\tcategoryType,\n\t\tfilterValue\n\t);\n\n\tconst patterns = {\n\t\tsyncedPatterns: [ ...templateParts, ...syncedPatterns ],\n\t\tunsyncedPatterns: [ ...blockPatterns, ...unsyncedPatterns ],\n\t};\n\n\treturn [ patterns, isResolving ];\n};\n\nexport default usePatterns;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/page-patterns/use-patterns.js"],"names":["EMPTY_PATTERN_LIST","createTemplatePartId","theme","slug","templatePartToPattern","templatePart","blocks","content","raw","categories","area","description","isCustom","source","keywords","id","name","title","rendered","type","templatePartHasCategory","item","category","selectTemplatePartsAsPatterns","select","categoryId","search","getEntityRecords","getIsResolving","coreStore","query","per_page","rawTemplateParts","TEMPLATE_PARTS","templateParts","map","isResolving","patterns","hasCategory","selectThemePatterns","getSettings","editSiteStore","settings","blockPatterns","__experimentalAdditionalBlockPatterns","__experimentalBlockPatterns","restBlockPatterns","getBlockPatterns","filter","pattern","CORE_PATTERN_SOURCES","includes","filterOutDuplicatesByName","inserter","currentCategory","hasOwnProperty","reusableBlockToPattern","reusableBlock","wp_pattern","syncStatus","wp_pattern_sync_status","SYNC_TYPES","full","selectUserPatterns","records","USER_PATTERNS","record","usePatterns","categoryType","PATTERNS"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { parse } from '@wordpress/blocks';\nimport { useSelect } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { decodeEntities } from '@wordpress/html-entities';\n\n/**\n * Internal dependencies\n */\nimport {\n\tCORE_PATTERN_SOURCES,\n\tPATTERNS,\n\tSYNC_TYPES,\n\tTEMPLATE_PARTS,\n\tUSER_PATTERNS,\n\tfilterOutDuplicatesByName,\n} from './utils';\nimport { unlock } from '../../lock-unlock';\nimport { searchItems } from './search-items';\nimport { store as editSiteStore } from '../../store';\n\nconst EMPTY_PATTERN_LIST = [];\n\nconst createTemplatePartId = ( theme, slug ) =>\n\ttheme && slug ? theme + '//' + slug : null;\n\nconst templatePartToPattern = ( templatePart ) => ( {\n\tblocks: parse( templatePart.content.raw ),\n\tcategories: [ templatePart.area ],\n\tdescription: templatePart.description || '',\n\tisCustom: templatePart.source === 'custom',\n\tkeywords: templatePart.keywords || [],\n\tid: createTemplatePartId( templatePart.theme, templatePart.slug ),\n\tname: createTemplatePartId( templatePart.theme, templatePart.slug ),\n\ttitle: decodeEntities( templatePart.title.rendered ),\n\ttype: templatePart.type,\n\ttemplatePart,\n} );\n\nconst templatePartHasCategory = ( item, category ) =>\n\titem.templatePart.area === category;\n\nconst selectTemplatePartsAsPatterns = (\n\tselect,\n\t{ categoryId, search = '' } = {}\n) => {\n\tconst { getEntityRecords, getIsResolving } = select( coreStore );\n\tconst query = { per_page: -1 };\n\tconst rawTemplateParts =\n\t\tgetEntityRecords( 'postType', TEMPLATE_PARTS, query ) ??\n\t\tEMPTY_PATTERN_LIST;\n\tconst templateParts = rawTemplateParts.map( ( templatePart ) =>\n\t\ttemplatePartToPattern( templatePart )\n\t);\n\n\tconst isResolving = getIsResolving( 'getEntityRecords', [\n\t\t'postType',\n\t\t'wp_template_part',\n\t\tquery,\n\t] );\n\n\tconst patterns = searchItems( templateParts, search, {\n\t\tcategoryId,\n\t\thasCategory: templatePartHasCategory,\n\t} );\n\n\treturn { patterns, isResolving };\n};\n\nconst selectThemePatterns = ( select, { categoryId, search = '' } = {} ) => {\n\tconst { getSettings } = unlock( select( editSiteStore ) );\n\tconst settings = getSettings();\n\tconst blockPatterns =\n\t\tsettings.__experimentalAdditionalBlockPatterns ??\n\t\tsettings.__experimentalBlockPatterns;\n\n\tconst restBlockPatterns = select( coreStore ).getBlockPatterns();\n\n\tlet patterns = [\n\t\t...( blockPatterns || [] ),\n\t\t...( restBlockPatterns || [] ),\n\t]\n\t\t.filter(\n\t\t\t( pattern ) => ! CORE_PATTERN_SOURCES.includes( pattern.source )\n\t\t)\n\t\t.filter( filterOutDuplicatesByName )\n\t\t.filter( ( pattern ) => pattern.inserter !== false )\n\t\t.map( ( pattern ) => ( {\n\t\t\t...pattern,\n\t\t\tkeywords: pattern.keywords || [],\n\t\t\ttype: 'pattern',\n\t\t\tblocks: parse( pattern.content ),\n\t\t} ) );\n\n\tif ( categoryId ) {\n\t\tpatterns = searchItems( patterns, search, {\n\t\t\tcategoryId,\n\t\t\thasCategory: ( item, currentCategory ) =>\n\t\t\t\titem.categories?.includes( currentCategory ),\n\t\t} );\n\t} else {\n\t\tpatterns = searchItems( patterns, search, {\n\t\t\thasCategory: ( item ) => ! item.hasOwnProperty( 'categories' ),\n\t\t} );\n\t}\n\n\treturn { patterns, isResolving: false };\n};\n\nconst reusableBlockToPattern = ( reusableBlock ) => ( {\n\tblocks: parse( reusableBlock.content.raw ),\n\tcategories: reusableBlock.wp_pattern,\n\tid: reusableBlock.id,\n\tname: reusableBlock.slug,\n\tsyncStatus: reusableBlock.wp_pattern_sync_status || SYNC_TYPES.full,\n\ttitle: reusableBlock.title.raw,\n\ttype: reusableBlock.type,\n\treusableBlock,\n} );\n\nconst selectUserPatterns = ( select, { search = '', syncStatus } = {} ) => {\n\tconst { getEntityRecords, getIsResolving } = select( coreStore );\n\n\tconst query = { per_page: -1 };\n\tconst records = getEntityRecords( 'postType', USER_PATTERNS, query );\n\n\tlet patterns = records\n\t\t? records.map( ( record ) => reusableBlockToPattern( record ) )\n\t\t: EMPTY_PATTERN_LIST;\n\tconst isResolving = getIsResolving( 'getEntityRecords', [\n\t\t'postType',\n\t\tUSER_PATTERNS,\n\t\tquery,\n\t] );\n\n\tif ( syncStatus ) {\n\t\tpatterns = patterns.filter(\n\t\t\t( pattern ) => pattern.syncStatus === syncStatus\n\t\t);\n\t}\n\n\tpatterns = searchItems( patterns, search, {\n\t\t// We exit user pattern retrieval early if we aren't in the\n\t\t// catch-all category for user created patterns, so it has\n\t\t// to be in the category.\n\t\thasCategory: () => true,\n\t} );\n\n\treturn { patterns, isResolving };\n};\n\nexport const usePatterns = (\n\tcategoryType,\n\tcategoryId,\n\t{ search = '', syncStatus }\n) => {\n\treturn useSelect(\n\t\t( select ) => {\n\t\t\tif ( categoryType === TEMPLATE_PARTS ) {\n\t\t\t\treturn selectTemplatePartsAsPatterns( select, {\n\t\t\t\t\tcategoryId,\n\t\t\t\t\tsearch,\n\t\t\t\t} );\n\t\t\t} else if ( categoryType === PATTERNS ) {\n\t\t\t\treturn selectThemePatterns( select, { categoryId, search } );\n\t\t\t} else if ( categoryType === USER_PATTERNS ) {\n\t\t\t\treturn selectUserPatterns( select, { search, syncStatus } );\n\t\t\t}\n\t\t\treturn { patterns: EMPTY_PATTERN_LIST, isResolving: false };\n\t\t},\n\t\t[ categoryId, categoryType, search, syncStatus ]\n\t);\n};\n\nexport default usePatterns;\n"]}

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

@@ -0,0 +1,74 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = AddNewTemplatePart;
+
+var _element = require("@wordpress/element");
+
+var _router = require("@wordpress/router");
+
+var _data = require("@wordpress/data");
+
+var _coreData = require("@wordpress/core-data");
+
+var _components = require("@wordpress/components");
+
+var _lockUnlock = require("../../lock-unlock");
+
+var _store = require("../../store");
+
+var _createTemplatePartModal = _interopRequireDefault(require("../create-template-part-modal"));
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+const {
+  useHistory
+} = (0, _lockUnlock.unlock)(_router.privateApis);
+
+function AddNewTemplatePart() {
+  const {
+    canCreate,
+    postType
+  } = (0, _data.useSelect)(select => {
+    const {
+      supportsTemplatePartsMode
+    } = select(_store.store).getSettings();
+    return {
+      canCreate: !supportsTemplatePartsMode,
+      postType: select(_coreData.store).getPostType('wp_template_part')
+    };
+  }, []);
+  const [isModalOpen, setIsModalOpen] = (0, _element.useState)(false);
+  const history = useHistory();
+
+  if (!canCreate || !postType) {
+    return null;
+  }
+
+  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.Button, {
+    variant: "primary",
+    onClick: () => setIsModalOpen(true)
+  }, postType.labels.add_new_item), isModalOpen && (0, _element.createElement)(_createTemplatePartModal.default, {
+    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/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":["useHistory","routerPrivateApis","AddNewTemplatePart","canCreate","postType","select","supportsTemplatePartsMode","editSiteStore","getSettings","coreStore","getPostType","isModalOpen","setIsModalOpen","history","labels","add_new_item","templatePart","push","postId","id","canvas"],"mappings":";;;;;;;;;AAMA;;AAHA;;AACA;;AACA;;AAEA;;AAKA;;AACA;;AACA;;AAdA;AACA;AACA;;AAOA;AACA;AACA;AAKA,MAAM;AAAEA,EAAAA;AAAF,IAAiB,wBAAQC,mBAAR,CAAvB;;AAEe,SAASC,kBAAT,GAA8B;AAC5C,QAAM;AAAEC,IAAAA,SAAF;AAAaC,IAAAA;AAAb,MAA0B,qBAAaC,MAAF,IAAc;AACxD,UAAM;AAAEC,MAAAA;AAAF,QACLD,MAAM,CAAEE,YAAF,CAAN,CAAwBC,WAAxB,EADD;AAEA,WAAO;AACNL,MAAAA,SAAS,EAAE,CAAEG,yBADP;AAENF,MAAAA,QAAQ,EAAEC,MAAM,CAAEI,eAAF,CAAN,CAAoBC,WAApB,CAAiC,kBAAjC;AAFJ,KAAP;AAIA,GAP+B,EAO7B,EAP6B,CAAhC;AAQA,QAAM,CAAEC,WAAF,EAAeC,cAAf,IAAkC,uBAAU,KAAV,CAAxC;AACA,QAAMC,OAAO,GAAGb,UAAU,EAA1B;;AAEA,MAAK,CAAEG,SAAF,IAAe,CAAEC,QAAtB,EAAiC;AAChC,WAAO,IAAP;AACA;;AAED,SACC,qDACC,4BAAC,kBAAD;AAAQ,IAAA,OAAO,EAAC,SAAhB;AAA0B,IAAA,OAAO,EAAG,MAAMQ,cAAc,CAAE,IAAF;AAAxD,KACGR,QAAQ,CAACU,MAAT,CAAgBC,YADnB,CADD,EAIGJ,WAAW,IACZ,4BAAC,gCAAD;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;AAEbf,QAAAA,QAAQ,EAAE,kBAFG;AAGbgB,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/components/page-template-parts/index.js

@@ -13,8 +13,6 @@ var _components = require("@wordpress/components");
 
 var _i18n = require("@wordpress/i18n");
 
-var _data = require("@wordpress/data");
-
 var _coreData = require("@wordpress/core-data");
 
 var _htmlEntities = require("@wordpress/html-entities");
@@ -29,9 +27,7 @@ var _addedBy = _interopRequireDefault(require("../list/added-by"));
 
 var _templateActions = _interopRequireDefault(require("../template-actions"));
 
-var _addNewTemplate = _interopRequireDefault(require("../add-new-template"));
-
-var _store = require("../../store");
+var _addNewTemplatePart = _interopRequireDefault(require("./add-new-template-part"));
 
 /**
  * WordPress dependencies
@@ -46,17 +42,6 @@ function PageTemplateParts() {
   } = (0, _coreData.useEntityRecords)('postType', 'wp_template_part', {
     per_page: -1
   });
-  const {
-    canCreate
-  } = (0, _data.useSelect)(select => {
-    const {
-      supportsTemplatePartsMode
-    } = select(_store.store).getSettings();
-    return {
-      postType: select(_coreData.store).getPostType('wp_template_part'),
-      canCreate: !supportsTemplatePartsMode
-    };
-  });
   const columns = [{
     header: (0, _i18n.__)('Template Part'),
     cell: templatePart => (0, _element.createElement)(_components.__experimentalVStack, null, (0, _element.createElement)(_components.__experimentalHeading, {
@@ -88,13 +73,7 @@ function PageTemplateParts() {
   }];
   return (0, _element.createElement)(_page.default, {
     title: (0, _i18n.__)('Template Parts'),
-    actions: canCreate && (0, _element.createElement)(_addNewTemplate.default, {
-      templateType: 'wp_template_part',
-      showIcon: false,
-      toggleProps: {
-        variant: 'primary'
-      }
-    })
+    actions: (0, _element.createElement)(_addNewTemplatePart.default, null)
   }, templateParts && (0, _element.createElement)(_table.default, {
     data: templateParts,
     columns: columns

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/page-template-parts/index.js"],"names":["PageTemplateParts","records","templateParts","per_page","canCreate","select","supportsTemplatePartsMode","editSiteStore","getSettings","postType","coreStore","getPostType","columns","header","cell","templatePart","postId","id","type","canvas","backPath","title","rendered","slug","maxWidth","variant"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AACA;;AACA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAtBA;AACA;AACA;;AAWA;AACA;AACA;AASe,SAASA,iBAAT,GAA6B;AAC3C,QAAM;AAAEC,IAAAA,OAAO,EAAEC;AAAX,MAA6B,gCAClC,UADkC,EAElC,kBAFkC,EAGlC;AACCC,IAAAA,QAAQ,EAAE,CAAC;AADZ,GAHkC,CAAnC;AAQA,QAAM;AAAEC,IAAAA;AAAF,MAAgB,qBAAaC,MAAF,IAAc;AAC9C,UAAM;AAAEC,MAAAA;AAAF,QACLD,MAAM,CAAEE,YAAF,CAAN,CAAwBC,WAAxB,EADD;AAEA,WAAO;AACNC,MAAAA,QAAQ,EAAEJ,MAAM,CAAEK,eAAF,CAAN,CAAoBC,WAApB,CAAiC,kBAAjC,CADJ;AAENP,MAAAA,SAAS,EAAE,CAAEE;AAFP,KAAP;AAIA,GAPqB,CAAtB;AASA,QAAMM,OAAO,GAAG,CACf;AACCC,IAAAA,MAAM,EAAE,cAAI,eAAJ,CADT;AAECC,IAAAA,IAAI,EAAIC,YAAF,IACL,4BAAC,gCAAD,QACC,4BAAC,iCAAD;AAAS,MAAA,EAAE,EAAC,IAAZ;AAAiB,MAAA,KAAK,EAAG;AAAzB,OACC,4BAAC,aAAD;AACC,MAAA,MAAM,EAAG;AACRC,QAAAA,MAAM,EAAED,YAAY,CAACE,EADb;AAERR,QAAAA,QAAQ,EAAEM,YAAY,CAACG,IAFf;AAGRC,QAAAA,MAAM,EAAE;AAHA,OADV;AAMC,MAAA,KAAK,EAAG;AAAEC,QAAAA,QAAQ,EAAE;AAAZ;AANT,OAQG,kCACDL,YAAY,CAACM,KAAb,EAAoBC,QAApB,IACCP,YAAY,CAACQ,IAFb,CARH,CADD,CADD,CAHF;AAqBCC,IAAAA,QAAQ,EAAE;AArBX,GADe,EAwBf;AACCX,IAAAA,MAAM,EAAE,cAAI,UAAJ,CADT;AAECC,IAAAA,IAAI,EAAIC,YAAF,IACL,4BAAC,gBAAD;AACC,MAAA,QAAQ,EAAGA,YAAY,CAACG,IADzB;AAEC,MAAA,MAAM,EAAGH,YAAY,CAACE;AAFvB;AAHF,GAxBe,EAiCf;AACCJ,IAAAA,MAAM,EAAE,4BAAC,0BAAD,QAAkB,cAAI,SAAJ,CAAlB,CADT;AAECC,IAAAA,IAAI,EAAIC,YAAF,IACL,4BAAC,wBAAD;AACC,MAAA,QAAQ,EAAGA,YAAY,CAACG,IADzB;AAEC,MAAA,MAAM,EAAGH,YAAY,CAACE;AAFvB;AAHF,GAjCe,CAAhB;AA4CA,SACC,4BAAC,aAAD;AACC,IAAA,KAAK,EAAG,cAAI,gBAAJ,CADT;AAEC,IAAA,OAAO,EACNb,SAAS,IACR,4BAAC,uBAAD;AACC,MAAA,YAAY,EAAG,kBADhB;AAEC,MAAA,QAAQ,EAAG,KAFZ;AAGC,MAAA,WAAW,EAAG;AAAEqB,QAAAA,OAAO,EAAE;AAAX;AAHf;AAJH,KAYGvB,aAAa,IACd,4BAAC,cAAD;AAAO,IAAA,IAAI,EAAGA,aAAd;AAA8B,IAAA,OAAO,EAAGU;AAAxC,IAbF,CADD;AAkBA","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":["PageTemplateParts","records","templateParts","per_page","columns","header","cell","templatePart","postId","id","postType","type","canvas","backPath","title","rendered","slug","maxWidth"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AACA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AACA;;AApBA;AACA;AACA;;AAUA;AACA;AACA;AAQe,SAASA,iBAAT,GAA6B;AAC3C,QAAM;AAAEC,IAAAA,OAAO,EAAEC;AAAX,MAA6B,gCAClC,UADkC,EAElC,kBAFkC,EAGlC;AACCC,IAAAA,QAAQ,EAAE,CAAC;AADZ,GAHkC,CAAnC;AAQA,QAAMC,OAAO,GAAG,CACf;AACCC,IAAAA,MAAM,EAAE,cAAI,eAAJ,CADT;AAECC,IAAAA,IAAI,EAAIC,YAAF,IACL,4BAAC,gCAAD,QACC,4BAAC,iCAAD;AAAS,MAAA,EAAE,EAAC,IAAZ;AAAiB,MAAA,KAAK,EAAG;AAAzB,OACC,4BAAC,aAAD;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,OAQG,kCACDN,YAAY,CAACO,KAAb,EAAoBC,QAApB,IACCR,YAAY,CAACS,IAFb,CARH,CADD,CADD,CAHF;AAqBCC,IAAAA,QAAQ,EAAE;AArBX,GADe,EAwBf;AACCZ,IAAAA,MAAM,EAAE,cAAI,UAAJ,CADT;AAECC,IAAAA,IAAI,EAAIC,YAAF,IACL,4BAAC,gBAAD;AACC,MAAA,QAAQ,EAAGA,YAAY,CAACI,IADzB;AAEC,MAAA,MAAM,EAAGJ,YAAY,CAACE;AAFvB;AAHF,GAxBe,EAiCf;AACCJ,IAAAA,MAAM,EAAE,4BAAC,0BAAD,QAAkB,cAAI,SAAJ,CAAlB,CADT;AAECC,IAAAA,IAAI,EAAIC,YAAF,IACL,4BAAC,wBAAD;AACC,MAAA,QAAQ,EAAGA,YAAY,CAACI,IADzB;AAEC,MAAA,MAAM,EAAGJ,YAAY,CAACE;AAFvB;AAHF,GAjCe,CAAhB;AA4CA,SACC,4BAAC,aAAD;AACC,IAAA,KAAK,EAAG,cAAI,gBAAJ,CADT;AAEC,IAAA,OAAO,EAAG,4BAAC,2BAAD;AAFX,KAIGP,aAAa,IACd,4BAAC,cAAD;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/components/resizable-frame/index.js

@@ -13,8 +13,12 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _components = require("@wordpress/components");
 
+var _compose = require("@wordpress/compose");
+
 var _data = require("@wordpress/data");
 
+var _i18n = require("@wordpress/i18n");
+
 var _lockUnlock = require("../../lock-unlock");
 
 var _store = require("../../store");
@@ -43,7 +47,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.
 
@@ -51,7 +55,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) => {
@@ -68,21 +77,19 @@ function calculateNewHeight(width, initialAspectRatio) {
 
 function ResizableFrame({
   isFullWidth,
+  isOversized,
+  setIsOversized,
   isReady,
   children,
-  oversizedClassName,
   innerContentStyle
 }) {
-  const [frameSize, setFrameSize] = (0, _element.useState)({
-    width: '100%',
-    height: '100%'
-  }); // The width of the resizable frame when a new resize gesture starts.
+  const [frameSize, setFrameSize] = (0, _element.useState)(INITIAL_FRAME_SIZE); // The width of the resizable frame when a new resize gesture starts.
 
   const [startingWidth, setStartingWidth] = (0, _element.useState)();
   const [isResizing, setIsResizing] = (0, _element.useState)(false);
-  const [isHovering, setIsHovering] = (0, _element.useState)(false);
-  const [isOversized, setIsOversized] = (0, _element.useState)(false);
+  const [shouldShowHandle, setShouldShowHandle] = (0, _element.useState)(false);
   const [resizeRatio, setResizeRatio] = (0, _element.useState)(1);
+  const canvasMode = (0, _data.useSelect)(select => (0, _lockUnlock.unlock)(select(_store.store)).getCanvasMode(), []);
   const {
     setCanvasMode
   } = (0, _lockUnlock.unlock)((0, _data.useDispatch)(_store.store));
@@ -93,7 +100,8 @@ function ResizableFrame({
     type: 'tween',
     duration: isResizing ? 0 : 0.5
   };
-  const frameRef = (0, _element.useRef)(null); // Remember frame dimensions on initial render.
+  const frameRef = (0, _element.useRef)(null);
+  const resizableHandleHelpId = (0, _compose.useInstanceId)(ResizableFrame, 'edit-site-resizable-frame-handle-help'); // Remember frame dimensions on initial render.
 
   (0, _element.useEffect)(() => {
     const {
@@ -143,14 +151,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 = {
@@ -164,16 +185,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 (0, _element.createElement)(_components.ResizableBox, {
     as: _components.__unstableMotion.div,
     ref: frameRef,
@@ -208,34 +242,42 @@ 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 ? (0, _element.createElement)(_components.__unstableMotion.div, {
+      left: canvasMode === 'view' && (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.Tooltip, {
+        text: (0, _i18n.__)('Drag to resize')
+      }, (0, _element.createElement)(_components.__unstableMotion.button, {
         key: "handle",
-        className: "edit-site-resizable-frame__handle",
+        role: "separator",
+        "aria-orientation": "vertical",
+        className: (0, _classnames.default)('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": (0, _i18n.__)('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"
+      })), (0, _element.createElement)("div", {
+        hidden: true,
+        id: resizableHandleHelpId
+      }, (0, _i18n.__)('Use left and right arrow keys to resize the canvas. Hold shift to resize in larger increments.')))
     },
     onResizeStart: handleResizeStart,
     onResize: handleResize,
     onResizeStop: handleResizeStop,
     className: (0, _classnames.default)('edit-site-resizable-frame__inner', {
-      'is-resizing': isResizing,
-      [oversizedClassName]: isOversized
+      'is-resizing': isResizing
     })
   }, (0, _element.createElement)(_components.__unstableMotion.div, {
     className: "edit-site-resizable-frame__inner-content",

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/resizable-frame/index.js"],"names":["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","editSiteStore","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","motion","div","definition","topRight","bottomRight","bottomLeft","topLeft","borderRadius"],"mappings":";;;;;;;;;AAQA;;AALA;;AAMA;;AAIA;;AAKA;;AACA;;AAnBA;AACA;AACA;;AAGA;AACA;AACA;;AAQA;AACA;AACA;AAIA;AACA,MAAMA,sBAAsB,GAAG;AAC9BC,EAAAA,QAAQ,EAAEC,SADoB;AAE9BC,EAAAA,UAAU,EAAED,SAFkB;AAG9BE,EAAAA,MAAM,EAAEF,SAHsB;AAI9BG,EAAAA,KAAK,EAAEH,SAJuB;AAK9BI,EAAAA,MAAM,EAAEJ,SALsB;AAM9BK,EAAAA,GAAG,EAAEL,SANyB;AAO9BM,EAAAA,KAAK,EAAEN,SAPuB;AAQ9BO,EAAAA,MAAM,EAAEP,SARsB;AAS9BQ,EAAAA,IAAI,EAAER;AATwB,CAA/B,C,CAYA;;AACA,MAAMS,eAAe,GAAG,GAAxB,C,CACA;;AACA,MAAMC,qBAAqB,GAAG,IAA9B,C,CACA;;AACA,MAAMC,yBAAyB,GAAG,IAAI,IAAtC,C,CACA;AACA;AACA;;AACA,MAAMC,kCAAkC,GAAG,GAA3C;;AAEA,SAASC,kBAAT,CAA6BV,KAA7B,EAAoCW,kBAApC,EAAyD;AACxD,QAAMC,IAAI,GAAG,CAAEC,CAAF,EAAKC,CAAL,EAAQC,MAAR,KAAoB;AAChC,WAAOF,CAAC,GAAG,CAAEC,CAAC,GAAGD,CAAN,IAAYE,MAAvB;AACA,GAFD,CADwD,CAKxD;;;AACA,QAAMC,UAAU,GACf,IACAC,IAAI,CAACC,GAAL,CACC,CADD,EAECD,IAAI,CAACE,GAAL,CACC,CADD,EAEC,CAAEnB,KAAK,GAAGM,eAAV,KACGC,qBAAqB,GAAGD,eAD3B,CAFD,CAFD,CAFD,CANwD,CAiBxD;AACA;;AACA,QAAMc,uBAAuB,GAAGR,IAAI,CACnCD,kBADmC,EAEnCH,yBAFmC,EAGnCQ,UAHmC,CAApC;AAMA,SAAOhB,KAAK,GAAGoB,uBAAf;AACA;;AAED,SAASC,cAAT,CAAyB;AACxBC,EAAAA,WADwB;AAExBC,EAAAA,OAFwB;AAGxBC,EAAAA,QAHwB;AAIxBC,EAAAA,kBAJwB;AAKxBC,EAAAA;AALwB,CAAzB,EAMI;AACH,QAAM,CAAEC,SAAF,EAAaC,YAAb,IAA8B,uBAAU;AAC7C5B,IAAAA,KAAK,EAAE,MADsC;AAE7CC,IAAAA,MAAM,EAAE;AAFqC,GAAV,CAApC,CADG,CAKH;;AACA,QAAM,CAAE4B,aAAF,EAAiBC,gBAAjB,IAAsC,wBAA5C;AACA,QAAM,CAAEC,UAAF,EAAcC,aAAd,IAAgC,uBAAU,KAAV,CAAtC;AACA,QAAM,CAAEC,UAAF,EAAcC,aAAd,IAAgC,uBAAU,KAAV,CAAtC;AACA,QAAM,CAAEC,WAAF,EAAeC,cAAf,IAAkC,uBAAU,KAAV,CAAxC;AACA,QAAM,CAAEC,WAAF,EAAeC,cAAf,IAAkC,uBAAU,CAAV,CAAxC;AACA,QAAM;AAAEC,IAAAA;AAAF,MAAoB,wBAAQ,uBAAaC,YAAb,CAAR,CAA1B;AACA,QAAMC,qBAAqB,GAAG,qBAAQ,IAAR,CAA9B,CAZG,CAaH;;AACA,QAAMC,uBAAuB,GAAG,qBAAQ,IAAR,CAAhC;AACA,QAAMC,gBAAgB,GAAG;AAAEC,IAAAA,IAAI,EAAE,OAAR;AAAiBC,IAAAA,QAAQ,EAAEd,UAAU,GAAG,CAAH,GAAO;AAA5C,GAAzB;AACA,QAAMe,QAAQ,GAAG,qBAAQ,IAAR,CAAjB,CAhBG,CAkBH;;AACA,0BAAW,MAAM;AAChB,UAAM;AAAEC,MAAAA,WAAF;AAAeC,MAAAA;AAAf,QAAgCF,QAAQ,CAACG,OAAT,CAAiBC,SAAvD;AACAR,IAAAA,uBAAuB,CAACO,OAAxB,GAAkCF,WAAlC;AACAN,IAAAA,qBAAqB,CAACQ,OAAtB,GAAgCF,WAAW,GAAGC,YAA9C;AACA,GAJD,EAIG,EAJH;;AAMA,QAAMG,iBAAiB,GAAG,CAAEC,MAAF,EAAUC,UAAV,EAAsBC,GAAtB,KAA+B;AACxD;AACA;AACAxB,IAAAA,gBAAgB,CAAEwB,GAAG,CAACP,WAAN,CAAhB;AACAf,IAAAA,aAAa,CAAE,IAAF,CAAb;AACA,GALD,CAzBG,CAgCH;;;AACA,QAAMuB,YAAY,GAAG,CAAEH,MAAF,EAAUC,UAAV,EAAsBG,IAAtB,EAA4BC,KAA5B,KAAuC;AAC3D,UAAMC,eAAe,GAAGD,KAAK,CAACzD,KAAN,GAAcqC,WAAtC;AACA,UAAMsB,QAAQ,GAAG1C,IAAI,CAAC2C,GAAL,CAAUF,eAAV,CAAjB;AACA,UAAMG,eAAe,GACpBJ,KAAK,CAACzD,KAAN,GAAc,CAAd,CAAgB;AAAhB,MACG2D,QADH,GAEG,CAAEjB,uBAAuB,CAACO,OAAxB,GAAkCpB,aAApC,IAAsD,CAH1D;AAIA,UAAMiC,aAAa,GAAG7C,IAAI,CAACE,GAAL,CAAUwC,QAAV,EAAoBE,eAApB,CAAtB;AACA,UAAME,aAAa,GAAGJ,QAAQ,KAAK,CAAb,GAAiB,CAAjB,GAAqBG,aAAa,GAAGH,QAA3D;AACA,UAAMK,aAAa,GAAG,IAAID,aAA1B;AAEAzB,IAAAA,cAAc,CAAE0B,aAAa,GAAGD,aAAa,GAAG,CAAlC,CAAd;AAEA,UAAME,YAAY,GAAGpC,aAAa,GAAG4B,KAAK,CAACzD,KAA3C;AAEAoC,IAAAA,cAAc,CAAE6B,YAAY,GAAGvB,uBAAuB,CAACO,OAAzC,CAAd,CAf2D,CAiB3D;AACA;;AACArB,IAAAA,YAAY,CAAE;AACb3B,MAAAA,MAAM,EAAEkC,WAAW,GAChB,MADgB,GAEhBzB,kBAAkB,CAClBuD,YADkB,EAElBxB,qBAAqB,CAACQ,OAFJ;AAHR,KAAF,CAAZ;AAQA,GA3BD;;AA6BA,QAAMiB,gBAAgB,GAAG,CAAEd,MAAF,EAAUC,UAAV,EAAsBC,GAAtB,KAA+B;AACvDtB,IAAAA,aAAa,CAAE,KAAF,CAAb;;AAEA,QAAK,CAAEG,WAAP,EAAqB;AACpB;AACA;;AAEDC,IAAAA,cAAc,CAAE,KAAF,CAAd;AAEA,UAAM+B,cAAc,GACnBb,GAAG,CAACc,aAAJ,CAAkBC,eAAlB,CAAkCtB,WAAlC,GAAgDO,GAAG,CAACP,WADrD;;AAGA,QAAKoB,cAAc,GAAG1D,kCAAtB,EAA2D;AAC1D;AACA;AACAmB,MAAAA,YAAY,CAAE;AAAE5B,QAAAA,KAAK,EAAE,MAAT;AAAiBC,QAAAA,MAAM,EAAE;AAAzB,OAAF,CAAZ;AACA,KAJD,MAIO;AACN;AACAsC,MAAAA,aAAa,CAAE,MAAF,CAAb;AACA;AACD,GApBD;;AAsBA,QAAM+B,sBAAsB,GAAG;AAC9BC,IAAAA,OAAO,EAAE;AACRC,MAAAA,QAAQ,EAAE,CADF;AAERvE,MAAAA,MAAM,EAAE0B,SAAS,CAAC1B;AAFV,KADqB;AAK9BwE,IAAAA,SAAS,EAAE;AACVD,MAAAA,QAAQ,EAAE,CADA;AAEVvE,MAAAA,MAAM,EAAE0B,SAAS,CAAC1B;AAFR;AALmB,GAA/B;AAWA,QAAMyE,oBAAoB,GAAG;AAC5BH,IAAAA,OAAO,EAAE;AACRI,MAAAA,OAAO,EAAE,CADD;AAERtE,MAAAA,IAAI,EAAE,CAAC;AAFC,KADmB;AAK5BuE,IAAAA,QAAQ,EAAE;AACTD,MAAAA,OAAO,EAAE,CADA;AAETtE,MAAAA,IAAI,EAAE,CAAC,EAFE;AAGTwE,MAAAA,MAAM,EAAE;AAHC;AALkB,GAA7B;AAYA,SACC,4BAAC,wBAAD;AACC,IAAA,EAAE,EAAGC,6BAAOC,GADb;AAEC,IAAA,GAAG,EAAGjC,QAFP;AAGC,IAAA,OAAO,EAAG,KAHX;AAIC,IAAA,QAAQ,EAAGwB,sBAJZ;AAKC,IAAA,OAAO,EAAGhD,WAAW,GAAG,WAAH,GAAiB,SALvC;AAMC,IAAA,mBAAmB,EAAK0D,UAAF,IAAkB;AACvC,UAAKA,UAAU,KAAK,WAApB,EACCpD,YAAY,CAAE;AAAE5B,QAAAA,KAAK,EAAE,MAAT;AAAiBC,QAAAA,MAAM,EAAE;AAAzB,OAAF,CAAZ;AACD,KATF;AAUC,IAAA,UAAU,EAAG0C,gBAVd;AAWC,IAAA,IAAI,EAAGhB,SAXR;AAYC,IAAA,MAAM,EAAG;AACRzB,MAAAA,GAAG,EAAE,KADG;AAERC,MAAAA,KAAK,EAAE,KAFC;AAGRC,MAAAA,MAAM,EAAE,KAHA;AAIR;AACAC,MAAAA,IAAI,EAAEkB,OALE;AAMR0D,MAAAA,QAAQ,EAAE,KANF;AAORC,MAAAA,WAAW,EAAE,KAPL;AAQRC,MAAAA,UAAU,EAAE,KARJ;AASRC,MAAAA,OAAO,EAAE;AATD,KAZV;AAuBC,IAAA,WAAW,EAAG/C,WAvBf;AAwBC,IAAA,aAAa,EAAGxC,SAxBjB;AAyBC,IAAA,YAAY,EAAG;AACdQ,MAAAA,IAAI,EAAEV,sBADQ;AAEdQ,MAAAA,KAAK,EAAER;AAFO,KAzBhB;AA6BC,IAAA,QAAQ,EAAGW,eA7BZ;AA8BC,IAAA,QAAQ,EAAGgB,WAAW,GAAG,MAAH,GAAY,MA9BnC;AA+BC,IAAA,SAAS,EAAG,MA/Bb;AAgCC,IAAA,WAAW,EAAG,MAAMY,aAAa,CAAE,IAAF,CAhClC;AAiCC,IAAA,UAAU,EAAG,MAAMA,aAAa,CAAE,KAAF,CAjCjC;AAkCC,IAAA,eAAe,EAAG;AACjB7B,MAAAA,IAAI,EACH4B,UAAU,IAAIF,UAAd,GACC,4BAAC,4BAAD,CAAQ,GAAR;AACC,QAAA,GAAG,EAAC,QADL;AAEC,QAAA,SAAS,EAAC,mCAFX;AAGC,QAAA,QAAQ,EAAG2C,oBAHZ;AAIC,QAAA,OAAO,EAAG3C,UAAU,GAAG,UAAH,GAAgB,SAJrC;AAKC,QAAA,KAAK,EAAC,gBALP;AAMC,QAAA,OAAO,EAAG;AACT4C,UAAAA,OAAO,EAAE,CADA;AAETtE,UAAAA,IAAI,EAAE;AAFG,SANX;AAUC,QAAA,IAAI,EAAG;AACNsE,UAAAA,OAAO,EAAE,CADH;AAENtE,UAAAA,IAAI,EAAE;AAFA,SAVR;AAcC,QAAA,UAAU,EAAG;AAAEwE,UAAAA,MAAM,EAAE;AAAV;AAdd,QADD,GAiBI;AAnBY,KAlCnB;AAuDC,IAAA,aAAa,EAAG1B,iBAvDjB;AAwDC,IAAA,QAAQ,EAAGI,YAxDZ;AAyDC,IAAA,YAAY,EAAGW,gBAzDhB;AA0DC,IAAA,SAAS,EAAG,yBAAY,kCAAZ,EAAgD;AAC3D,qBAAenC,UAD4C;AAE3D,OAAEN,kBAAF,GAAwBU;AAFmC,KAAhD;AA1Db,KA+DC,4BAAC,4BAAD,CAAQ,GAAR;AACC,IAAA,SAAS,EAAC,0CADX;AAEC,IAAA,OAAO,EAAG;AACTkD,MAAAA,YAAY,EAAE/D,WAAW,GAAG,CAAH,GAAO;AADvB,KAFX;AAKC,IAAA,UAAU,EAAGqB,gBALd;AAMC,IAAA,KAAK,EAAGjB;AANT,KAQGF,QARH,CA/DD,CADD;AA4EA;;eAEcH,c","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":["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","isOversized","setIsOversized","isReady","children","innerContentStyle","frameSize","setFrameSize","startingWidth","setStartingWidth","isResizing","setIsResizing","shouldShowHandle","setShouldShowHandle","resizeRatio","setResizeRatio","canvasMode","select","editSiteStore","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","motion","div","definition","topRight","bottomRight","bottomLeft","topLeft","borderRadius"],"mappings":";;;;;;;;;AAQA;;AALA;;AAMA;;AAKA;;AACA;;AACA;;AAKA;;AACA;;AAtBA;AACA;AACA;;AAGA;AACA;AACA;;AAWA;AACA;AACA;AAIA;AACA,MAAMA,sBAAsB,GAAG;AAC9BC,EAAAA,QAAQ,EAAEC,SADoB;AAE9BC,EAAAA,UAAU,EAAED,SAFkB;AAG9BE,EAAAA,MAAM,EAAEF,SAHsB;AAI9BG,EAAAA,KAAK,EAAEH,SAJuB;AAK9BI,EAAAA,MAAM,EAAEJ,SALsB;AAM9BK,EAAAA,GAAG,EAAEL,SANyB;AAO9BM,EAAAA,KAAK,EAAEN,SAPuB;AAQ9BO,EAAAA,MAAM,EAAEP,SARsB;AAS9BQ,EAAAA,IAAI,EAAER;AATwB,CAA/B,C,CAYA;;AACA,MAAMS,eAAe,GAAG,GAAxB,C,CACA;;AACA,MAAMC,qBAAqB,GAAG,IAA9B,C,CACA;;AACA,MAAMC,yBAAyB,GAAG,IAAI,IAAtC,C,CACA;AACA;AACA;;AACA,MAAMC,kCAAkC,GAAG,GAA3C,C,CACA;;AACA,MAAMC,kBAAkB,GAAG;AAAEV,EAAAA,KAAK,EAAE,MAAT;AAAiBC,EAAAA,MAAM,EAAE;AAAzB,CAA3B;;AAEA,SAASU,kBAAT,CAA6BX,KAA7B,EAAoCY,kBAApC,EAAyD;AACxD,QAAMC,IAAI,GAAG,CAAEC,CAAF,EAAKC,CAAL,EAAQC,MAAR,KAAoB;AAChC,WAAOF,CAAC,GAAG,CAAEC,CAAC,GAAGD,CAAN,IAAYE,MAAvB;AACA,GAFD,CADwD,CAKxD;;;AACA,QAAMC,UAAU,GACf,IACAC,IAAI,CAACC,GAAL,CACC,CADD,EAECD,IAAI,CAACE,GAAL,CACC,CADD,EAEC,CAAEpB,KAAK,GAAGM,eAAV,KACGC,qBAAqB,GAAGD,eAD3B,CAFD,CAFD,CAFD,CANwD,CAiBxD;AACA;;AACA,QAAMe,uBAAuB,GAAGR,IAAI,CACnCD,kBADmC,EAEnCJ,yBAFmC,EAGnCS,UAHmC,CAApC;AAMA,SAAOjB,KAAK,GAAGqB,uBAAf;AACA;;AAED,SAASC,cAAT,CAAyB;AACxBC,EAAAA,WADwB;AAExBC,EAAAA,WAFwB;AAGxBC,EAAAA,cAHwB;AAIxBC,EAAAA,OAJwB;AAKxBC,EAAAA,QALwB;AAMxBC,EAAAA;AANwB,CAAzB,EAOI;AACH,QAAM,CAAEC,SAAF,EAAaC,YAAb,IAA8B,uBAAUpB,kBAAV,CAApC,CADG,CAEH;;AACA,QAAM,CAAEqB,aAAF,EAAiBC,gBAAjB,IAAsC,wBAA5C;AACA,QAAM,CAAEC,UAAF,EAAcC,aAAd,IAAgC,uBAAU,KAAV,CAAtC;AACA,QAAM,CAAEC,gBAAF,EAAoBC,mBAApB,IAA4C,uBAAU,KAAV,CAAlD;AACA,QAAM,CAAEC,WAAF,EAAeC,cAAf,IAAkC,uBAAU,CAAV,CAAxC;AACA,QAAMC,UAAU,GAAG,qBAChBC,MAAF,IAAc,wBAAQA,MAAM,CAAEC,YAAF,CAAd,EAAkCC,aAAlC,EADI,EAElB,EAFkB,CAAnB;AAIA,QAAM;AAAEC,IAAAA;AAAF,MAAoB,wBAAQ,uBAAaF,YAAb,CAAR,CAA1B;AACA,QAAMG,qBAAqB,GAAG,qBAAQ,IAAR,CAA9B,CAZG,CAaH;;AACA,QAAMC,uBAAuB,GAAG,qBAAQ,IAAR,CAAhC;AACA,QAAMC,gBAAgB,GAAG;AAAEC,IAAAA,IAAI,EAAE,OAAR;AAAiBC,IAAAA,QAAQ,EAAEf,UAAU,GAAG,CAAH,GAAO;AAA5C,GAAzB;AACA,QAAMgB,QAAQ,GAAG,qBAAQ,IAAR,CAAjB;AACA,QAAMC,qBAAqB,GAAG,4BAC7B5B,cAD6B,EAE7B,uCAF6B,CAA9B,CAjBG,CAsBH;;AACA,0BAAW,MAAM;AAChB,UAAM;AAAE6B,MAAAA,WAAF;AAAeC,MAAAA;AAAf,QAAgCH,QAAQ,CAACI,OAAT,CAAiBC,SAAvD;AACAT,IAAAA,uBAAuB,CAACQ,OAAxB,GAAkCF,WAAlC;AACAP,IAAAA,qBAAqB,CAACS,OAAtB,GAAgCF,WAAW,GAAGC,YAA9C;AACA,GAJD,EAIG,EAJH;;AAMA,QAAMG,iBAAiB,GAAG,CAAEC,MAAF,EAAUC,UAAV,EAAsBC,GAAtB,KAA+B;AACxD;AACA;AACA1B,IAAAA,gBAAgB,CAAE0B,GAAG,CAACP,WAAN,CAAhB;AACAjB,IAAAA,aAAa,CAAE,IAAF,CAAb;AACA,GALD,CA7BG,CAoCH;;;AACA,QAAMyB,YAAY,GAAG,CAAEH,MAAF,EAAUC,UAAV,EAAsBG,IAAtB,EAA4BC,KAA5B,KAAuC;AAC3D,UAAMC,eAAe,GAAGD,KAAK,CAAC7D,KAAN,GAAcqC,WAAtC;AACA,UAAM0B,QAAQ,GAAG7C,IAAI,CAAC8C,GAAL,CAAUF,eAAV,CAAjB;AACA,UAAMG,eAAe,GACpBJ,KAAK,CAAC7D,KAAN,GAAc,CAAd,CAAgB;AAAhB,MACG+D,QADH,GAEG,CAAElB,uBAAuB,CAACQ,OAAxB,GAAkCtB,aAApC,IAAsD,CAH1D;AAIA,UAAMmC,aAAa,GAAGhD,IAAI,CAACE,GAAL,CAAU2C,QAAV,EAAoBE,eAApB,CAAtB;AACA,UAAME,aAAa,GAAGJ,QAAQ,KAAK,CAAb,GAAiB,CAAjB,GAAqBG,aAAa,GAAGH,QAA3D;AACA,UAAMK,aAAa,GAAG,IAAID,aAA1B;AAEA7B,IAAAA,cAAc,CAAE8B,aAAa,GAAGD,aAAa,GAAG,CAAlC,CAAd;AAEA,UAAME,YAAY,GAAGtC,aAAa,GAAG8B,KAAK,CAAC7D,KAA3C;AAEAyB,IAAAA,cAAc,CAAE4C,YAAY,GAAGxB,uBAAuB,CAACQ,OAAzC,CAAd,CAf2D,CAiB3D;AACA;;AACAvB,IAAAA,YAAY,CAAE;AACb7B,MAAAA,MAAM,EAAEuB,WAAW,GAChB,MADgB,GAEhBb,kBAAkB,CAClB0D,YADkB,EAElBzB,qBAAqB,CAACS,OAFJ;AAHR,KAAF,CAAZ;AAQA,GA3BD;;AA6BA,QAAMiB,gBAAgB,GAAG,CAAEd,MAAF,EAAUC,UAAV,EAAsBC,GAAtB,KAA+B;AACvDxB,IAAAA,aAAa,CAAE,KAAF,CAAb;;AAEA,QAAK,CAAEV,WAAP,EAAqB;AACpB;AACA;;AAEDC,IAAAA,cAAc,CAAE,KAAF,CAAd;AAEA,UAAM8C,cAAc,GACnBb,GAAG,CAACc,aAAJ,CAAkBC,eAAlB,CAAkCtB,WAAlC,GAAgDO,GAAG,CAACP,WADrD;;AAGA,QAAKoB,cAAc,GAAG9D,kCAAtB,EAA2D;AAC1D;AACA;AACAqB,MAAAA,YAAY,CAAEpB,kBAAF,CAAZ;AACA,KAJD,MAIO;AACN;AACAiC,MAAAA,aAAa,CAAE,MAAF,CAAb;AACA;AACD,GApBD,CAlEG,CAwFH;;;AACA,QAAM+B,4BAA4B,GAAKC,KAAF,IAAa;AACjD,QAAK,CAAE,CAAE,WAAF,EAAe,YAAf,EAA8BC,QAA9B,CAAwCD,KAAK,CAACE,GAA9C,CAAP,EAA6D;AAC5D;AACA;;AAEDF,IAAAA,KAAK,CAACG,cAAN;AAEA,UAAMC,IAAI,GAAG,MAAOJ,KAAK,CAACK,QAAN,GAAiB,CAAjB,GAAqB,CAA5B,CAAb;AACA,UAAMnB,KAAK,GAAGkB,IAAI,IAAKJ,KAAK,CAACE,GAAN,KAAc,WAAd,GAA4B,CAA5B,GAAgC,CAAC,CAAtC,CAAlB;AACA,UAAMI,QAAQ,GAAG/D,IAAI,CAACE,GAAL,CAChBF,IAAI,CAACC,GAAL,CACCb,eADD,EAEC2C,QAAQ,CAACI,OAAT,CAAiBC,SAAjB,CAA2BH,WAA3B,GAAyCU,KAF1C,CADgB,EAKhBhB,uBAAuB,CAACQ,OALR,CAAjB;AAQAvB,IAAAA,YAAY,CAAE;AACb9B,MAAAA,KAAK,EAAEiF,QADM;AAEbhF,MAAAA,MAAM,EAAEU,kBAAkB,CACzBsE,QADyB,EAEzBrC,qBAAqB,CAACS,OAFG;AAFb,KAAF,CAAZ;AAOA,GAxBD;;AA0BA,QAAM6B,sBAAsB,GAAG;AAC9BC,IAAAA,OAAO,EAAE;AACRC,MAAAA,QAAQ,EAAE,CADF;AAERnF,MAAAA,MAAM,EAAE4B,SAAS,CAAC5B;AAFV,KADqB;AAK9BoF,IAAAA,SAAS,EAAE;AACVD,MAAAA,QAAQ,EAAE,CADA;AAEVnF,MAAAA,MAAM,EAAE4B,SAAS,CAAC5B;AAFR;AALmB,GAA/B;AAWA,QAAMqF,oBAAoB,GAAG;AAC5BC,IAAAA,MAAM,EAAE;AACPC,MAAAA,OAAO,EAAE,CADF;AAEPnF,MAAAA,IAAI,EAAE;AAFC,KADoB;AAK5BoF,IAAAA,OAAO,EAAE;AACRD,MAAAA,OAAO,EAAE,CADD;AAERnF,MAAAA,IAAI,EAAE,CAAC;AAFC,KALmB;AAS5BqF,IAAAA,MAAM,EAAE;AACPF,MAAAA,OAAO,EAAE,CADF;AAEPnF,MAAAA,IAAI,EAAE,CAAC,EAFA;AAGPsF,MAAAA,MAAM,EAAE;AAHD;AAToB,GAA7B;;AAeA,QAAMC,0BAA0B,GAAG,CAAE,MAAM;AAC1C,QAAK3D,UAAL,EAAkB;AACjB,aAAO,QAAP;AACA;;AACD,WAAOE,gBAAgB,GAAG,SAAH,GAAe,QAAtC;AACA,GALkC,GAAnC;;AAOA,SACC,4BAAC,wBAAD;AACC,IAAA,EAAE,EAAG0D,6BAAOC,GADb;AAEC,IAAA,GAAG,EAAG7C,QAFP;AAGC,IAAA,OAAO,EAAG,KAHX;AAIC,IAAA,QAAQ,EAAGiC,sBAJZ;AAKC,IAAA,OAAO,EAAG3D,WAAW,GAAG,WAAH,GAAiB,SALvC;AAMC,IAAA,mBAAmB,EAAKwE,UAAF,IAAkB;AACvC,UAAKA,UAAU,KAAK,WAApB,EACCjE,YAAY,CAAE;AAAE9B,QAAAA,KAAK,EAAE,MAAT;AAAiBC,QAAAA,MAAM,EAAE;AAAzB,OAAF,CAAZ;AACD,KATF;AAUC,IAAA,UAAU,EAAG6C,gBAVd;AAWC,IAAA,IAAI,EAAGjB,SAXR;AAYC,IAAA,MAAM,EAAG;AACR3B,MAAAA,GAAG,EAAE,KADG;AAERC,MAAAA,KAAK,EAAE,KAFC;AAGRC,MAAAA,MAAM,EAAE,KAHA;AAIR;AACAC,MAAAA,IAAI,EAAEqB,OALE;AAMRsE,MAAAA,QAAQ,EAAE,KANF;AAORC,MAAAA,WAAW,EAAE,KAPL;AAQRC,MAAAA,UAAU,EAAE,KARJ;AASRC,MAAAA,OAAO,EAAE;AATD,KAZV;AAuBC,IAAA,WAAW,EAAG9D,WAvBf;AAwBC,IAAA,aAAa,EAAGxC,SAxBjB;AAyBC,IAAA,YAAY,EAAG;AACdQ,MAAAA,IAAI,EAAEV,sBADQ;AAEdQ,MAAAA,KAAK,EAAER;AAFO,KAzBhB;AA6BC,IAAA,QAAQ,EAAGW,eA7BZ;AA8BC,IAAA,QAAQ,EAAGiB,WAAW,GAAG,MAAH,GAAY,MA9BnC;AA+BC,IAAA,SAAS,EAAG,MA/Bb;AAgCC,IAAA,OAAO,EAAG,MAAMa,mBAAmB,CAAE,IAAF,CAhCpC;AAiCC,IAAA,MAAM,EAAG,MAAMA,mBAAmB,CAAE,KAAF,CAjCnC;AAkCC,IAAA,WAAW,EAAG,MAAMA,mBAAmB,CAAE,IAAF,CAlCxC;AAmCC,IAAA,UAAU,EAAG,MAAMA,mBAAmB,CAAE,KAAF,CAnCvC;AAoCC,IAAA,eAAe,EAAG;AACjB/B,MAAAA,IAAI,EAAEkC,UAAU,KAAK,MAAf,IACL,qDACC,4BAAC,mBAAD;AAAS,QAAA,IAAI,EAAG,cAAI,gBAAJ;AAAhB,SAGC,4BAAC,4BAAD,CAAQ,MAAR;AACC,QAAA,GAAG,EAAC,QADL;AAEC,QAAA,IAAI,EAAC,WAFN;AAGC,4BAAiB,UAHlB;AAIC,QAAA,SAAS,EAAG,yBACX,mCADW,EAEX;AAAE,yBAAeN;AAAjB,SAFW,CAJb;AAQC,QAAA,QAAQ,EAAGqD,oBARZ;AASC,QAAA,OAAO,EAAGM,0BATX;AAUC,sBAAa,cAAI,gBAAJ,CAVd;AAWC,4BAAmB1C,qBAXpB;AAYC,yBACCD,QAAQ,CAACI,OAAT,EAAkBC,SAAlB,EAA6BH,WAA7B,IACAtD,SAdF;AAgBC,yBAAgBS,eAhBjB;AAiBC,yBACCuC,uBAAuB,CAACQ,OAlB1B;AAoBC,QAAA,SAAS,EAAGqB,4BApBb;AAqBC,QAAA,OAAO,EAAC,QArBT;AAsBC,QAAA,IAAI,EAAC,QAtBN;AAuBC,QAAA,UAAU,EAAC,QAvBZ;AAwBC,QAAA,UAAU,EAAC;AAxBZ,QAHD,CADD,EA+BC;AAAK,QAAA,MAAM,MAAX;AAAY,QAAA,EAAE,EAAGxB;AAAjB,SACG,cACD,gGADC,CADH,CA/BD;AAFgB,KApCnB;AA6EC,IAAA,aAAa,EAAGK,iBA7EjB;AA8EC,IAAA,QAAQ,EAAGI,YA9EZ;AA+EC,IAAA,YAAY,EAAGW,gBA/EhB;AAgFC,IAAA,SAAS,EAAG,yBAAY,kCAAZ,EAAgD;AAC3D,qBAAerC;AAD4C,KAAhD;AAhFb,KAoFC,4BAAC,4BAAD,CAAQ,GAAR;AACC,IAAA,SAAS,EAAC,0CADX;AAEC,IAAA,OAAO,EAAG;AACTmE,MAAAA,YAAY,EAAE7E,WAAW,GAAG,CAAH,GAAO;AADvB,KAFX;AAKC,IAAA,UAAU,EAAGuB,gBALd;AAMC,IAAA,KAAK,EAAGlB;AANT,KAQGD,QARH,CApFD,CADD;AAiGA;;eAEcL,c","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\tisOversized,\n\tsetIsOversized,\n\tisReady,\n\tchildren,\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 [ 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} ) }\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/components/save-panel/index.js

@@ -58,11 +58,11 @@ const EntitiesSavedStatesForPreview = ({
     activateSaveLabel = (0, _i18n.__)('Activate');
   }
 
-  const {
-    getTheme
-  } = (0, _data.useSelect)(_coreData.store);
-  const theme = getTheme((0, _isPreviewingTheme.currentlyPreviewingTheme)());
-  const additionalPrompt = (0, _element.createElement)("p", null, (0, _i18n.sprintf)('Saving your changes will change your active theme to  %1$s.', theme?.name?.rendered));
+  const themeName = (0, _data.useSelect)(select => {
+    const theme = select(_coreData.store).getTheme((0, _isPreviewingTheme.currentlyPreviewingTheme)());
+    return theme?.name?.rendered;
+  }, []);
+  const additionalPrompt = (0, _element.createElement)("p", null, (0, _i18n.sprintf)('Saving your changes will change your active theme to %s.', themeName));
   const activateTheme = (0, _useActivateTheme.useActivateTheme)();
 
   const onSave = async values => {

package/build/components/save-panel/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/save-panel/index.js"],"names":["EntitiesSavedStatesExtensible","privateApis","EntitiesSavedStatesForPreview","onClose","isDirtyProps","activateSaveLabel","isDirty","getTheme","coreStore","theme","additionalPrompt","name","rendered","activateTheme","onSave","values","close","saveEnabled","saveLabel","_EntitiesSavedStates","SavePanel","isSaveViewOpen","canvasMode","select","isSaveViewOpened","getCanvasMode","editSiteStore","setIsSaveViewOpened"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { Button, Modal } from '@wordpress/components';\nimport {\n\tEntitiesSavedStates,\n\tuseEntitiesSavedStatesIsDirty,\n\tprivateApis,\n} from '@wordpress/editor';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { NavigableRegion } from '@wordpress/interface';\nimport { store as coreStore } from '@wordpress/core-data';\n\n/**\n * Internal dependencies\n */\nimport { store as editSiteStore } from '../../store';\nimport { unlock } from '../../lock-unlock';\nimport { useActivateTheme } from '../../utils/use-activate-theme';\nimport {\n\tcurrentlyPreviewingTheme,\n\tisPreviewingTheme,\n} from '../../utils/is-previewing-theme';\n\nconst { EntitiesSavedStatesExtensible } = unlock( privateApis );\n\nconst EntitiesSavedStatesForPreview = ( { onClose } ) => {\n\tconst isDirtyProps = useEntitiesSavedStatesIsDirty();\n\tlet activateSaveLabel;\n\tif ( isDirtyProps.isDirty ) {\n\t\tactivateSaveLabel = __( 'Activate & Save' );\n\t} else {\n\t\tactivateSaveLabel = __( 'Activate' );\n\t}\n\n\tconst { getTheme } = useSelect( coreStore );\n\tconst theme = getTheme( currentlyPreviewingTheme() );\n\tconst additionalPrompt = (\n\t\t<p>\n\t\t\t{ sprintf(\n\t\t\t\t'Saving your changes will change your active theme to  %1$s.',\n\t\t\t\ttheme?.name?.rendered\n\t\t\t) }\n\t\t</p>\n\t);\n\n\tconst activateTheme = useActivateTheme();\n\tconst onSave = async ( values ) => {\n\t\tawait activateTheme();\n\t\treturn values;\n\t};\n\n\treturn (\n\t\t<EntitiesSavedStatesExtensible\n\t\t\t{ ...{\n\t\t\t\t...isDirtyProps,\n\t\t\t\tadditionalPrompt,\n\t\t\t\tclose: onClose,\n\t\t\t\tonSave,\n\t\t\t\tsaveEnabled: true,\n\t\t\t\tsaveLabel: activateSaveLabel,\n\t\t\t} }\n\t\t/>\n\t);\n};\n\nconst _EntitiesSavedStates = ( { onClose } ) => {\n\tif ( isPreviewingTheme() ) {\n\t\treturn <EntitiesSavedStatesForPreview onClose={ onClose } />;\n\t}\n\treturn <EntitiesSavedStates close={ onClose } />;\n};\n\nexport default function SavePanel() {\n\tconst { isSaveViewOpen, canvasMode } = useSelect( ( select ) => {\n\t\tconst { isSaveViewOpened, getCanvasMode } = unlock(\n\t\t\tselect( editSiteStore )\n\t\t);\n\n\t\t// The currently selected entity to display.\n\t\t// Typically template or template part in the site editor.\n\t\treturn {\n\t\t\tisSaveViewOpen: isSaveViewOpened(),\n\t\t\tcanvasMode: getCanvasMode(),\n\t\t};\n\t}, [] );\n\tconst { setIsSaveViewOpened } = useDispatch( editSiteStore );\n\tconst onClose = () => setIsSaveViewOpened( false );\n\n\tif ( canvasMode === 'view' ) {\n\t\treturn isSaveViewOpen ? (\n\t\t\t<Modal\n\t\t\t\tclassName=\"edit-site-save-panel__modal\"\n\t\t\t\tonRequestClose={ onClose }\n\t\t\t\t__experimentalHideHeader\n\t\t\t\tcontentLabel={ __(\n\t\t\t\t\t'Save site, content, and template changes'\n\t\t\t\t) }\n\t\t\t>\n\t\t\t\t<_EntitiesSavedStates onClose={ onClose } />\n\t\t\t</Modal>\n\t\t) : null;\n\t}\n\n\treturn (\n\t\t<NavigableRegion\n\t\t\tclassName={ classnames( 'edit-site-layout__actions', {\n\t\t\t\t'is-entity-save-view-open': isSaveViewOpen,\n\t\t\t} ) }\n\t\t\tariaLabel={ __( 'Save panel' ) }\n\t\t>\n\t\t\t{ isSaveViewOpen ? (\n\t\t\t\t<_EntitiesSavedStates onClose={ onClose } />\n\t\t\t) : (\n\t\t\t\t<div className=\"edit-site-editor__toggle-save-panel\">\n\t\t\t\t\t<Button\n\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\tclassName=\"edit-site-editor__toggle-save-panel-button\"\n\t\t\t\t\t\tonClick={ () => setIsSaveViewOpened( true ) }\n\t\t\t\t\t\taria-expanded={ false }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Open save panel' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</NavigableRegion>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/save-panel/index.js"],"names":["EntitiesSavedStatesExtensible","privateApis","EntitiesSavedStatesForPreview","onClose","isDirtyProps","activateSaveLabel","isDirty","themeName","select","theme","coreStore","getTheme","name","rendered","additionalPrompt","activateTheme","onSave","values","close","saveEnabled","saveLabel","_EntitiesSavedStates","SavePanel","isSaveViewOpen","canvasMode","isSaveViewOpened","getCanvasMode","editSiteStore","setIsSaveViewOpened"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { Button, Modal } from '@wordpress/components';\nimport {\n\tEntitiesSavedStates,\n\tuseEntitiesSavedStatesIsDirty,\n\tprivateApis,\n} from '@wordpress/editor';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { NavigableRegion } from '@wordpress/interface';\nimport { store as coreStore } from '@wordpress/core-data';\n\n/**\n * Internal dependencies\n */\nimport { store as editSiteStore } from '../../store';\nimport { unlock } from '../../lock-unlock';\nimport { useActivateTheme } from '../../utils/use-activate-theme';\nimport {\n\tcurrentlyPreviewingTheme,\n\tisPreviewingTheme,\n} from '../../utils/is-previewing-theme';\n\nconst { EntitiesSavedStatesExtensible } = unlock( privateApis );\n\nconst EntitiesSavedStatesForPreview = ( { onClose } ) => {\n\tconst isDirtyProps = useEntitiesSavedStatesIsDirty();\n\tlet activateSaveLabel;\n\tif ( isDirtyProps.isDirty ) {\n\t\tactivateSaveLabel = __( 'Activate & Save' );\n\t} else {\n\t\tactivateSaveLabel = __( 'Activate' );\n\t}\n\n\tconst themeName = useSelect( ( select ) => {\n\t\tconst theme = select( coreStore ).getTheme(\n\t\t\tcurrentlyPreviewingTheme()\n\t\t);\n\n\t\treturn theme?.name?.rendered;\n\t}, [] );\n\n\tconst additionalPrompt = (\n\t\t<p>\n\t\t\t{ sprintf(\n\t\t\t\t'Saving your changes will change your active theme to %s.',\n\t\t\t\tthemeName\n\t\t\t) }\n\t\t</p>\n\t);\n\n\tconst activateTheme = useActivateTheme();\n\tconst onSave = async ( values ) => {\n\t\tawait activateTheme();\n\t\treturn values;\n\t};\n\n\treturn (\n\t\t<EntitiesSavedStatesExtensible\n\t\t\t{ ...{\n\t\t\t\t...isDirtyProps,\n\t\t\t\tadditionalPrompt,\n\t\t\t\tclose: onClose,\n\t\t\t\tonSave,\n\t\t\t\tsaveEnabled: true,\n\t\t\t\tsaveLabel: activateSaveLabel,\n\t\t\t} }\n\t\t/>\n\t);\n};\n\nconst _EntitiesSavedStates = ( { onClose } ) => {\n\tif ( isPreviewingTheme() ) {\n\t\treturn <EntitiesSavedStatesForPreview onClose={ onClose } />;\n\t}\n\treturn <EntitiesSavedStates close={ onClose } />;\n};\n\nexport default function SavePanel() {\n\tconst { isSaveViewOpen, canvasMode } = useSelect( ( select ) => {\n\t\tconst { isSaveViewOpened, getCanvasMode } = unlock(\n\t\t\tselect( editSiteStore )\n\t\t);\n\n\t\t// The currently selected entity to display.\n\t\t// Typically template or template part in the site editor.\n\t\treturn {\n\t\t\tisSaveViewOpen: isSaveViewOpened(),\n\t\t\tcanvasMode: getCanvasMode(),\n\t\t};\n\t}, [] );\n\tconst { setIsSaveViewOpened } = useDispatch( editSiteStore );\n\tconst onClose = () => setIsSaveViewOpened( false );\n\n\tif ( canvasMode === 'view' ) {\n\t\treturn isSaveViewOpen ? (\n\t\t\t<Modal\n\t\t\t\tclassName=\"edit-site-save-panel__modal\"\n\t\t\t\tonRequestClose={ onClose }\n\t\t\t\t__experimentalHideHeader\n\t\t\t\tcontentLabel={ __(\n\t\t\t\t\t'Save site, content, and template changes'\n\t\t\t\t) }\n\t\t\t>\n\t\t\t\t<_EntitiesSavedStates onClose={ onClose } />\n\t\t\t</Modal>\n\t\t) : null;\n\t}\n\n\treturn (\n\t\t<NavigableRegion\n\t\t\tclassName={ classnames( 'edit-site-layout__actions', {\n\t\t\t\t'is-entity-save-view-open': isSaveViewOpen,\n\t\t\t} ) }\n\t\t\tariaLabel={ __( 'Save panel' ) }\n\t\t>\n\t\t\t{ isSaveViewOpen ? (\n\t\t\t\t<_EntitiesSavedStates onClose={ onClose } />\n\t\t\t) : (\n\t\t\t\t<div className=\"edit-site-editor__toggle-save-panel\">\n\t\t\t\t\t<Button\n\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\tclassName=\"edit-site-editor__toggle-save-panel-button\"\n\t\t\t\t\t\tonClick={ () => setIsSaveViewOpened( true ) }\n\t\t\t\t\t\taria-expanded={ false }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Open save panel' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</NavigableRegion>\n\t);\n}\n"]}

package/build/components/sidebar-edit-mode/page-panels/page-content.js

@@ -11,8 +11,6 @@ var _data = require("@wordpress/data");
 
 var _blockEditor = require("@wordpress/block-editor");
 
-var _constants = require("../../page-content-focus-manager/constants");
-
 var _lockUnlock = require("../../../lock-unlock");
 
 /**
@@ -27,7 +25,10 @@ const {
 } = (0, _lockUnlock.unlock)(_blockEditor.privateApis);
 
 function PageContent() {
-  const clientIds = (0, _data.useSelect)(select => select(_blockEditor.store).__experimentalGetGlobalBlocksByName(_constants.PAGE_CONTENT_BLOCK_TYPES), []);
+  const clientIdsTree = (0, _data.useSelect)(select => (0, _lockUnlock.unlock)(select(_blockEditor.store)).getEnabledClientIdsTree(), []);
+  const clientIds = (0, _element.useMemo)(() => clientIdsTree.map(({
+    clientId
+  }) => clientId), [clientIdsTree]);
   return (0, _element.createElement)(BlockQuickNavigation, {
     clientIds: clientIds
   });

package/build/components/sidebar-edit-mode/page-panels/page-content.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/sidebar-edit-mode/page-panels/page-content.js"],"names":["BlockQuickNavigation","blockEditorPrivateApis","PageContent","clientIds","select","blockEditorStore","__experimentalGetGlobalBlocksByName","PAGE_CONTENT_BLOCK_TYPES"],"mappings":";;;;;;;;;AAGA;;AACA;;AAQA;;AACA;;AAbA;AACA;AACA;;AAOA;AACA;AACA;AAIA,MAAM;AAAEA,EAAAA;AAAF,IAA2B,wBAAQC,wBAAR,CAAjC;;AAEe,SAASC,WAAT,GAAuB;AACrC,QAAMC,SAAS,GAAG,qBACfC,MAAF,IACCA,MAAM,CAAEC,kBAAF,CAAN,CAA2BC,mCAA3B,CACCC,mCADD,CAFgB,EAKjB,EALiB,CAAlB;AAOA,SAAO,4BAAC,oBAAD;AAAsB,IAAA,SAAS,EAAGJ;AAAlC,IAAP;AACA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\nimport {\n\tstore as blockEditorStore,\n\tprivateApis as blockEditorPrivateApis,\n} from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { PAGE_CONTENT_BLOCK_TYPES } from '../../page-content-focus-manager/constants';\nimport { unlock } from '../../../lock-unlock';\n\nconst { BlockQuickNavigation } = unlock( blockEditorPrivateApis );\n\nexport default function PageContent() {\n\tconst clientIds = useSelect(\n\t\t( select ) =>\n\t\t\tselect( blockEditorStore ).__experimentalGetGlobalBlocksByName(\n\t\t\t\tPAGE_CONTENT_BLOCK_TYPES\n\t\t\t),\n\t\t[]\n\t);\n\treturn <BlockQuickNavigation clientIds={ clientIds } />;\n}\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/sidebar-edit-mode/page-panels/page-content.js"],"names":["BlockQuickNavigation","blockEditorPrivateApis","PageContent","clientIdsTree","select","blockEditorStore","getEnabledClientIdsTree","clientIds","map","clientId"],"mappings":";;;;;;;AAQA;;AALA;;AACA;;AASA;;AAbA;AACA;AACA;;AAQA;AACA;AACA;AAGA,MAAM;AAAEA,EAAAA;AAAF,IAA2B,wBAAQC,wBAAR,CAAjC;;AAEe,SAASC,WAAT,GAAuB;AACrC,QAAMC,aAAa,GAAG,qBACnBC,MAAF,IACC,wBAAQA,MAAM,CAAEC,kBAAF,CAAd,EAAqCC,uBAArC,EAFoB,EAGrB,EAHqB,CAAtB;AAKA,QAAMC,SAAS,GAAG,sBACjB,MAAMJ,aAAa,CAACK,GAAd,CAAmB,CAAE;AAAEC,IAAAA;AAAF,GAAF,KAAoBA,QAAvC,CADW,EAEjB,CAAEN,aAAF,CAFiB,CAAlB;AAIA,SAAO,4BAAC,oBAAD;AAAsB,IAAA,SAAS,EAAGI;AAAlC,IAAP;AACA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\nimport {\n\tstore as blockEditorStore,\n\tprivateApis as blockEditorPrivateApis,\n} from '@wordpress/block-editor';\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../../lock-unlock';\n\nconst { BlockQuickNavigation } = unlock( blockEditorPrivateApis );\n\nexport default function PageContent() {\n\tconst clientIdsTree = useSelect(\n\t\t( select ) =>\n\t\t\tunlock( select( blockEditorStore ) ).getEnabledClientIdsTree(),\n\t\t[]\n\t);\n\tconst clientIds = useMemo(\n\t\t() => clientIdsTree.map( ( { clientId } ) => clientId ),\n\t\t[ clientIdsTree ]\n\t);\n\treturn <BlockQuickNavigation clientIds={ clientIds } />;\n}\n"]}

package/build/components/sidebar-edit-mode/page-panels/page-status.js

@@ -178,14 +178,9 @@ function PageStatus({
       onChange: value => saveStatus({
         password: value
       }),
-      value: password
-      /* eslint-disable jsx-a11y/no-autofocus */
-      ,
-      autoFocus: !password
-      /* eslint-enable jsx-a11y/no-autofocus */
-      ,
-      placeholder: (0, _i18n.__)('Enter a secure password'),
-      type: "password"
+      value: password,
+      placeholder: (0, _i18n.__)('Use a secure password'),
+      type: "text"
     })))))
   }));
 }