Plugins redesign: Add new copy and redesign styling for the details view #107463

claudiucelfilip · 2025-12-03T12:44:11Z

Proposed Changes

apply the full width layout with centered section content
adds the redesign styling to the page items if the marketplace-restyle flag is enabled
wrap related plugins in the dotPager carousel
move common CSS from the plugins-browser to the root plugins stylesheet

Why are these changes being made?

the changes are needed to match the new design of the plugins section

Testing Instructions

Go to /plugins/wordpress-seo (with and without the ?flags=marketplace-redesign param)

Before (without flag)	After (with flag)

Pre-merge Checklist

Has the general commit checklist been followed? (PCYsg-hS-p2)
Have you written new tests for your changes?
Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
Have you checked for TypeScript, React or other console errors?
Have you tested accessibility for your changes? Ensure the feature remains usable with various user agents (e.g., browsers), interfaces (e.g., keyboard navigation), and assistive technologies (e.g., screen readers) (PCYsg-S3g-p2).
Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
- For UI changes, have we tested the change in various languages (for example, ES, PT, FR, or DE)? The length of text and words vary significantly between languages.
For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

matticbot · 2025-12-03T12:44:17Z

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-163887

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-163887&env=jetpack

Automattic for Agencies live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-163887&env=a8c-for-agencies

Dashboard live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-163887&env=dashboard

matticbot · 2025-12-03T12:53:55Z

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Sections (~415 bytes added 📈 [gzipped])

