@wordpress/interface 4.2.2 → 4.3.0-next.e230fbab09.0

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/interface/src/components/preferences-modal-tabs/index.js"],"names":["useViewportMatch","__experimentalNavigatorProvider","NavigatorProvider","__experimentalNavigatorScreen","NavigatorScreen","__experimentalNavigatorButton","NavigatorButton","__experimentalNavigatorBackButton","NavigatorBackButton","__experimentalItemGroup","ItemGroup","__experimentalItem","Item","__experimentalHStack","HStack","__experimentalText","Text","__experimentalTruncate","Truncate","FlexItem","TabPanel","Card","CardHeader","CardBody","useMemo","useCallback","useState","chevronLeft","chevronRight","Icon","isRTL","__","PREFERENCES_MENU","PreferencesModalTabs","sections","isLargeViewport","activeMenu","setActiveMenu","tabs","sectionsContentMap","mappedTabs","length","reduce","accumulator","name","tabLabel","title","content","push","getCurrentTab","tab","modalContent","undefined","map","section"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useViewportMatch } from '@wordpress/compose';\nimport {\n\t__experimentalNavigatorProvider as NavigatorProvider,\n\t__experimentalNavigatorScreen as NavigatorScreen,\n\t__experimentalNavigatorButton as NavigatorButton,\n\t__experimentalNavigatorBackButton as NavigatorBackButton,\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalItem as Item,\n\t__experimentalHStack as HStack,\n\t__experimentalText as Text,\n\t__experimentalTruncate as Truncate,\n\tFlexItem,\n\tTabPanel,\n\tCard,\n\tCardHeader,\n\tCardBody,\n} from '@wordpress/components';\nimport { useMemo, useCallback, useState } from '@wordpress/element';\nimport { chevronLeft, chevronRight, Icon } from '@wordpress/icons';\nimport { isRTL, __ } from '@wordpress/i18n';\n\nconst PREFERENCES_MENU = 'preferences-menu';\n\nexport default function PreferencesModalTabs( { sections } ) {\n\tconst isLargeViewport = useViewportMatch( 'medium' );\n\n\t// This is also used to sync the two different rendered components\n\t// between small and large viewports.\n\tconst [ activeMenu, setActiveMenu ] = useState( PREFERENCES_MENU );\n\t/**\n\t * Create helper objects from `sections` for easier data handling.\n\t * `tabs` is used for creating the `TabPanel` and `sectionsContentMap`\n\t * is used for easier access to active tab's content.\n\t */\n\tconst { tabs, sectionsContentMap } = useMemo( () => {\n\t\tlet mappedTabs = {\n\t\t\ttabs: [],\n\t\t\tsectionsContentMap: {},\n\t\t};\n\t\tif ( sections.length ) {\n\t\t\tmappedTabs = sections.reduce(\n\t\t\t\t( accumulator, { name, tabLabel: title, content } ) => {\n\t\t\t\t\taccumulator.tabs.push( { name, title } );\n\t\t\t\t\taccumulator.sectionsContentMap[ name ] = content;\n\t\t\t\t\treturn accumulator;\n\t\t\t\t},\n\t\t\t\t{ tabs: [], sectionsContentMap: {} }\n\t\t\t);\n\t\t}\n\t\treturn mappedTabs;\n\t}, [ sections ] );\n\n\tconst getCurrentTab = useCallback(\n\t\t( tab ) => sectionsContentMap[ tab.name ] || null,\n\t\t[ sectionsContentMap ]\n\t);\n\n\tlet modalContent;\n\t// We render different components based on the viewport size.\n\tif ( isLargeViewport ) {\n\t\tmodalContent = (\n\t\t\t<TabPanel\n\t\t\t\tclassName=\"interface-preferences__tabs\"\n\t\t\t\ttabs={ tabs }\n\t\t\t\tinitialTabName={\n\t\t\t\t\tactiveMenu !== PREFERENCES_MENU ? activeMenu : undefined\n\t\t\t\t}\n\t\t\t\tonSelect={ setActiveMenu }\n\t\t\t\torientation=\"vertical\"\n\t\t\t>\n\t\t\t\t{ getCurrentTab }\n\t\t\t</TabPanel>\n\t\t);\n\t} else {\n\t\tmodalContent = (\n\t\t\t<NavigatorProvider\n\t\t\t\tinitialPath=\"/\"\n\t\t\t\tclassName=\"interface-preferences__provider\"\n\t\t\t>\n\t\t\t\t<NavigatorScreen path=\"/\">\n\t\t\t\t\t<Card isBorderless size=\"small\">\n\t\t\t\t\t\t<CardBody>\n\t\t\t\t\t\t\t<ItemGroup>\n\t\t\t\t\t\t\t\t{ tabs.map( ( tab ) => {\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<NavigatorButton\n\t\t\t\t\t\t\t\t\t\t\tkey={ tab.name }\n\t\t\t\t\t\t\t\t\t\t\tpath={ tab.name }\n\t\t\t\t\t\t\t\t\t\t\tas={ Item }\n\t\t\t\t\t\t\t\t\t\t\tisAction\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<HStack justify=\"space-between\">\n\t\t\t\t\t\t\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Truncate>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{ tab.title }\n\t\t\t\t\t\t\t\t\t\t\t\t\t</Truncate>\n\t\t\t\t\t\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\t\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tisRTL()\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? chevronLeft\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: chevronRight\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t\t\t\t\t</NavigatorButton>\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t\t</ItemGroup>\n\t\t\t\t\t\t</CardBody>\n\t\t\t\t\t</Card>\n\t\t\t\t</NavigatorScreen>\n\t\t\t\t{ sections.length &&\n\t\t\t\t\tsections.map( ( section ) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<NavigatorScreen\n\t\t\t\t\t\t\t\tkey={ `${ section.name }-menu` }\n\t\t\t\t\t\t\t\tpath={ section.name }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Card isBorderless size=\"large\">\n\t\t\t\t\t\t\t\t\t<CardHeader\n\t\t\t\t\t\t\t\t\t\tisBorderless={ false }\n\t\t\t\t\t\t\t\t\t\tjustify=\"left\"\n\t\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\t\tgap=\"6\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<NavigatorBackButton\n\t\t\t\t\t\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t\t\t\t\t\tisRTL()\n\t\t\t\t\t\t\t\t\t\t\t\t\t? chevronRight\n\t\t\t\t\t\t\t\t\t\t\t\t\t: chevronLeft\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\taria-label={ __(\n\t\t\t\t\t\t\t\t\t\t\t\t'Navigate to the previous view'\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t<Text size=\"16\">\n\t\t\t\t\t\t\t\t\t\t\t{ section.tabLabel }\n\t\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t\t</CardHeader>\n\t\t\t\t\t\t\t\t\t<CardBody>{ section.content }</CardBody>\n\t\t\t\t\t\t\t\t</Card>\n\t\t\t\t\t\t\t</NavigatorScreen>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t</NavigatorProvider>\n\t\t);\n\t}\n\n\treturn modalContent;\n}\n"]}

