@wordpress/preferences 4.8.3 → 4.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/CHANGELOG.md +2 -0
  2. package/build/components/preferences-modal-tabs/index.js +5 -5
  3. package/build/components/preferences-modal-tabs/index.js.map +1 -1
  4. package/build-module/components/preferences-modal-tabs/index.js +6 -6
  5. package/build-module/components/preferences-modal-tabs/index.js.map +1 -1
  6. package/build-style/style-rtl.css +10 -1
  7. package/build-style/style.css +10 -1
  8. package/package.json +11 -11
  9. package/src/components/preferences-modal-tabs/index.js +10 -16
package/CHANGELOG.md CHANGED
@@ -2,6 +2,8 @@
2
2
 
3
3
  ## Unreleased
4
4
 
5
+ ## 4.9.0 (2024-10-03)
6
+
5
7
  ## 4.8.0 (2024-09-19)
6
8
 
7
9
  ## 4.7.0 (2024-09-05)
package/build/components/preferences-modal-tabs/index.js CHANGED
@@ -88,10 +88,10 @@ function PreferencesModalTabs({
88
88
  })
89
89
  });
90
90
  } else {
91
- modalContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalNavigatorProvider, {
91
+ modalContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Navigator, {
92
92
  initialPath: "/",
93
93
  className: "preferences__provider",
94
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalNavigatorScreen, {
94
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Navigator.Screen, {
95
95
  path: "/",
96
96
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Card, {
97
97
  isBorderless: true,
@@ -99,7 +99,7 @@ function PreferencesModalTabs({
99
99
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.CardBody, {
100
100
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalItemGroup, {
101
101
  children: tabs.map(tab => {
102
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalNavigatorButton, {
102
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Navigator.Button, {
103
103
  path: `/${tab.name}`,
104
104
  as: _components.__experimentalItem,
105
105
  isAction: true,
@@ -121,7 +121,7 @@ function PreferencesModalTabs({
121
121
  })
122
122
  })
123
123
  }), sections.length && sections.map(section => {
124
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalNavigatorScreen, {
124
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Navigator.Screen, {
125
125
  path: `/${section.name}`,
126
126
  children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Card, {
127
127
  isBorderless: true,
@@ -131,7 +131,7 @@ function PreferencesModalTabs({
131
131
  justify: "left",
132
132
  size: "small",
133
133
  gap: "6",
134
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalNavigatorBackButton, {
134
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Navigator.BackButton, {
135
135
  icon: (0, _i18n.isRTL)() ? _icons.chevronRight : _icons.chevronLeft,
136
136
  label: (0, _i18n.__)('Back')
137
137
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalText, {
package/build/components/preferences-modal-tabs/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["_compose","require","_components","_element","_icons","_i18n","_lockUnlock","_jsxRuntime","Tabs","unlock","componentsPrivateApis","PREFERENCES_MENU","PreferencesModalTabs","sections","isLargeViewport","useViewportMatch","activeMenu","setActiveMenu","useState","tabs","sectionsContentMap","useMemo","mappedTabs","length","reduce","accumulator","name","tabLabel","title","content","push","modalContent","jsx","className","children","jsxs","defaultTabId","undefined","onSelect","orientation","TabList","map","tab","Tab","tabId","TabPanel","focusable","__experimentalNavigatorProvider","initialPath","__experimentalNavigatorScreen","path","Card","isBorderless","size","CardBody","__experimentalItemGroup","__experimentalNavigatorButton","as","Item","isAction","__experimentalHStack","justify","FlexItem","__experimentalTruncate","Icon","icon","isRTL","chevronLeft","chevronRight","section","CardHeader","gap","__experimentalNavigatorBackButton","label","__","__experimentalText"],"sources":["@wordpress/preferences/src/components/preferences-modal-tabs/index.js"],"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\tCard,\n\tCardHeader,\n\tCardBody,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { useMemo, useState } from '@wordpress/element';\nimport { chevronLeft, chevronRight, Icon } from '@wordpress/icons';\nimport { isRTL, __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\n\nconst { Tabs } = unlock( componentsPrivateApis );\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 `Tabs` 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\tlet modalContent;\n\t// We render different components based on the viewport size.\n\tif ( isLargeViewport ) {\n\t\tmodalContent = (\n\t\t\t<div className=\"preferences__tabs\">\n\t\t\t\t<Tabs\n\t\t\t\t\tdefaultTabId={\n\t\t\t\t\t\tactiveMenu !== PREFERENCES_MENU ? activeMenu : undefined\n\t\t\t\t\t}\n\t\t\t\t\tonSelect={ setActiveMenu }\n\t\t\t\t\torientation=\"vertical\"\n\t\t\t\t>\n\t\t\t\t\t<Tabs.TabList className=\"preferences__tabs-tablist\">\n\t\t\t\t\t\t{ tabs.map( ( tab ) => (\n\t\t\t\t\t\t\t<Tabs.Tab\n\t\t\t\t\t\t\t\ttabId={ tab.name }\n\t\t\t\t\t\t\t\tkey={ tab.name }\n\t\t\t\t\t\t\t\tclassName=\"preferences__tabs-tab\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ tab.title }\n\t\t\t\t\t\t\t</Tabs.Tab>\n\t\t\t\t\t\t) ) }\n\t\t\t\t\t</Tabs.TabList>\n\t\t\t\t\t{ tabs.map( ( tab ) => (\n\t\t\t\t\t\t<Tabs.TabPanel\n\t\t\t\t\t\t\ttabId={ tab.name }\n\t\t\t\t\t\t\tkey={ tab.name }\n\t\t\t\t\t\t\tclassName=\"preferences__tabs-tabpanel\"\n\t\t\t\t\t\t\tfocusable={ false }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ sectionsContentMap[ tab.name ] || null }\n\t\t\t\t\t\t</Tabs.TabPanel>\n\t\t\t\t\t) ) }\n\t\t\t\t</Tabs>\n\t\t\t</div>\n\t\t);\n\t} else {\n\t\tmodalContent = (\n\t\t\t<NavigatorProvider\n\t\t\t\tinitialPath=\"/\"\n\t\t\t\tclassName=\"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\tlabel={ __( 'Back' ) }\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"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["_compose","require","_components","_element","_icons","_i18n","_lockUnlock","_jsxRuntime","Tabs","unlock","componentsPrivateApis","PREFERENCES_MENU","PreferencesModalTabs","sections","isLargeViewport","useViewportMatch","activeMenu","setActiveMenu","useState","tabs","sectionsContentMap","useMemo","mappedTabs","length","reduce","accumulator","name","tabLabel","title","content","push","modalContent","jsx","className","children","jsxs","defaultTabId","undefined","onSelect","orientation","TabList","map","tab","Tab","tabId","TabPanel","focusable","Navigator","initialPath","Screen","path","Card","isBorderless","size","CardBody","__experimentalItemGroup","Button","as","Item","isAction","__experimentalHStack","justify","FlexItem","__experimentalTruncate","Icon","icon","isRTL","chevronLeft","chevronRight","section","CardHeader","gap","BackButton","label","__","__experimentalText"],"sources":["@wordpress/preferences/src/components/preferences-modal-tabs/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useViewportMatch } from '@wordpress/compose';\nimport {\n\tNavigator,\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\tCard,\n\tCardHeader,\n\tCardBody,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { useMemo, useState } from '@wordpress/element';\nimport { chevronLeft, chevronRight, Icon } from '@wordpress/icons';\nimport { isRTL, __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\n\nconst { Tabs } = unlock( componentsPrivateApis );\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 `Tabs` 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\tlet modalContent;\n\t// We render different components based on the viewport size.\n\tif ( isLargeViewport ) {\n\t\tmodalContent = (\n\t\t\t<div className=\"preferences__tabs\">\n\t\t\t\t<Tabs\n\t\t\t\t\tdefaultTabId={\n\t\t\t\t\t\tactiveMenu !== PREFERENCES_MENU ? activeMenu : undefined\n\t\t\t\t\t}\n\t\t\t\t\tonSelect={ setActiveMenu }\n\t\t\t\t\torientation=\"vertical\"\n\t\t\t\t>\n\t\t\t\t\t<Tabs.TabList className=\"preferences__tabs-tablist\">\n\t\t\t\t\t\t{ tabs.map( ( tab ) => (\n\t\t\t\t\t\t\t<Tabs.Tab\n\t\t\t\t\t\t\t\ttabId={ tab.name }\n\t\t\t\t\t\t\t\tkey={ tab.name }\n\t\t\t\t\t\t\t\tclassName=\"preferences__tabs-tab\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ tab.title }\n\t\t\t\t\t\t\t</Tabs.Tab>\n\t\t\t\t\t\t) ) }\n\t\t\t\t\t</Tabs.TabList>\n\t\t\t\t\t{ tabs.map( ( tab ) => (\n\t\t\t\t\t\t<Tabs.TabPanel\n\t\t\t\t\t\t\ttabId={ tab.name }\n\t\t\t\t\t\t\tkey={ tab.name }\n\t\t\t\t\t\t\tclassName=\"preferences__tabs-tabpanel\"\n\t\t\t\t\t\t\tfocusable={ false }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ sectionsContentMap[ tab.name ] || null }\n\t\t\t\t\t\t</Tabs.TabPanel>\n\t\t\t\t\t) ) }\n\t\t\t\t</Tabs>\n\t\t\t</div>\n\t\t);\n\t} else {\n\t\tmodalContent = (\n\t\t\t<Navigator initialPath=\"/\" className=\"preferences__provider\">\n\t\t\t\t<Navigator.Screen 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<Navigator.Button\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</Navigator.Button>\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</Navigator.Screen>\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<Navigator.Screen\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<Navigator.BackButton\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\tlabel={ __( 'Back' ) }\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</Navigator.Screen>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t</Navigator>\n\t\t);\n\t}\n\n\treturn modalContent;\n}\n"],"mappings":"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","ignoreList":[]}
package/build-module/components/preferences-modal-tabs/index.js CHANGED
@@ -2,7 +2,7 @@
2
2
  * WordPress dependencies
3
3
  */
4
4
  import { useViewportMatch } from '@wordpress/compose';
5
- import { __experimentalNavigatorProvider as NavigatorProvider, __experimentalNavigatorScreen as NavigatorScreen, __experimentalNavigatorButton as NavigatorButton, __experimentalNavigatorBackButton as NavigatorBackButton, __experimentalItemGroup as ItemGroup, __experimentalItem as Item, __experimentalHStack as HStack, __experimentalText as Text, __experimentalTruncate as Truncate, FlexItem, Card, CardHeader, CardBody, privateApis as componentsPrivateApis } from '@wordpress/components';
5
+ import { Navigator, __experimentalItemGroup as ItemGroup, __experimentalItem as Item, __experimentalHStack as HStack, __experimentalText as Text, __experimentalTruncate as Truncate, FlexItem, Card, CardHeader, CardBody, privateApis as componentsPrivateApis } from '@wordpress/components';
6
6
  import { useMemo, useState } from '@wordpress/element';
7
7
  import { chevronLeft, chevronRight, Icon } from '@wordpress/icons';
8
8
  import { isRTL, __ } from '@wordpress/i18n';
@@ -82,10 +82,10 @@ export default function PreferencesModalTabs({
82
82
  })
83
83
  });
84
84
  } else {
85
- modalContent = /*#__PURE__*/_jsxs(NavigatorProvider, {
85
+ modalContent = /*#__PURE__*/_jsxs(Navigator, {
86
86
  initialPath: "/",
87
87
  className: "preferences__provider",
88
- children: [/*#__PURE__*/_jsx(NavigatorScreen, {
88
+ children: [/*#__PURE__*/_jsx(Navigator.Screen, {
89
89
  path: "/",
90
90
  children: /*#__PURE__*/_jsx(Card, {
91
91
  isBorderless: true,
@@ -93,7 +93,7 @@ export default function PreferencesModalTabs({
93
93
  children: /*#__PURE__*/_jsx(CardBody, {
94
94
  children: /*#__PURE__*/_jsx(ItemGroup, {
95
95
  children: tabs.map(tab => {
96
- return /*#__PURE__*/_jsx(NavigatorButton, {
96
+ return /*#__PURE__*/_jsx(Navigator.Button, {
97
97
  path: `/${tab.name}`,
98
98
  as: Item,
99
99
  isAction: true,
@@ -115,7 +115,7 @@ export default function PreferencesModalTabs({
115
115
  })
116
116
  })
117
117
  }), sections.length && sections.map(section => {
118
- return /*#__PURE__*/_jsx(NavigatorScreen, {
118
+ return /*#__PURE__*/_jsx(Navigator.Screen, {
119
119
  path: `/${section.name}`,
120
120
  children: /*#__PURE__*/_jsxs(Card, {
121
121
  isBorderless: true,
@@ -125,7 +125,7 @@ export default function PreferencesModalTabs({
125
125
  justify: "left",
126
126
  size: "small",
127
127
  gap: "6",
128
- children: [/*#__PURE__*/_jsx(NavigatorBackButton, {
128
+ children: [/*#__PURE__*/_jsx(Navigator.BackButton, {
129
129
  icon: isRTL() ? chevronRight : chevronLeft,
130
130
  label: __('Back')
131
131
  }), /*#__PURE__*/_jsx(Text, {
package/build-module/components/preferences-modal-tabs/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["useViewportMatch","__experimentalNavigatorProvider","NavigatorProvider","__experimentalNavigatorScreen","NavigatorScreen","__experimentalNavigatorButton","NavigatorButton","__experimentalNavigatorBackButton","NavigatorBackButton","__experimentalItemGroup","ItemGroup","__experimentalItem","Item","__experimentalHStack","HStack","__experimentalText","Text","__experimentalTruncate","Truncate","FlexItem","Card","CardHeader","CardBody","privateApis","componentsPrivateApis","useMemo","useState","chevronLeft","chevronRight","Icon","isRTL","__","unlock","jsx","_jsx","jsxs","_jsxs","Tabs","PREFERENCES_MENU","PreferencesModalTabs","sections","isLargeViewport","activeMenu","setActiveMenu","tabs","sectionsContentMap","mappedTabs","length","reduce","accumulator","name","tabLabel","title","content","push","modalContent","className","children","defaultTabId","undefined","onSelect","orientation","TabList","map","tab","Tab","tabId","TabPanel","focusable","initialPath","path","isBorderless","size","as","isAction","justify","icon","section","gap","label"],"sources":["@wordpress/preferences/src/components/preferences-modal-tabs/index.js"],"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\tCard,\n\tCardHeader,\n\tCardBody,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { useMemo, useState } from '@wordpress/element';\nimport { chevronLeft, chevronRight, Icon } from '@wordpress/icons';\nimport { isRTL, __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\n\nconst { Tabs } = unlock( componentsPrivateApis );\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 `Tabs` 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\tlet modalContent;\n\t// We render different components based on the viewport size.\n\tif ( isLargeViewport ) {\n\t\tmodalContent = (\n\t\t\t<div className=\"preferences__tabs\">\n\t\t\t\t<Tabs\n\t\t\t\t\tdefaultTabId={\n\t\t\t\t\t\tactiveMenu !== PREFERENCES_MENU ? activeMenu : undefined\n\t\t\t\t\t}\n\t\t\t\t\tonSelect={ setActiveMenu }\n\t\t\t\t\torientation=\"vertical\"\n\t\t\t\t>\n\t\t\t\t\t<Tabs.TabList className=\"preferences__tabs-tablist\">\n\t\t\t\t\t\t{ tabs.map( ( tab ) => (\n\t\t\t\t\t\t\t<Tabs.Tab\n\t\t\t\t\t\t\t\ttabId={ tab.name }\n\t\t\t\t\t\t\t\tkey={ tab.name }\n\t\t\t\t\t\t\t\tclassName=\"preferences__tabs-tab\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ tab.title }\n\t\t\t\t\t\t\t</Tabs.Tab>\n\t\t\t\t\t\t) ) }\n\t\t\t\t\t</Tabs.TabList>\n\t\t\t\t\t{ tabs.map( ( tab ) => (\n\t\t\t\t\t\t<Tabs.TabPanel\n\t\t\t\t\t\t\ttabId={ tab.name }\n\t\t\t\t\t\t\tkey={ tab.name }\n\t\t\t\t\t\t\tclassName=\"preferences__tabs-tabpanel\"\n\t\t\t\t\t\t\tfocusable={ false }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ sectionsContentMap[ tab.name ] || null }\n\t\t\t\t\t\t</Tabs.TabPanel>\n\t\t\t\t\t) ) }\n\t\t\t\t</Tabs>\n\t\t\t</div>\n\t\t);\n\t} else {\n\t\tmodalContent = (\n\t\t\t<NavigatorProvider\n\t\t\t\tinitialPath=\"/\"\n\t\t\t\tclassName=\"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\tlabel={ __( 'Back' ) }\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"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["useViewportMatch","Navigator","__experimentalItemGroup","ItemGroup","__experimentalItem","Item","__experimentalHStack","HStack","__experimentalText","Text","__experimentalTruncate","Truncate","FlexItem","Card","CardHeader","CardBody","privateApis","componentsPrivateApis","useMemo","useState","chevronLeft","chevronRight","Icon","isRTL","__","unlock","jsx","_jsx","jsxs","_jsxs","Tabs","PREFERENCES_MENU","PreferencesModalTabs","sections","isLargeViewport","activeMenu","setActiveMenu","tabs","sectionsContentMap","mappedTabs","length","reduce","accumulator","name","tabLabel","title","content","push","modalContent","className","children","defaultTabId","undefined","onSelect","orientation","TabList","map","tab","Tab","tabId","TabPanel","focusable","initialPath","Screen","path","isBorderless","size","Button","as","isAction","justify","icon","section","gap","BackButton","label"],"sources":["@wordpress/preferences/src/components/preferences-modal-tabs/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useViewportMatch } from '@wordpress/compose';\nimport {\n\tNavigator,\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\tCard,\n\tCardHeader,\n\tCardBody,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { useMemo, useState } from '@wordpress/element';\nimport { chevronLeft, chevronRight, Icon } from '@wordpress/icons';\nimport { isRTL, __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\n\nconst { Tabs } = unlock( componentsPrivateApis );\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 `Tabs` 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\tlet modalContent;\n\t// We render different components based on the viewport size.\n\tif ( isLargeViewport ) {\n\t\tmodalContent = (\n\t\t\t<div className=\"preferences__tabs\">\n\t\t\t\t<Tabs\n\t\t\t\t\tdefaultTabId={\n\t\t\t\t\t\tactiveMenu !== PREFERENCES_MENU ? activeMenu : undefined\n\t\t\t\t\t}\n\t\t\t\t\tonSelect={ setActiveMenu }\n\t\t\t\t\torientation=\"vertical\"\n\t\t\t\t>\n\t\t\t\t\t<Tabs.TabList className=\"preferences__tabs-tablist\">\n\t\t\t\t\t\t{ tabs.map( ( tab ) => (\n\t\t\t\t\t\t\t<Tabs.Tab\n\t\t\t\t\t\t\t\ttabId={ tab.name }\n\t\t\t\t\t\t\t\tkey={ tab.name }\n\t\t\t\t\t\t\t\tclassName=\"preferences__tabs-tab\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ tab.title }\n\t\t\t\t\t\t\t</Tabs.Tab>\n\t\t\t\t\t\t) ) }\n\t\t\t\t\t</Tabs.TabList>\n\t\t\t\t\t{ tabs.map( ( tab ) => (\n\t\t\t\t\t\t<Tabs.TabPanel\n\t\t\t\t\t\t\ttabId={ tab.name }\n\t\t\t\t\t\t\tkey={ tab.name }\n\t\t\t\t\t\t\tclassName=\"preferences__tabs-tabpanel\"\n\t\t\t\t\t\t\tfocusable={ false }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ sectionsContentMap[ tab.name ] || null }\n\t\t\t\t\t\t</Tabs.TabPanel>\n\t\t\t\t\t) ) }\n\t\t\t\t</Tabs>\n\t\t\t</div>\n\t\t);\n\t} else {\n\t\tmodalContent = (\n\t\t\t<Navigator initialPath=\"/\" className=\"preferences__provider\">\n\t\t\t\t<Navigator.Screen 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<Navigator.Button\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</Navigator.Button>\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</Navigator.Screen>\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<Navigator.Screen\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<Navigator.BackButton\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\tlabel={ __( 'Back' ) }\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</Navigator.Screen>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t</Navigator>\n\t\t);\n\t}\n\n\treturn modalContent;\n}\n"],"mappings":"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","ignoreList":[]}
package/build-style/style-rtl.css CHANGED
@@ -29,6 +29,9 @@
29
29
  /**
30
30
  * Fonts & basic variables.
31
31
  */
32
+ /**
33
+ * Typography
34
+ */
32
35
  /**
33
36
  * Grid System.
34
37
  * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
@@ -43,7 +46,10 @@
43
46
  * Dimensions.
44
47
  */
45
48
  /**
46
- * Editor widths.
49
+ * Mobile specific styles
50
+ */
51
+ /**
52
+ * Editor styles.
47
53
  */
48
54
  /**
49
55
  * Block & Editor UI.
@@ -67,6 +73,9 @@
67
73
  * Creates a fading overlay to signify that the content is longer
68
74
  * than the space allows.
69
75
  */
76
+ /**
77
+ * Typography
78
+ */
70
79
  /**
71
80
  * Breakpoint mixins
72
81
  */
package/build-style/style.css CHANGED
@@ -29,6 +29,9 @@
29
29
  /**
30
30
  * Fonts & basic variables.
31
31
  */
32
+ /**
33
+ * Typography
34
+ */
32
35
  /**
33
36
  * Grid System.
34
37
  * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
@@ -43,7 +46,10 @@
43
46
  * Dimensions.
44
47
  */
45
48
  /**
46
- * Editor widths.
49
+ * Mobile specific styles
50
+ */
51
+ /**
52
+ * Editor styles.
47
53
  */
48
54
  /**
49
55
  * Block & Editor UI.
@@ -67,6 +73,9 @@
67
73
  * Creates a fading overlay to signify that the content is longer
68
74
  * than the space allows.
69
75
  */
76
+ /**
77
+ * Typography
78
+ */
70
79
  /**
71
80
  * Breakpoint mixins
72
81
  */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wordpress/preferences",
3
- "version": "4.8.3",
3
+ "version": "4.9.0",
4
4
  "description": "Utilities for managing WordPress preferences.",
5
5
  "author": "The WordPress Contributors",
6
6
  "license": "GPL-2.0-or-later",
@@ -30,15 +30,15 @@
30
30
  "sideEffects": false,
31
31
  "dependencies": {
32
32
  "@babel/runtime": "^7.16.0",
33
- "@wordpress/a11y": "^4.8.2",
34
- "@wordpress/components": "^28.8.3",
35
- "@wordpress/compose": "^7.8.3",
36
- "@wordpress/data": "^10.8.3",
37
- "@wordpress/deprecated": "^4.8.2",
38
- "@wordpress/element": "^6.8.1",
39
- "@wordpress/i18n": "^5.8.2",
40
- "@wordpress/icons": "^10.8.2",
41
- "@wordpress/private-apis": "^1.8.1",
33
+ "@wordpress/a11y": "^4.9.0",
34
+ "@wordpress/components": "^28.9.0",
35
+ "@wordpress/compose": "^7.9.0",
36
+ "@wordpress/data": "^10.9.0",
37
+ "@wordpress/deprecated": "^4.9.0",
38
+ "@wordpress/element": "^6.9.0",
39
+ "@wordpress/i18n": "^5.9.0",
40
+ "@wordpress/icons": "^10.9.0",
41
+ "@wordpress/private-apis": "^1.9.0",
42
42
  "clsx": "^2.1.1"
43
43
  },
44
44
  "peerDependencies": {
@@ -48,5 +48,5 @@
48
48
  "publishConfig": {
49
49
  "access": "public"
50
50
  },
51
- "gitHead": "6187079697e13c3292eb098d6338523a6676c6e8"
51
+ "gitHead": "2e5495c635910cb34bfaca3c6258d2e989f66214"
52
52
  }
package/src/components/preferences-modal-tabs/index.js CHANGED
@@ -3,10 +3,7 @@
3
3
  */
4
4
  import { useViewportMatch } from '@wordpress/compose';
5
5
  import {
6
- __experimentalNavigatorProvider as NavigatorProvider,
7
- __experimentalNavigatorScreen as NavigatorScreen,
8
- __experimentalNavigatorButton as NavigatorButton,
9
- __experimentalNavigatorBackButton as NavigatorBackButton,
6
+ Navigator,
10
7
  __experimentalItemGroup as ItemGroup,
11
8
  __experimentalItem as Item,
12
9
  __experimentalHStack as HStack,
@@ -98,17 +95,14 @@ export default function PreferencesModalTabs( { sections } ) {
98
95
  );
99
96
  } else {
100
97
  modalContent = (
101
- <NavigatorProvider
102
- initialPath="/"
103
- className="preferences__provider"
104
- >
105
- <NavigatorScreen path="/">
98
+ <Navigator initialPath="/" className="preferences__provider">
99
+ <Navigator.Screen path="/">
106
100
  <Card isBorderless size="small">
107
101
  <CardBody>
108
102
  <ItemGroup>
109
103
  { tabs.map( ( tab ) => {
110
104
  return (
111
- <NavigatorButton
105
+ <Navigator.Button
112
106
  key={ tab.name }
113
107
  path={ `/${ tab.name }` }
114
108
  as={ Item }
@@ -130,17 +124,17 @@ export default function PreferencesModalTabs( { sections } ) {
130
124
  />
131
125
  </FlexItem>
132
126
  </HStack>
133
- </NavigatorButton>
127
+ </Navigator.Button>
134
128
  );
135
129
  } ) }
136
130
  </ItemGroup>
137
131
  </CardBody>
138
132
  </Card>
139
- </NavigatorScreen>
133
+ </Navigator.Screen>
140
134
  { sections.length &&
141
135
  sections.map( ( section ) => {
142
136
  return (
143
- <NavigatorScreen
137
+ <Navigator.Screen
144
138
  key={ `${ section.name }-menu` }
145
139
  path={ `/${ section.name }` }
146
140
  >
@@ -151,7 +145,7 @@ export default function PreferencesModalTabs( { sections } ) {
151
145
  size="small"
152
146
  gap="6"
153
147
  >
154
- <NavigatorBackButton
148
+ <Navigator.BackButton
155
149
  icon={
156
150
  isRTL()
157
151
  ? chevronRight
@@ -165,10 +159,10 @@ export default function PreferencesModalTabs( { sections } ) {
165
159
  </CardHeader>
166
160
  <CardBody>{ section.content }</CardBody>
167
161
  </Card>
168
- </NavigatorScreen>
162
+ </Navigator.Screen>
169
163
  );
170
164
  } ) }
171
- </NavigatorProvider>
165
+ </Navigator>
172
166
  );
173
167
  }
174
168