@wordpress/interface 6.9.0 → 8.0.0

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

@@ -1 +1 @@
-{"version":3,"names":["deprecated","normalizeComplementaryAreaScope","scope","includes","alternative","hint","version","normalizeComplementaryAreaName","name"],"sources":["@wordpress/interface/src/store/deprecated.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport deprecated from '@wordpress/deprecated';\n\nexport function normalizeComplementaryAreaScope( scope ) {\n\tif ( [ 'core/edit-post', 'core/edit-site' ].includes( scope ) ) {\n\t\tdeprecated( `${ scope } interface scope`, {\n\t\t\talternative: 'core interface scope',\n\t\t\thint: 'core/edit-post and core/edit-site are merging.',\n\t\t\tversion: '6.6',\n\t\t} );\n\t\treturn 'core';\n\t}\n\n\treturn scope;\n}\n\nexport function normalizeComplementaryAreaName( scope, name ) {\n\tif ( scope === 'core' && name === 'edit-site/template' ) {\n\t\tdeprecated( `edit-site/template sidebar`, {\n\t\t\talternative: 'edit-post/document',\n\t\t\tversion: '6.6',\n\t\t} );\n\t\treturn 'edit-post/document';\n\t}\n\n\tif ( scope === 'core' && name === 'edit-site/block-inspector' ) {\n\t\tdeprecated( `edit-site/block-inspector sidebar`, {\n\t\t\talternative: 'edit-post/block',\n\t\t\tversion: '6.6',\n\t\t} );\n\t\treturn 'edit-post/block';\n\t}\n\n\treturn name;\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,UAAU,MAAM,uBAAuB;AAE9C,OAAO,SAASC,+BAA+BA,CAAEC,KAAK,EAAG;EACxD,IAAK,CAAE,gBAAgB,EAAE,gBAAgB,CAAE,CAACC,QAAQ,CAAED,KAAM,CAAC,EAAG;IAC/DF,UAAU,CAAG,GAAGE,KAAO,kBAAiB,EAAE;MACzCE,WAAW,EAAE,sBAAsB;MACnCC,IAAI,EAAE,gDAAgD;MACtDC,OAAO,EAAE;IACV,CAAE,CAAC;IACH,OAAO,MAAM;EACd;EAEA,OAAOJ,KAAK;AACb;AAEA,OAAO,SAASK,8BAA8BA,CAAEL,KAAK,EAAEM,IAAI,EAAG;EAC7D,IAAKN,KAAK,KAAK,MAAM,IAAIM,IAAI,KAAK,oBAAoB,EAAG;IACxDR,UAAU,CAAG,4BAA2B,EAAE;MACzCI,WAAW,EAAE,oBAAoB;MACjCE,OAAO,EAAE;IACV,CAAE,CAAC;IACH,OAAO,oBAAoB;EAC5B;EAEA,IAAKJ,KAAK,KAAK,MAAM,IAAIM,IAAI,KAAK,2BAA2B,EAAG;IAC/DR,UAAU,CAAG,mCAAkC,EAAE;MAChDI,WAAW,EAAE,iBAAiB;MAC9BE,OAAO,EAAE;IACV,CAAE,CAAC;IACH,OAAO,iBAAiB;EACzB;EAEA,OAAOE,IAAI;AACZ","ignoreList":[]}
+{"version":3,"names":["deprecated","normalizeComplementaryAreaScope","scope","includes","alternative","hint","version","normalizeComplementaryAreaName","name"],"sources":["@wordpress/interface/src/store/deprecated.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport deprecated from '@wordpress/deprecated';\n\nexport function normalizeComplementaryAreaScope( scope ) {\n\tif ( [ 'core/edit-post', 'core/edit-site' ].includes( scope ) ) {\n\t\tdeprecated( `${ scope } interface scope`, {\n\t\t\talternative: 'core interface scope',\n\t\t\thint: 'core/edit-post and core/edit-site are merging.',\n\t\t\tversion: '6.6',\n\t\t} );\n\t\treturn 'core';\n\t}\n\n\treturn scope;\n}\n\nexport function normalizeComplementaryAreaName( scope, name ) {\n\tif ( scope === 'core' && name === 'edit-site/template' ) {\n\t\tdeprecated( `edit-site/template sidebar`, {\n\t\t\talternative: 'edit-post/document',\n\t\t\tversion: '6.6',\n\t\t} );\n\t\treturn 'edit-post/document';\n\t}\n\n\tif ( scope === 'core' && name === 'edit-site/block-inspector' ) {\n\t\tdeprecated( `edit-site/block-inspector sidebar`, {\n\t\t\talternative: 'edit-post/block',\n\t\t\tversion: '6.6',\n\t\t} );\n\t\treturn 'edit-post/block';\n\t}\n\n\treturn name;\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,UAAU,MAAM,uBAAuB;AAE9C,OAAO,SAASC,+BAA+BA,CAAEC,KAAK,EAAG;EACxD,IAAK,CAAE,gBAAgB,EAAE,gBAAgB,CAAE,CAACC,QAAQ,CAAED,KAAM,CAAC,EAAG;IAC/DF,UAAU,CAAE,GAAIE,KAAK,kBAAmB,EAAE;MACzCE,WAAW,EAAE,sBAAsB;MACnCC,IAAI,EAAE,gDAAgD;MACtDC,OAAO,EAAE;IACV,CAAE,CAAC;IACH,OAAO,MAAM;EACd;EAEA,OAAOJ,KAAK;AACb;AAEA,OAAO,SAASK,8BAA8BA,CAAEL,KAAK,EAAEM,IAAI,EAAG;EAC7D,IAAKN,KAAK,KAAK,MAAM,IAAIM,IAAI,KAAK,oBAAoB,EAAG;IACxDR,UAAU,CAAE,4BAA4B,EAAE;MACzCI,WAAW,EAAE,oBAAoB;MACjCE,OAAO,EAAE;IACV,CAAE,CAAC;IACH,OAAO,oBAAoB;EAC5B;EAEA,IAAKJ,KAAK,KAAK,MAAM,IAAIM,IAAI,KAAK,2BAA2B,EAAG;IAC/DR,UAAU,CAAE,mCAAmC,EAAE;MAChDI,WAAW,EAAE,iBAAiB;MAC9BE,OAAO,EAAE;IACV,CAAE,CAAC;IACH,OAAO,iBAAiB;EACzB;EAEA,OAAOE,IAAI;AACZ","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"names":["createRegistrySelector","deprecated","store","preferencesStore","normalizeComplementaryAreaScope","normalizeComplementaryAreaName","getActiveComplementaryArea","select","state","scope","isComplementaryAreaVisible","get","undefined","complementaryAreas","isComplementaryAreaLoading","isVisible","identifier","isItemPinned","item","_pinnedItems$item","pinnedItems","isFeatureActive","featureName","since","alternative","isModalActive","modalName","activeModal"],"sources":["@wordpress/interface/src/store/selectors.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createRegistrySelector } from '@wordpress/data';\nimport deprecated from '@wordpress/deprecated';\nimport { store as preferencesStore } from '@wordpress/preferences';\n\n/**\n * Internal dependencies\n */\nimport {\n\tnormalizeComplementaryAreaScope,\n\tnormalizeComplementaryAreaName,\n} from './deprecated';\n\n/**\n * Returns the complementary area that is active in a given scope.\n *\n * @param {Object} state Global application state.\n * @param {string} scope Item scope.\n *\n * @return {string | null | undefined} The complementary area that is active in the given scope.\n */\nexport const getActiveComplementaryArea = createRegistrySelector(\n\t( select ) => ( state, scope ) => {\n\t\tscope = normalizeComplementaryAreaScope( scope );\n\t\tconst isComplementaryAreaVisible = select( preferencesStore ).get(\n\t\t\tscope,\n\t\t\t'isComplementaryAreaVisible'\n\t\t);\n\n\t\t// Return `undefined` to indicate that the user has never toggled\n\t\t// visibility, this is the vanilla default. Other code relies on this\n\t\t// nuance in the return value.\n\t\tif ( isComplementaryAreaVisible === undefined ) {\n\t\t\treturn undefined;\n\t\t}\n\n\t\t// Return `null` to indicate the user hid the complementary area.\n\t\tif ( isComplementaryAreaVisible === false ) {\n\t\t\treturn null;\n\t\t}\n\n\t\treturn state?.complementaryAreas?.[ scope ];\n\t}\n);\n\nexport const isComplementaryAreaLoading = createRegistrySelector(\n\t( select ) => ( state, scope ) => {\n\t\tscope = normalizeComplementaryAreaScope( scope );\n\t\tconst isVisible = select( preferencesStore ).get(\n\t\t\tscope,\n\t\t\t'isComplementaryAreaVisible'\n\t\t);\n\t\tconst identifier = state?.complementaryAreas?.[ scope ];\n\n\t\treturn isVisible && identifier === undefined;\n\t}\n);\n\n/**\n * Returns a boolean indicating if an item is pinned or not.\n *\n * @param {Object} state Global application state.\n * @param {string} scope Scope.\n * @param {string} item  Item to check.\n *\n * @return {boolean} True if the item is pinned and false otherwise.\n */\nexport const isItemPinned = createRegistrySelector(\n\t( select ) => ( state, scope, item ) => {\n\t\tscope = normalizeComplementaryAreaScope( scope );\n\t\titem = normalizeComplementaryAreaName( scope, item );\n\t\tconst pinnedItems = select( preferencesStore ).get(\n\t\t\tscope,\n\t\t\t'pinnedItems'\n\t\t);\n\t\treturn pinnedItems?.[ item ] ?? true;\n\t}\n);\n\n/**\n * Returns a boolean indicating whether a feature is active for a particular\n * scope.\n *\n * @param {Object} state       The store state.\n * @param {string} scope       The scope of the feature (e.g. core/edit-post).\n * @param {string} featureName The name of the feature.\n *\n * @return {boolean} Is the feature enabled?\n */\nexport const isFeatureActive = createRegistrySelector(\n\t( select ) => ( state, scope, featureName ) => {\n\t\tdeprecated(\n\t\t\t`select( 'core/interface' ).isFeatureActive( scope, featureName )`,\n\t\t\t{\n\t\t\t\tsince: '6.0',\n\t\t\t\talternative: `select( 'core/preferences' ).get( scope, featureName )`,\n\t\t\t}\n\t\t);\n\n\t\treturn !! select( preferencesStore ).get( scope, featureName );\n\t}\n);\n\n/**\n * Returns true if a modal is active, or false otherwise.\n *\n * @param {Object} state     Global application state.\n * @param {string} modalName A string that uniquely identifies the modal.\n *\n * @return {boolean} Whether the modal is active.\n */\nexport function isModalActive( state, modalName ) {\n\treturn state.activeModal === modalName;\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,sBAAsB,QAAQ,iBAAiB;AACxD,OAAOC,UAAU,MAAM,uBAAuB;AAC9C,SAASC,KAAK,IAAIC,gBAAgB,QAAQ,wBAAwB;;AAElE;AACA;AACA;AACA,SACCC,+BAA+B,EAC/BC,8BAA8B,QACxB,cAAc;;AAErB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,0BAA0B,GAAGN,sBAAsB,CAC7DO,MAAM,IAAM,CAAEC,KAAK,EAAEC,KAAK,KAAM;EACjCA,KAAK,GAAGL,+BAA+B,CAAEK,KAAM,CAAC;EAChD,MAAMC,0BAA0B,GAAGH,MAAM,CAAEJ,gBAAiB,CAAC,CAACQ,GAAG,CAChEF,KAAK,EACL,4BACD,CAAC;;EAED;EACA;EACA;EACA,IAAKC,0BAA0B,KAAKE,SAAS,EAAG;IAC/C,OAAOA,SAAS;EACjB;;EAEA;EACA,IAAKF,0BAA0B,KAAK,KAAK,EAAG;IAC3C,OAAO,IAAI;EACZ;EAEA,OAAOF,KAAK,EAAEK,kBAAkB,GAAIJ,KAAK,CAAE;AAC5C,CACD,CAAC;AAED,OAAO,MAAMK,0BAA0B,GAAGd,sBAAsB,CAC7DO,MAAM,IAAM,CAAEC,KAAK,EAAEC,KAAK,KAAM;EACjCA,KAAK,GAAGL,+BAA+B,CAAEK,KAAM,CAAC;EAChD,MAAMM,SAAS,GAAGR,MAAM,CAAEJ,gBAAiB,CAAC,CAACQ,GAAG,CAC/CF,KAAK,EACL,4BACD,CAAC;EACD,MAAMO,UAAU,GAAGR,KAAK,EAAEK,kBAAkB,GAAIJ,KAAK,CAAE;EAEvD,OAAOM,SAAS,IAAIC,UAAU,KAAKJ,SAAS;AAC7C,CACD,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMK,YAAY,GAAGjB,sBAAsB,CAC/CO,MAAM,IAAM,CAAEC,KAAK,EAAEC,KAAK,EAAES,IAAI,KAAM;EAAA,IAAAC,iBAAA;EACvCV,KAAK,GAAGL,+BAA+B,CAAEK,KAAM,CAAC;EAChDS,IAAI,GAAGb,8BAA8B,CAAEI,KAAK,EAAES,IAAK,CAAC;EACpD,MAAME,WAAW,GAAGb,MAAM,CAAEJ,gBAAiB,CAAC,CAACQ,GAAG,CACjDF,KAAK,EACL,aACD,CAAC;EACD,QAAAU,iBAAA,GAAOC,WAAW,GAAIF,IAAI,CAAE,cAAAC,iBAAA,cAAAA,iBAAA,GAAI,IAAI;AACrC,CACD,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAME,eAAe,GAAGrB,sBAAsB,CAClDO,MAAM,IAAM,CAAEC,KAAK,EAAEC,KAAK,EAAEa,WAAW,KAAM;EAC9CrB,UAAU,CACR,kEAAiE,EAClE;IACCsB,KAAK,EAAE,KAAK;IACZC,WAAW,EAAG;EACf,CACD,CAAC;EAED,OAAO,CAAC,CAAEjB,MAAM,CAAEJ,gBAAiB,CAAC,CAACQ,GAAG,CAAEF,KAAK,EAAEa,WAAY,CAAC;AAC/D,CACD,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASG,aAAaA,CAAEjB,KAAK,EAAEkB,SAAS,EAAG;EACjD,OAAOlB,KAAK,CAACmB,WAAW,KAAKD,SAAS;AACvC","ignoreList":[]}
+{"version":3,"names":["createRegistrySelector","deprecated","store","preferencesStore","normalizeComplementaryAreaScope","normalizeComplementaryAreaName","getActiveComplementaryArea","select","state","scope","isComplementaryAreaVisible","get","undefined","complementaryAreas","isComplementaryAreaLoading","isVisible","identifier","isItemPinned","item","_pinnedItems$item","pinnedItems","isFeatureActive","featureName","since","alternative","isModalActive","modalName","activeModal"],"sources":["@wordpress/interface/src/store/selectors.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createRegistrySelector } from '@wordpress/data';\nimport deprecated from '@wordpress/deprecated';\nimport { store as preferencesStore } from '@wordpress/preferences';\n\n/**\n * Internal dependencies\n */\nimport {\n\tnormalizeComplementaryAreaScope,\n\tnormalizeComplementaryAreaName,\n} from './deprecated';\n\n/**\n * Returns the complementary area that is active in a given scope.\n *\n * @param {Object} state Global application state.\n * @param {string} scope Item scope.\n *\n * @return {string | null | undefined} The complementary area that is active in the given scope.\n */\nexport const getActiveComplementaryArea = createRegistrySelector(\n\t( select ) => ( state, scope ) => {\n\t\tscope = normalizeComplementaryAreaScope( scope );\n\t\tconst isComplementaryAreaVisible = select( preferencesStore ).get(\n\t\t\tscope,\n\t\t\t'isComplementaryAreaVisible'\n\t\t);\n\n\t\t// Return `undefined` to indicate that the user has never toggled\n\t\t// visibility, this is the vanilla default. Other code relies on this\n\t\t// nuance in the return value.\n\t\tif ( isComplementaryAreaVisible === undefined ) {\n\t\t\treturn undefined;\n\t\t}\n\n\t\t// Return `null` to indicate the user hid the complementary area.\n\t\tif ( isComplementaryAreaVisible === false ) {\n\t\t\treturn null;\n\t\t}\n\n\t\treturn state?.complementaryAreas?.[ scope ];\n\t}\n);\n\nexport const isComplementaryAreaLoading = createRegistrySelector(\n\t( select ) => ( state, scope ) => {\n\t\tscope = normalizeComplementaryAreaScope( scope );\n\t\tconst isVisible = select( preferencesStore ).get(\n\t\t\tscope,\n\t\t\t'isComplementaryAreaVisible'\n\t\t);\n\t\tconst identifier = state?.complementaryAreas?.[ scope ];\n\n\t\treturn isVisible && identifier === undefined;\n\t}\n);\n\n/**\n * Returns a boolean indicating if an item is pinned or not.\n *\n * @param {Object} state Global application state.\n * @param {string} scope Scope.\n * @param {string} item  Item to check.\n *\n * @return {boolean} True if the item is pinned and false otherwise.\n */\nexport const isItemPinned = createRegistrySelector(\n\t( select ) => ( state, scope, item ) => {\n\t\tscope = normalizeComplementaryAreaScope( scope );\n\t\titem = normalizeComplementaryAreaName( scope, item );\n\t\tconst pinnedItems = select( preferencesStore ).get(\n\t\t\tscope,\n\t\t\t'pinnedItems'\n\t\t);\n\t\treturn pinnedItems?.[ item ] ?? true;\n\t}\n);\n\n/**\n * Returns a boolean indicating whether a feature is active for a particular\n * scope.\n *\n * @param {Object} state       The store state.\n * @param {string} scope       The scope of the feature (e.g. core/edit-post).\n * @param {string} featureName The name of the feature.\n *\n * @return {boolean} Is the feature enabled?\n */\nexport const isFeatureActive = createRegistrySelector(\n\t( select ) => ( state, scope, featureName ) => {\n\t\tdeprecated(\n\t\t\t`select( 'core/interface' ).isFeatureActive( scope, featureName )`,\n\t\t\t{\n\t\t\t\tsince: '6.0',\n\t\t\t\talternative: `select( 'core/preferences' ).get( scope, featureName )`,\n\t\t\t}\n\t\t);\n\n\t\treturn !! select( preferencesStore ).get( scope, featureName );\n\t}\n);\n\n/**\n * Returns true if a modal is active, or false otherwise.\n *\n * @param {Object} state     Global application state.\n * @param {string} modalName A string that uniquely identifies the modal.\n *\n * @return {boolean} Whether the modal is active.\n */\nexport function isModalActive( state, modalName ) {\n\treturn state.activeModal === modalName;\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,sBAAsB,QAAQ,iBAAiB;AACxD,OAAOC,UAAU,MAAM,uBAAuB;AAC9C,SAASC,KAAK,IAAIC,gBAAgB,QAAQ,wBAAwB;;AAElE;AACA;AACA;AACA,SACCC,+BAA+B,EAC/BC,8BAA8B,QACxB,cAAc;;AAErB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,0BAA0B,GAAGN,sBAAsB,CAC7DO,MAAM,IAAM,CAAEC,KAAK,EAAEC,KAAK,KAAM;EACjCA,KAAK,GAAGL,+BAA+B,CAAEK,KAAM,CAAC;EAChD,MAAMC,0BAA0B,GAAGH,MAAM,CAAEJ,gBAAiB,CAAC,CAACQ,GAAG,CAChEF,KAAK,EACL,4BACD,CAAC;;EAED;EACA;EACA;EACA,IAAKC,0BAA0B,KAAKE,SAAS,EAAG;IAC/C,OAAOA,SAAS;EACjB;;EAEA;EACA,IAAKF,0BAA0B,KAAK,KAAK,EAAG;IAC3C,OAAO,IAAI;EACZ;EAEA,OAAOF,KAAK,EAAEK,kBAAkB,GAAIJ,KAAK,CAAE;AAC5C,CACD,CAAC;AAED,OAAO,MAAMK,0BAA0B,GAAGd,sBAAsB,CAC7DO,MAAM,IAAM,CAAEC,KAAK,EAAEC,KAAK,KAAM;EACjCA,KAAK,GAAGL,+BAA+B,CAAEK,KAAM,CAAC;EAChD,MAAMM,SAAS,GAAGR,MAAM,CAAEJ,gBAAiB,CAAC,CAACQ,GAAG,CAC/CF,KAAK,EACL,4BACD,CAAC;EACD,MAAMO,UAAU,GAAGR,KAAK,EAAEK,kBAAkB,GAAIJ,KAAK,CAAE;EAEvD,OAAOM,SAAS,IAAIC,UAAU,KAAKJ,SAAS;AAC7C,CACD,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMK,YAAY,GAAGjB,sBAAsB,CAC/CO,MAAM,IAAM,CAAEC,KAAK,EAAEC,KAAK,EAAES,IAAI,KAAM;EAAA,IAAAC,iBAAA;EACvCV,KAAK,GAAGL,+BAA+B,CAAEK,KAAM,CAAC;EAChDS,IAAI,GAAGb,8BAA8B,CAAEI,KAAK,EAAES,IAAK,CAAC;EACpD,MAAME,WAAW,GAAGb,MAAM,CAAEJ,gBAAiB,CAAC,CAACQ,GAAG,CACjDF,KAAK,EACL,aACD,CAAC;EACD,QAAAU,iBAAA,GAAOC,WAAW,GAAIF,IAAI,CAAE,cAAAC,iBAAA,cAAAA,iBAAA,GAAI,IAAI;AACrC,CACD,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAME,eAAe,GAAGrB,sBAAsB,CAClDO,MAAM,IAAM,CAAEC,KAAK,EAAEC,KAAK,EAAEa,WAAW,KAAM;EAC9CrB,UAAU,CACT,kEAAkE,EAClE;IACCsB,KAAK,EAAE,KAAK;IACZC,WAAW,EAAE;EACd,CACD,CAAC;EAED,OAAO,CAAC,CAAEjB,MAAM,CAAEJ,gBAAiB,CAAC,CAACQ,GAAG,CAAEF,KAAK,EAAEa,WAAY,CAAC;AAC/D,CACD,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASG,aAAaA,CAAEjB,KAAK,EAAEkB,SAAS,EAAG;EACjD,OAAOlB,KAAK,CAACmB,WAAW,KAAKD,SAAS;AACvC","ignoreList":[]}

package/build-style/style-rtl.css

@@ -116,23 +116,6 @@
   }
 }
 
-.components-panel__header.interface-complementary-area-header__small {
-  background: #fff;
-  padding-left: 4px;
-}
-.components-panel__header.interface-complementary-area-header__small .interface-complementary-area-header__small-title {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  width: 100%;
-  margin: 0;
-}
-@media (min-width: 782px) {
-  .components-panel__header.interface-complementary-area-header__small {
-    display: none;
-  }
-}
-
 .interface-complementary-area-header {
   background: #fff;
   padding-left: 12px;
@@ -141,18 +124,6 @@
 .interface-complementary-area-header .interface-complementary-area-header__title {
   margin: 0;
 }
-.interface-complementary-area-header .components-button.has-icon {
-  display: none;
-  margin-right: auto;
-}
-.interface-complementary-area-header .components-button.has-icon ~ .components-button {
-  margin-right: 0;
-}
-@media (min-width: 782px) {
-  .interface-complementary-area-header .components-button.has-icon {
-    display: flex;
-  }
-}
 
 .interface-complementary-area {
   background: #fff;
@@ -181,12 +152,7 @@
   z-index: 1;
 }
 .interface-complementary-area .components-panel__header.editor-sidebar__panel-tabs {
-  top: 48px;
-}
-@media (min-width: 782px) {
-  .interface-complementary-area .components-panel__header.editor-sidebar__panel-tabs {
-    top: 0;
-  }
+  top: 0;
 }
 .interface-complementary-area p:not(.components-base-control__help, .components-form-token-field__help) {
   margin-top: 0;

package/build-style/style.css

@@ -116,23 +116,6 @@
   }
 }
 
-.components-panel__header.interface-complementary-area-header__small {
-  background: #fff;
-  padding-right: 4px;
-}
-.components-panel__header.interface-complementary-area-header__small .interface-complementary-area-header__small-title {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  width: 100%;
-  margin: 0;
-}
-@media (min-width: 782px) {
-  .components-panel__header.interface-complementary-area-header__small {
-    display: none;
-  }
-}
-
 .interface-complementary-area-header {
   background: #fff;
   padding-right: 12px;
@@ -141,18 +124,6 @@
 .interface-complementary-area-header .interface-complementary-area-header__title {
   margin: 0;
 }
-.interface-complementary-area-header .components-button.has-icon {
-  display: none;
-  margin-left: auto;
-}
-.interface-complementary-area-header .components-button.has-icon ~ .components-button {
-  margin-left: 0;
-}
-@media (min-width: 782px) {
-  .interface-complementary-area-header .components-button.has-icon {
-    display: flex;
-  }
-}
 
 .interface-complementary-area {
   background: #fff;
@@ -181,12 +152,7 @@
   z-index: 1;
 }
 .interface-complementary-area .components-panel__header.editor-sidebar__panel-tabs {
-  top: 48px;
-}
-@media (min-width: 782px) {
-  .interface-complementary-area .components-panel__header.editor-sidebar__panel-tabs {
-    top: 0;
-  }
+  top: 0;
 }
 .interface-complementary-area p:not(.components-base-control__help, .components-form-token-field__help) {
   margin-top: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/interface",
-	"version": "6.9.0",
+	"version": "8.0.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,19 +32,18 @@
 		"{src,build,build-module}/{index.js,store/index.js}"
 	],
 	"dependencies": {
-		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^4.9.0",
-		"@wordpress/components": "^28.9.0",
-		"@wordpress/compose": "^7.9.0",
-		"@wordpress/data": "^10.9.0",
-		"@wordpress/deprecated": "^4.9.0",
-		"@wordpress/element": "^6.9.0",
-		"@wordpress/i18n": "^5.9.0",
-		"@wordpress/icons": "^10.9.0",
-		"@wordpress/plugins": "^7.9.0",
-		"@wordpress/preferences": "^4.9.0",
-		"@wordpress/private-apis": "^1.9.0",
-		"@wordpress/viewport": "^6.9.0",
+		"@babel/runtime": "7.25.7",
+		"@wordpress/a11y": "*",
+		"@wordpress/components": "*",
+		"@wordpress/compose": "*",
+		"@wordpress/data": "*",
+		"@wordpress/deprecated": "*",
+		"@wordpress/element": "*",
+		"@wordpress/i18n": "*",
+		"@wordpress/icons": "*",
+		"@wordpress/plugins": "*",
+		"@wordpress/preferences": "*",
+		"@wordpress/viewport": "*",
 		"clsx": "^2.1.1"
 	},
 	"peerDependencies": {
@@ -54,5 +53,6 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "2e5495c635910cb34bfaca3c6258d2e989f66214"
+	"wpScript": true,
+	"gitHead": "dcf4613b33b0eda14e203ac30f700ed0db70347f"
 }

package/src/components/complementary-area/README.md

@@ -84,14 +84,6 @@ The scope of the complementary area e.g: "core", "myplugin/custom-screen-a",
 -   Type: `String`
 -   Required: Yes
 
-### smallScreenTitle
-
-In small screens, the complementary area may take up the entire screen.
-`smallScreenTitle` allows displaying a title above the complementary area, so the user is more aware of what the area refers to.
-
--   Type: `String`
--   Required: No
-
 ### title
 
 Human friendly title of the complementary area.

package/src/components/complementary-area/index.js

@@ -25,6 +25,7 @@ import {
 	useViewportMatch,
 	usePrevious,
 } from '@wordpress/compose';
+import { usePluginContext } from '@wordpress/plugins';
 
 /**
  * Internal dependencies
@@ -32,7 +33,6 @@ import {
 import ComplementaryAreaHeader from '../complementary-area-header';
 import ComplementaryAreaMoreMenuItem from '../complementary-area-more-menu-item';
 import ComplementaryAreaToggle from '../complementary-area-toggle';
-import withComplementaryAreaContext from '../complementary-area-context';
 import PinnedItems from '../pinned-items';
 import { store as interfaceStore } from '../../store';
 
@@ -171,19 +171,22 @@ function ComplementaryArea( {
 	children,
 	className,
 	closeLabel = __( 'Close plugin' ),
-	identifier,
+	identifier: identifierProp,
 	header,
 	headerClassName,
-	icon,
+	icon: iconProp,
 	isPinnable = true,
 	panelClassName,
 	scope,
 	name,
-	smallScreenTitle,
 	title,
 	toggleShortcut,
 	isActiveByDefault,
 } ) {
+	const context = usePluginContext();
+	const icon = iconProp || context.icon;
+	const identifier = identifierProp || `${ context.name }/${ name }`;
+
 	// This state is used to delay the rendering of the Fill
 	// until the initial effect runs.
 	// This prevents the animation from running on mount if
@@ -220,6 +223,9 @@ function ComplementaryArea( {
 		},
 		[ identifier, scope ]
 	);
+
+	const isMobileViewport = useViewportMatch( 'medium', '<' );
+
 	useAdjustComplementaryListener(
 		scope,
 		identifier,
@@ -300,7 +306,6 @@ function ComplementaryArea( {
 					className={ headerClassName }
 					closeLabel={ closeLabel }
 					onClose={ () => disableComplementaryArea( scope ) }
-					smallScreenTitle={ smallScreenTitle }
 					toggleButtonProps={ {
 						label: closeLabel,
 						size: 'small',
@@ -314,7 +319,7 @@ function ComplementaryArea( {
 							<h2 className="interface-complementary-area-header__title">
 								{ title }
 							</h2>
-							{ isPinnable && (
+							{ isPinnable && ! isMobileViewport && (
 								<Button
 									className="interface-complementary-area__pin-unpin-item"
 									icon={ isPinned ? starFilled : starEmpty }
@@ -343,9 +348,6 @@ function ComplementaryArea( {
 	);
 }
 
-const ComplementaryAreaWrapped =
-	withComplementaryAreaContext( ComplementaryArea );
-
-ComplementaryAreaWrapped.Slot = ComplementaryAreaSlot;
+ComplementaryArea.Slot = ComplementaryAreaSlot;
 
-export default ComplementaryAreaWrapped;
+export default ComplementaryArea;

package/src/components/complementary-area/style.scss

@@ -25,11 +25,7 @@
 		z-index: z-index(".interface-complementary-area .components-panel__header");
 
 		&.editor-sidebar__panel-tabs {
-			top: $panel-header-height;
-
-			@include break-medium() {
-				top: 0;
-			}
+			top: 0;
 		}
 	}
 

package/src/components/complementary-area-header/index.js

@@ -14,7 +14,6 @@ import { closeSmall } from '@wordpress/icons';
 import ComplementaryAreaToggle from '../complementary-area-toggle';
 
 const ComplementaryAreaHeader = ( {
-	smallScreenTitle,
 	children,
 	className,
 	toggleButtonProps,
@@ -23,27 +22,17 @@ const ComplementaryAreaHeader = ( {
 		<ComplementaryAreaToggle icon={ closeSmall } { ...toggleButtonProps } />
 	);
 	return (
-		<>
-			<div className="components-panel__header interface-complementary-area-header__small">
-				{ smallScreenTitle && (
-					<h2 className="interface-complementary-area-header__small-title">
-						{ smallScreenTitle }
-					</h2>
-				) }
-				{ toggleButton }
-			</div>
-			<div
-				className={ clsx(
-					'components-panel__header',
-					'interface-complementary-area-header',
-					className
-				) }
-				tabIndex={ -1 }
-			>
-				{ children }
-				{ toggleButton }
-			</div>
-		</>
+		<div
+			className={ clsx(
+				'components-panel__header',
+				'interface-complementary-area-header',
+				className
+			) }
+			tabIndex={ -1 }
+		>
+			{ children }
+			{ toggleButton }
+		</div>
 	);
 };
 

package/src/components/complementary-area-header/style.scss

@@ -1,20 +1,3 @@
-.components-panel__header.interface-complementary-area-header__small {
-	background: $white;
-	padding-right: $grid-unit-05;
-
-	.interface-complementary-area-header__small-title {
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-		width: 100%;
-		margin: 0;
-	}
-
-	@include break-medium() {
-		display: none;
-	}
-}
-
 .interface-complementary-area-header {
 	background: $white;
 	padding-right: $grid-unit-15; // Reduced padding to account for close buttons.
@@ -23,17 +6,4 @@
 	.interface-complementary-area-header__title {
 		margin: 0;
 	}
-
-	.components-button.has-icon {
-		display: none;
-		margin-left: auto;
-
-		~ .components-button {
-			margin-left: 0;
-		}
-
-		@include break-medium() {
-			display: flex;
-		}
-	}
 }

package/src/components/complementary-area-toggle/index.js

@@ -3,12 +3,12 @@
  */
 import { Button } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
+import { usePluginContext } from '@wordpress/plugins';
 
 /**
  * Internal dependencies
  */
 import { store as interfaceStore } from '../../store';
-import complementaryAreaContext from '../complementary-area-context';
 
 /**
  * Whether the role supports checked state.
@@ -29,17 +29,20 @@ function roleSupportsCheckedState( role ) {
 	].includes( role );
 }
 
-function ComplementaryAreaToggle( {
+export default function ComplementaryAreaToggle( {
 	as = Button,
 	scope,
-	identifier,
-	icon,
+	identifier: identifierProp,
+	icon: iconProp,
 	selectedIcon,
 	name,
 	shortcut,
 	...props
 } ) {
 	const ComponentToUse = as;
+	const context = usePluginContext();
+	const icon = iconProp || context.icon;
+	const identifier = identifierProp || `${ context.name }/${ name }`;
 	const isSelected = useSelect(
 		( select ) =>
 			select( interfaceStore ).getActiveComplementaryArea( scope ) ===
@@ -70,5 +73,3 @@ function ComplementaryAreaToggle( {
 		/>
 	);
 }
-
-export default complementaryAreaContext( ComplementaryAreaToggle );

package/src/components/interface-skeleton/index.js

@@ -8,13 +8,11 @@ import clsx from 'clsx';
  */
 import { forwardRef, useEffect } from '@wordpress/element';
 import {
-	__unstableUseNavigateRegions as useNavigateRegions,
 	__unstableMotion as motion,
 	__unstableAnimatePresence as AnimatePresence,
 } from '@wordpress/components';
 import { __, _x } from '@wordpress/i18n';
 import {
-	useMergeRefs,
 	useReducedMotion,
 	useViewportMatch,
 	useResizeObserver,
@@ -85,10 +83,6 @@ function InterfaceSkeleton(
 		actions,
 		labels,
 		className,
-		enableRegionNavigation = true,
-		// Todo: does this need to be a prop.
-		// Can we use a dependency to keyboard-shortcuts directly?
-		shortcuts,
 	},
 	ref
 ) {
@@ -101,7 +95,6 @@ function InterfaceSkeleton(
 		duration: disableMotion ? 0 : ANIMATION_DURATION,
 		ease: [ 0.6, 0, 0.4, 1 ],
 	};
-	const navigateRegionsProps = useNavigateRegions( shortcuts );
 	useHTMLClass( 'interface-interface-skeleton__html-container' );
 
 	const defaultLabels = {
@@ -112,7 +105,7 @@ function InterfaceSkeleton(
 		/* translators: accessibility text for the secondary sidebar landmark region. */
 		secondarySidebar: __( 'Block Library' ),
 		/* translators: accessibility text for the settings landmark region. */
-		sidebar: __( 'Settings' ),
+		sidebar: _x( 'Settings', 'settings landmark area' ),
 		/* translators: accessibility text for the publish landmark region. */
 		actions: __( 'Publish' ),
 		/* translators: accessibility text for the footer landmark region. */
@@ -123,15 +116,10 @@ function InterfaceSkeleton(
 
 	return (
 		<div
-			{ ...( enableRegionNavigation ? navigateRegionsProps : {} ) }
-			ref={ useMergeRefs( [
-				ref,
-				enableRegionNavigation ? navigateRegionsProps.ref : undefined,
-			] ) }
+			ref={ ref }
 			className={ clsx(
 				className,
 				'interface-interface-skeleton',
-				navigateRegionsProps.className,
 				!! footer && 'has-footer'
 			) }
 		>

package/src/components/navigable-region/index.js

@@ -1,24 +1,29 @@
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+
 /**
  * External dependencies
  */
 import clsx from 'clsx';
 
-export default function NavigableRegion( {
-	children,
-	className,
-	ariaLabel,
-	as: Tag = 'div',
-	...props
-} ) {
-	return (
-		<Tag
-			className={ clsx( 'interface-navigable-region', className ) }
-			aria-label={ ariaLabel }
-			role="region"
-			tabIndex="-1"
-			{ ...props }
-		>
-			{ children }
-		</Tag>
-	);
-}
+const NavigableRegion = forwardRef(
+	( { children, className, ariaLabel, as: Tag = 'div', ...props }, ref ) => {
+		return (
+			<Tag
+				ref={ ref }
+				className={ clsx( 'interface-navigable-region', className ) }
+				aria-label={ ariaLabel }
+				role="region"
+				tabIndex="-1"
+				{ ...props }
+			>
+				{ children }
+			</Tag>
+		);
+	}
+);
+
+NavigableRegion.displayName = 'NavigableRegion';
+export default NavigableRegion;

package/build/components/complementary-area-context/index.js

@@ -1,17 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _plugins = require("@wordpress/plugins");
-/**
- * WordPress dependencies
- */
-var _default = exports.default = (0, _plugins.withPluginContext)((context, ownProps) => {
-  return {
-    icon: ownProps.icon || context.icon,
-    identifier: ownProps.identifier || `${context.name}/${ownProps.name}`
-  };
-});
-//# sourceMappingURL=index.js.map

package/build/components/complementary-area-context/index.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_plugins","require","_default","exports","default","withPluginContext","context","ownProps","icon","identifier","name"],"sources":["@wordpress/interface/src/components/complementary-area-context/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { withPluginContext } from '@wordpress/plugins';\n\nexport default withPluginContext( ( context, ownProps ) => {\n\treturn {\n\t\ticon: ownProps.icon || context.icon,\n\t\tidentifier:\n\t\t\townProps.identifier || `${ context.name }/${ ownProps.name }`,\n\t};\n} );\n"],"mappings":";;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAHA;AACA;AACA;AAFA,IAAAC,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAKe,IAAAC,0BAAiB,EAAE,CAAEC,OAAO,EAAEC,QAAQ,KAAM;EAC1D,OAAO;IACNC,IAAI,EAAED,QAAQ,CAACC,IAAI,IAAIF,OAAO,CAACE,IAAI;IACnCC,UAAU,EACTF,QAAQ,CAACE,UAAU,IAAK,GAAGH,OAAO,CAACI,IAAM,IAAIH,QAAQ,CAACG,IAAM;EAC9D,CAAC;AACF,CAAE,CAAC","ignoreList":[]}

package/build-module/components/complementary-area-context/index.js

@@ -1,11 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { withPluginContext } from '@wordpress/plugins';
-export default withPluginContext((context, ownProps) => {
-  return {
-    icon: ownProps.icon || context.icon,
-    identifier: ownProps.identifier || `${context.name}/${ownProps.name}`
-  };
-});
-//# sourceMappingURL=index.js.map

package/build-module/components/complementary-area-context/index.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["withPluginContext","context","ownProps","icon","identifier","name"],"sources":["@wordpress/interface/src/components/complementary-area-context/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { withPluginContext } from '@wordpress/plugins';\n\nexport default withPluginContext( ( context, ownProps ) => {\n\treturn {\n\t\ticon: ownProps.icon || context.icon,\n\t\tidentifier:\n\t\t\townProps.identifier || `${ context.name }/${ ownProps.name }`,\n\t};\n} );\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,iBAAiB,QAAQ,oBAAoB;AAEtD,eAAeA,iBAAiB,CAAE,CAAEC,OAAO,EAAEC,QAAQ,KAAM;EAC1D,OAAO;IACNC,IAAI,EAAED,QAAQ,CAACC,IAAI,IAAIF,OAAO,CAACE,IAAI;IACnCC,UAAU,EACTF,QAAQ,CAACE,UAAU,IAAK,GAAGH,OAAO,CAACI,IAAM,IAAIH,QAAQ,CAACG,IAAM;EAC9D,CAAC;AACF,CAAE,CAAC","ignoreList":[]}

package/complementary-area-context/index.js

@@ -1,12 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { withPluginContext } from '@wordpress/plugins';
-
-export default withPluginContext( ( context, ownProps ) => {
-	return {
-		icon: ownProps.icon || context.icon,
-		identifier:
-			ownProps.identifier || `${ context.name }/${ ownProps.name }`,
-	};
-} );

package/lock-unlock.js

@@ -1,10 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';
-
-export const { lock, unlock } =
-	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
-		'I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.',
-		'@wordpress/interface'
-	);

package/src/components/complementary-area-context/index.js

@@ -1,12 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { withPluginContext } from '@wordpress/plugins';
-
-export default withPluginContext( ( context, ownProps ) => {
-	return {
-		icon: ownProps.icon || context.icon,
-		identifier:
-			ownProps.identifier || `${ context.name }/${ ownProps.name }`,
-	};
-} );