package/build-module/store/index.js

@@ -10,6 +10,12 @@ import reducer from './reducer';
 import * as actions from './actions';
 import * as selectors from './selectors';
 import { STORE_NAME } from './constants';
+const storeConfig = {
+  reducer,
+  actions,
+  selectors,
+  persist: ['enableItems', 'preferences']
+};
 /**
  * Store definition for the interface namespace.
  *
@@ -18,20 +24,8 @@ import { STORE_NAME } from './constants';
  * @type {Object}
  */
 
-export const store = createReduxStore(STORE_NAME, {
-  reducer,
-  actions,
-  selectors,
-  persist: ['enableItems', 'preferences'],
-  __experimentalUseThunks: true
-}); // Once we build a more generic persistence plugin that works across types of stores
+export const store = createReduxStore(STORE_NAME, storeConfig); // Once we build a more generic persistence plugin that works across types of stores
 // we'd be able to replace this with a register call.
 
-registerStore(STORE_NAME, {
-  reducer,
-  actions,
-  selectors,
-  persist: ['enableItems', 'preferences'],
-  __experimentalUseThunks: true
-});
+registerStore(STORE_NAME, storeConfig);
 //# sourceMappingURL=index.js.map

package/build-module/store/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/interface/src/store/index.js"],"names":["createReduxStore","registerStore","reducer","actions","selectors","STORE_NAME","store","persist","__experimentalUseThunks"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,gBAAT,EAA2BC,aAA3B,QAAgD,iBAAhD;AAEA;AACA;AACA;;AACA,OAAOC,OAAP,MAAoB,WAApB;AACA,OAAO,KAAKC,OAAZ,MAAyB,WAAzB;AACA,OAAO,KAAKC,SAAZ,MAA2B,aAA3B;AACA,SAASC,UAAT,QAA2B,aAA3B;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,MAAMC,KAAK,GAAGN,gBAAgB,CAAEK,UAAF,EAAc;AAClDH,EAAAA,OADkD;AAElDC,EAAAA,OAFkD;AAGlDC,EAAAA,SAHkD;AAIlDG,EAAAA,OAAO,EAAE,CAAE,aAAF,EAAiB,aAAjB,CAJyC;AAKlDC,EAAAA,uBAAuB,EAAE;AALyB,CAAd,CAA9B,C,CAQP;AACA;;AACAP,aAAa,CAAEI,UAAF,EAAc;AAC1BH,EAAAA,OAD0B;AAE1BC,EAAAA,OAF0B;AAG1BC,EAAAA,SAH0B;AAI1BG,EAAAA,OAAO,EAAE,CAAE,aAAF,EAAiB,aAAjB,CAJiB;AAK1BC,EAAAA,uBAAuB,EAAE;AALC,CAAd,CAAb","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createReduxStore, registerStore } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport reducer from './reducer';\nimport * as actions from './actions';\nimport * as selectors from './selectors';\nimport { STORE_NAME } from './constants';\n\n/**\n * Store definition for the interface namespace.\n *\n * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/data/README.md#createReduxStore\n *\n * @type {Object}\n */\nexport const store = createReduxStore( STORE_NAME, {\n\treducer,\n\tactions,\n\tselectors,\n\tpersist: [ 'enableItems', 'preferences' ],\n\t__experimentalUseThunks: true,\n} );\n\n// Once we build a more generic persistence plugin that works across types of stores\n// we'd be able to replace this with a register call.\nregisterStore( STORE_NAME, {\n\treducer,\n\tactions,\n\tselectors,\n\tpersist: [ 'enableItems', 'preferences' ],\n\t__experimentalUseThunks: true,\n} );\n"]}
+{"version":3,"sources":["@wordpress/interface/src/store/index.js"],"names":["createReduxStore","registerStore","reducer","actions","selectors","STORE_NAME","storeConfig","persist","store"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,gBAAT,EAA2BC,aAA3B,QAAgD,iBAAhD;AAEA;AACA;AACA;;AACA,OAAOC,OAAP,MAAoB,WAApB;AACA,OAAO,KAAKC,OAAZ,MAAyB,WAAzB;AACA,OAAO,KAAKC,SAAZ,MAA2B,aAA3B;AACA,SAASC,UAAT,QAA2B,aAA3B;AAEA,MAAMC,WAAW,GAAG;AACnBJ,EAAAA,OADmB;AAEnBC,EAAAA,OAFmB;AAGnBC,EAAAA,SAHmB;AAInBG,EAAAA,OAAO,EAAE,CAAE,aAAF,EAAiB,aAAjB;AAJU,CAApB;AAOA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,MAAMC,KAAK,GAAGR,gBAAgB,CAAEK,UAAF,EAAcC,WAAd,CAA9B,C,CAEP;AACA;;AACAL,aAAa,CAAEI,UAAF,EAAcC,WAAd,CAAb","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createReduxStore, registerStore } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport reducer from './reducer';\nimport * as actions from './actions';\nimport * as selectors from './selectors';\nimport { STORE_NAME } from './constants';\n\nconst storeConfig = {\n\treducer,\n\tactions,\n\tselectors,\n\tpersist: [ 'enableItems', 'preferences' ],\n};\n\n/**\n * Store definition for the interface namespace.\n *\n * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/data/README.md#createReduxStore\n *\n * @type {Object}\n */\nexport const store = createReduxStore( STORE_NAME, storeConfig );\n\n// Once we build a more generic persistence plugin that works across types of stores\n// we'd be able to replace this with a register call.\nregisterStore( STORE_NAME, storeConfig );\n"]}

package/build-style/style-rtl.css

@@ -304,7 +304,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   display: flex;
   flex-direction: column;
   overflow: auto;
-  z-index: 20;
+  z-index: 91;
 }
 
 .interface-interface-skeleton__secondary-sidebar,
