newspack-components 4.5.0 → 4.6.0

package/dist/cjs/tabbed-navigation/style.scss

@@ -2,81 +2,101 @@
  * Tabbed Navigation
  */
 
+@use "../../../colors/colors.module" as colors;
 @use "~@wordpress/base-styles/colors" as wp-colors;
+@use "~@wordpress/base-styles/variables" as wp-vars;
+
+// The Tabs.Root wrapper spans the tab bar and the tab panels so the panels can
+// contain the routed content; it plays no layout role of its own.
+.newspack-tabbed-navigation__root {
+	display: contents;
+}
 
 .newspack-tabbed-navigation {
-	background: white;
+	background: wp-colors.$white;
+	border-bottom: var( --wpds-border-width-xs, #{wp-vars.$border-width} ) solid var( --wpds-color-stroke-surface-neutral-weak, #{wp-colors.$gray-100} );
 	width: 100%;
 
-	@media only screen and ( min-width: 600px ) {
-		position: sticky;
-		top: 46px;
-		z-index: 3;
-	}
-
-	@media only screen and ( min-width: 783px ) {
-		top: 32px;
-	}
+	/* stylelint-disable-next-line plugin-wpds/no-setting-wpds-custom-properties -- deliberate Newspack brand override of the indicator token. */
+	--wpds-color-stroke-interactive-neutral-strong: #{colors.$primary-600};
 
-	ul {
-		box-shadow: 0 -1px 0 inset wp-colors.$gray-300;
-		display: flex;
-		flex-wrap: wrap;
-		margin: 0;
-	}
+	a[role="tab"] {
+		text-decoration: none;
 
-	li {
-		margin-bottom: 0;
-		width: 100%;
+		// wp-admin's unlayered `a { color }` beats every rule inside the design
+		// system's @layer wp-ui, so anchor tabs need their colors restated here:
+		// gray-900 for enabled tabs, and the DS disabled token for disabled ones.
+		&:not([data-disabled]):not([aria-disabled="true"]) {
+			color: wp-colors.$gray-900;
 
-		@media screen and ( min-width: 600px ) {
-			width: auto;
+			&:hover,
+			&:active,
+			&[aria-selected="true"] {
+				color: wp-colors.$gray-900;
+			}
 		}
 
-		a {
-			align-items: center;
-			color: wp-colors.$gray-900;
-			display: flex;
-			font-weight: bold;
-			height: 48px;
+		// wp-admin's common.css and the wizard shell both decorate a:focus with a
+		// box-shadow ring, a 2px border-radius, and a transparent outline. Reset
+		// all three so the component's own :focus-visible ring (an inset outline
+		// on its ::after, shipped by @wordpress/ui) is the only focus treatment.
+		&:focus {
+			border-radius: 0;
+			box-shadow: none;
 			outline: none;
-			padding: 12px 15px;
-			text-decoration: none;
+		}
 
-			@media screen and ( min-width: 600px ) {
-				border-bottom: 4px solid transparent;
-				padding-bottom: 8px;
-			}
+		// Square the component's focus ring corners.
+		&::after {
+			border-radius: 0;
+		}
 
-			&:active,
-			&:focus,
-			&:hover {
-				color: var(--wp-admin-theme-color);
-			}
+		&[data-disabled],
+		&[aria-disabled="true"] {
+			color: var( --wpds-color-foreground-interactive-neutral-disabled, #{wp-colors.$gray-600} );
+			pointer-events: none;
+		}
+	}
 
-			&:focus-visible {
-				outline: 2px solid var(--wp-admin-theme-color);
-				outline-offset: -2px;
-			}
+	// Link-driven variant: plain navigation styled to match the tabs widget.
+	&--links {
+		align-items: stretch;
+		display: flex;
+		overflow-x: auto;
+	}
 
-			&.selected {
-				box-shadow: inset 0 0 0 2px white, inset 0 0 0 4px var(--wp-admin-theme-color);
+	.newspack-tabbed-navigation__link {
+		align-items: center;
+		color: wp-colors.$gray-900;
+		display: flex;
+		font-size: var( --wpds-typography-font-size-md, #{wp-vars.$default-font-size} );
+		height: wp-vars.$grid-unit-60; // Matches @wordpress/ui's horizontal tab height.
+		line-height: 1.2;
+		padding-inline: var( --wpds-dimension-padding-lg, #{wp-vars.$grid-unit-20} );
+		text-decoration: none;
+		white-space: nowrap;
 
-				@media screen and ( min-width: 600px ) {
-					border-color: var(--wp-admin-theme-color);
-					box-shadow: none;
-				}
-			}
+		&:hover,
+		&:active,
+		&:focus {
+			color: wp-colors.$gray-900;
+		}
 
-			&.disabled {
-				cursor: not-allowed;
-				opacity: 0.3;
-				pointer-events: none;
+		// Mirror the tabs widget's focus ring (an inset outline) with plain
+		// outline + offset, replacing wp-admin's box-shadow focus decoration.
+		&:focus {
+			border-radius: 0;
+			box-shadow: none;
+			outline: none;
+		}
 
-				&:hover {
-					color: inherit;
-				}
-			}
+		&:focus-visible {
+			outline: var( --wpds-border-width-focus, var( --wp-admin-border-width-focus, #{wp-vars.$border-width-focus-fallback} ) ) solid var( --wpds-color-stroke-focus, var( --wp-admin-theme-color ) );
+			outline-offset: calc( var( --wpds-dimension-padding-md, #{wp-vars.$grid-unit-15} ) * -1 );
+		}
+
+		&[aria-current="page"] {
+			box-shadow: inset 0 calc( var( --wpds-border-width-focus, #{wp-vars.$border-width-focus-fallback} ) * -1 ) 0 var( --wpds-color-stroke-interactive-neutral-strong, #{colors.$primary-600} );
 		}
 	}
 }

package/dist/cjs/with-wizard/index.js

@@ -14,7 +14,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _element = require("@wordpress/element");
 var _i18n = require("@wordpress/i18n");
 var _apiFetch = _interopRequireDefault(require("@wordpress/api-fetch"));
-var _icons = require("@wordpress/icons");
+var _components = require("@wordpress/components");
 var _ = require("../");
 var _router = _interopRequireDefault(require("../proxied-imports/router"));
 var _footer = _interopRequireDefault(require("../footer"));
@@ -25,7 +25,8 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /**
  * WordPress dependencies.
- */ /**
+ */ // eslint-disable-line @wordpress/no-unsafe-wp-apis
+/**
  * Internal dependencies.
  */
 var Redirect = _router["default"].Redirect,
@@ -115,10 +116,11 @@ function withWizard(WrappedComponent, requiredPlugins) {
             noticeText: message,
             isError: true,
             rawHTML: true
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Card, {
-            buttonsCard: true,
-            noBorder: true,
-            className: "justify-end",
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalHStack, {
+            justify: "flex-end",
+            spacing: 4,
+            wrap: true,
+            className: "newspack-modal__footer",
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
               isPrimary: true,
               href: fallbackURL,
@@ -230,43 +232,29 @@ function withWizard(WrappedComponent, requiredPlugins) {
             to: "/"
           });
         }
+        var headerText = requiredPlugins.length > 1 ? (0, _i18n.__)('Required plugins', 'newspack-plugin') : (0, _i18n.__)('Required plugin', 'newspack-plugin');
+        var content = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "newspack-wizard newspack-wizard__content",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.PluginInstaller, {
+            plugins: requiredPlugins,
+            onStatus: function onStatus(status) {
+              return _this.pluginInstallationStatus(status);
+            }
+          })
+        });
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(Route, {
           path: "/",
           render: function render() {
-            return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_element.Fragment, {
-              children: [complete !== null && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-                className: "newspack-wizard__header",
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-                  className: "newspack-wizard__header__inner",
-                  children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-                    className: "newspack-wizard__title",
-                    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
-                      isLink: true,
-                      href: newspack_urls.dashboard,
-                      label: (0, _i18n.__)('Return to Dashboard', 'newspack-plugin'),
-                      showTooltip: true,
-                      icon: _icons.category,
-                      iconSize: 36,
-                      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.NewspackIcon, {
-                        size: 36
-                      })
-                    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-                      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
-                        children: requiredPlugins.length > 1 ? (0, _i18n.__)('Required plugins', 'newspack-plugin') : (0, _i18n.__)('Required plugin', 'newspack-plugin')
-                      })
-                    })]
-                  })
-                })
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-                className: "newspack-wizard newspack-wizard__content",
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.PluginInstaller, {
-                  plugins: requiredPlugins,
-                  onStatus: function onStatus(status) {
-                    return _this.pluginInstallationStatus(status);
-                  }
-                })
-              })]
-            });
+            return (
+              // While `complete` is still null the requirements are being
+              // determined; render content without a header (matches prior behavior).
+              complete === null ? content : /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Page, {
+                breadcrumbItems: [{
+                  label: headerText
+                }],
+                children: content
+              })
+            );
           }
         });
       });
