Skip to content
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

Jump to bottom

FSE: Add Custom CSS card in My Plan section #35917

Merged
merged 2 commits into from
Sep 3, 2019
Merged

FSE: Add Custom CSS card in My Plan section #35917

merged 2 commits into from
Sep 3, 2019

Conversation

apeatling
Copy link
Member

Changes proposed in this Pull Request

  • Add a Custom CSS card to My Plan section for those users that have FSE enabled and the Customizer links are hidden:

Screen Shot 2019-08-31 at 2 52 06 PM

Testing instructions

  • Create a site with FSE enabled, and subscribe to a paid plan at the Premium level or above.
  • Visit https://wordpress.com/plans/my-plan
  • Confirm that you do not see the "Advanced Customization" card, and you instead see the "Custom CSS" card.
  • Test on a site that does not have FSE enabled, and confirm the reverse is true.
  • Confirm that clicking on "Edit CSS" takes you to the correct section in the customizer.

Fixes #35851

@apeatling
Create my plan page card for Custom CSS that is show to users that ar…
7a647fc 
…e using an FSE theme and limited to no access to the customizer tool.
@apeatling apeatling added [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. [Goal] Full Site Editing labels Aug 31, 2019
@apeatling apeatling requested review from mattwiebe, noahtallen and a team August 31, 2019 22:00
@apeatling apeatling self-assigned this Aug 31, 2019
@matticbot
Copy link
Contributor

Test live: https://calypso.live/?branch=add/edit-css-card

@matticbot
Copy link
Contributor

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

Sections (~113 bytes added 📈 [gzipped])

name   parsed_size           gzip_size
plans       +803 B  (+0.1%)     +113 B  (+0.1%)

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.

glendaviesnz
glendaviesnz approved these changes Sep 1, 2019
View reviewed changes
Copy link
Contributor

@glendaviesnz glendaviesnz left a comment

Choose a reason for hiding this comment

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

Works as advertised for me.

client/blocks/product-purchase-features-list/custom-css.jsx Outdated
icon={ <img alt="" src={ customizeImage } /> }
title={ translate( 'Custom CSS' ) }
description={ translate(
"Make advanced changes to your site's appearance by " + 'writing your own CSS.'
Copy link
Contributor

@glendaviesnz glendaviesnz Sep 1, 2019 •
edited
Loading

Choose a reason for hiding this comment

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

What is this string concat for? The initial double quotes are obviously to avoid escaping the 's, but why is the last bit appended in single quotes? Seems like enclosing the full string in double quotes would be easier, but maybe there is some translate magic here that I don't know about?

Copy link
Contributor

Choose a reason for hiding this comment

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

+1 on this

Copy link
Member Author

@apeatling apeatling Sep 3, 2019 •
edited
Loading

Choose a reason for hiding this comment

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

No reason, other than the advanced customization component did the same thing, I will remove this.

@Copons
Copy link
Contributor

Copons commented Sep 2, 2019

Just to avoid confusion for those unfamiliar with the plans page (it took me a while to figure it out 😅), the instructions take for granted one minor step:

or

  • Visit https://wordpress.com/plans/my-plan/{ siteFragment }

@apeatling apeatling merged commit 2d1fa1e into master Sep 3, 2019
@apeatling apeatling deleted the add/edit-css-card branch September 3, 2019 16:54
@matticbot matticbot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Sep 3, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@Copons Copons Copons left review comments

@glendaviesnz glendaviesnz glendaviesnz approved these changes

@mattwiebe mattwiebe Awaiting requested review from mattwiebe

@noahtallen noahtallen Awaiting requested review from noahtallen

Assignees

@apeatling apeatling

Labels
[Goal] Full Site Editing
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

FSE: Show Edit CSS in the my-plan page
4 participants
@apeatling @matticbot @Copons @glendaviesnz