@@ -445,4 +445,93 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 .interface-pinned-items .components-button svg {
   max-width: 24px;
   max-height: 24px;
+}
+
+@media (min-width: 600px) {
+  .interface-preferences-modal {
+    width: calc(100% - 32px);
+    height: calc(100% - 120px);
+  }
+}
+@media (min-width: 782px) {
+  .interface-preferences-modal {
+    width: 750px;
+  }
+}
+@media (min-width: 960px) {
+  .interface-preferences-modal {
+    height: 70%;
+  }
+}
+@media (max-width: 781px) {
+  .interface-preferences-modal .components-modal__content {
+    padding: 0;
+  }
+  .interface-preferences-modal .components-modal__content::before {
+    content: none;
+  }
+}
+
+.interface-preferences__tabs .components-tab-panel__tabs {
+  position: absolute;
+  top: 84px;
+  right: 16px;
+  width: 160px;
+}
+.interface-preferences__tabs .components-tab-panel__tabs .components-tab-panel__tabs-item {
+  border-radius: 2px;
+  font-weight: 400;
+}
+.interface-preferences__tabs .components-tab-panel__tabs .components-tab-panel__tabs-item.is-active {
+  background: #f0f0f0;
+  box-shadow: none;
+  font-weight: 500;
+}
+.interface-preferences__tabs .components-tab-panel__tabs .components-tab-panel__tabs-item:focus:not(:disabled) {
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+}
+.interface-preferences__tabs .components-tab-panel__tab-content {
+  padding-right: 24px;
+  margin-right: 160px;
+}
+
+@media (max-width: 781px) {
+  .interface-preferences__provider {
+    height: 100%;
+  }
+}
+.interface-preferences-modal__section {
+  margin: 0 0 2.5rem 0;
+}
+.interface-preferences-modal__section:last-child {
+  margin: 0;
+}
+
+.interface-preferences-modal__section-title {
+  font-size: 0.9rem;
+  font-weight: 600;
+  margin-top: 0;
+}
+
+.interface-preferences-modal__section-description {
+  margin: -8px 0 8px 0;
+  font-size: 12px;
+  font-style: normal;
+  color: #757575;
+}
+
+.interface-preferences-modal__option .components-base-control .components-base-control__field {
+  align-items: center;
+  display: flex;
+  margin-bottom: 0;
+}
+.interface-preferences-modal__option .components-base-control .components-base-control__field > label {
+  flex-grow: 1;
+  padding: 0.6rem 10px 0.6rem 0;
+}
+.interface-preferences-modal__option .components-base-control__help {
+  margin: -8px 58px 8px 0;
+  font-size: 12px;
+  font-style: normal;
+  color: #757575;
 }

