@wordpress/notices 5.46.0 → 5.48.0

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 5.48.0 (2026-06-04)
+
+## 5.47.0 (2026-05-27)
+
+### Enhancements
+
+-   `InlineNotices`: Wrap pinned and dismissible lists in a `notices-inline-notices-wrapper` container with spacing between lists. Add optional `className` prop for the wrapper.
+
+### Internal
+
+-   `InlineNotices`: Remove package-level `Notice` style overrides; `Notice` from `@wordpress/components` owns layout and chrome ([#78231](https://github.com/WordPress/gutenberg/pull/78231)).
+
 ## 5.46.0 (2026-05-14)
 
 ## 5.45.0 (2026-04-29)

package/README.md

@@ -36,6 +36,7 @@ Renders notice lists for notices with type `default`:
 _Props_
 
 -   `children: ReactNode` (optional): Additional content rendered in the dismissible notice list.
+-   `className: string` (optional): Extra class name added to the inline notices wrapper.
 -   `pinnedNoticesClassName: string` (optional): Extra class name added to the pinned list.
 -   `dismissibleNoticesClassName: string` (optional): Extra class name added to the dismissible list.
 -   `context: string` (optional): Notice context to read and remove notices from. Defaults to `default`.

package/build/components/inline-notices/index.cjs

@@ -37,19 +37,13 @@ var import_clsx = __toESM(require("clsx"));
 var import_components = require("@wordpress/components");
 var import_data = require("@wordpress/data");
 var import_store = require("../../store/index.cjs");
-
-// packages/notices/src/components/inline-notices/style.scss
-if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='2c1d02983b']")) {
-  const style = document.createElement("style");
-  style.setAttribute("data-wp-hash", "2c1d02983b");
-  style.appendChild(document.createTextNode(".components-notices__dismissible,.components-notices__pinned{color:#1e1e1e}.components-notices__dismissible .components-notice,.components-notices__pinned .components-notice{border-bottom:1px solid #0003;box-sizing:border-box;min-height:64px;padding:0 12px}.components-notices__dismissible .components-notice .components-notice__dismiss,.components-notices__pinned .components-notice .components-notice__dismiss{margin-top:12px}"));
-  document.head.appendChild(style);
-}
-
-// packages/notices/src/components/inline-notices/index.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
+function hasRenderableChildren(children) {
+  return children !== null && children !== void 0 && children !== false && children !== "";
+}
 function InlineNotices({
   children,
+  className,
   pinnedNoticesClassName,
   dismissibleNoticesClassName,
   context
@@ -65,8 +59,13 @@ function InlineNotices({
   const nonDismissibleNotices = notices.filter(
     ({ isDismissible, type }) => !isDismissible && type === "default"
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  const hasPinnedNotices = nonDismissibleNotices.length > 0;
+  const hasDismissibleNotices = dismissibleNotices.length > 0 || hasRenderableChildren(children);
+  if (!hasPinnedNotices && !hasDismissibleNotices) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_clsx.default)("notices-inline-notices-wrapper", className), children: [
+    hasPinnedNotices && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_components.NoticeList,
       {
         notices: nonDismissibleNotices,
@@ -76,7 +75,7 @@ function InlineNotices({
         )
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    hasDismissibleNotices && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_components.NoticeList,
       {
         notices: dismissibleNotices,

package/build/components/inline-notices/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../src/components/inline-notices/index.tsx", "../../../src/components/inline-notices/style.scss"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport type { ReactNode } from 'react';\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { NoticeList } from '@wordpress/components';\nimport { useDispatch, useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { store as noticesStore } from '../../store';\nimport './style.scss';\n\ntype InlineNoticesProps = {\n\tchildren?: ReactNode;\n\tpinnedNoticesClassName?: string;\n\tdismissibleNoticesClassName?: string;\n\tcontext?: string;\n};\n\nexport default function InlineNotices( {\n\tchildren,\n\tpinnedNoticesClassName,\n\tdismissibleNoticesClassName,\n\tcontext,\n}: InlineNoticesProps ) {\n\tconst notices = useSelect(\n\t\t( select ) => select( noticesStore ).getNotices( context ),\n\t\t[ context ]\n\t);\n\tconst { removeNotice } = useDispatch( noticesStore );\n\tconst dismissibleNotices = notices.filter(\n\t\t( { isDismissible, type } ) => isDismissible && type === 'default'\n\t);\n\tconst nonDismissibleNotices = notices.filter(\n\t\t( { isDismissible, type } ) => ! isDismissible && type === 'default'\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t<NoticeList\n\t\t\t\tnotices={ nonDismissibleNotices }\n\t\t\t\tclassName={ clsx(\n\t\t\t\t\t'components-notices__pinned',\n\t\t\t\t\tpinnedNoticesClassName\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t<NoticeList\n\t\t\t\tnotices={ dismissibleNotices }\n\t\t\t\tclassName={ clsx(\n\t\t\t\t\t'components-notices__dismissible',\n\t\t\t\t\tdismissibleNoticesClassName\n\t\t\t\t) }\n\t\t\t\tonRemove={ ( id ) => removeNotice( id, context ) }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</NoticeList>\n\t\t</>\n\t);\n}\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='2c1d02983b']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"2c1d02983b\");\n\tstyle.appendChild(document.createTextNode(\".components-notices__dismissible,.components-notices__pinned{color:#1e1e1e}.components-notices__dismissible .components-notice,.components-notices__pinned .components-notice{border-bottom:1px solid #0003;box-sizing:border-box;min-height:64px;padding:0 12px}.components-notices__dismissible .components-notice .components-notice__dismiss,.components-notices__pinned .components-notice .components-notice__dismiss{margin-top:12px}\"));\n\tdocument.head.appendChild(style);\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,kBAAiB;AAKjB,wBAA2B;AAC3B,kBAAuC;AAKvC,mBAAsC;;;ACftC,IAAI,OAAO,aAAa,eAAe,QAAQ,IAAI,aAAa,UAAU,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AAC3I,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,8aAA8a,CAAC;AACzd,WAAS,KAAK,YAAY,KAAK;AAChC;;;ADuCE;AAnBa,SAAR,cAAgC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAwB;AACvB,QAAM,cAAU;AAAA,IACf,CAAE,WAAY,OAAQ,aAAAA,KAAa,EAAE,WAAY,OAAQ;AAAA,IACzD,CAAE,OAAQ;AAAA,EACX;AACA,QAAM,EAAE,aAAa,QAAI,yBAAa,aAAAA,KAAa;AACnD,QAAM,qBAAqB,QAAQ;AAAA,IAClC,CAAE,EAAE,eAAe,KAAK,MAAO,iBAAiB,SAAS;AAAA,EAC1D;AACA,QAAM,wBAAwB,QAAQ;AAAA,IACrC,CAAE,EAAE,eAAe,KAAK,MAAO,CAAE,iBAAiB,SAAS;AAAA,EAC5D;AAEA,SACC,4EACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,SAAU;AAAA,QACV,eAAY,YAAAC;AAAA,UACX;AAAA,UACA;AAAA,QACD;AAAA;AAAA,IACD;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACA,SAAU;AAAA,QACV,eAAY,YAAAA;AAAA,UACX;AAAA,UACA;AAAA,QACD;AAAA,QACA,UAAW,CAAE,OAAQ,aAAc,IAAI,OAAQ;AAAA,QAE7C;AAAA;AAAA,IACH;AAAA,KACD;AAEF;",
+  "sources": ["../../../src/components/inline-notices/index.tsx"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport type { ReactNode } from 'react';\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { NoticeList } from '@wordpress/components';\nimport { useDispatch, useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { store as noticesStore } from '../../store';\n\ntype InlineNoticesProps = {\n\tchildren?: ReactNode;\n\tclassName?: string;\n\tpinnedNoticesClassName?: string;\n\tdismissibleNoticesClassName?: string;\n\tcontext?: string;\n};\n\nfunction hasRenderableChildren( children: ReactNode ): boolean {\n\treturn (\n\t\tchildren !== null &&\n\t\tchildren !== undefined &&\n\t\tchildren !== false &&\n\t\tchildren !== ''\n\t);\n}\n\nexport default function InlineNotices( {\n\tchildren,\n\tclassName,\n\tpinnedNoticesClassName,\n\tdismissibleNoticesClassName,\n\tcontext,\n}: InlineNoticesProps ) {\n\tconst notices = useSelect(\n\t\t( select ) => select( noticesStore ).getNotices( context ),\n\t\t[ context ]\n\t);\n\tconst { removeNotice } = useDispatch( noticesStore );\n\tconst dismissibleNotices = notices.filter(\n\t\t( { isDismissible, type } ) => isDismissible && type === 'default'\n\t);\n\tconst nonDismissibleNotices = notices.filter(\n\t\t( { isDismissible, type } ) => ! isDismissible && type === 'default'\n\t);\n\n\tconst hasPinnedNotices = nonDismissibleNotices.length > 0;\n\tconst hasDismissibleNotices =\n\t\tdismissibleNotices.length > 0 || hasRenderableChildren( children );\n\n\tif ( ! hasPinnedNotices && ! hasDismissibleNotices ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<div className={ clsx( 'notices-inline-notices-wrapper', className ) }>\n\t\t\t{ hasPinnedNotices && (\n\t\t\t\t<NoticeList\n\t\t\t\t\tnotices={ nonDismissibleNotices }\n\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t'components-notices__pinned',\n\t\t\t\t\t\tpinnedNoticesClassName\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ hasDismissibleNotices && (\n\t\t\t\t<NoticeList\n\t\t\t\t\tnotices={ dismissibleNotices }\n\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t'components-notices__dismissible',\n\t\t\t\t\t\tdismissibleNoticesClassName\n\t\t\t\t\t) }\n\t\t\t\t\tonRemove={ ( id ) => removeNotice( id, context ) }\n\t\t\t\t>\n\t\t\t\t\t{ children }\n\t\t\t\t</NoticeList>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,kBAAiB;AAKjB,wBAA2B;AAC3B,kBAAuC;AAKvC,mBAAsC;AA+CpC;AArCF,SAAS,sBAAuB,UAA+B;AAC9D,SACC,aAAa,QACb,aAAa,UACb,aAAa,SACb,aAAa;AAEf;AAEe,SAAR,cAAgC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAwB;AACvB,QAAM,cAAU;AAAA,IACf,CAAE,WAAY,OAAQ,aAAAA,KAAa,EAAE,WAAY,OAAQ;AAAA,IACzD,CAAE,OAAQ;AAAA,EACX;AACA,QAAM,EAAE,aAAa,QAAI,yBAAa,aAAAA,KAAa;AACnD,QAAM,qBAAqB,QAAQ;AAAA,IAClC,CAAE,EAAE,eAAe,KAAK,MAAO,iBAAiB,SAAS;AAAA,EAC1D;AACA,QAAM,wBAAwB,QAAQ;AAAA,IACrC,CAAE,EAAE,eAAe,KAAK,MAAO,CAAE,iBAAiB,SAAS;AAAA,EAC5D;AAEA,QAAM,mBAAmB,sBAAsB,SAAS;AACxD,QAAM,wBACL,mBAAmB,SAAS,KAAK,sBAAuB,QAAS;AAElE,MAAK,CAAE,oBAAoB,CAAE,uBAAwB;AACpD,WAAO;AAAA,EACR;AAEA,SACC,6CAAC,SAAI,eAAY,YAAAC,SAAM,kCAAkC,SAAU,GAChE;AAAA,wBACD;AAAA,MAAC;AAAA;AAAA,QACA,SAAU;AAAA,QACV,eAAY,YAAAA;AAAA,UACX;AAAA,UACA;AAAA,QACD;AAAA;AAAA,IACD;AAAA,IAEC,yBACD;AAAA,MAAC;AAAA;AAAA,QACA,SAAU;AAAA,QACV,eAAY,YAAAA;AAAA,UACX;AAAA,UACA;AAAA,QACD;AAAA,QACA,UAAW,CAAE,OAAQ,aAAc,IAAI,OAAQ;AAAA,QAE7C;AAAA;AAAA,IACH;AAAA,KAEF;AAEF;",
   "names": ["noticesStore", "clsx"]
 }

package/build-module/components/inline-notices/index.mjs

@@ -3,19 +3,13 @@ import clsx from "clsx";
 import { NoticeList } from "@wordpress/components";
 import { useDispatch, useSelect } from "@wordpress/data";
 import { store as noticesStore } from "../../store/index.mjs";
-
-// packages/notices/src/components/inline-notices/style.scss
-if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='2c1d02983b']")) {
-  const style = document.createElement("style");
-  style.setAttribute("data-wp-hash", "2c1d02983b");
-  style.appendChild(document.createTextNode(".components-notices__dismissible,.components-notices__pinned{color:#1e1e1e}.components-notices__dismissible .components-notice,.components-notices__pinned .components-notice{border-bottom:1px solid #0003;box-sizing:border-box;min-height:64px;padding:0 12px}.components-notices__dismissible .components-notice .components-notice__dismiss,.components-notices__pinned .components-notice .components-notice__dismiss{margin-top:12px}"));
-  document.head.appendChild(style);
+import { jsx, jsxs } from "react/jsx-runtime";
+function hasRenderableChildren(children) {
+  return children !== null && children !== void 0 && children !== false && children !== "";
 }
-
-// packages/notices/src/components/inline-notices/index.tsx
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function InlineNotices({
   children,
+  className,
   pinnedNoticesClassName,
   dismissibleNoticesClassName,
   context
@@ -31,8 +25,13 @@ function InlineNotices({
   const nonDismissibleNotices = notices.filter(
     ({ isDismissible, type }) => !isDismissible && type === "default"
   );
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
+  const hasPinnedNotices = nonDismissibleNotices.length > 0;
+  const hasDismissibleNotices = dismissibleNotices.length > 0 || hasRenderableChildren(children);
+  if (!hasPinnedNotices && !hasDismissibleNotices) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs("div", { className: clsx("notices-inline-notices-wrapper", className), children: [
+    hasPinnedNotices && /* @__PURE__ */ jsx(
       NoticeList,
       {
         notices: nonDismissibleNotices,
@@ -42,7 +41,7 @@ function InlineNotices({
         )
       }
     ),
-    /* @__PURE__ */ jsx(
+    hasDismissibleNotices && /* @__PURE__ */ jsx(
       NoticeList,
       {
         notices: dismissibleNotices,

package/build-module/components/inline-notices/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../src/components/inline-notices/index.tsx", "../../../src/components/inline-notices/style.scss"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport type { ReactNode } from 'react';\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { NoticeList } from '@wordpress/components';\nimport { useDispatch, useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { store as noticesStore } from '../../store';\nimport './style.scss';\n\ntype InlineNoticesProps = {\n\tchildren?: ReactNode;\n\tpinnedNoticesClassName?: string;\n\tdismissibleNoticesClassName?: string;\n\tcontext?: string;\n};\n\nexport default function InlineNotices( {\n\tchildren,\n\tpinnedNoticesClassName,\n\tdismissibleNoticesClassName,\n\tcontext,\n}: InlineNoticesProps ) {\n\tconst notices = useSelect(\n\t\t( select ) => select( noticesStore ).getNotices( context ),\n\t\t[ context ]\n\t);\n\tconst { removeNotice } = useDispatch( noticesStore );\n\tconst dismissibleNotices = notices.filter(\n\t\t( { isDismissible, type } ) => isDismissible && type === 'default'\n\t);\n\tconst nonDismissibleNotices = notices.filter(\n\t\t( { isDismissible, type } ) => ! isDismissible && type === 'default'\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t<NoticeList\n\t\t\t\tnotices={ nonDismissibleNotices }\n\t\t\t\tclassName={ clsx(\n\t\t\t\t\t'components-notices__pinned',\n\t\t\t\t\tpinnedNoticesClassName\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t<NoticeList\n\t\t\t\tnotices={ dismissibleNotices }\n\t\t\t\tclassName={ clsx(\n\t\t\t\t\t'components-notices__dismissible',\n\t\t\t\t\tdismissibleNoticesClassName\n\t\t\t\t) }\n\t\t\t\tonRemove={ ( id ) => removeNotice( id, context ) }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</NoticeList>\n\t\t</>\n\t);\n}\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='2c1d02983b']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"2c1d02983b\");\n\tstyle.appendChild(document.createTextNode(\".components-notices__dismissible,.components-notices__pinned{color:#1e1e1e}.components-notices__dismissible .components-notice,.components-notices__pinned .components-notice{border-bottom:1px solid #0003;box-sizing:border-box;min-height:64px;padding:0 12px}.components-notices__dismissible .components-notice .components-notice__dismiss,.components-notices__pinned .components-notice .components-notice__dismiss{margin-top:12px}\"));\n\tdocument.head.appendChild(style);\n}\n"],
-  "mappings": ";AAIA,OAAO,UAAU;AAKjB,SAAS,kBAAkB;AAC3B,SAAS,aAAa,iBAAiB;AAKvC,SAAS,SAAS,oBAAoB;;;ACftC,IAAI,OAAO,aAAa,eAAe,QAAQ,IAAI,aAAa,UAAU,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AAC3I,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,8aAA8a,CAAC;AACzd,WAAS,KAAK,YAAY,KAAK;AAChC;;;ADuCE,mBACC,KADD;AAnBa,SAAR,cAAgC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAwB;AACvB,QAAM,UAAU;AAAA,IACf,CAAE,WAAY,OAAQ,YAAa,EAAE,WAAY,OAAQ;AAAA,IACzD,CAAE,OAAQ;AAAA,EACX;AACA,QAAM,EAAE,aAAa,IAAI,YAAa,YAAa;AACnD,QAAM,qBAAqB,QAAQ;AAAA,IAClC,CAAE,EAAE,eAAe,KAAK,MAAO,iBAAiB,SAAS;AAAA,EAC1D;AACA,QAAM,wBAAwB,QAAQ;AAAA,IACrC,CAAE,EAAE,eAAe,KAAK,MAAO,CAAE,iBAAiB,SAAS;AAAA,EAC5D;AAEA,SACC,iCACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,SAAU;AAAA,QACV,WAAY;AAAA,UACX;AAAA,UACA;AAAA,QACD;AAAA;AAAA,IACD;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACA,SAAU;AAAA,QACV,WAAY;AAAA,UACX;AAAA,UACA;AAAA,QACD;AAAA,QACA,UAAW,CAAE,OAAQ,aAAc,IAAI,OAAQ;AAAA,QAE7C;AAAA;AAAA,IACH;AAAA,KACD;AAEF;",
+  "sources": ["../../../src/components/inline-notices/index.tsx"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport type { ReactNode } from 'react';\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { NoticeList } from '@wordpress/components';\nimport { useDispatch, useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { store as noticesStore } from '../../store';\n\ntype InlineNoticesProps = {\n\tchildren?: ReactNode;\n\tclassName?: string;\n\tpinnedNoticesClassName?: string;\n\tdismissibleNoticesClassName?: string;\n\tcontext?: string;\n};\n\nfunction hasRenderableChildren( children: ReactNode ): boolean {\n\treturn (\n\t\tchildren !== null &&\n\t\tchildren !== undefined &&\n\t\tchildren !== false &&\n\t\tchildren !== ''\n\t);\n}\n\nexport default function InlineNotices( {\n\tchildren,\n\tclassName,\n\tpinnedNoticesClassName,\n\tdismissibleNoticesClassName,\n\tcontext,\n}: InlineNoticesProps ) {\n\tconst notices = useSelect(\n\t\t( select ) => select( noticesStore ).getNotices( context ),\n\t\t[ context ]\n\t);\n\tconst { removeNotice } = useDispatch( noticesStore );\n\tconst dismissibleNotices = notices.filter(\n\t\t( { isDismissible, type } ) => isDismissible && type === 'default'\n\t);\n\tconst nonDismissibleNotices = notices.filter(\n\t\t( { isDismissible, type } ) => ! isDismissible && type === 'default'\n\t);\n\n\tconst hasPinnedNotices = nonDismissibleNotices.length > 0;\n\tconst hasDismissibleNotices =\n\t\tdismissibleNotices.length > 0 || hasRenderableChildren( children );\n\n\tif ( ! hasPinnedNotices && ! hasDismissibleNotices ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<div className={ clsx( 'notices-inline-notices-wrapper', className ) }>\n\t\t\t{ hasPinnedNotices && (\n\t\t\t\t<NoticeList\n\t\t\t\t\tnotices={ nonDismissibleNotices }\n\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t'components-notices__pinned',\n\t\t\t\t\t\tpinnedNoticesClassName\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ hasDismissibleNotices && (\n\t\t\t\t<NoticeList\n\t\t\t\t\tnotices={ dismissibleNotices }\n\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t'components-notices__dismissible',\n\t\t\t\t\t\tdismissibleNoticesClassName\n\t\t\t\t\t) }\n\t\t\t\t\tonRemove={ ( id ) => removeNotice( id, context ) }\n\t\t\t\t>\n\t\t\t\t\t{ children }\n\t\t\t\t</NoticeList>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n"],
+  "mappings": ";AAIA,OAAO,UAAU;AAKjB,SAAS,kBAAkB;AAC3B,SAAS,aAAa,iBAAiB;AAKvC,SAAS,SAAS,oBAAoB;AA+CpC,SAEE,KAFF;AArCF,SAAS,sBAAuB,UAA+B;AAC9D,SACC,aAAa,QACb,aAAa,UACb,aAAa,SACb,aAAa;AAEf;AAEe,SAAR,cAAgC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAwB;AACvB,QAAM,UAAU;AAAA,IACf,CAAE,WAAY,OAAQ,YAAa,EAAE,WAAY,OAAQ;AAAA,IACzD,CAAE,OAAQ;AAAA,EACX;AACA,QAAM,EAAE,aAAa,IAAI,YAAa,YAAa;AACnD,QAAM,qBAAqB,QAAQ;AAAA,IAClC,CAAE,EAAE,eAAe,KAAK,MAAO,iBAAiB,SAAS;AAAA,EAC1D;AACA,QAAM,wBAAwB,QAAQ;AAAA,IACrC,CAAE,EAAE,eAAe,KAAK,MAAO,CAAE,iBAAiB,SAAS;AAAA,EAC5D;AAEA,QAAM,mBAAmB,sBAAsB,SAAS;AACxD,QAAM,wBACL,mBAAmB,SAAS,KAAK,sBAAuB,QAAS;AAElE,MAAK,CAAE,oBAAoB,CAAE,uBAAwB;AACpD,WAAO;AAAA,EACR;AAEA,SACC,qBAAC,SAAI,WAAY,KAAM,kCAAkC,SAAU,GAChE;AAAA,wBACD;AAAA,MAAC;AAAA;AAAA,QACA,SAAU;AAAA,QACV,WAAY;AAAA,UACX;AAAA,UACA;AAAA,QACD;AAAA;AAAA,IACD;AAAA,IAEC,yBACD;AAAA,MAAC;AAAA;AAAA,QACA,SAAU;AAAA,QACV,WAAY;AAAA,UACX;AAAA,UACA;AAAA,QACD;AAAA,QACA,UAAW,CAAE,OAAQ,aAAc,IAAI,OAAQ;AAAA,QAE7C;AAAA;AAAA,IACH;AAAA,KAEF;AAEF;",
   "names": []
 }

package/build-style/style-rtl.css

@@ -0,0 +1,5 @@
+.notices-inline-notices-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--wpds-dimension-gap-md, 12px);
+}

package/build-style/style.css

@@ -0,0 +1,5 @@
+.notices-inline-notices-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--wpds-dimension-gap-md, 12px);
+}

package/build-types/components/inline-notices/index.d.ts

@@ -2,13 +2,13 @@
  * External dependencies
  */
 import type { ReactNode } from 'react';
-import './style.scss';
 type InlineNoticesProps = {
     children?: ReactNode;
+    className?: string;
     pinnedNoticesClassName?: string;
     dismissibleNoticesClassName?: string;
     context?: string;
 };
-export default function InlineNotices({ children, pinnedNoticesClassName, dismissibleNoticesClassName, context }: InlineNoticesProps): import("react").JSX.Element;
+export default function InlineNotices({ children, className, pinnedNoticesClassName, dismissibleNoticesClassName, context }: InlineNoticesProps): import("react").JSX.Element | null;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/build-types/components/inline-notices/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/inline-notices/index.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAavC,OAAO,cAAc,CAAC;AAEtB,KAAK,kBAAkB,GAAG;IACzB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,2BAA2B,CAAC,EAAE,MAAM,CAAC;IACrC,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,aAAa,CAAE,EACtC,QAAQ,EACR,sBAAsB,EACtB,2BAA2B,EAC3B,OAAO,EACP,EAAE,kBAAkB,+BAkCpB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/inline-notices/index.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAcvC,KAAK,kBAAkB,GAAG;IACzB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,2BAA2B,CAAC,EAAE,MAAM,CAAC;IACrC,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAWF,MAAM,CAAC,OAAO,UAAU,aAAa,CAAE,EACtC,QAAQ,EACR,SAAS,EACT,sBAAsB,EACtB,2BAA2B,EAC3B,OAAO,EACP,EAAE,kBAAkB,sCA8CpB"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/notices",
-	"version": "5.46.0",
+	"version": "5.48.0",
 	"description": "State management for notices.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -26,6 +26,7 @@
 		"src",
 		"build",
 		"build-module",
+		"build-style",
 		"build-types",
 		"*.md"
 	],
@@ -37,15 +38,20 @@
 			"import": "./build-module/index.mjs",
 			"require": "./build/index.cjs"
 		},
-		"./package.json": "./package.json"
+		"./package.json": "./package.json",
+		"./build-style/": "./build-style/"
 	},
 	"react-native": "src/index",
 	"wpScript": true,
 	"types": "build-types",
+	"sideEffects": [
+		"build-style/**",
+		"src/**/*.scss"
+	],
 	"dependencies": {
-		"@wordpress/a11y": "^4.46.0",
-		"@wordpress/components": "^33.1.0",
-		"@wordpress/data": "^10.46.0",
+		"@wordpress/a11y": "^4.48.0",
+		"@wordpress/components": "^35.0.0",
+		"@wordpress/data": "^10.48.0",
 		"clsx": "^2.1.1"
 	},
 	"devDependencies": {
@@ -57,5 +63,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "51264e33b95fadff9a06b68141e674ce9cde9675"
+	"gitHead": "e7856693aeb4e2522d13608cd32c994e4a97cb9c"
 }

package/src/components/inline-notices/index.tsx

@@ -14,17 +14,27 @@ import { useDispatch, useSelect } from '@wordpress/data';
  * Internal dependencies
  */
 import { store as noticesStore } from '../../store';
-import './style.scss';
 
 type InlineNoticesProps = {
 	children?: ReactNode;
+	className?: string;
 	pinnedNoticesClassName?: string;
 	dismissibleNoticesClassName?: string;
 	context?: string;
 };
 
+function hasRenderableChildren( children: ReactNode ): boolean {
+	return (
+		children !== null &&
+		children !== undefined &&
+		children !== false &&
+		children !== ''
+	);
+}
+
 export default function InlineNotices( {
 	children,
+	className,
 	pinnedNoticesClassName,
 	dismissibleNoticesClassName,
 	context,
@@ -41,25 +51,37 @@ export default function InlineNotices( {
 		( { isDismissible, type } ) => ! isDismissible && type === 'default'
 	);
 
+	const hasPinnedNotices = nonDismissibleNotices.length > 0;
+	const hasDismissibleNotices =
+		dismissibleNotices.length > 0 || hasRenderableChildren( children );
+
+	if ( ! hasPinnedNotices && ! hasDismissibleNotices ) {
+		return null;
+	}
+
 	return (
-		<>
-			<NoticeList
-				notices={ nonDismissibleNotices }
-				className={ clsx(
-					'components-notices__pinned',
-					pinnedNoticesClassName
-				) }
-			/>
-			<NoticeList
-				notices={ dismissibleNotices }
-				className={ clsx(
-					'components-notices__dismissible',
-					dismissibleNoticesClassName
-				) }
-				onRemove={ ( id ) => removeNotice( id, context ) }
-			>
-				{ children }
-			</NoticeList>
-		</>
+		<div className={ clsx( 'notices-inline-notices-wrapper', className ) }>
+			{ hasPinnedNotices && (
+				<NoticeList
+					notices={ nonDismissibleNotices }
+					className={ clsx(
+						'components-notices__pinned',
+						pinnedNoticesClassName
+					) }
+				/>
+			) }
+			{ hasDismissibleNotices && (
+				<NoticeList
+					notices={ dismissibleNotices }
+					className={ clsx(
+						'components-notices__dismissible',
+						dismissibleNoticesClassName
+					) }
+					onRemove={ ( id ) => removeNotice( id, context ) }
+				>
+					{ children }
+				</NoticeList>
+			) }
+		</div>
 	);
 }

package/src/components/inline-notices/style.scss

@@ -1,21 +1,5 @@
-@use "@wordpress/base-styles/variables" as *;
-@use "@wordpress/base-styles/colors" as *;
-
-.components-notices__dismissible,
-.components-notices__pinned {
-	color: $gray-900;
-
-	.components-notice {
-		box-sizing: border-box;
-		border-bottom: $border-width solid rgba(0, 0, 0, 0.2);
-		padding: 0 $grid-unit-15;
-
-		// Min-height matches the height of a single-line notice with an action button.
-		min-height: $header-height;
-
-		// Margins ensure that the dismiss button aligns to the center of the first line of text.
-		.components-notice__dismiss {
-			margin-top: $grid-unit-15;
-		}
-	}
+.notices-inline-notices-wrapper {
+	display: flex;
+	flex-direction: column;
+	gap: var(--wpds-dimension-gap-md);
 }

package/src/components/inline-notices/test/index.test.tsx

@@ -0,0 +1,157 @@
+/**
+ * External dependencies
+ */
+import { render, screen, within } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import { createRegistry, RegistryProvider } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import InlineNotices from '../index';
+import { store as noticesStore } from '../../../store';
+
+function getInlineNoticesWrapper( container: HTMLElement ) {
+	return container.firstChild as HTMLElement;
+}
+
+function renderInlineNotices( props = {} ) {
+	const registry = createRegistry();
+	registry.register( noticesStore );
+
+	const view = render(
+		<RegistryProvider value={ registry }>
+			<InlineNotices { ...props } />
+		</RegistryProvider>
+	);
+
+	return { registry, ...view };
+}
+
+describe( 'InlineNotices', () => {
+	it( 'should return null when there are no notices and no children', () => {
+		const { container } = renderInlineNotices();
+
+		expect( container ).toBeEmptyDOMElement();
+	} );
+
+	it( 'should return null when children is false and there are no notices', () => {
+		const { container } = renderInlineNotices( {
+			children: false,
+		} );
+
+		expect( container ).toBeEmptyDOMElement();
+	} );
+
+	it( 'should render the inline notices wrapper with a custom class name', () => {
+		const { container } = renderInlineNotices( {
+			className: 'my-inline-notices',
+			children: <div>Extra notice</div>,
+		} );
+
+		expect( getInlineNoticesWrapper( container ) ).toHaveClass(
+			'notices-inline-notices-wrapper',
+			'my-inline-notices'
+		);
+	} );
+
+	it( 'renders pinned notices without a close button', () => {
+		const registry = createRegistry();
+		registry.register( noticesStore );
+		registry
+			.dispatch( noticesStore )
+			.createNotice( 'warning', 'Pinned notice', {
+				isDismissible: false,
+			} );
+
+		const { container } = render(
+			<RegistryProvider value={ registry }>
+				<InlineNotices />
+			</RegistryProvider>
+		);
+
+		expect(
+			within( getInlineNoticesWrapper( container ) ).getByText(
+				'Pinned notice'
+			)
+		).toBeInTheDocument();
+		expect(
+			screen.queryByRole( 'button', { name: 'Close' } )
+		).not.toBeInTheDocument();
+	} );
+
+	it( 'renders dismissible notices with a close button', () => {
+		const registry = createRegistry();
+		registry.register( noticesStore );
+		registry
+			.dispatch( noticesStore )
+			.createNotice( 'warning', 'Dismissible notice' );
+
+		render(
+			<RegistryProvider value={ registry }>
+				<InlineNotices />
+			</RegistryProvider>
+		);
+
+		expect(
+			screen.getByRole( 'button', { name: 'Close' } )
+		).toBeInTheDocument();
+	} );
+
+	it( 'partitions pinned and dismissible notices into separate lists', () => {
+		const registry = createRegistry();
+		registry.register( noticesStore );
+		registry
+			.dispatch( noticesStore )
+			.createNotice( 'warning', 'Pinned notice', {
+				isDismissible: false,
+			} );
+		registry
+			.dispatch( noticesStore )
+			.createNotice( 'success', 'Dismissible notice' );
+
+		const { container } = render(
+			<RegistryProvider value={ registry }>
+				<InlineNotices
+					pinnedNoticesClassName="test-pinned"
+					dismissibleNoticesClassName="test-dismissible"
+				/>
+			</RegistryProvider>
+		);
+
+		// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access -- partition via public className props.
+		const pinned = container.querySelector( '.test-pinned' )!;
+		// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access -- partition via public className props.
+		const dismissible = container.querySelector( '.test-dismissible' )!;
+
+		expect(
+			within( pinned ).getByText( 'Pinned notice' )
+		).toBeInTheDocument();
+		expect(
+			within( pinned ).queryByText( 'Dismissible notice' )
+		).not.toBeInTheDocument();
+		expect(
+			within( dismissible ).getByText( 'Dismissible notice' )
+		).toBeInTheDocument();
+		expect(
+			within( dismissible ).queryByText( 'Pinned notice' )
+		).not.toBeInTheDocument();
+	} );
+
+	it( 'renders children in the dismissible list', () => {
+		const { container } = renderInlineNotices( {
+			children: <div>Extra notice</div>,
+			dismissibleNoticesClassName: 'test-dismissible',
+		} );
+
+		// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access -- partition via public className props.
+		const dismissible = container.querySelector( '.test-dismissible' )!;
+
+		expect(
+			within( dismissible ).getByText( 'Extra notice' )
+		).toBeInTheDocument();
+	} );
+} );

package/src/style.scss

@@ -0,0 +1 @@
+@use "./components/inline-notices/style.scss" as *;