name                             parsed_size           gzip_size
plugins                              +3005 B  (+0.1%)     +665 B  (+0.1%)
jetpack-cloud-plugin-management      +3005 B  (+0.1%)     +665 B  (+0.1%)
a8c-for-agencies-plugins             +3005 B  (+0.1%)     +665 B  (+0.1%)
sites-dashboard                        +13 B  (+0.0%)      +11 B  (+0.0%)
site-settings                          +13 B  (+0.0%)       +7 B  (+0.0%)
site-performance                       +13 B  (+0.0%)       +2 B  (+0.0%)
site-monitoring                        +13 B  (+0.0%)      +16 B  (+0.0%)
plans                                  +13 B  (+0.0%)      +13 B  (+0.0%)
overview                               +13 B  (+0.0%)      +11 B  (+0.0%)
domains                                +13 B  (+0.0%)      +11 B  (+0.0%)
a8c-for-agencies-sites                 +13 B  (+0.0%)       -1 B  (-0.0%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

Copilot

Pull request overview

This PR implements styling redesign changes for the plugin details page as part of the marketplace redesign initiative. The changes are conditionally applied when the marketplace-redesign feature flag is enabled, ensuring backward compatibility.

Key Changes:

Added full-width layout support with new styling for plugin details page components
Implemented a carousel-based display for related plugins with responsive breakpoints
Restructured review cards UI with updated spacing and container wrappers
Consolidated shared marketplace footer styles into a common location

Reviewed changes

Copilot reviewed 15 out of 15 changed files in this pull request and generated 17 comments.

Show a summary per file

File	Description
client/my-sites/plugins/style.scss	Added full-width section styles, consolidated marketplace footer styles, and updated navigation/layout padding
client/my-sites/plugins/related-plugins/style.scss	Added carousel-specific styles and responsive grid layouts for related plugins
client/my-sites/plugins/related-plugins/index.tsx	Implemented carousel functionality with DotPager, chunking logic, and conditional rendering
client/my-sites/plugins/plugins-browser/style.scss	Updated search header padding and removed duplicate marketplace footer styles
client/my-sites/plugins/plugins-browser/index.jsx	Updated class name reference for marketplace footer
client/my-sites/plugins/plugin-details.jsx	Restructured layout with FullWidthSection wrappers and fixed typo in error message
client/my-sites/plugins/plugin-details-sidebar/style.scss	Added text-transform for title in full-width layout
client/my-sites/plugins/plugin-details-header/style.scss	Updated header sizing, icon dimensions, and rating display styles
client/my-sites/plugins/plugin-details-header/index.jsx	Added Rating component integration and conditional rendering based on feature flag
client/my-sites/plugins/plugin-details-CTA/style.scss	Updated font sizes for full-width section
client/my-sites/plugins/education-footer/index.tsx	Hidden decorative element in full-width layout
client/my-sites/marketplace/components/reviews-cards/*.tsx	Wrapped components in FullWidthSection and updated card structure
client/components/rating/style.scss	Added full-width section color overrides for star ratings

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

client/my-sites/plugins/style.scss

client/my-sites/plugins/plugin-details.jsx

client/my-sites/plugins/style.scss

Copilot · 2025-12-04T14:22:39Z

client/my-sites/plugins/style.scss

+body .is-section-plugins:has(.plugins-browser.is-full-width-layout.is-logged-out) .layout__content{
+	padding: 0;
+}
+body .is-section-plugins:has(.is-plugin-details.is-full-width-layout) .layout__content{


This selector also appears to have the same issue: body .is-section-plugins:has(...) should likely be body.is-section-plugins:has(...) for proper targeting.

Suggested change

body .is-section-plugins:has(.plugins-browser.is-full-width-layout.is-logged-out) .layout__content{

padding: 0;

}

body .is-section-plugins:has(.is-plugin-details.is-full-width-layout) .layout__content{

body.is-section-plugins:has(.plugins-browser.is-full-width-layout.is-logged-out) .layout__content{

padding: 0;

}

body.is-section-plugins:has(.is-plugin-details.is-full-width-layout) .layout__content{

client/my-sites/plugins/plugin-details-header/style.scss

Copilot · 2025-12-04T14:22:42Z

client/my-sites/plugins/plugin-details-header/style.scss

+	gap: 8px;
+
+	.rating .gridicon {
+		fill: #ffb514;


The color value #ffb514 is hardcoded and duplicated (also in rating/style.scss line 24 as #FFB514). These should reference the same shared variable for consistency. Note the inconsistent casing between the two occurrences.

client/my-sites/plugins/plugin-details-header/style.scss

Copilot · 2025-12-04T14:22:43Z

client/my-sites/plugins/plugin-details-header/index.jsx

+									<>
+										<div>{ `${ formatPluginRating( rating, true ) }/5` }</div>
+									</>


Unnecessary empty fragment. The fragment <>...</> on lines 154-156 contains only a single <div>, so the fragment wrapper is redundant and can be removed.

Suggested change

<>

<div>{ `${ formatPluginRating( rating, true ) }/5` }</div>

</>

<div>{ `${ formatPluginRating( rating, true ) }/5` }</div>

client/components/rating/style.scss

client/my-sites/plugins/style.scss

Copilot

Pull request overview

Copilot reviewed 16 out of 16 changed files in this pull request and generated 2 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2025-12-04T14:44:42Z

client/my-sites/plugins/style.scss

 body.is-section-plugins .is-logged-in .navigation-header {
 	padding-block: 16px;
+
+	&.full-width-section & {


Invalid CSS selector: &.full-width-section & { has a redundant trailing &. This should likely be either &.full-width-section { or .full-width-section & { depending on the intended selector hierarchy.

Suggested change

&.full-width-section & {

&.full-width-section {

Copilot · 2025-12-04T14:44:42Z

client/components/rating/style.scss

@@ -1,3 +1,5 @@
+$rating-star-color: #ffb514;


The variable $rating-star-color is defined in both this file and in client/my-sites/plugins/_variables.scss (line 2). This creates duplicate definitions with the same value. Consider importing the variable from _variables.scss or centralizing it in one location to avoid maintenance issues.

Suggested change

$rating-star-color: #ffb514;

@import '../../my-sites/plugins/variables';

Copilot

Pull request overview

Copilot reviewed 16 out of 16 changed files in this pull request and generated 13 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2025-12-04T15:08:54Z

client/my-sites/plugins/related-plugins/index.tsx

+	let carouselPageSize = 6;
+	if ( ! isLargeOrAbove ) {
+		carouselPageSize = 2;
+	} else if ( ! isWideOrAbove ) {
+		carouselPageSize = 4;
+	}


These magic numbers (2, 4, 6) representing carousel page sizes should be extracted to named constants with descriptive names. Consider:

const CAROUSEL_PAGE_SIZE_MOBILE = 2; const CAROUSEL_PAGE_SIZE_MEDIUM = 4; const CAROUSEL_PAGE_SIZE_WIDE = 6;

This improves code readability and makes it easier to adjust these values in the future.

Copilot · 2025-12-04T15:08:54Z

client/my-sites/plugins/plugin-details-header/style.scss

+	}
+}
+
+


There's an extra blank line here that should be removed to maintain consistent spacing in the stylesheet.

Suggested change

Copilot · 2025-12-04T15:08:54Z

client/my-sites/plugins/style.scss

+body.is-section-plugins:has(.is-full-width-layout) {
+	.plugins-browser__content-wrapper {
+		background-color: var(--studio-white);
+	}
+
+	.full-width-section__content {
+		max-width: 1220px;
+		padding-inline: 24px;
+		@media screen and ( max-width: 600px ) {
+			padding-inline: 16px;
+		}
+	}
+	.lpc-header-nav-container {
+		.masterbar {
+			background: transparent;
+			border-bottom: none;
+			height: 0;
+		}
+
+		.x-nav-item, .x-dropdown-link, .x-menu-link {
+			color: var(--studio-gray-100);
+		}
+		.x-dropdown-link {
+			&:hover, &:active, &:focus {
+				color: var(--studio-gray-100);
+				background-color: var(--studio-gray-0);
+			}
+		}
+		.x-nav-link__logo {
+			--studio-blue-50: var(--studio-gray-100);
+		}
+	}
+	.section-nav__mobile-header {
+		padding-inline: 0;
+	}
+}


The selector body.is-section-plugins:has(.is-full-width-layout) is very broad and contains deeply nested selectors. This creates high CSS specificity that can be difficult to override and maintain. Consider:

Using more specific selectors at the parent level rather than deeply nested ones

Breaking this large block into smaller, more focused rule sets

Using CSS custom properties for shared values like max-width (1220px appears multiple times)

Copilot · 2025-12-04T15:08:54Z

client/my-sites/plugins/related-plugins/index.tsx

 type RelatedPluginProps = {
 	slug: string;
-	size: number;
+	size?: number;


The size prop has been changed from required to optional, but there's no JSDoc comment documenting this breaking change or explaining when the default values are used. Consider adding documentation:

/** * @param size - Optional. Number of plugins to fetch. * Defaults to 4 without marketplace-redesign flag, 18 with flag. */

This helps API consumers understand the behavior.

Copilot · 2025-12-04T15:08:55Z

client/my-sites/plugins/plugin-details.jsx

+	const relatedPlugins = ! showPlaceholder && (
+		<RelatedPlugins
+			slug={ props.pluginSlug }
+			seeAllLink={ `/plugins/${ props.pluginSlug }/related/${ selectedSite?.slug ?? '' }` }
+		/>
+	);


The relatedPlugins variable is computed outside the return statement but is now conditionally rendered in two different locations (line 535 for old design, line 556 for new design). This creates complexity and potential for bugs. Consider:

Moving this logic into a helper function that handles the conditional rendering internally

Or, computing it closer to where it's used

This would improve code organization and make the conditional rendering logic clearer.

Suggested change

const relatedPlugins = ! showPlaceholder && (

<RelatedPlugins

slug={ props.pluginSlug }

seeAllLink={ `/plugins/${ props.pluginSlug }/related/${ selectedSite?.slug ?? '' }` }

/>

);

// relatedPlugins variable removed; logic will be inlined at render sites.

Copilot · 2025-12-04T15:08:56Z

client/my-sites/plugins/style.scss

+	}
+
+	.full-width-section__content {
+		max-width: 1220px;


The magic number 1220px for max-width appears multiple times in this file (lines 801, 837, 857). This should be defined as a CSS custom property or SCSS variable to ensure consistency and make updates easier. For example:

$full-width-section-max-width: 1220px;

Copilot · 2025-12-04T15:08:56Z

client/my-sites/plugins/style.scss

+body.is-section-plugins .is-logged-in {
+	$full-width-main: "main:not(.hosting-dashboard-layout):not(.hosting-dashboard-layout-column):not(.is-logged-out).plugins-browser.is-full-width-layout";
+
+	#{$full-width-main} {
+		.plugins-browser__content-wrapper {
+			padding: 0;
+			max-width: 100%;
+		}
+
+		.full-width-section__content {
+			max-width: 100%;
+		}
+
+		.navigation-header__container {
+			max-width: 100%;
+		}


The complex selector string stored in a variable is difficult to read and maintain. Consider refactoring this by:

Using a mixin for the full-width layout styles

Applying the styles directly with a simpler class-based selector

Adding comments to explain what each exclusion (:not()) is for

This would improve code readability and make it easier to modify in the future.

Suggested change

body.is-section-plugins .is-logged-in {

$full-width-main: "main:not(.hosting-dashboard-layout):not(.hosting-dashboard-layout-column):not(.is-logged-out).plugins-browser.is-full-width-layout";

#{$full-width-main} {

.plugins-browser__content-wrapper {

padding: 0;

max-width: 100%;

}

.full-width-section__content {

max-width: 100%;

}

.navigation-header__container {

max-width: 100%;

}

// Full-width main layout for plugins browser when logged in

// Exclude .hosting-dashboard-layout: Not a hosting dashboard layout

// Exclude .hosting-dashboard-layout-column: Not a hosting dashboard column layout

// Exclude .is-logged-out: Only apply when logged in

body.is-section-plugins .is-logged-in main.plugins-browser.is-full-width-layout

:not(.hosting-dashboard-layout)

:not(.hosting-dashboard-layout-column)

:not(.is-logged-out) {

@include full-width-main-layout;

}

// Mixin for full-width main layout styles

@mixin full-width-main-layout {

.plugins-browser__content-wrapper {

padding: 0;

max-width: 100%;

}

.full-width-section__content {

max-width: 100%;

}

.navigation-header__container {

max-width: 100%;

Copilot · 2025-12-04T15:08:56Z

client/my-sites/plugins/related-plugins/index.tsx

+	options?: {
 		enabled?: boolean;
 		staleTime?: number;
 		refetchOnMount?: boolean;
 	};


The options prop has been changed from required to optional. Similar to the size prop, this should be documented with JSDoc to explain the change and default behavior. This is particularly important as it affects how the query is configured.

Copilot · 2025-12-04T15:08:57Z

client/my-sites/plugins/plugin-details.jsx

+	const pluginDownload = ! showPlaceholder &&
+		! requestingPluginsForSites &&
+		isWporgPluginFetched && (
+			<div className="plugin-details__plugin-download">
+				<div className="plugin-details__plugin-download-text">
+					<span>{ downloadText }</span>
+				</div>
+				<div className="plugin-details__plugin-download-cta">
+					<Button
+						href={ `https://downloads.wordpress.org/plugin/${
+							fullPlugin?.slug || ''
+						}.latest-stable.zip` }
+						rel="nofollow"
+					>
+						{ isMarketplaceRedesignEnabled && <Icon icon={ download } size={ 18 } /> }
+						{ translate( 'Download' ) }
+					</Button>
+				</div>
+				<script type="application/ld+json">{ structuredData }</script>
+			</div>
+		);


The pluginDownload variable is computed outside the return statement and conditionally rendered in two locations (line 548 for new design, line 551 for old design) with a complex conditional expression. This duplicates the placement logic and makes the code harder to maintain. Consider extracting this into a helper function or component that encapsulates both the conditional logic and placement behavior based on the feature flag.

Copilot · 2025-12-04T15:08:57Z

client/my-sites/plugins/related-plugins/index.tsx

+
+const DEFAULT_LIST_SIZE = 4;


These magic numbers should be extracted to named constants at the module level or documented with comments explaining their significance. Consider adding comments like:

const DEFAULT_LIST_SIZE = 4; // Number of related plugins shown without carousel const CAROUSEL_LIST_SIZE = 18; // Total plugins fetched for carousel pagination

This would make the code more maintainable and explain the business logic behind these values.

Suggested change

const DEFAULT_LIST_SIZE = 4;

// Number of related plugins shown without carousel

const DEFAULT_LIST_SIZE = 4;

// Total plugins fetched for carousel pagination

claudiucelfilip marked this pull request as draft December 3, 2025 12:44

claudiucelfilip force-pushed the update/plugins-details-redesign branch 2 times, most recently from 2bcffda to 233a14f Compare December 3, 2025 14:43

claudiucelfilip marked this pull request as ready for review December 4, 2025 14:08

claudiucelfilip force-pushed the update/plugins-details-redesign branch from d8b2a4d to fa25717 Compare December 4, 2025 14:09

claudiucelfilip requested a review from Copilot December 4, 2025 14:13

matticbot added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Dec 4, 2025

Copilot started reviewing on behalf of claudiucelfilip December 4, 2025 14:14 View session

Copilot finished reviewing on behalf of claudiucelfilip December 4, 2025 14:17

claudiucelfilip self-assigned this Dec 4, 2025

Copilot AI reviewed Dec 4, 2025

View reviewed changes

claudiucelfilip requested a review from Copilot December 4, 2025 14:38

Copilot started reviewing on behalf of claudiucelfilip December 4, 2025 14:39 View session

Copilot finished reviewing on behalf of claudiucelfilip December 4, 2025 14:43

Copilot AI reviewed Dec 4, 2025

View reviewed changes

claudiucelfilip requested review from a team and Copilot December 4, 2025 15:01

Copilot started reviewing on behalf of claudiucelfilip December 4, 2025 15:01 View session

Copilot finished reviewing on behalf of claudiucelfilip December 4, 2025 15:03

Copilot AI reviewed Dec 4, 2025

View reviewed changes

claudiucelfilip added 8 commits December 5, 2025 11:15

Apply restyling to the categories

4c924c9

Restore all categories

c83a3e3

Apply full width layout

a50fd5a

Move common styles to root plugins

6de8536

Apply the full width layout to plugin details

0aef851

Apply the redesign styling to the rest of the page

1a7c61e

More tweaks and adjustsments to match the redesign

c734d9a

Tweaks to make the page match the redesign

17669e6

claudiucelfilip added 7 commits December 5, 2025 11:15

Adjust the review section to match the redesign

217bcff

Simplify review header selector

1355709

Layout and related plugins styling fixes

1bb3327

Fix padding removal for the layout content element

bc7c908

Code improvements

84c1706

Code improvements 2

b751a54

Add missing styles

e2b7b2e

claudiucelfilip force-pushed the update/plugins-details-redesign branch from 7d44d85 to e2b7b2e Compare December 5, 2025 09:15

Remove empty line

cf1e7f0

claudiucelfilip merged commit 7e4cb0f into trunk Dec 5, 2025
12 checks passed

claudiucelfilip deleted the update/plugins-details-redesign branch December 5, 2025 09:55

github-actions bot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Dec 5, 2025

	$rating-star-color: #ffb514;
	@import '../../my-sites/plugins/variables';

Plugins redesign: Add new copy and redesign styling for the details view #107463

Plugins redesign: Add new copy and redesign styling for the details view #107463

Uh oh!

Conversation

claudiucelfilip commented Dec 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposed Changes

Why are these changes being made?

Testing Instructions

Pre-merge Checklist

Uh oh!

matticbot commented Dec 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

matticbot commented Dec 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI Dec 4, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Dec 4, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Dec 4, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Dec 4, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 4, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Dec 4, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 4, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 4, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 4, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 4, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 4, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 4, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 4, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 4, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 4, 2025

claudiucelfilip commented Dec 3, 2025 •

edited

Loading

matticbot commented Dec 3, 2025 •

edited

Loading

matticbot commented Dec 3, 2025 •

edited

Loading