@@ -284,7 +272,7 @@ function withWizard(WrappedComponent, requiredPlugins) {
       (0, _defineProperty2["default"])(_this, "confirmAction", function (options) {
         var modalOptions = _objectSpread({
           title: null,
-          message: (0, _i18n.__)('Are you sure?', 'newpack-plugin'),
+          message: (0, _i18n.__)('Are you sure?', 'newspack-plugin'),
           confirmText: (0, _i18n.__)('OK', 'newspack-plugin'),
           cancelText: (0, _i18n.__)('Cancel', 'newspack-plugin'),
           callback: null
@@ -320,10 +308,11 @@ function withWizard(WrappedComponent, requiredPlugins) {
           },
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
             children: message
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Card, {
-            buttonsCard: true,
-            noBorder: true,
-            className: "justify-end",
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
+            justify: "flex-end",
+            spacing: 4,
+            wrap: true,
+            className: "newspack-modal__footer",
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
               variant: "secondary",
               onClick: function onClick() {

package/dist/cjs/with-wizard-screen/index.js

@@ -6,26 +6,51 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = withWizardScreen;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _i18n = require("@wordpress/i18n");
-var _icons = require("@wordpress/icons");
+var _element = require("@wordpress/element");
 var _ = require("../");
+var _breadcrumbsSelect = require("../wizard/breadcrumbs-select");
 var _buttonProps = require("../button-props");
+var _router = _interopRequireDefault(require("../proxied-imports/router"));
 require("./style.scss");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _jsxRuntime = require("react/jsx-runtime");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /**
- * WordPress dependencies.
+ * WordPress dependencies
  */ /**
  * Internal dependencies
- */ /**
+ */
+var useLocation = _router["default"].useLocation;
+
+/**
  * External dependencies
- */ /**
+ */
+
+/**
+ * Derives the active-tab breadcrumb trail from the current route. Only rendered
+ * for tabbed wizards, which always mount inside a Router, so calling useLocation
+ * here keeps router-free consumers (e.g. standalone multibranded) from crashing.
+ *
+ * @param {Object}   props          Component props.
+ * @param {Array}    props.sections Tabbed navigation sections.
+ * @param {Function} props.render   Renders the page given the breadcrumb trail.
+ * @return {JSX.Element} The rendered page.
+ */
+var RouteBreadcrumbs = function RouteBreadcrumbs(_ref) {
+  var sections = _ref.sections,
+    render = _ref.render;
+  var _useLocation = useLocation(),
+    pathname = _useLocation.pathname;
+  return render((0, _breadcrumbsSelect.activeBreadcrumbs)(sections, pathname));
+};
+
+/**
  * Higher-Order Component to provide plugin management and error handling to Newspack Wizards.
  */
 function withWizardScreen(WrappedComponent) {
-  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-    hidePrimaryButton = _ref.hidePrimaryButton;
+  var _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    hidePrimaryButton = _ref2.hidePrimaryButton,
+    hideHeader = _ref2.hideHeader;
   var WrappedWithWizardScreen = function WrappedWithWizardScreen(props) {
     var className = props.className,
       buttonText = props.buttonText,
@@ -34,6 +59,8 @@ function withWizardScreen(WrappedComponent) {
       headerText = props.headerText,
       subHeaderText = props.subHeaderText,
       tabbedNavigation = props.tabbedNavigation,
+      breadcrumbItems = props.breadcrumbItems,
+      headerActions = props.headerActions,
       secondaryButtonText = props.secondaryButtonText,
       secondaryButtonAction = props.secondaryButtonAction,
       renderAboveContent = props.renderAboveContent,
@@ -59,40 +86,14 @@ function withWizardScreen(WrappedComponent) {
         children: buttonText
       }, retrievedButtonProps), overridingProps));
     };
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [newspack_aux_data.is_debug_mode && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Notice, {
-        debugMode: true
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "newspack-wizard__header",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "newspack-wizard__header__inner",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            className: "newspack-wizard__title",
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
-              isLink: true,
-              href: newspack_urls.dashboard,
-              label: (0, _i18n.__)('Return to Dashboard', 'newspack-plugin'),
-              showTooltip: true,
-              icon: _icons.category,
-              iconSize: 36,
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.NewspackIcon, {
-                size: 36
-              })
-            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-              children: [headerText && /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
-                children: headerText
-              }), subHeaderText && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                children: subHeaderText
-              })]
-            })]
-          })
-        })
-      }), tabbedNavigation && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.TabbedNavigation, {
-        disableUpcoming: disableUpcomingInTabbedNavigation,
-        items: tabbedNavigation.filter(function (item) {
-          return !item.isHiddenInNav;
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.HandoffMessage, {}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    var tabbedNavigationRegion = tabbedNavigation && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.TabbedNavigation, {
+      disableUpcoming: disableUpcomingInTabbedNavigation,
+      items: tabbedNavigation.filter(function (item) {
+        return !item.isHiddenInNav;
+      })
+    });
+    var content = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.HandoffMessage, {}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: (0, _classnames["default"])('newspack-wizard newspack-wizard__content', className),
         children: [typeof renderAboveContent === 'function' ? renderAboveContent() : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(WrappedComponent, _objectSpread(_objectSpread({}, props), {}, {
           renderPrimaryButton: renderPrimaryButton
@@ -106,6 +107,46 @@ function withWizardScreen(WrappedComponent) {
         })]
       })]
     });