package/build-style/style.css

@@ -304,7 +304,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   display: flex;
   flex-direction: column;
   overflow: auto;
-  z-index: 20;
+  z-index: 91;
 }
 
 .interface-interface-skeleton__secondary-sidebar,
@@ -445,4 +445,93 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 .interface-pinned-items .components-button svg {
   max-width: 24px;
   max-height: 24px;
+}
+
+@media (min-width: 600px) {
+  .interface-preferences-modal {
+    width: calc(100% - 32px);
+    height: calc(100% - 120px);
+  }
+}
+@media (min-width: 782px) {
+  .interface-preferences-modal {
+    width: 750px;
+  }
+}
+@media (min-width: 960px) {
+  .interface-preferences-modal {
+    height: 70%;
+  }
+}
+@media (max-width: 781px) {
+  .interface-preferences-modal .components-modal__content {
+    padding: 0;
+  }
+  .interface-preferences-modal .components-modal__content::before {
+    content: none;
+  }
+}
+
+.interface-preferences__tabs .components-tab-panel__tabs {
+  position: absolute;
+  top: 84px;
+  left: 16px;
+  width: 160px;
+}
+.interface-preferences__tabs .components-tab-panel__tabs .components-tab-panel__tabs-item {
+  border-radius: 2px;
+  font-weight: 400;
+}
+.interface-preferences__tabs .components-tab-panel__tabs .components-tab-panel__tabs-item.is-active {
+  background: #f0f0f0;
+  box-shadow: none;
+  font-weight: 500;
+}
+.interface-preferences__tabs .components-tab-panel__tabs .components-tab-panel__tabs-item:focus:not(:disabled) {
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+}
+.interface-preferences__tabs .components-tab-panel__tab-content {
+  padding-left: 24px;
+  margin-left: 160px;
+}
+
+@media (max-width: 781px) {
+  .interface-preferences__provider {
+    height: 100%;
+  }
+}
+.interface-preferences-modal__section {
+  margin: 0 0 2.5rem 0;
+}
+.interface-preferences-modal__section:last-child {
+  margin: 0;
+}
+
+.interface-preferences-modal__section-title {
+  font-size: 0.9rem;
+  font-weight: 600;
+  margin-top: 0;
+}
+
+.interface-preferences-modal__section-description {
+  margin: -8px 0 8px 0;
+  font-size: 12px;
+  font-style: normal;
+  color: #757575;
+}
+
+.interface-preferences-modal__option .components-base-control .components-base-control__field {
+  align-items: center;
+  display: flex;
+  margin-bottom: 0;
+}
+.interface-preferences-modal__option .components-base-control .components-base-control__field > label {
+  flex-grow: 1;
+  padding: 0.6rem 0 0.6rem 10px;
+}
+.interface-preferences-modal__option .components-base-control__help {
+  margin: -8px 0 8px 58px;
+  font-size: 12px;
+  font-style: normal;
+  color: #757575;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/interface",
-	"version": "4.2.2",
+	"version": "4.3.0-next.e230fbab09.0",
 	"description": "Interface module for WordPress. The package contains shared functionality across the modern JavaScript-based WordPress screens.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -32,20 +32,24 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.3.1",
-		"@wordpress/components": "^19.4.1",
-		"@wordpress/compose": "^5.1.1",
-		"@wordpress/data": "^6.2.1",
-		"@wordpress/element": "^4.1.1",
-		"@wordpress/i18n": "^4.3.1",
-		"@wordpress/icons": "^7.0.0",
-		"@wordpress/plugins": "^4.1.2",
-		"@wordpress/viewport": "^4.1.1",
+		"@wordpress/a11y": "^3.4.0-next.e230fbab09.0",
+		"@wordpress/components": "^19.7.0-next.e230fbab09.0",
+		"@wordpress/compose": "^5.2.0-next.e230fbab09.0",
+		"@wordpress/data": "^6.4.0-next.e230fbab09.0",
+		"@wordpress/element": "^4.3.0-next.e230fbab09.0",
+		"@wordpress/i18n": "^4.4.0-next.e230fbab09.0",
+		"@wordpress/icons": "^7.1.0-next.e230fbab09.0",
+		"@wordpress/plugins": "^4.2.0-next.e230fbab09.0",
+		"@wordpress/viewport": "^4.2.0-next.e230fbab09.0",
 		"classnames": "^2.3.1",
 		"lodash": "^4.17.21"
 	},
