Themes global view: Show global sidebar on theme #93928

allilevine · 2024-08-26T21:16:46Z

Related to #92645

Proposed Changes

Frame the individual /theme page the same way as the /themes showcase, at both the /sites and individual site level.

Planned follow-ups:
- Highlight Themes in the sidebar while on a theme page, like plugins.
- Use breadcrumbs in header, like plugins.

Before	After

Why are these changes being made?

To keep the interface consistent between the themes showcase and clicking a theme.

Testing Instructions

Open /themes and click on a theme.
Verify that the global sidebar and gray frame are visible.
Test for regressions on mobile screen sizes and different browsers.
Open /themes while logged out and click on a theme.
Verify that there are no changes (no new sidebar and frame) and test for regressions.
Open themes from My Home > Appearance > Themes and click on a theme.
Verify that the sidebar is visible, and that there aren't regressions.

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 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 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)?

github-actions · 2024-08-26T21:16:58Z

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

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

matticbot · 2024-08-26T21:28:13Z

This PR does not affect the size of JS and CSS bundles shipped to the user's browser.

Generated by performance advisor bot at iscalypsofastyet.com.

matticbot · 2024-08-26T21:28:19Z

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

notifications
wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug add/global-content-frame-for-theme on your sandbox.

allilevine · 2024-08-27T15:39:58Z

client/my-sites/theme/style.scss

@@ -140,7 +154,8 @@ $button-border: 4px;
 		display: flex;
 		gap: 16px;
 		flex-direction: column;
-		padding: 0;
+		padding-top: 0;
+		padding-bottom: 0;


I made this change to remove a horizontal scrollbar.

allilevine · 2024-08-27T15:41:26Z

client/layout/style.scss

@@ -74,9 +74,9 @@ body.command-palette-modal-open {
 	}

 	// Themes sets it own padding/margin
-	.is-section-theme &,
+	.is-section-theme.has-no-sidebar &,


Added has-no-sidebar class since some /theme pages will now have a sidebar.

allilevine · 2024-08-27T15:41:56Z

client/my-sites/sidebar/style.scss

@@ -1014,11 +1014,6 @@ $font-size: rem(14px);
 					overflow: initial;
 				}
 			}
-			.is-section-theme {
-				.layout__secondary {
-					transform: translateX(-100%);


This was hiding the sidebar in all cases, on theme pages.

allilevine · 2024-08-27T15:42:27Z

client/my-sites/theme/index.web.js

@@ -36,6 +37,7 @@ export default function ( router ) {
 		noSite,
 		fetchThemeDetailsData,
 		details,
+		addNavigationIfLoggedIn,


Adds the sidebar navigation. We'll likely want to follow up with a custom sidebar to highlight the Themes item.

Addison-Stavlo

This makes the individual themes page at the site level have a sidebar too, which I think is also an improvement there as well!

However a small regression at an odd viewport. I notice here if you reload the browser at the site level showcase, the individual theme bleeds behind the sidebar now. (I assume due to removal of that translateX -100% rule.)

This doesn't seem to happen if i start from the sites dashbaord, so I assume something in those stylesheets is carrying over to let it work in that case.

allilevine · 2024-08-28T15:14:30Z

This makes the individual themes page at the site level have a sidebar too, which I think is also an improvement there as well!

@Addison-Stavlo Thanks for catching that! I'll keep the change then. 😄

However a small regression at an odd viewport. I notice here if you reload the browser at the site level showcase, the individual theme bleeds behind the sidebar now. (I assume due to removal of that translateX -100% rule.)

Fixed, thanks! I'd missed another padding: 0 rule in layout/style.scss.

Addison-Stavlo

Looks good on my end!

allilevine changed the title ~~Themes global view: Show sidebar on theme~~ Themes global view: Show global sidebar on theme Aug 26, 2024

allilevine commented Aug 27, 2024

View reviewed changes

allilevine marked this pull request as ready for review August 27, 2024 16:01

allilevine requested a review from a team August 27, 2024 16:24

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

allilevine requested review from a team August 27, 2024 16:24

allilevine mentioned this pull request Aug 27, 2024

Themes global view - adapt theme preview for content frame. #92645

Closed

Addison-Stavlo reviewed Aug 27, 2024

View reviewed changes

allilevine added 5 commits August 28, 2024 10:30

Show sidebar on theme.

0c4bdcd

Style the theme layout.

e7f4397

Fix mobile styles.

1d29ccd

Update comment.

08564f9

Include clientrender to prevent reload.

4dfcf61

allilevine force-pushed the add/global-content-frame-for-theme branch from 4487a5e to 4dfcf61 Compare August 28, 2024 14:30

allilevine added 2 commits August 28, 2024 11:00

Fix content width in site level theme page.

eb05eeb

Fix missing padding when there is a sidebar.

572d283

Addison-Stavlo approved these changes Aug 28, 2024

View reviewed changes

allilevine merged commit 96f9272 into trunk Aug 28, 2024
11 checks passed

allilevine deleted the add/global-content-frame-for-theme branch August 28, 2024 17:05

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 Aug 28, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Themes global view: Show global sidebar on theme #93928

Themes global view: Show global sidebar on theme #93928

allilevine commented Aug 26, 2024 •

edited

Loading

github-actions bot commented Aug 26, 2024 •

edited by matticbot

Loading

matticbot commented Aug 26, 2024

matticbot commented Aug 26, 2024 •

edited

Loading

allilevine Aug 27, 2024

allilevine Aug 27, 2024

allilevine Aug 27, 2024

allilevine Aug 27, 2024

Addison-Stavlo left a comment •

edited

Loading

allilevine commented Aug 28, 2024

Addison-Stavlo left a comment

Themes global view: Show global sidebar on theme #93928

Themes global view: Show global sidebar on theme #93928

Conversation

allilevine commented Aug 26, 2024 • edited Loading

Proposed Changes

Why are these changes being made?

Testing Instructions

Pre-merge Checklist

github-actions bot commented Aug 26, 2024 • edited by matticbot Loading

matticbot commented Aug 26, 2024

matticbot commented Aug 26, 2024 • edited Loading

allilevine Aug 27, 2024

Choose a reason for hiding this comment

allilevine Aug 27, 2024

Choose a reason for hiding this comment

allilevine Aug 27, 2024

Choose a reason for hiding this comment

allilevine Aug 27, 2024

Choose a reason for hiding this comment

Addison-Stavlo left a comment • edited Loading

Choose a reason for hiding this comment

allilevine commented Aug 28, 2024

Addison-Stavlo left a comment

Choose a reason for hiding this comment

allilevine commented Aug 26, 2024 •

edited

Loading

github-actions bot commented Aug 26, 2024 •

edited by matticbot

Loading

matticbot commented Aug 26, 2024 •

edited

Loading

Addison-Stavlo left a comment •

edited

Loading