@wordpress/dataviews 11.1.1-next.76cff8c98.0 → 11.2.1-next.06ee73755.0

package/build-wp/index.js

@@ -1210,6 +1210,142 @@ function useObservableValue(map, name) {
   return useSyncExternalStore(subscribe, getValue, getValue);
 }
 
+// ../dom-ready/build-module/index.mjs
+function domReady(callback) {
+  if (typeof document === "undefined") {
+    return;
+  }
+  if (document.readyState === "complete" || // DOMContentLoaded + Images/Styles/etc loaded, so we call directly.
+  document.readyState === "interactive") {
+    return void callback();
+  }
+  document.addEventListener("DOMContentLoaded", callback);
+}
+
+// ../a11y/build-module/script/add-container.mjs
+function addContainer(ariaLive = "polite") {
+  const container = document.createElement("div");
+  container.id = `a11y-speak-${ariaLive}`;
+  container.className = "a11y-speak-region";
+  container.setAttribute(
+    "style",
+    "position:absolute;margin:-1px;padding:0;height:1px;width:1px;overflow:hidden;clip-path:inset(50%);border:0;word-wrap:normal !important;"
+  );
+  container.setAttribute("aria-live", ariaLive);
+  container.setAttribute("aria-relevant", "additions text");
+  container.setAttribute("aria-atomic", "true");
+  const { body } = document;
+  if (body) {
+    body.appendChild(container);
+  }
+  return container;
+}
+
+// ../a11y/build-module/script/add-intro-text.mjs
+import { __ as __2 } from "@wordpress/i18n";
+function addIntroText() {
+  const introText = document.createElement("p");
+  introText.id = "a11y-speak-intro-text";
+  introText.className = "a11y-speak-intro-text";
+  introText.textContent = __2("Notifications");
+  introText.setAttribute(
+    "style",
+    "position:absolute;margin:-1px;padding:0;height:1px;width:1px;overflow:hidden;clip-path:inset(50%);border:0;word-wrap:normal !important;"
+  );
+  introText.setAttribute("hidden", "");
+  const { body } = document;
+  if (body) {
+    body.appendChild(introText);
+  }
+  return introText;
+}
+
+// ../a11y/build-module/shared/clear.mjs
+function clear() {
+  const regions = document.getElementsByClassName("a11y-speak-region");
+  const introText = document.getElementById("a11y-speak-intro-text");
+  for (let i = 0; i < regions.length; i++) {
+    regions[i].textContent = "";
+  }
+  if (introText) {
+    introText.setAttribute("hidden", "hidden");
+  }
+}
+
+// ../a11y/build-module/shared/filter-message.mjs
+var previousMessage = "";
+function filterMessage(message) {
+  message = message.replace(/<[^<>]+>/g, " ");
+  if (previousMessage === message) {
+    message += "\xA0";
+  }
+  previousMessage = message;
+  return message;
+}
+
+// ../a11y/build-module/shared/index.mjs
+function speak(message, ariaLive) {
+  clear();
+  message = filterMessage(message);
+  const introText = document.getElementById("a11y-speak-intro-text");
+  const containerAssertive = document.getElementById(
+    "a11y-speak-assertive"
+  );
+  const containerPolite = document.getElementById("a11y-speak-polite");
+  if (containerAssertive && ariaLive === "assertive") {
+    containerAssertive.textContent = message;
+  } else if (containerPolite) {
+    containerPolite.textContent = message;
+  }
+  if (introText) {
+    introText.removeAttribute("hidden");
+  }
+}
+
+// ../a11y/build-module/index.mjs
+function setup() {
+  const introText = document.getElementById("a11y-speak-intro-text");
+  const containerAssertive = document.getElementById(
+    "a11y-speak-assertive"
+  );
+  const containerPolite = document.getElementById("a11y-speak-polite");
+  if (introText === null) {
+    addIntroText();
+  }
+  if (containerAssertive === null) {
+    addContainer("assertive");
+  }
+  if (containerPolite === null) {
+    addContainer("polite");
+  }
+}
+domReady(setup);
+
+// ../primitives/build-module/svg/index.mjs
+import clsx from "clsx";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var Circle = (props) => createElement("circle", props);
+var Path = (props) => createElement("path", props);
+var SVG = forwardRef(
+  /**
+   * @param {SVGProps}                                    props isPressed indicates whether the SVG should appear as pressed.
+   *                                                            Other props will be passed through to svg component.
+   * @param {import('react').ForwardedRef<SVGSVGElement>} ref   The forwarded ref to the SVG element.
+   *
+   * @return {JSX.Element} Stop component
+   */
+  ({ className: className2, isPressed, ...props }, ref) => {
+    const appliedProps = {
+      ...props,
+      className: clsx(className2, { "is-pressed": isPressed }) || void 0,
+      "aria-hidden": true,
+      focusable: false
+    };
+    return /* @__PURE__ */ jsx2("svg", { ...appliedProps, ref });
+  }
+);
+SVG.displayName = "SVG";
+
 // ../ui/build-module/stack/stack.mjs
 import { useRender, mergeProps } from "@base-ui/react";
 var css = `@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;
@@ -1241,7 +1377,7 @@ var Stack = forwardRef(function Stack2({ direction, gap, align, justify, wrap, r
 });
 
 // src/constants.ts
-import { __ as __2 } from "@wordpress/i18n";
+import { __ as __3 } from "@wordpress/i18n";
 
 // ../icons/build-module/icon/index.mjs
 var icon_default = forwardRef(
@@ -1255,31 +1391,6 @@ var icon_default = forwardRef(
   }
 );
 
-// ../primitives/build-module/svg/index.mjs
-import clsx from "clsx";
-import { jsx as jsx2 } from "react/jsx-runtime";
-var Circle = (props) => createElement("circle", props);
-var Path = (props) => createElement("path", props);
-var SVG = forwardRef(
-  /**
-   * @param {SVGProps}                                    props isPressed indicates whether the SVG should appear as pressed.
-   *                                                            Other props will be passed through to svg component.
-   * @param {import('react').ForwardedRef<SVGSVGElement>} ref   The forwarded ref to the SVG element.
-   *
-   * @return {JSX.Element} Stop component
-   */
-  ({ className: className2, isPressed, ...props }, ref) => {
-    const appliedProps = {
-      ...props,
-      className: clsx(className2, { "is-pressed": isPressed }) || void 0,
-      "aria-hidden": true,
-      focusable: false
-    };
-    return /* @__PURE__ */ jsx2("svg", { ...appliedProps, ref });
-  }
-);
-SVG.displayName = "SVG";
-
 // ../icons/build-module/library/arrow-down.mjs
 import { jsx as jsx3 } from "react/jsx-runtime";
 var arrow_down_default = /* @__PURE__ */ jsx3(SVG, { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3(Path, { d: "m16.5 13.5-3.7 3.7V4h-1.5v13.2l-3.8-3.7-1 1 5.5 5.6 5.5-5.6z" }) });
@@ -1495,8 +1606,8 @@ var SORTING_DIRECTIONS = ["asc", "desc"];
 var sortArrows = { asc: "\u2191", desc: "\u2193" };
 var sortValues = { asc: "ascending", desc: "descending" };
 var sortLabels = {
-  asc: __2("Sort ascending"),
-  desc: __2("Sort descending")
+  asc: __3("Sort ascending"),
+  desc: __3("Sort descending")
 };
 var sortIcons = {
   asc: arrow_up_default,
@@ -2595,7 +2706,7 @@ var tooltip_default = Tooltip2;
 
 // ../components/build-module/context/context-system-provider.mjs
 import deepmerge from "deepmerge";
-import fastDeepEqual from "fast-deep-equal/es6";
+import fastDeepEqual from "fast-deep-equal/es6/index.js";
 import { isPlainObject } from "is-plain-object";
 
 // ../warning/build-module/utils.mjs
@@ -3141,7 +3252,7 @@ var component_default6 = Spacer;
 
 // ../components/build-module/number-control/index.mjs
 import clsx6 from "clsx";
-import { isRTL as isRTL3, __ as __3 } from "@wordpress/i18n";
+import { isRTL as isRTL3, __ as __4 } from "@wordpress/i18n";
 
 // ../components/build-module/number-control/styles/number-control-styles.mjs
 import _styled4 from "@emotion/styled/base";
@@ -5334,13 +5445,13 @@ function UnforwardedNumberControl(props, forwardedRef) {
             className: spinButtonClasses,
             icon: plus_default,
             size: "small",
-            label: __3("Increment"),
+            label: __4("Increment"),
             onClick: buildSpinButtonClickHandler("up")
           }), /* @__PURE__ */ _jsx31(SpinButton, {
             className: spinButtonClasses,
             icon: reset_default,
             size: "small",
-            label: __3("Decrement"),
+            label: __4("Decrement"),
             onClick: buildSpinButtonClickHandler("down")
           })]
         })
@@ -5377,117 +5488,6 @@ function UnconnectedInputControlSuffixWrapper(props, forwardedRef) {
 var InputControlSuffixWrapper = contextConnect(UnconnectedInputControlSuffixWrapper, "InputControlSuffixWrapper");
 var input_suffix_wrapper_default = InputControlSuffixWrapper;
 
-// ../dom-ready/build-module/index.mjs
-function domReady(callback) {
-  if (typeof document === "undefined") {
-    return;
-  }
-  if (document.readyState === "complete" || // DOMContentLoaded + Images/Styles/etc loaded, so we call directly.
-  document.readyState === "interactive") {
-    return void callback();
-  }
-  document.addEventListener("DOMContentLoaded", callback);
-}
-
-// ../a11y/build-module/script/add-container.mjs
-function addContainer(ariaLive = "polite") {
-  const container = document.createElement("div");
-  container.id = `a11y-speak-${ariaLive}`;
-  container.className = "a11y-speak-region";
-  container.setAttribute(
-    "style",
-    "position:absolute;margin:-1px;padding:0;height:1px;width:1px;overflow:hidden;clip-path:inset(50%);border:0;word-wrap:normal !important;"
-  );
-  container.setAttribute("aria-live", ariaLive);
-  container.setAttribute("aria-relevant", "additions text");
-  container.setAttribute("aria-atomic", "true");
-  const { body } = document;
-  if (body) {
-    body.appendChild(container);
-  }
-  return container;
-}
-
-// ../a11y/build-module/script/add-intro-text.mjs
-import { __ as __4 } from "@wordpress/i18n";
-function addIntroText() {
-  const introText = document.createElement("p");
-  introText.id = "a11y-speak-intro-text";
-  introText.className = "a11y-speak-intro-text";
-  introText.textContent = __4("Notifications");
-  introText.setAttribute(
-    "style",
-    "position:absolute;margin:-1px;padding:0;height:1px;width:1px;overflow:hidden;clip-path:inset(50%);border:0;word-wrap:normal !important;"
-  );
-  introText.setAttribute("hidden", "");
-  const { body } = document;
-  if (body) {
-    body.appendChild(introText);
-  }
-  return introText;
-}
-
-// ../a11y/build-module/shared/clear.mjs
-function clear() {
-  const regions = document.getElementsByClassName("a11y-speak-region");
-  const introText = document.getElementById("a11y-speak-intro-text");
-  for (let i = 0; i < regions.length; i++) {
-    regions[i].textContent = "";
-  }
-  if (introText) {
-    introText.setAttribute("hidden", "hidden");
-  }
-}
-
-// ../a11y/build-module/shared/filter-message.mjs
-var previousMessage = "";
-function filterMessage(message) {
-  message = message.replace(/<[^<>]+>/g, " ");
-  if (previousMessage === message) {
-    message += "\xA0";
-  }
-  previousMessage = message;
-  return message;
-}
-
-// ../a11y/build-module/shared/index.mjs
-function speak(message, ariaLive) {
-  clear();
-  message = filterMessage(message);
-  const introText = document.getElementById("a11y-speak-intro-text");
-  const containerAssertive = document.getElementById(
-    "a11y-speak-assertive"
-  );
-  const containerPolite = document.getElementById("a11y-speak-polite");
-  if (containerAssertive && ariaLive === "assertive") {
-    containerAssertive.textContent = message;
-  } else if (containerPolite) {
-    containerPolite.textContent = message;
-  }
-  if (introText) {
-    introText.removeAttribute("hidden");
-  }
-}
-
-// ../a11y/build-module/index.mjs
-function setup() {
-  const introText = document.getElementById("a11y-speak-intro-text");
-  const containerAssertive = document.getElementById(
-    "a11y-speak-assertive"
-  );
-  const containerPolite = document.getElementById("a11y-speak-polite");
-  if (introText === null) {
-    addIntroText();
-  }
-  if (containerAssertive === null) {
-    addContainer("assertive");
-  }
-  if (containerPolite === null) {
-    addContainer("polite");
-  }
-}
-domReady(setup);
-
 // ../components/build-module/utils/strings.mjs
 import removeAccents from "remove-accents";
 import { paramCase } from "change-case";
@@ -11716,7 +11716,7 @@ function unlock(object) {
   return lockedData.get(_object[__private]);
 }
 var lockedData = /* @__PURE__ */ new WeakMap();
-var __private = Symbol("Private API ID");
+var __private = /* @__PURE__ */ Symbol("Private API ID");
 
 // ../components/build-module/lock-unlock.mjs
 var {
@@ -13795,27 +13795,14 @@ function PropertiesSection({
   const visibleRegularFieldsCount = regularFields.filter(
     (f) => visibleFieldIds.includes(f.id)
   ).length;
-  let visibleLockedFields = lockedFields.filter(
-    ({ field, isVisibleFlag }) => (
+  const visibleLockedFields = lockedFields.filter(
+    ({ isVisibleFlag }) => (
       // @ts-expect-error
-      isDefined2(field) && (view[isVisibleFlag] ?? true)
+      view[isVisibleFlag] ?? true
     )
   );
   const totalVisibleFields = visibleLockedFields.length + visibleRegularFieldsCount;
-  if (totalVisibleFields === 1) {
-    if (visibleLockedFields.length === 1) {
-      visibleLockedFields = visibleLockedFields.map((locked) => ({
-        ...locked,
-        field: { ...locked.field, enableHiding: false }
-      }));
-    }
-  }
-  const hiddenLockedFields = lockedFields.filter(
-    ({ field, isVisibleFlag }) => (
-      // @ts-expect-error
-      isDefined2(field) && !(view[isVisibleFlag] ?? true)
-    )
-  );
+  const isSingleVisibleLockedField = totalVisibleFields === 1 && visibleLockedFields.length === 1;
   return /* @__PURE__ */ jsxs5(Stack, { direction: "column", className: "dataviews-field-control", children: [
     showLabel && /* @__PURE__ */ jsx42(base_control_default.VisualLabel, { children: __18("Properties") }),
     /* @__PURE__ */ jsx42(
@@ -13824,32 +13811,18 @@ function PropertiesSection({
         direction: "column",
         className: "dataviews-view-config__properties",
         children: /* @__PURE__ */ jsxs5(component_default23, { isBordered: true, isSeparated: true, size: "medium", children: [
-          visibleLockedFields.map(({ field, isVisibleFlag }) => {
-            return /* @__PURE__ */ jsx42(
-              FieldItem,
-              {
-                field,
-                isVisible: true,
-                onToggleVisibility: () => {
-                  onChangeView({
-                    ...view,
-                    [isVisibleFlag]: false
-                  });
-                }
-              },
-              field.id
-            );
-          }),
-          hiddenLockedFields.map(({ field, isVisibleFlag }) => {
+          lockedFields.map(({ field, isVisibleFlag }) => {
+            const isVisible2 = view[isVisibleFlag] ?? true;
+            const fieldToRender = isSingleVisibleLockedField && isVisible2 ? { ...field, enableHiding: false } : field;
             return /* @__PURE__ */ jsx42(
               FieldItem,
               {
-                field,
-                isVisible: false,
+                field: fieldToRender,
+                isVisible: isVisible2,
                 onToggleVisibility: () => {
                   onChangeView({
                     ...view,
-                    [isVisibleFlag]: true
+                    [isVisibleFlag]: !isVisible2
                   });
                 }
               },
@@ -13858,8 +13831,7 @@ function PropertiesSection({
           }),
           regularFields.map((field) => {
             const isVisible2 = visibleFieldIds.includes(field.id);
-            const isLastVisible = totalVisibleFields === 1 && isVisible2;
-            const fieldToRender = isLastVisible ? { ...field, enableHiding: false } : field;
+            const fieldToRender = totalVisibleFields === 1 && isVisible2 ? { ...field, enableHiding: false } : field;
             return /* @__PURE__ */ jsx42(
               FieldItem,
               {
@@ -15298,7 +15270,11 @@ function ViewList(props) {
       {
         id: baseId,
         render: /* @__PURE__ */ jsx47("div", {}),
-        className: clsx32("dataviews-view-list", className2),
+        className: clsx32("dataviews-view-list", className2, {
+          [`has-${view.layout?.density}-density`]: view.layout?.density && ["compact", "comfortable"].includes(
+            view.layout.density
+          )
+        }),
         role: view.infiniteScrollEnabled ? "feed" : "grid",
         activeId: activeCompositeId,
         setActiveId: setActiveCompositeId,
@@ -16741,7 +16717,7 @@ function PreviewSizePicker() {
   );
 }
 
-// src/components/dataviews-layouts/table/density-picker.tsx
+// src/components/dataviews-layouts/utils/density-picker.tsx
 import { __ as __30, _x as _x2 } from "@wordpress/i18n";
 import { jsx as jsx57, jsxs as jsxs17 } from "react/jsx-runtime";
 function DensityPicker() {
@@ -16816,7 +16792,8 @@ var VIEW_LAYOUTS = [
     type: LAYOUT_LIST,
     label: __31("List"),
     component: ViewList,
-    icon: isRTL10() ? format_list_bullets_rtl_default : format_list_bullets_default
+    icon: isRTL10() ? format_list_bullets_rtl_default : format_list_bullets_default,
+    viewConfigOptions: DensityPicker
   },
   {
     type: LAYOUT_ACTIVITY,
@@ -17198,7 +17175,7 @@ function SearchWidget(props) {
 }
 
 // src/components/dataviews-filters/input-widget.tsx
-import fastDeepEqual2 from "fast-deep-equal/es6";
+import fastDeepEqual2 from "fast-deep-equal/es6/index.js";
 import { jsx as jsx59 } from "react/jsx-runtime";
 function InputWidget({
   filter,
@@ -22203,7 +22180,7 @@ import { __ as __55 } from "@wordpress/i18n";
 
 // src/hooks/use-form-validity.ts
 import deepMerge from "deepmerge";
-import fastDeepEqual3 from "fast-deep-equal/es6";
+import fastDeepEqual3 from "fast-deep-equal/es6/index.js";
 import { __ as __54 } from "@wordpress/i18n";
 function isFormValid(formValidity) {
   if (!formValidity) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dataviews",
-	"version": "11.1.1-next.76cff8c98.0",
+	"version": "11.2.1-next.06ee73755.0",
 	"description": "DataViews is a component that provides an API to render datasets using different types of layouts (table, grid, list, etc.).",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -53,23 +53,23 @@
 	"sideEffects": false,
 	"dependencies": {
 		"@ariakit/react": "^0.4.15",
-		"@wordpress/base-styles": "^6.12.2-next.76cff8c98.0",
-		"@wordpress/components": "^31.0.1-next.76cff8c98.0",
-		"@wordpress/compose": "^7.36.1-next.76cff8c98.0",
-		"@wordpress/data": "^10.36.1-next.76cff8c98.0",
-		"@wordpress/date": "^5.36.2-next.76cff8c98.0",
-		"@wordpress/deprecated": "^4.36.1-next.76cff8c98.0",
-		"@wordpress/dom": "^4.36.1-next.76cff8c98.0",
-		"@wordpress/element": "^6.36.1-next.76cff8c98.0",
-		"@wordpress/i18n": "^6.9.1-next.76cff8c98.0",
-		"@wordpress/icons": "^11.3.1-next.76cff8c98.0",
-		"@wordpress/keycodes": "^4.36.1-next.76cff8c98.0",
-		"@wordpress/primitives": "^4.36.1-next.76cff8c98.0",
-		"@wordpress/private-apis": "^1.36.1-next.76cff8c98.0",
-		"@wordpress/theme": "^0.4.1-next.76cff8c98.0",
-		"@wordpress/ui": "^0.4.1-next.76cff8c98.0",
-		"@wordpress/url": "^4.36.1-next.76cff8c98.0",
-		"@wordpress/warning": "^3.36.1-next.76cff8c98.0",
+		"@wordpress/base-styles": "^6.13.2-next.06ee73755.0",
+		"@wordpress/components": "^32.0.1-next.06ee73755.0",
+		"@wordpress/compose": "^7.37.1-next.06ee73755.0",
+		"@wordpress/data": "^10.37.1-next.06ee73755.0",
+		"@wordpress/date": "^5.37.2-next.06ee73755.0",
+		"@wordpress/deprecated": "^4.37.1-next.06ee73755.0",
+		"@wordpress/dom": "^4.37.1-next.06ee73755.0",
+		"@wordpress/element": "^6.37.1-next.06ee73755.0",
+		"@wordpress/i18n": "^6.10.1-next.06ee73755.0",
+		"@wordpress/icons": "^11.4.1-next.06ee73755.0",
+		"@wordpress/keycodes": "^4.38.1-next.06ee73755.0",
+		"@wordpress/primitives": "^4.37.1-next.06ee73755.0",
+		"@wordpress/private-apis": "^1.37.1-next.06ee73755.0",
+		"@wordpress/theme": "^0.5.1-next.06ee73755.0",
+		"@wordpress/ui": "^0.5.1-next.06ee73755.0",
+		"@wordpress/url": "^4.37.1-next.06ee73755.0",
+		"@wordpress/warning": "^3.37.1-next.06ee73755.0",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
 		"date-fns": "^4.1.0",
@@ -78,7 +78,10 @@
 		"remove-accents": "^0.5.0"
 	},
 	"devDependencies": {
-		"@ariakit/test": "^0.4.7"
+		"@testing-library/jest-dom": "^6.6.3",
+		"@types/jest": "^29.5.14",
+		"esbuild": "^0.27.2",
+		"storybook": "^9.1.17"
 	},
 	"peerDependencies": {
 		"react": "^18.0.0",
@@ -90,5 +93,5 @@
 	"scripts": {
 		"build:wp": "node build.cjs"
 	},
-	"gitHead": "368727f14b858e75179e140967c2d9ec965c8790"
+	"gitHead": "fd315436f44683a993d5f053789b5279d95b2872"
 }

package/src/components/dataviews-filters/input-widget.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import fastDeepEqual from 'fast-deep-equal/es6';
+import fastDeepEqual from 'fast-deep-equal/es6/index.js';
 
 /**
  * WordPress dependencies

package/src/components/dataviews-layouts/index.ts

@@ -28,7 +28,7 @@ import {
 	LAYOUT_PICKER_TABLE,
 } from '../../constants';
 import PreviewSizePicker from './utils/preview-size-picker';
-import DensityPicker from './table/density-picker';
+import DensityPicker from './utils/density-picker';
 
 export const VIEW_LAYOUTS = [
 	{
@@ -50,6 +50,7 @@ export const VIEW_LAYOUTS = [
 		label: __( 'List' ),
 		component: ViewList,
 		icon: isRTL() ? formatListBulletsRTL : formatListBullets,
+		viewConfigOptions: DensityPicker,
 	},
 	{
 		type: LAYOUT_ACTIVITY,

package/src/components/dataviews-layouts/list/index.tsx

@@ -609,7 +609,13 @@ export default function ViewList< Item >( props: ViewListProps< Item > ) {
 			<Composite
 				id={ baseId }
 				render={ <div /> }
-				className={ clsx( 'dataviews-view-list', className ) }
+				className={ clsx( 'dataviews-view-list', className, {
+					[ `has-${ view.layout?.density }-density` ]:
+						view.layout?.density &&
+						[ 'compact', 'comfortable' ].includes(
+							view.layout.density
+						),
+				} ) }
 				role={ view.infiniteScrollEnabled ? 'feed' : 'grid' }
 				activeId={ activeCompositeId }
 				setActiveId={ setActiveCompositeId }

package/src/components/dataviews-layouts/list/style.scss

@@ -205,6 +205,71 @@ div.dataviews-view-list {
 	& + .dataviews-pagination {
 		justify-content: space-between;
 	}
+
+	// Density style overrides.
+	&.has-compact-density {
+		div[role="row"] {
+			.dataviews-view-list__item-wrapper {
+				padding: $grid-unit-10 $grid-unit-30;
+			}
+
+			.dataviews-view-list__title-field {
+				min-height: $grid-unit-20;
+				line-height: $grid-unit-20;
+			}
+
+			.dataviews-view-list__media-wrapper {
+				width: $grid-unit-05 * 8;
+				height: $grid-unit-05 * 8;
+			}
+
+			.dataviews-view-list__field-wrapper {
+				min-height: $grid-unit-05 * 8;
+			}
+
+			.dataviews-view-list__fields {
+				gap: $grid-unit-10;
+				row-gap: $grid-unit-05;
+
+				.dataviews-view-list__field-value {
+					min-height: $grid-unit-20;
+					line-height: $grid-unit-05 * 4;
+				}
+			}
+		}
+	}
+
+	&.has-comfortable-density {
+		div[role="row"] {
+			.dataviews-view-list__item-wrapper {
+				padding: $grid-unit-30 $grid-unit-30;
+			}
+
+			.dataviews-view-list__title-field {
+				min-height: $grid-unit-40;
+				line-height: $grid-unit-40;
+			}
+
+			.dataviews-view-list__media-wrapper {
+				width: $grid-unit-05 * 16;
+				height: $grid-unit-05 * 16;
+			}
+
+			.dataviews-view-list__field-wrapper {
+				min-height: $grid-unit-05 * 16;
+			}
+
+			.dataviews-view-list__fields {
+				gap: $grid-unit-20;
+				row-gap: $grid-unit-10;
+
+				.dataviews-view-list__field-value {
+					min-height: $grid-unit-40;
+					line-height: $grid-unit-05 * 6;
+				}
+			}
+		}
+	}
 }
 
 .dataviews-view-list__group-header {

package/src/components/dataviews-layouts/{table → utils}/density-picker.tsx

@@ -12,11 +12,11 @@ import { useContext } from '@wordpress/element';
  * Internal dependencies
  */
 import DataViewsContext from '../../dataviews-context';
-import type { ViewTable, Density } from '../../../types';
+import type { ViewTable, ViewList, Density } from '../../../types';
 
 export default function DensityPicker() {
 	const context = useContext( DataViewsContext );
-	const view = context.view as ViewTable;
+	const view = context.view as ViewTable | ViewList;
 	return (
 		<ToggleGroupControl
 			size="__unstable-large"