@wordpress/edit-site 5.13.0 → 5.15.0

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

@@ -0,0 +1,82 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = PageTemplateParts;
+
+var _element = require("@wordpress/element");
+
+var _components = require("@wordpress/components");
+
+var _i18n = require("@wordpress/i18n");
+
+var _coreData = require("@wordpress/core-data");
+
+var _htmlEntities = require("@wordpress/html-entities");
+
+var _page = _interopRequireDefault(require("../page"));
+
+var _table = _interopRequireDefault(require("../table"));
+
+var _link = _interopRequireDefault(require("../routes/link"));
+
+var _addedBy = _interopRequireDefault(require("../list/added-by"));
+
+var _templateActions = _interopRequireDefault(require("../template-actions"));
+
+var _addNewTemplatePart = _interopRequireDefault(require("./add-new-template-part"));
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+function PageTemplateParts() {
+  const {
+    records: templateParts
+  } = (0, _coreData.useEntityRecords)('postType', 'wp_template_part', {
+    per_page: -1
+  });
+  const columns = [{
+    header: (0, _i18n.__)('Template Part'),
+    cell: templatePart => (0, _element.createElement)(_components.__experimentalVStack, null, (0, _element.createElement)(_components.__experimentalHeading, {
+      as: "h3",
+      level: 5
+    }, (0, _element.createElement)(_link.default, {
+      params: {
+        postId: templatePart.id,
+        postType: templatePart.type,
+        canvas: 'view'
+      },
+      state: {
+        backPath: '/wp_template_part/all'
+      }
+    }, (0, _htmlEntities.decodeEntities)(templatePart.title?.rendered || templatePart.slug)))),
+    maxWidth: 400
+  }, {
+    header: (0, _i18n.__)('Added by'),
+    cell: templatePart => (0, _element.createElement)(_addedBy.default, {
+      postType: templatePart.type,
+      postId: templatePart.id
+    })
+  }, {
+    header: (0, _element.createElement)(_components.VisuallyHidden, null, (0, _i18n.__)('Actions')),
+    cell: templatePart => (0, _element.createElement)(_templateActions.default, {
+      postType: templatePart.type,
+      postId: templatePart.id
+    })
+  }];
+  return (0, _element.createElement)(_page.default, {
+    title: (0, _i18n.__)('Template Parts'),
+    actions: (0, _element.createElement)(_addNewTemplatePart.default, null)
+  }, templateParts && (0, _element.createElement)(_table.default, {
+    data: templateParts,
+    columns: columns
+  }));
+}
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"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/page-templates/index.js