+	"peerDependencies": {
+		"react": "^17.0.0",
+		"react-dom": "^17.0.0"
+	},
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "0f838547f37472e46e6d5a9d2e84b6c61f4bd3f0"
+	"gitHead": "308df03e6a96ded732f9c4e32471b1b4f8dea54a"
 }

package/src/components/fullscreen-mode/index.js

@@ -9,7 +9,7 @@ const FullscreenMode = ( { isActive } ) => {
 		// `is-fullscreen-mode` is set in PHP as a body class by Gutenberg, and this causes
 		// `sticky-menu` to be applied by WordPress and prevents the admin menu being scrolled
 		// even if `is-fullscreen-mode` is then removed. Let's remove `sticky-menu` here as
-		// a consequence of the FullscreenMode setup
+		// a consequence of the FullscreenMode setup.
 		if ( document.body.classList.contains( 'sticky-menu' ) ) {
 			isSticky = true;
 			document.body.classList.remove( 'sticky-menu' );

package/src/components/fullscreen-mode/test/index.js

@@ -51,7 +51,7 @@ describe( 'FullscreenMode', () => {
 	} );
 
 	it( 'fullscreen mode to be removed from document body when component unmounted', () => {
-		// not present initially
+		// Not present initially.
 		expect( document.body.classList.contains( 'is-fullscreen-mode' ) ).toBe(
 			false
 		);
@@ -59,7 +59,7 @@ describe( 'FullscreenMode', () => {
 		act( () => {
 			mode = create( <FullscreenMode isActive /> );
 		} );
-		// present after mounting with `isActive`
+		// Present after mounting with `isActive`
 		expect( document.body.classList.contains( 'is-fullscreen-mode' ) ).toBe(
 			true
 		);
@@ -68,7 +68,7 @@ describe( 'FullscreenMode', () => {
 			mode.unmount();
 		} );
 
-		// removed after unmounting
+		// Removed after unmounting.
 		expect( document.body.classList.contains( 'is-fullscreen-mode' ) ).toBe(
 			false
 		);

package/src/components/index.js

@@ -6,3 +6,7 @@ export { default as PinnedItems } from './pinned-items';
 export { default as MoreMenuDropdown } from './more-menu-dropdown';
 export { default as MoreMenuFeatureToggle } from './more-menu-feature-toggle';
 export { default as ActionItem } from './action-item';
+export { default as PreferencesModal } from './preferences-modal';
+export { default as PreferencesModalTabs } from './preferences-modal-tabs';
+export { default as PreferencesModalSection } from './preferences-modal-section';
+export { default as ___unstablePreferencesModalBaseOption } from './preferences-modal-base-option';

package/src/components/more-menu-dropdown/style.scss

@@ -31,5 +31,5 @@
 }
 
 .components-popover.interface-more-menu-dropdown__content {
-	z-index: z-index(".components-popover.edit-widgets-more-menu__content");
+	z-index: z-index(".components-popover.interface-more-menu__content");
 }

package/src/components/preferences-modal/README.md

@@ -0,0 +1,69 @@
+# PreferencesModal
+
+`PreferencesModal` renders a modal with editor preferences. It can take a `PreferencesModalTabs` component, which accepts multiple tabs, and/or other child components. On small viewports, the modal is fullscreen.
+
+This component implements a `Modal` component from the `@wordpress/components` package.
+
+Sections passed to this component should use `PreferencesModalSection` component from the `@wordpress/interface` package.
+
+
+## Example
+
+```jsx
+function MyEditorPreferencesModal() {
+	const { closeModal } = useDispatch( editPostStore );
+	const sections = [
+		{
+			name: 'section 1',
+			tabLabel: __( 'Section 1' ),
+			content: (
+						<PreferencesModalSection
+							title={ __( 'Publishing' ) }
+							description={ __(
+								'Change options related to publishing.'
+							) }
+						>
+							<EnablePublishSidebarOption
+								help={ __(
+									'Review settings, such as visibility and tags.'
+								) }
+								label={ __(
+									'Include pre-publish checklist'
+								) }
+							/>
+						</PreferencesModalSection>
+					) 
+
+		}
+		{
+			name: 'section 2',
+			tabLabel: __( 'Section 2' ),
+			content: (
+						<PreferencesModalSection
+							title={ __( 'Additional' ) }
+							description={ __(
+								'Add extra areas to the editor.'
+							) }
+						>
+							// Section content here
+						</PreferencesModalSection>
+					) 
+
+		}
+	]
+	return (
+		<PreferencesModal closeModal={ closeModal }>
+			<PreferencesModalTabs sections={ sections } />
+		<PreferencesModal />
+	);
+}
+```
+
+## Props
+
+### closeModal
+
+A function to call when closing the modal.
+
+-   Type: `Function`
+-   Required: Yes.

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

@@ -0,0 +1,18 @@
+/**
+ * WordPress dependencies
+ */
+import { Modal } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+export default function PreferencesModal( { closeModal, children } ) {
+	return (
+		<Modal
+			className="interface-preferences-modal"
+			title={ __( 'Preferences' ) }
+			closeLabel={ __( 'Close' ) }
+			onRequestClose={ closeModal }
+		>
+			{ children }
+		</Modal>
+	);
+}

package/src/components/preferences-modal/style.scss

@@ -0,0 +1,25 @@
+.interface-preferences-modal {
+	// To keep modal dimensions consistent as subsections are navigated, width
+	// and height are used instead of max-(width/height).
+	@include break-small() {
+		width: calc(100% - #{ $grid-unit-20 * 2 });
+		height: calc(100% - #{ $header-height * 2 });
+	}
+	@include break-medium() {
+		width: $break-medium - $grid-unit-20 * 2;
+	}
+	@include break-large() {
+		height: 70%;
+	}
+
+	// Clears spacing to flush fit the navigator component to the modal edges.
+	@media (max-width: #{ ($break-medium - 1) }) {
+		.components-modal__content {
+			padding: 0;
+
+			&::before {
+				content: none;
+			}
+		}
+	}
+}

package/src/components/preferences-modal-base-option/README.md

@@ -0,0 +1,42 @@
+#__unstablePreferencesModalBaseOption
+
+`__unstablePreferencesModalBaseOption` renders a toggle meant to be used with `PreferencesModal`. 
+
+This component implements a `ToggleControl` component from the `@wordpress/components` package.
+
+**It is an unstable component so is subject to breaking changes at any moment. Use at own risk.**
+
+## Example
+
+```jsx
+function MyEditorPreferencesOption() {
+	return (
+		<__unstablePreferencesModalBaseOption
+			label={ label }
+			isChecked={ isChecked }
+			onChange={ setIsChecked }
+		>
+			{ isChecked !== areCustomFieldsEnabled && (
+				<CustomFieldsConfirmation willEnable={ isChecked } />
+			) }
+		</__unstablePreferencesModalBaseOption>
+	)				
+}
+```
+
+## Props
+
+### help 
+### label 
+### isChecked 
+### onChange
+
+These props are passed directly to ToggleControl, so see [ToggleControl readme](https://github.com/WordPress/gutenberg/blob/trunk/packages/components/src/toggle-control/README.md) for more info.
+
+### children
+
+Components to be rendered as content.
+
+-   Type: `Element`
+-   Required: No.
+

package/src/components/preferences-modal-base-option/index.js

@@ -0,0 +1,20 @@
+/**
+ * WordPress dependencies
+ */
+import { ToggleControl } from '@wordpress/components';
+
+function BaseOption( { help, label, isChecked, onChange, children } ) {
+	return (
+		<div className="interface-preferences-modal__option">
+			<ToggleControl
+				help={ help }
+				label={ label }
+				checked={ isChecked }
+				onChange={ onChange }
+			/>
+			{ children }
+		</div>
+	);
+}
+
+export default BaseOption;

package/src/components/preferences-modal-base-option/style.scss

@@ -0,0 +1,21 @@
+.interface-preferences-modal__option {
+	.components-base-control {
+		.components-base-control__field {
+			align-items: center;
+			display: flex;
+			margin-bottom: 0;
+
+			& > label {
+				flex-grow: 1;
+				padding: 0.6rem 0 0.6rem 10px;
+			}
+		}
+	}
+
+	.components-base-control__help {
+		margin: -$grid-unit-10 0 $grid-unit-10 58px;
+		font-size: $helptext-font-size;
+		font-style: normal;
+		color: $gray-700;
+	}
+}

package/src/components/preferences-modal-section/README.md

@@ -0,0 +1,30 @@
+
+`PreferencesModalSection` renders a section (as a fieldset) meant to be used with `PreferencesModal`.
+
+## Example
+
+See the `PreferencesModal` readme for usage info.
+
+
+## Props
+
+### title
+
+The title of the section
+
+-   Type: `String`
+-   Required: Yes.
+
+### description
+
+The description for the section.
+
+-   Type: `String`
+-   Required: No.
+
+### children
+
+Components to be rendered as content.
+
+-   Type: `Element`
+-   Required: Yes.

package/src/components/preferences-modal-section/index.js

@@ -0,0 +1,17 @@
+const Section = ( { description, title, children } ) => (
+	<fieldset className="interface-preferences-modal__section">
+		<legend>
+			<h2 className="interface-preferences-modal__section-title">
+				{ title }
+			</h2>
+			{ description && (
+				<p className="interface-preferences-modal__section-description">
+					{ description }
+				</p>
+			) }
+		</legend>
+		{ children }
+	</fieldset>
+);
+
+export default Section;

package/src/components/preferences-modal-section/style.scss

@@ -0,0 +1,20 @@
+.interface-preferences-modal__section {
+	margin: 0 0 2.5rem 0;
+
+	&:last-child {
+		margin: 0;
+	}
+}
+
+.interface-preferences-modal__section-title {
+	font-size: 0.9rem;
+	font-weight: 600;
+	margin-top: 0;
+}
+
+.interface-preferences-modal__section-description {
+	margin: -$grid-unit-10 0 $grid-unit-10 0;
+	font-size: $helptext-font-size;
+	font-style: normal;
+	color: $gray-700;
+}

package/src/components/preferences-modal-tabs/README.md

@@ -0,0 +1,14 @@
+# PreferencesModalTabs
+
+`PreferencesModalTabs` creates a tabbed interface meant to be used inside a `PreferencesModal`. Markup differs between small and large viewports; on small the tabs are closed by default.
+
+## Example
+
+See the `PreferencesModal` readme for usage info.
+## Props
+### sections
+
+Sections to populate the modal with. Takes an array of objects, where each should include `name`, `tablabel` and `content`.
+
+-   Type: `Array`
+-   Required: Yes.