Skip to content

Plugins redesign: Move browse all link to carousel #107175

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Nov 19, 2025
Merged

Plugins redesign: Move browse all link to carousel #107175

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f3896bb
Pass browse all links to plugins carousel
claudiucelfilip Nov 18, 2025
0baa5da
Remove code duplicationof the browse all link
claudiucelfilip Nov 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 13 additions & 3 deletions client/my-sites/plugins/plugins-browser-list/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,12 @@ import Spotlight from 'calypso/components/spotlight';
import { getMessagePathForJITM } from 'calypso/lib/route';
import PluginBrowserItem from 'calypso/my-sites/plugins/plugins-browser-item';
import { PluginsBrowserElementVariant } from 'calypso/my-sites/plugins/plugins-browser-item/types';
import PluginsResultsHeader from 'calypso/my-sites/plugins/plugins-results-header';
import PluginsResultsHeader, {
BrowseAllAction,
} from 'calypso/my-sites/plugins/plugins-results-header';
import getCurrentRoute from 'calypso/state/selectors/get-current-route';
import { PluginsBrowserListVariant } from './types';

import './style.scss';

const DEFAULT_PLACEHOLDER_NUMBER = 6;
Expand Down Expand Up @@ -52,6 +55,7 @@ const PluginsBrowserList = ( {
? PluginsBrowserElementVariant.Extended
: PluginsBrowserElementVariant.Compact;
const shouldUseCarousel = useCarousel;
const browseAllAction = <BrowseAllAction browseAllLink={ browseAllLink } listName={ listName } />;
Copy link

Copilot AI Nov 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The new carousel integration with controlsAction and conditional rendering of browseAllAction lacks test coverage. The existing tests in plugins-browser-list/test/index.jsx don't verify the carousel behavior with useCarousel={true} or the BrowseAllAction placement in carousel controls. Consider adding tests to verify: (1) BrowseAllAction is passed to DotPager when useCarousel is true, (2) browseAllLink is undefined in header when useCarousel is true, and (3) the component renders correctly in carousel mode.

Copilot uses AI. Check for mistakes.

const renderPluginsViewList = () => {
const pluginsViewsList = plugins.map( ( plugin, n ) => {
Expand Down Expand Up @@ -126,7 +130,13 @@ const PluginsBrowserList = ( {

return (
<div className="plugins-browser-list__carousel">
<DotPager className="plugins-browser-list__carousel-pager" hasDynamicHeight>
<DotPager
className="plugins-browser-list__carousel-pager"
hasDynamicHeight
showDots={ false }
controlsAction={ browseAllAction }
navigationVariant="button"
>
{ slides.map( ( slideItems, index ) => (
<Card
tagName="ul"
Expand Down Expand Up @@ -170,7 +180,7 @@ const PluginsBrowserList = ( {
title={ title }
subtitle={ subtitle }
resultCount={ resultCount }
browseAllLink={ browseAllLink }
browseAllLink={ ! useCarousel ? browseAllLink : undefined }
listName={ listName }
isRootPage={ listType !== 'browse' }
/>
Expand Down
43 changes: 43 additions & 0 deletions client/my-sites/plugins/plugins-results-header/browse-all-action.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import { useI18n } from '@wordpress/react-i18n';
import { recordTracksEvent } from 'calypso/lib/analytics/tracks';
import { useSelector } from 'calypso/state';
import { getSelectedSite } from 'calypso/state/ui/selectors';

type BrowseAllActionProps = {
browseAllLink?: string;
className?: string;
listName?: string;
};

const DEFAULT_ACTION_CLASS = 'plugins-results-header__action';

export default function BrowseAllAction( {
browseAllLink,
className,
listName,
}: BrowseAllActionProps ) {
const { __ } = useI18n();
const selectedSite = useSelector( getSelectedSite );

if ( ! browseAllLink ) {
return null;
}

const handleBrowseAllClick = () => {
recordTracksEvent( 'calypso_plugin_browser_all_click', {
site: selectedSite?.domain,
list_name: listName,
blog_id: selectedSite?.ID,
} );
};

const actionClassName = className
? `${ DEFAULT_ACTION_CLASS } ${ className }`
: DEFAULT_ACTION_CLASS;

return (
<a className={ actionClassName } href={ browseAllLink } onClick={ handleBrowseAllClick }>
{ __( 'Browse all' ) }
</a>
);
}
23 changes: 4 additions & 19 deletions client/my-sites/plugins/plugins-results-header/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,5 @@
import { useI18n } from '@wordpress/react-i18n';
import clsx from 'clsx';
import { recordTracksEvent } from 'calypso/lib/analytics/tracks';
import { useSelector } from 'calypso/state';
import { getSelectedSite } from 'calypso/state/ui/selectors';
import BrowseAllAction from './browse-all-action';
import type { TranslateResult } from 'i18n-calypso';

import './style.scss';
Expand All @@ -24,8 +21,6 @@ export default function PluginsResultsHeader( {
listName?: string;
isRootPage?: boolean;
} ) {
const { __ } = useI18n();
const selectedSite = useSelector( getSelectedSite );
const TitleTag = isRootPage ? 'h2' : 'h1';

return (
Expand All @@ -39,23 +34,13 @@ export default function PluginsResultsHeader( {
{ ( browseAllLink || resultCount ) && (
<div className="plugins-results-header__actions">
{ browseAllLink && (
<a
className="plugins-results-header__action"
href={ browseAllLink }
onClick={ () => {
recordTracksEvent( 'calypso_plugin_browser_all_click', {
site: selectedSite?.domain,
list_name: listName,
blog_id: selectedSite?.ID,
} );
} }
>
{ __( 'Browse all' ) }
</a>
<BrowseAllAction browseAllLink={ browseAllLink } listName={ listName } />
) }
{ resultCount && <span className="plugins-results-header__action">{ resultCount }</span> }
</div>
) }
</div>
);
}

export { default as BrowseAllAction } from './browse-all-action';
4 changes: 4 additions & 0 deletions client/my-sites/plugins/plugins-results-header/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,9 +38,13 @@
justify-content: flex-end;
align-items: center;
flex-grow: 4;
text-decoration: underline;
svg {
Comment on lines 38 to 42
Copy link

Copilot AI Nov 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The text-decoration: underline at line 41 applies to all .plugins-results-header__action elements (including both links and spans), but line 48-50 removes it unconditionally. This creates a CSS specificity conflict. Consider applying text-decoration: underline only to specific elements (e.g., links) or restructuring to avoid the override pattern. For example, move the underline style to a more specific selector like .plugins-results-header__action:not(a) or apply it conditionally based on element type.

Copilot uses AI. Check for mistakes.
margin-left: 2px;
}
}
}
}
.plugins-results-header__action {
text-decoration: none;
}