@@ -60,6 +60,7 @@ function PageTemplates() {
   const columns = [{
     header: (0, _i18n.__)('Template'),
     cell: template => (0, _element.createElement)(_components.__experimentalVStack, null, (0, _element.createElement)(_components.__experimentalHeading, {
+      as: "h3",
       level: 5
     }, (0, _element.createElement)(_link.default, {
       params: {

package/build/components/page-templates/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/page-templates/index.js"],"names":["PageTemplates","records","templates","per_page","canCreate","select","supportsTemplatePartsMode","editSiteStore","getSettings","postType","coreStore","getPostType","columns","header","cell","template","postId","id","type","canvas","title","rendered","slug","description","maxWidth","variant"],"mappings":";;;;;;;;;;;AAGA;;AAMA;;AACA;;AACA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAvBA;AACA;AACA;;AAYA;AACA;AACA;AASe,SAASA,aAAT,GAAyB;AACvC,QAAM;AAAEC,IAAAA,OAAO,EAAEC;AAAX,MAAyB,gCAC9B,UAD8B,EAE9B,aAF8B,EAG9B;AACCC,IAAAA,QAAQ,EAAE,CAAC;AADZ,GAH8B,CAA/B;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,aAAjC,CADJ;AAENP,MAAAA,SAAS,EAAE,CAAEE;AAFP,KAAP;AAIA,GAPqB,CAAtB;AASA,QAAMM,OAAO,GAAG,CACf;AACCC,IAAAA,MAAM,EAAE,cAAI,UAAJ,CADT;AAECC,IAAAA,IAAI,EAAIC,QAAF,IACL,4BAAC,gCAAD,QACC,4BAAC,iCAAD;AAAS,MAAA,KAAK,EAAG;AAAjB,OACC,4BAAC,aAAD;AACC,MAAA,MAAM,EAAG;AACRC,QAAAA,MAAM,EAAED,QAAQ,CAACE,EADT;AAERR,QAAAA,QAAQ,EAAEM,QAAQ,CAACG,IAFX;AAGRC,QAAAA,MAAM,EAAE;AAHA;AADV,OAOG,kCACDJ,QAAQ,CAACK,KAAT,EAAgBC,QAAhB,IAA4BN,QAAQ,CAACO,IADpC,CAPH,CADD,CADD,EAcGP,QAAQ,CAACQ,WAAT,IACD,4BAAC,8BAAD;AAAM,MAAA,OAAO,EAAC;AAAd,OACG,kCAAgBR,QAAQ,CAACQ,WAAzB,CADH,CAfF,CAHF;AAwBCC,IAAAA,QAAQ,EAAE;AAxBX,GADe,EA2Bf;AACCX,IAAAA,MAAM,EAAE,cAAI,UAAJ,CADT;AAECC,IAAAA,IAAI,EAAIC,QAAF,IACL,4BAAC,gBAAD;AAAS,MAAA,QAAQ,EAAGA,QAAQ,CAACG,IAA7B;AAAoC,MAAA,MAAM,EAAGH,QAAQ,CAACE;AAAtD;AAHF,GA3Be,EAiCf;AACCJ,IAAAA,MAAM,EAAE,4BAAC,0BAAD,QAAkB,cAAI,SAAJ,CAAlB,CADT;AAECC,IAAAA,IAAI,EAAIC,QAAF,IACL,4BAAC,wBAAD;AACC,MAAA,QAAQ,EAAGA,QAAQ,CAACG,IADrB;AAEC,MAAA,MAAM,EAAGH,QAAQ,CAACE;AAFnB;AAHF,GAjCe,CAAhB;AA4CA,SACC,4BAAC,aAAD;AACC,IAAA,KAAK,EAAG,cAAI,WAAJ,CADT;AAEC,IAAA,OAAO,EACNb,SAAS,IACR,4BAAC,uBAAD;AACC,MAAA,YAAY,EAAG,aADhB;AAEC,MAAA,QAAQ,EAAG,KAFZ;AAGC,MAAA,WAAW,EAAG;AAAEqB,QAAAA,OAAO,EAAE;AAAX;AAHf;AAJH,KAYGvB,SAAS,IAAI,4BAAC,cAAD;AAAO,IAAA,IAAI,EAAGA,SAAd;AAA0B,IAAA,OAAO,EAAGU;AAApC,IAZhB,CADD;AAgBA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tVisuallyHidden,\n\t__experimentalHeading as Heading,\n\t__experimentalText as Text,\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 PageTemplates() {\n\tconst { records: templates } = useEntityRecords(\n\t\t'postType',\n\t\t'wp_template',\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' ),\n\t\t\tcanCreate: ! supportsTemplatePartsMode,\n\t\t};\n\t} );\n\n\tconst columns = [\n\t\t{\n\t\t\theader: __( 'Template' ),\n\t\t\tcell: ( template ) => (\n\t\t\t\t<VStack>\n\t\t\t\t\t<Heading 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: template.id,\n\t\t\t\t\t\t\t\tpostType: template.type,\n\t\t\t\t\t\t\t\tcanvas: 'edit',\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ decodeEntities(\n\t\t\t\t\t\t\t\ttemplate.title?.rendered || template.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\t{ template.description && (\n\t\t\t\t\t\t<Text variant=\"muted\">\n\t\t\t\t\t\t\t{ decodeEntities( template.description ) }\n\t\t\t\t\t\t</Text>\n\t\t\t\t\t) }\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: ( template ) => (\n\t\t\t\t<AddedBy postType={ template.type } postId={ template.id } />\n\t\t\t),\n\t\t},\n\t\t{\n\t\t\theader: <VisuallyHidden>{ __( 'Actions' ) }</VisuallyHidden>,\n\t\t\tcell: ( template ) => (\n\t\t\t\t<TemplateActions\n\t\t\t\t\tpostType={ template.type }\n\t\t\t\t\tpostId={ template.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={ __( 'Templates' ) }\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' }\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{ templates && <Table data={ templates } columns={ columns } /> }\n\t\t</Page>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/page-templates/index.js"],"names":["PageTemplates","records","templates","per_page","canCreate","select","supportsTemplatePartsMode","editSiteStore","getSettings","postType","coreStore","getPostType","columns","header","cell","template","postId","id","type","canvas","title","rendered","slug","description","maxWidth","variant"],"mappings":";;;;;;;;;;;AAGA;;AAMA;;AACA;;AACA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAvBA;AACA;AACA;;AAYA;AACA;AACA;AASe,SAASA,aAAT,GAAyB;AACvC,QAAM;AAAEC,IAAAA,OAAO,EAAEC;AAAX,MAAyB,gCAC9B,UAD8B,EAE9B,aAF8B,EAG9B;AACCC,IAAAA,QAAQ,EAAE,CAAC;AADZ,GAH8B,CAA/B;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,aAAjC,CADJ;AAENP,MAAAA,SAAS,EAAE,CAAEE;AAFP,KAAP;AAIA,GAPqB,CAAtB;AASA,QAAMM,OAAO,GAAG,CACf;AACCC,IAAAA,MAAM,EAAE,cAAI,UAAJ,CADT;AAECC,IAAAA,IAAI,EAAIC,QAAF,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,QAAQ,CAACE,EADT;AAERR,QAAAA,QAAQ,EAAEM,QAAQ,CAACG,IAFX;AAGRC,QAAAA,MAAM,EAAE;AAHA;AADV,OAOG,kCACDJ,QAAQ,CAACK,KAAT,EAAgBC,QAAhB,IAA4BN,QAAQ,CAACO,IADpC,CAPH,CADD,CADD,EAcGP,QAAQ,CAACQ,WAAT,IACD,4BAAC,8BAAD;AAAM,MAAA,OAAO,EAAC;AAAd,OACG,kCAAgBR,QAAQ,CAACQ,WAAzB,CADH,CAfF,CAHF;AAwBCC,IAAAA,QAAQ,EAAE;AAxBX,GADe,EA2Bf;AACCX,IAAAA,MAAM,EAAE,cAAI,UAAJ,CADT;AAECC,IAAAA,IAAI,EAAIC,QAAF,IACL,4BAAC,gBAAD;AAAS,MAAA,QAAQ,EAAGA,QAAQ,CAACG,IAA7B;AAAoC,MAAA,MAAM,EAAGH,QAAQ,CAACE;AAAtD;AAHF,GA3Be,EAiCf;AACCJ,IAAAA,MAAM,EAAE,4BAAC,0BAAD,QAAkB,cAAI,SAAJ,CAAlB,CADT;AAECC,IAAAA,IAAI,EAAIC,QAAF,IACL,4BAAC,wBAAD;AACC,MAAA,QAAQ,EAAGA,QAAQ,CAACG,IADrB;AAEC,MAAA,MAAM,EAAGH,QAAQ,CAACE;AAFnB;AAHF,GAjCe,CAAhB;AA4CA,SACC,4BAAC,aAAD;AACC,IAAA,KAAK,EAAG,cAAI,WAAJ,CADT;AAEC,IAAA,OAAO,EACNb,SAAS,IACR,4BAAC,uBAAD;AACC,MAAA,YAAY,EAAG,aADhB;AAEC,MAAA,QAAQ,EAAG,KAFZ;AAGC,MAAA,WAAW,EAAG;AAAEqB,QAAAA,OAAO,EAAE;AAAX;AAHf;AAJH,KAYGvB,SAAS,IAAI,4BAAC,cAAD;AAAO,IAAA,IAAI,EAAGA,SAAd;AAA0B,IAAA,OAAO,EAAGU;AAApC,IAZhB,CADD;AAgBA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tVisuallyHidden,\n\t__experimentalHeading as Heading,\n\t__experimentalText as Text,\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 PageTemplates() {\n\tconst { records: templates } = useEntityRecords(\n\t\t'postType',\n\t\t'wp_template',\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' ),\n\t\t\tcanCreate: ! supportsTemplatePartsMode,\n\t\t};\n\t} );\n\n\tconst columns = [\n\t\t{\n\t\t\theader: __( 'Template' ),\n\t\t\tcell: ( template ) => (\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: template.id,\n\t\t\t\t\t\t\t\tpostType: template.type,\n\t\t\t\t\t\t\t\tcanvas: 'edit',\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ decodeEntities(\n\t\t\t\t\t\t\t\ttemplate.title?.rendered || template.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\t{ template.description && (\n\t\t\t\t\t\t<Text variant=\"muted\">\n\t\t\t\t\t\t\t{ decodeEntities( template.description ) }\n\t\t\t\t\t\t</Text>\n\t\t\t\t\t) }\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: ( template ) => (\n\t\t\t\t<AddedBy postType={ template.type } postId={ template.id } />\n\t\t\t),\n\t\t},\n\t\t{\n\t\t\theader: <VisuallyHidden>{ __( 'Actions' ) }</VisuallyHidden>,\n\t\t\tcell: ( template ) => (\n\t\t\t\t<TemplateActions\n\t\t\t\t\tpostType={ template.type }\n\t\t\t\t\tpostId={ template.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={ __( 'Templates' ) }\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' }\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{ templates && <Table data={ templates } columns={ columns } /> }\n\t\t</Page>\n\t);\n}\n"]}

package/build/components/preferences-modal/enable-feature.js

@@ -19,6 +19,7 @@ var _preferences = require("@wordpress/preferences");
 function EnableFeature(props) {
   const {
     featureName,
+    onToggle = () => {},
     ...remainingProps
   } = props;
   const isChecked = (0, _data.useSelect)(select => !!select(_preferences.store).get('core/edit-site', featureName), [featureName]);
@@ -26,7 +27,10 @@ function EnableFeature(props) {
     toggle
   } = (0, _data.useDispatch)(_preferences.store);
 
-  const onChange = () => toggle('core/edit-site', featureName);
+  const onChange = () => {
+    onToggle();
+    toggle('core/edit-site', featureName);
+  };
 
   return (0, _element.createElement)(_interface.___unstablePreferencesModalBaseOption, {
     onChange: onChange,

package/build/components/preferences-modal/enable-feature.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/preferences-modal/enable-feature.js"],"names":["EnableFeature","props","featureName","remainingProps","isChecked","select","preferencesStore","get","toggle","onChange"],"mappings":";;;;;;;;;AAGA;;AACA;;AACA;;AALA;AACA;AACA;AAKe,SAASA,aAAT,CAAwBC,KAAxB,EAAgC;AAC9C,QAAM;AAAEC,IAAAA,WAAF;AAAe,OAAGC;AAAlB,MAAqCF,KAA3C;AACA,QAAMG,SAAS,GAAG,qBACfC,MAAF,IACC,CAAC,CAAEA,MAAM,CAAEC,kBAAF,CAAN,CAA2BC,GAA3B,CAAgC,gBAAhC,EAAkDL,WAAlD,CAFa,EAGjB,CAAEA,WAAF,CAHiB,CAAlB;AAKA,QAAM;AAAEM,IAAAA;AAAF,MAAa,uBAAaF,kBAAb,CAAnB;;AACA,QAAMG,QAAQ,GAAG,MAAMD,MAAM,CAAE,gBAAF,EAAoBN,WAApB,CAA7B;;AACA,SACC,4BAAC,gDAAD;AACC,IAAA,QAAQ,EAAGO,QADZ;AAEC,IAAA,SAAS,EAAGL,SAFb;AAAA,OAGMD;AAHN,IADD;AAOA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { ___unstablePreferencesModalBaseOption as BaseOption } from '@wordpress/interface';\nimport { store as preferencesStore } from '@wordpress/preferences';\n\nexport default function EnableFeature( props ) {\n\tconst { featureName, ...remainingProps } = props;\n\tconst isChecked = useSelect(\n\t\t( select ) =>\n\t\t\t!! select( preferencesStore ).get( 'core/edit-site', featureName ),\n\t\t[ featureName ]\n\t);\n\tconst { toggle } = useDispatch( preferencesStore );\n\tconst onChange = () => toggle( 'core/edit-site', featureName );\n\treturn (\n\t\t<BaseOption\n\t\t\tonChange={ onChange }\n\t\t\tisChecked={ isChecked }\n\t\t\t{ ...remainingProps }\n\t\t/>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/preferences-modal/enable-feature.js"],"names":["EnableFeature","props","featureName","onToggle","remainingProps","isChecked","select","preferencesStore","get","toggle","onChange"],"mappings":";;;;;;;;;AAGA;;AACA;;AACA;;AALA;AACA;AACA;AAKe,SAASA,aAAT,CAAwBC,KAAxB,EAAgC;AAC9C,QAAM;AAAEC,IAAAA,WAAF;AAAeC,IAAAA,QAAQ,GAAG,MAAM,CAAE,CAAlC;AAAoC,OAAGC;AAAvC,MAA0DH,KAAhE;AACA,QAAMI,SAAS,GAAG,qBACfC,MAAF,IACC,CAAC,CAAEA,MAAM,CAAEC,kBAAF,CAAN,CAA2BC,GAA3B,CAAgC,gBAAhC,EAAkDN,WAAlD,CAFa,EAGjB,CAAEA,WAAF,CAHiB,CAAlB;AAKA,QAAM;AAAEO,IAAAA;AAAF,MAAa,uBAAaF,kBAAb,CAAnB;;AACA,QAAMG,QAAQ,GAAG,MAAM;AACtBP,IAAAA,QAAQ;AACRM,IAAAA,MAAM,CAAE,gBAAF,EAAoBP,WAApB,CAAN;AACA,GAHD;;AAIA,SACC,4BAAC,gDAAD;AACC,IAAA,QAAQ,EAAGQ,QADZ;AAEC,IAAA,SAAS,EAAGL,SAFb;AAAA,OAGMD;AAHN,IADD;AAOA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { ___unstablePreferencesModalBaseOption as BaseOption } from '@wordpress/interface';\nimport { store as preferencesStore } from '@wordpress/preferences';\n\nexport default function EnableFeature( props ) {\n\tconst { featureName, onToggle = () => {}, ...remainingProps } = props;\n\tconst isChecked = useSelect(\n\t\t( select ) =>\n\t\t\t!! select( preferencesStore ).get( 'core/edit-site', featureName ),\n\t\t[ featureName ]\n\t);\n\tconst { toggle } = useDispatch( preferencesStore );\n\tconst onChange = () => {\n\t\tonToggle();\n\t\ttoggle( 'core/edit-site', featureName );\n\t};\n\treturn (\n\t\t<BaseOption\n\t\t\tonChange={ onChange }\n\t\t\tisChecked={ isChecked }\n\t\t\t{ ...remainingProps }\n\t\t/>\n\t);\n}\n"]}

package/build/components/preferences-modal/index.js

@@ -5,6 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.PREFERENCES_MODAL_NAME = void 0;
 exports.default = EditSitePreferencesModal;
 
 var _element = require("@wordpress/element");
@@ -13,8 +14,14 @@ var _interface = require("@wordpress/interface");
 
 var _i18n = require("@wordpress/i18n");
 
+var _data = require("@wordpress/data");
+
+var _preferences = require("@wordpress/preferences");
+
 var _enableFeature = _interopRequireDefault(require("./enable-feature"));
 
+var _store = require("../../store");
+
 /**
  * WordPress dependencies
  */
@@ -22,10 +29,37 @@ var _enableFeature = _interopRequireDefault(require("./enable-feature"));
 /**
  * Internal dependencies
  */
-function EditSitePreferencesModal({
-  isModalActive,
-  toggleModal
-}) {
+const PREFERENCES_MODAL_NAME = 'edit-site/preferences';
+exports.PREFERENCES_MODAL_NAME = PREFERENCES_MODAL_NAME;
+
+function EditSitePreferencesModal() {
+  const isModalActive = (0, _data.useSelect)(select => select(_interface.store).isModalActive(PREFERENCES_MODAL_NAME));
+  const {
+    closeModal,
+    openModal
+  } = (0, _data.useDispatch)(_interface.store);
+
+  const toggleModal = () => isModalActive ? closeModal() : openModal(PREFERENCES_MODAL_NAME);
+
+  const registry = (0, _data.useRegistry)();
+  const {
+    closeGeneralSidebar,
+    setIsListViewOpened,
+    setIsInserterOpened
+  } = (0, _data.useDispatch)(_store.store);
+  const {
+    set: setPreference
+  } = (0, _data.useDispatch)(_preferences.store);
+
+  const toggleDistractionFree = () => {
+    registry.batch(() => {
+      setPreference('core/edit-site', 'fixedToolbar', false);
+      setIsInserterOpened(false);
+      setIsListViewOpened(false);
+      closeGeneralSidebar();
+    });
+  };
+
   const sections = (0, _element.useMemo)(() => [{
     name: 'general',
     tabLabel: (0, _i18n.__)('General'),
@@ -33,6 +67,11 @@ function EditSitePreferencesModal({
       title: (0, _i18n.__)('Appearance'),
       description: (0, _i18n.__)('Customize options related to the block editor interface and editing flow.')
     }, (0, _element.createElement)(_enableFeature.default, {
+      featureName: "distractionFree",
+      onToggle: toggleDistractionFree,
+      help: (0, _i18n.__)('Reduce visual distractions by hiding the toolbar and other elements to focus on writing.'),
+      label: (0, _i18n.__)('Distraction free')
+    }), (0, _element.createElement)(_enableFeature.default, {
       featureName: "focusMode",
       help: (0, _i18n.__)('Highlights the current block and fades other content.'),
       label: (0, _i18n.__)('Spotlight mode')

package/build/components/preferences-modal/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/preferences-modal/index.js"],"names":["EditSitePreferencesModal","isModalActive","toggleModal","sections","name","tabLabel","content"],"mappings":";;;;;;;;;AAQA;;AALA;;AAMA;;AAKA;;AAdA;AACA;AACA;;AASA;AACA;AACA;AAGe,SAASA,wBAAT,CAAmC;AACjDC,EAAAA,aADiD;AAEjDC,EAAAA;AAFiD,CAAnC,EAGX;AACH,QAAMC,QAAQ,GAAG,sBAAS,MAAM,CAC/B;AACCC,IAAAA,IAAI,EAAE,SADP;AAECC,IAAAA,QAAQ,EAAE,cAAI,SAAJ,CAFX;AAGCC,IAAAA,OAAO,EACN,4BAAC,kCAAD;AACC,MAAA,KAAK,EAAG,cAAI,YAAJ,CADT;AAEC,MAAA,WAAW,EAAG,cACb,2EADa;AAFf,OAMC,4BAAC,sBAAD;AACC,MAAA,WAAW,EAAC,WADb;AAEC,MAAA,IAAI,EAAG,cACN,uDADM,CAFR;AAKC,MAAA,KAAK,EAAG,cAAI,gBAAJ;AALT,MAND,EAaC,4BAAC,sBAAD;AACC,MAAA,WAAW,EAAC,gBADb;AAEC,MAAA,KAAK,EAAG,cAAI,yBAAJ,CAFT;AAGC,MAAA,IAAI,EAAG,cAAI,wCAAJ;AAHR,MAbD,EAkBC,4BAAC,sBAAD;AACC,MAAA,WAAW,EAAC,uBADb;AAEC,MAAA,IAAI,EAAG,cACN,+CADM,CAFR;AAKC,MAAA,KAAK,EAAG,cAAI,uBAAJ;AALT,MAlBD,EAyBC,4BAAC,sBAAD;AACC,MAAA,WAAW,EAAC,sBADb;AAEC,MAAA,IAAI,EAAG,cACN,sDADM,CAFR;AAKC,MAAA,KAAK,EAAG,cAAI,2BAAJ;AALT,MAzBD;AAJF,GAD+B,EAwC/B;AACCF,IAAAA,IAAI,EAAE,QADP;AAECC,IAAAA,QAAQ,EAAE,cAAI,QAAJ,CAFX;AAGCC,IAAAA,OAAO,EACN,4BAAC,kCAAD;AACC,MAAA,KAAK,EAAG,cAAI,oBAAJ,CADT;AAEC,MAAA,WAAW,EAAG,cACb,iFADa;AAFf,OAMC,4BAAC,sBAAD;AACC,MAAA,WAAW,EAAC,sBADb;AAEC,MAAA,IAAI,EAAG,cACN,iEADM,CAFR;AAKC,MAAA,KAAK,EAAG,cAAI,kCAAJ;AALT,MAND;AAJF,GAxC+B,CAAf,CAAjB;;AA6DA,MAAK,CAAEL,aAAP,EAAuB;AACtB,WAAO,IAAP;AACA;;AACD,SACC,4BAAC,2BAAD;AAAkB,IAAA,UAAU,EAAGC;AAA/B,KACC,4BAAC,+BAAD;AAAsB,IAAA,QAAQ,EAAGC;AAAjC,IADD,CADD;AAKA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tPreferencesModal,\n\tPreferencesModalTabs,\n\tPreferencesModalSection,\n} from '@wordpress/interface';\nimport { useMemo } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport EnableFeature from './enable-feature';\n\nexport default function EditSitePreferencesModal( {\n\tisModalActive,\n\ttoggleModal,\n} ) {\n\tconst sections = useMemo( () => [\n\t\t{\n\t\t\tname: 'general',\n\t\t\ttabLabel: __( 'General' ),\n\t\t\tcontent: (\n\t\t\t\t<PreferencesModalSection\n\t\t\t\t\ttitle={ __( 'Appearance' ) }\n\t\t\t\t\tdescription={ __(\n\t\t\t\t\t\t'Customize options related to the block editor interface and editing flow.'\n\t\t\t\t\t) }\n\t\t\t\t>\n\t\t\t\t\t<EnableFeature\n\t\t\t\t\t\tfeatureName=\"focusMode\"\n\t\t\t\t\t\thelp={ __(\n\t\t\t\t\t\t\t'Highlights the current block and fades other content.'\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tlabel={ __( 'Spotlight mode' ) }\n\t\t\t\t\t/>\n\t\t\t\t\t<EnableFeature\n\t\t\t\t\t\tfeatureName=\"showIconLabels\"\n\t\t\t\t\t\tlabel={ __( 'Show button text labels' ) }\n\t\t\t\t\t\thelp={ __( 'Show text instead of icons on buttons.' ) }\n\t\t\t\t\t/>\n\t\t\t\t\t<EnableFeature\n\t\t\t\t\t\tfeatureName=\"showListViewByDefault\"\n\t\t\t\t\t\thelp={ __(\n\t\t\t\t\t\t\t'Opens the block list view sidebar by default.'\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tlabel={ __( 'Always open list view' ) }\n\t\t\t\t\t/>\n\t\t\t\t\t<EnableFeature\n\t\t\t\t\t\tfeatureName=\"showBlockBreadcrumbs\"\n\t\t\t\t\t\thelp={ __(\n\t\t\t\t\t\t\t'Shows block breadcrumbs at the bottom of the editor.'\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tlabel={ __( 'Display block breadcrumbs' ) }\n\t\t\t\t\t/>\n\t\t\t\t</PreferencesModalSection>\n\t\t\t),\n\t\t},\n\t\t{\n\t\t\tname: 'blocks',\n\t\t\ttabLabel: __( 'Blocks' ),\n\t\t\tcontent: (\n\t\t\t\t<PreferencesModalSection\n\t\t\t\t\ttitle={ __( 'Block interactions' ) }\n\t\t\t\t\tdescription={ __(\n\t\t\t\t\t\t'Customize how you interact with blocks in the block library and editing canvas.'\n\t\t\t\t\t) }\n\t\t\t\t>\n\t\t\t\t\t<EnableFeature\n\t\t\t\t\t\tfeatureName=\"keepCaretInsideBlock\"\n\t\t\t\t\t\thelp={ __(\n\t\t\t\t\t\t\t'Aids screen readers by stopping text caret from leaving blocks.'\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tlabel={ __( 'Contain text cursor inside block' ) }\n\t\t\t\t\t/>\n\t\t\t\t</PreferencesModalSection>\n\t\t\t),\n\t\t},\n\t] );\n\tif ( ! isModalActive ) {\n\t\treturn null;\n\t}\n\treturn (\n\t\t<PreferencesModal closeModal={ toggleModal }>\n\t\t\t<PreferencesModalTabs sections={ sections } />\n\t\t</PreferencesModal>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/preferences-modal/index.js"],"names":["PREFERENCES_MODAL_NAME","EditSitePreferencesModal","isModalActive","select","interfaceStore","closeModal","openModal","toggleModal","registry","closeGeneralSidebar","setIsListViewOpened","setIsInserterOpened","editSiteStore","set","setPreference","preferencesStore","toggleDistractionFree","batch","sections","name","tabLabel","content"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tPreferencesModal,\n\tPreferencesModalTabs,\n\tPreferencesModalSection,\n\tstore as interfaceStore,\n} from '@wordpress/interface';\nimport { useMemo } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { useSelect, useDispatch, useRegistry } from '@wordpress/data';\nimport { store as preferencesStore } from '@wordpress/preferences';\n\n/**\n * Internal dependencies\n */\nimport EnableFeature from './enable-feature';\nimport { store as editSiteStore } from '../../store';\n\nexport const PREFERENCES_MODAL_NAME = 'edit-site/preferences';\n\nexport default function EditSitePreferencesModal() {\n\tconst isModalActive = useSelect( ( select ) =>\n\t\tselect( interfaceStore ).isModalActive( PREFERENCES_MODAL_NAME )\n\t);\n\tconst { closeModal, openModal } = useDispatch( interfaceStore );\n\tconst toggleModal = () =>\n\t\tisModalActive ? closeModal() : openModal( PREFERENCES_MODAL_NAME );\n\tconst registry = useRegistry();\n\tconst { closeGeneralSidebar, setIsListViewOpened, setIsInserterOpened } =\n\t\tuseDispatch( editSiteStore );\n\n\tconst { set: setPreference } = useDispatch( preferencesStore );\n\tconst toggleDistractionFree = () => {\n\t\tregistry.batch( () => {\n\t\t\tsetPreference( 'core/edit-site', 'fixedToolbar', false );\n\t\t\tsetIsInserterOpened( false );\n\t\t\tsetIsListViewOpened( false );\n\t\t\tcloseGeneralSidebar();\n\t\t} );\n\t};\n\n\tconst sections = useMemo( () => [\n\t\t{\n\t\t\tname: 'general',\n\t\t\ttabLabel: __( 'General' ),\n\t\t\tcontent: (\n\t\t\t\t<PreferencesModalSection\n\t\t\t\t\ttitle={ __( 'Appearance' ) }\n\t\t\t\t\tdescription={ __(\n\t\t\t\t\t\t'Customize options related to the block editor interface and editing flow.'\n\t\t\t\t\t) }\n\t\t\t\t>\n\t\t\t\t\t<EnableFeature\n\t\t\t\t\t\tfeatureName=\"distractionFree\"\n\t\t\t\t\t\tonToggle={ toggleDistractionFree }\n\t\t\t\t\t\thelp={ __(\n\t\t\t\t\t\t\t'Reduce visual distractions by hiding the toolbar and other elements to focus on writing.'\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tlabel={ __( 'Distraction free' ) }\n\t\t\t\t\t/>\n\t\t\t\t\t<EnableFeature\n\t\t\t\t\t\tfeatureName=\"focusMode\"\n\t\t\t\t\t\thelp={ __(\n\t\t\t\t\t\t\t'Highlights the current block and fades other content.'\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tlabel={ __( 'Spotlight mode' ) }\n\t\t\t\t\t/>\n\t\t\t\t\t<EnableFeature\n\t\t\t\t\t\tfeatureName=\"showIconLabels\"\n\t\t\t\t\t\tlabel={ __( 'Show button text labels' ) }\n\t\t\t\t\t\thelp={ __( 'Show text instead of icons on buttons.' ) }\n\t\t\t\t\t/>\n\t\t\t\t\t<EnableFeature\n\t\t\t\t\t\tfeatureName=\"showListViewByDefault\"\n\t\t\t\t\t\thelp={ __(\n\t\t\t\t\t\t\t'Opens the block list view sidebar by default.'\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tlabel={ __( 'Always open list view' ) }\n\t\t\t\t\t/>\n\t\t\t\t\t<EnableFeature\n\t\t\t\t\t\tfeatureName=\"showBlockBreadcrumbs\"\n\t\t\t\t\t\thelp={ __(\n\t\t\t\t\t\t\t'Shows block breadcrumbs at the bottom of the editor.'\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tlabel={ __( 'Display block breadcrumbs' ) }\n\t\t\t\t\t/>\n\t\t\t\t</PreferencesModalSection>\n\t\t\t),\n\t\t},\n\t\t{\n\t\t\tname: 'blocks',\n\t\t\ttabLabel: __( 'Blocks' ),\n\t\t\tcontent: (\n\t\t\t\t<PreferencesModalSection\n\t\t\t\t\ttitle={ __( 'Block interactions' ) }\n\t\t\t\t\tdescription={ __(\n\t\t\t\t\t\t'Customize how you interact with blocks in the block library and editing canvas.'\n\t\t\t\t\t) }\n\t\t\t\t>\n\t\t\t\t\t<EnableFeature\n\t\t\t\t\t\tfeatureName=\"keepCaretInsideBlock\"\n\t\t\t\t\t\thelp={ __(\n\t\t\t\t\t\t\t'Aids screen readers by stopping text caret from leaving blocks.'\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tlabel={ __( 'Contain text cursor inside block' ) }\n\t\t\t\t\t/>\n\t\t\t\t</PreferencesModalSection>\n\t\t\t),\n\t\t},\n\t] );\n\tif ( ! isModalActive ) {\n\t\treturn null;\n\t}\n\treturn (\n\t\t<PreferencesModal closeModal={ toggleModal }>\n\t\t\t<PreferencesModalTabs sections={ sections } />\n\t\t</PreferencesModal>\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":"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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":["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":"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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\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"]}