+    var renderPage = function renderPage(crumbs) {
+      var pageBreadcrumbs = crumbs !== null && crumbs !== void 0 ? crumbs : [];
+      if (!pageBreadcrumbs.length && headerText) {
+        pageBreadcrumbs = [{
+          label: headerText
+        }];
+      }
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [newspack_aux_data.is_debug_mode && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Notice, {
+          debugMode: true
+        }), hideHeader ?
+        /*#__PURE__*/
+        // Without the Page shell the tabs still own the content: it
+        // renders inside the active tab's panel.
+        (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+          children: tabbedNavigationRegion ? (0, _element.cloneElement)(tabbedNavigationRegion, {
+            content: content
+          }) : content
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Page, {
+          breadcrumbItems: pageBreadcrumbs,
+          subTitle: subHeaderText,
+          actions: headerActions,
+          tabbedNavigation: tabbedNavigationRegion,
+          children: content
+        })]
+      });
+    };
+    if (hideHeader) {
+      return renderPage();
+    }
+    if (breadcrumbItems) {
+      return renderPage(breadcrumbItems);
+    }
+    if (tabbedNavigation) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(RouteBreadcrumbs, {
+        sections: tabbedNavigation,
+        render: renderPage
+      });
+    }
+    return renderPage();
   };
   return WrappedWithWizardScreen;
 }

package/dist/cjs/with-wizard-screen/index.test.js

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _react = require("@testing-library/react");
+var _reactRouterDom = require("react-router-dom");
+var _ = _interopRequireDefault(require("./"));
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * External dependencies.
+ */
+
+/**
+ * Internal dependencies.
+ */
+
+global.newspack_aux_data = {
+  is_debug_mode: false
+};
+describe('withWizardScreen', function () {
+  it('falls back to a single headerText breadcrumb when no breadcrumbItems are provided', function () {
+    var WrappedComponent = function WrappedComponent() {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: "Body content"
+      });
+    };
+    var ScreenWithHeader = (0, _["default"])(WrappedComponent);
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.HashRouter, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ScreenWithHeader, {
+        headerText: "Brands"
+      })
+    }));
+    expect(_react.screen.getByRole('heading', {
+      level: 1
+    })).toHaveTextContent('Brands');
+  });
+  it('renders without a Router when no tabbed navigation is provided', function () {
+    var WrappedComponent = function WrappedComponent() {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: "Body content"
+      });
+    };
+    var ScreenWithHeader = (0, _["default"])(WrappedComponent);
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(ScreenWithHeader, {
+      headerText: "Brands"
+    }));
+    expect(_react.screen.getByRole('heading', {
+      level: 1
+    })).toHaveTextContent('Brands');
+  });
+});

package/dist/cjs/with-wizard-screen/style.scss

@@ -45,129 +45,12 @@
 		}
 	}
 
-	&__header {
-		align-items: center;
-		background: white;
-		border-bottom: 1px solid wp-colors.$gray-300;
-		display: flex;
-		.newspack-wizard__fixed-header & {
-			position: sticky;
-			top: 0;
-			width: 100%;
-			z-index: 1000;
-			.admin-bar & {
-				@media only screen and ( min-width: 601px ) {
-					top: 46px;
-				}
-				@media only screen and ( min-width: 782px ) {
-					top: 32px;
-				}
-			}
-		}
-		&__inner {
-			flex: 1 1 100%;
-		}
-		&__actions {
-			align-items: center;
-			display: flex;
-			gap: 8px;
-			justify-content: flex-end;
-			padding: 0 24px 0 0;
-			> .newspack-wizard__header__actions__main {
-				display: none;
-			}
-			@media only screen and ( min-width: 782px ) {
-				flex: 1 1 auto;
-				> .newspack-wizard__header__actions__main {
-					display: flex;
-				}
-				&__more {
-					&--primary-only,
-					.newspack-wizard__header__actions__more__main {
-						display: none;
-					}
-				}
-			}
-		}
-	}
-
 	&__main {
-		overflow-x: hidden;
+		overflow: hidden;
 		padding-bottom: 1px; /* Prevents borders from being cut off */
 	}
 
 
-	&__title {
-		align-items: center;
-		display: flex;
-
-		h2 {
-			margin: 0;
-			padding: 0;
-		}
-
-		> div {
-			align-items: baseline;
-			display: flex;
-			padding: 0 24px;
-
-			> span {
-				color: wp-colors.$gray-700;
-				display: none;
-				margin-left: 8px;
-
-				@media screen and ( min-width: 744px ) {
-					display: block;
-				}
-			}
-		}
-
-		svg {
-			fill: white;
-			margin: 0 !important;
-
-			&.newspack-icon {
-				flex: 0 0 36px;
-				margin-bottom: -1px !important;
-			}
-
-			&:not(.newspack-icon) {
-				background: var(--wp-admin-theme-color);
-				left: 50%;
-				margin: -28px 0 0 -28px !important;
-				opacity: 0;
-				padding: 10px;
-				position: absolute;
-				top: 50%;
-				transition: opacity 125ms ease-in-out;
-			}
-		}
-
-		.components-button.has-icon {
-			padding: 0;
-			position: relative;
-
-			&:hover {
-				svg {
-					opacity: 1;
-				}
-			}
-
-			&:focus-visible {
-				outline: none !important;
-
-				&::before {
-					border: 2px solid white;
-					border-radius: 2px;
-					content: "";
-					display: block;
-					inset: 6px 6px 5px;
-					position: absolute;
-				}
-			}
-		}
-	}
-
 	&__section-header {
 		margin: 0 auto 32px;
 		max-width: calc(calc(var(--newspack-wizard-section-space) * 2) + var(--newspack-wizard-section-width));
@@ -182,6 +65,7 @@
 
 	&__content {
 		margin: 0 auto;
+		width: 100%;
 		max-width: calc(calc(var(--newspack-wizard-section-space) * 2) + var(--newspack-wizard-section-width));
 		padding: calc(var(--newspack-wizard-section-space) * 2) var(--newspack-wizard-section-space) 0;
 
@@ -225,3 +109,16 @@
 		margin: 0;
 	}
 }
+
+/**
+ * Wizard header overflow ("More") menu, rendered by the Wizard component into
+ * admin-ui's Page actions slot. Hide the toggle when there are no overflow
+ * actions, and hide the duplicated primary items inside the menu on wide
+ * viewports.
+ */
+@media only screen and ( min-width: 782px ) {
+	.newspack-wizard__actions__more--primary-only,
+	.newspack-wizard__actions__more .newspack-wizard__actions__more__main {
+		display: none;
+	}
+}