automattic/wp-calypso

The JavaScript and API powered WordPress.com

Calypso

Calypso is the new WordPress.com front-end – a beautiful redesign of the WordPress dashboard using a single-page web application, powered by the WordPress.com REST API. Calypso is built for reading, writing, and managing all of your WordPress sites in one place.

It’s built with JavaScript – a very light node plus express server, React.js, Redux, wpcom.js, and many other wonderful libraries on the front-end.

You can read more about Calypso at developer.wordpress.com/calypso.

Getting Started

You can try out the user-side of Calypso on WordPress.com (a lot of the logged-in area is Calypso; if in doubt, view source), you can poke around the code here on GitHub, or you can install it and run it locally. The latter is the most fun.

1. Make sure you have git, node, and yarn installed.
2. Clone this repository locally.
3. Add 127.0.0.1 calypso.localhost to your local hosts file.
4. Execute yarn and then yarn start from the root directory of the repository.
5. Open calypso.localhost:3000 in your browser.

Need more detailed installation instructions? We have them.

Contributing

If Calypso sparks your interest, don’t hesitate to send a pull request, send a suggestion, file a bug, or just ask a question. We promise we’ll be nice. Just don’t forget to check out our CONTRIBUTING doc – it includes a few technical details that will make the process a lot smoother.

Calypso welcomes – and indeed has been built by – contributors from all walks of life, with different backgrounds, and with a wide range of experience. We're committed to doing our part to make both Calypso and the wider WordPress community welcoming to everyone.

You can contribute in many ways. You can help reporting, testing, and detailing bugs, and also test new features we release in our "beta" program for testing on Horizon.

To clarify these expectations, Calypso has adopted the code of conduct defined by the Contributor Covenant. It can be read in full here.

Security

Need to report a security vulnerability? Go to https://automattic.com/security/ or directly to our security bug bounty site https://hackerone.com/automattic.

Our security policy can be read in full here.

Browser Support

We support the latest two versions of all major browsers. (see Browse Happy for current latest versions).

Troubleshooting

If you have any problems running Calypso, please see the most common issues.

License

Calypso is licensed under GNU General Public License v2 (or later).

wp-calypso's Issues

Pages: allow setting a page as the front page from the popup menu

From the popup menu on the list of pages, allow an option to set a selected page as the front page.

Me: verification code placeholder color hard adjustment for easier use

When you are asked to add a verification code, the placeholder makes it hard to see it's a placeholder. This can be confusing for some users. I wasn't really thinking and ended up clicking verify thinking it has pre-filled. Of course it hadn't, but because the color was so slight it looked like it should be a proper input not a placeholder.

Perhaps it should be a placeholder such as

6 digit code

Site Settings: Add redirects for non-existent site section

A couple of routing issues:

One minor issue I did run into: if I goto /settings/$site I see the site selector. Clicking on a site updates the URL but I stay on the selector. Alternatively, if I go to /settings/blah, I also see the site selector but clicking on a site works correctly. Maybe we should redirect these URLs as well?

Menus: Alignment issue with undo link in `is-info` notice after deleting menu

The alignment of the undo link in the is-info notice that appears after deleting a menu is slightly off center.

Steps to reproduce:

1. Navigate to My Site > Menus: https://wordpress.com/menus.
2. Select Add new menu from the second dropdown menu.
3. Click on the trash icon next to the Save button in order to delete the newly added menu.

Results:

After deleting the menu, an is-info notice appears towards the top of the page with an option to undo the deletion. The alignment of the undo link is slightly off centre as shown in the following screenshot:

Themes: better labels in list view for thumbnail and popover actions

The labels that we use on the Themes view — for thumbnail and in the popup menu actions — could use an update for clarity.

Example URL: https://wordpress.com/design/example.wordpress.com

This is the change:

Thumb: 
   "View" → WebPreview (Demo)

Popup:
   "Try & Customize" → Customizer
   "Activate" | "Purchase"
   "View" → WebPreview (Demo)
   —
   Details
   Support

In terms of the active theme, the thumb label will remain "Customize" and the popup menu will still remain "Customize | Details · Support"

Mobile/Settings: Double Save Buttons

Double save buttons look particularly ridiculous/redundant on pages like this. Can we just go back to using a single Save button at the bottom of these pages?

Whilst I understand the reasoning behind a double save, it feels cumbersome even on longer pages. Asking me to save before I've even done anything is a little awkward from a user's view. I'm not convinced it adds all the benefits it's intended to.

Me: Two-Step: Allow users to 'Switch to a New Device'

Currently:
When a user gets a new mobile device they must 'disable' and 'enable' 2fa in order to switch phones. That flow is not intuitive to a user. They may not understand that disabling is required. They may (just maybe) continue carrying around their old phone just for auth. They may disable and never re-enable.

Hopefully:
We can implement a 'switch to a different device' option that allows users to 'update' their 2fa settings without disabling 2fa.

Comment:
Hi all,

I've been playing with Google and Dropbox 2FA switching / editing mechanism — Facebook and Twitter have slightly different flow and depend on their mobile apps — and the simplest approach, IMO, is Dropbox. When 2FA is enabled in Dropbox, user can edit the 2FA setting. The 2FA edit screen and flow are basically the same as initial setup of 2FA — user chooses how to retrieve the verification code (sms or app).

UI proposal

Using the same edit pattern as Dropbox allows us to reuse existing security-2fa-setup component. Followings show how 2FA edit applied in Calypso:

1. When 2FA is enabled, the edit button appears in Two-Step Authentication card inlined with disable button.
   
2. Clicking edit will reveals edit progress which basically the same as initial setup.
   

Any thought for the UI?

Code consideration

The TwoStep component renders Security2faDisable when user has 2FA enabled. The Security2faDisable renders the status of 2FA setting and components related to 2FA disabling processes. Now edit 2FA setting flow is introduced. The name Security2faDisable doesn't fit to the context anymore as edit and disable buttons are rendered in the same component. I propose the name Security2faEdit. Basically the disable related functions stay the same, it only introduces new state — editing. This state is used to indicate whether to prompt disabling section or editing section.

When state editing is true, Security2faEdit uses 2FA setup component, Security2faSetup, that renders screenshot no. 2. From there, we need to adjust Security2faSetup component to bypass initial-setup state by introducing new prop initialStep.

Todos

• Implement Security2faEdit. This component replaces Security2faDisable.

• Allows opt-in step state in Security2faSetup by introducing new prop initialStep. The initial state of step should be this.props.initialStep || 'initial-setup'. Another new prop is onCancelSetup — which allows Security2faEdit to get back to initial state rather than to Security2faSetup's initial-setup step.

• Import styles, in assets/stylesheets/_components.scss, from Security2faEdit and remove styles from Security2faDisable.

• Update READMEs mentioning Security2faDisable component — replaces it with Security2faEdit.

• Update TwoStep component to change the child component to Security2faEdit instead of Security2faDisable.

• The REST API endpoints /me/two-step/app-auth-setup/ always returns error if current user's 2FA is enabled with JSON response:

  {
     "_headers": {
         "Content-Type": "application/json",
         "Date": "Sun, 31 May 2015 15:39:21 GMT"
     },
     "error": "two_step_already_enabled",
     "message": "Two factor authentication is already enabled for the current user.",
     "name": "TwoStepAlreadyEnabledError",
     "statusCode": 400
  }

  I believe this is intended — from wpcom-undocumented and two-step-authorization it seems no function exposed to deal with updating 2FA settings.

Posts: scheduled preview pulls wrong image for post

One of a user's posts is using an incorrect image preview on the Calypso "Scheduled" posts listing. The image is being pulled from another one of the user's posts. The post itself looks fine in the editor and has the right content - it's just the preview image that is incorrect.

The post has no featured image. I didn't detect any image change in the post revision history (but can't say for sure), which lead me to believe there was an issue beyond that.

This is issue I think being caused by how we're selecting the image to show in the list. One of the bits of data it considers is the set of images that are attached to the post, which can easily lead to confusion because the attaching of an image to a post is not something that is emphasized in the UI. WordPress core has also really downplayed it.

Menus: allow easy reverting of changes

Report:

The only way I’ve found to revert my unsaved changes when editing a menu is to refresh the whole page. It would be great if there was an easier way, especially given how easy we make making serious of changes. Probably a “Revert” button or “Undo”?

Example user flow:

1. Make an edit to menu, but don't save it.
2. Instead of refreshing the page — or clicking "Menus" link again in the sidebar (which prompts for unsaved changes but doesn't refresh the page) — you could just click "Undo" and have the menu go back to its original state.

Suggestion for the "Menus" item in sidebar: since it currently links to /menus/[site] it won't force a refresh on editing a menu. It might be nice to use a unique URL for menu editing like /menus/[site]/edit/[menu_id] so that clicking the sidebar link forces a page refresh. (Video showing the lack of refresh.)

Needs a design mockup for the Undo action.

Posts: Last item in top menu of Posts section is hidden on first load

There are four categories of posts displayed on the Posts page, Published/Drafts/Scheduled/Trashed. If you're viewing a the Posts page for a site that doesn't have all four, and then use the site picker to switch to a site that does, the last menu item is cut off:

Once the page is reloaded it shows up as a dropdown like it's supposed to:

Posts: PostCountsStore doesn't handle errors

If the response from an API call results in an error, the PostCountsStore throws:

Uncaught TypeError: Cannot read property 'meta' of undefined

Redirect glitch in site settings

If you have a Jetpack site selected and you navigate to Settings -> Security, and then, if you click Switch Site -> All My Sites you get redirected to /me/security. It may have to do with the overlap with an existing client-side redirect.

Menus: update icons to Gridicons

All cases of Noticons in Menus component need to be updated to use Button component standards and be Gridicons.

Example is the trash icon, it is now misaligned:

^{(Testing with Safari 9.0.1 on OS X 10.11.1 on a test site: lancetest23.wordpress.com.)}

Steps to repeat:

1. Log in to WordPress.com, go to "My Sites"
2. Pick a site and go to "Menus"
3. Click the pencil icon for a menu item
4. Look at the action buttons for that item (Move, Cancel, etc) — they should all be Gridicons and line up correctly.

Post-Checkout: Thank you page for Business should have "contact us" link

After purchasing a Business plan, users land on a "thank you" page. That page currently has the link "send an email" — that should be changed to "contact us" and linked to wordpress.com/help/contact once that is launched.

Current "thank you" page:

Site Picker: 'Add New WordPress' option is hard to find with lots of sites

There is an 'Add New WordPress' option at the bottom of the Site Picker.

If you have lots of sites, this is hard to find as there is a lot of scrolling.

Options to resolve this include having it in a fixed position, or moving it elsewhere (eg. switcher prompt)

Site Picker: searching should support arrow keys + enter

The flow would be something like:

1. Select switch site
2. it should focus in the search field
3. type "my"
4. list is immediately filtered down to sites containing the string "my", with the top site in the list being auto-selected and visibly highlighted (same as the hover effect we currently have)
5. I actually want the second site in the list, so I can just hit the down arrow on my keyboard, which would move the highlight/active selection down to the second site in the list (my cursor is still in the search field though, so I could keep typing if I want)
6. I can now hit enter to select the second site in the list, since that's where my highlight/selection is.

It would work very similar as github @mentions

We should be Sending an `X-Frame-Options` Header

Additionally, it'd be nice if we could send a CSP Header, though I'm not sure how valuable it'd be for us.

Mobile/Security: Weird spacing in navigation drop-down

There seems to be an extra/empty entry in the navigation drop-down at small screens under Me > Security. It seems to only appear on horizon.wordpress.com, where Checkup doesn't appear to be enabled.

Me: Security - 2FA - Compact notice close link is not aligned

I was running through the steps to disable and then re-enable 2FA today and came to the step where it asked me to type my verification code. Since I had just done so to enter /me, I had to wait a bit. I got this notice and the X was underlined and not aligned to the top right. It was also is-info and would probably make more sense as a is-warning.

Error message too:

Should be simple CSS and HTML class fixes here

Me/Security: Entering two step code is not mobile friendly in a couple of places

1. Entering code during setup

1. Verifying a backup code

1. Disabling two step

Themes: WebPreview should use the pulsating dot loading placeholder

Currently the WebPreview component has the above skeleton, pulsating. That works on the editor, but on themes it's too overwhelming, for two reasons: it defaults full screen, and the theme design can change a lot, breaking the principle of using a skeleton.

So ideally we need to:

1. Change the component to accept a custom skeleton. This is because the component that loads the WebPreview is the one that knows what is going to appear, and decide for the right loader.
2. For Themes, use a pulsating dot (centered), like the one we have on the masterbar when changing sections.

A more generic shape makes more sense in the Themes context given the wide array of varying layouts and design.

Security: Add Self XSS Warning to Dev Console

Add a warning in the Javascript console similar to this example from www.facebook.com

Site Picker: Always show search if user has hidden site

The site picker shows a search if a user has more than 6 sites:

And doesn't show if a user has 6 or less sites

A user can set a site to be hidden on the dashboard, although it will still appear via my sites search:

If a user has 6 or less 'visible' sites but some 'hidden' sites they will not see the search box and can't select a visible site.

Enhancement: If a user has any hidden sites, always show the search box even if they have 6 or less 'visible' sites

Olark: Stop using Noticons

We should try to remove Noticons from the Olark CSS. The solution is to use SVG for the gridicons. The structure of the Olark markup may pose a challenge for us. For example, at present, we're using ::before selectors with content attributes, and @dllh thinks the svg solution works better when you can use background attributes, but there may be a way to work within Olark's markup after all.

We'll need to export SVG for the chat icon (the \f108 character in genericons).

We'll then need to see if we can work within Olark's current markup and the current CSS or whether we can use CSS that'll let us target background attributes rather than ::before pseudoclass attributes. @dllh had a partially working solution along these lines:

url("data:image/svg+xml;utf8,<svg fill='" + $blue-medium + "' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' d='M0 0h24v24H0z'/><path d='M9 19.414l-6.707-6.707 1.414-1.414L9 16.586 20.293 5.293l1.414 1.414'/></svg>");

However, that didn't work in IE, so we'll want to pay particular attention to that use case.

More at https://wpcalypso.wordpress.com/devdocs/docs/icons.md

Me: Security: 2FA: Flux Refactor

Background

Per comment:

I would also entertain moving some of this “store” logic out of the 2fa components and into a Flux store now that we are doing Flux implementation (we weren’t doing Flux when the 2fa components were originally written.)

Reason to refactor to Flux

There are good materials out there explaining benefits of using Flux, however one of my concern when diving into 2FA related components for the first time is components dependencies — for instance if component need to update user settings and application password data then instances of lib/user-settings and lib/application-password-data will be passed as props. Using this approach makes the responsibilities of view get doubled because it needs to know how to fetch data, how to update data, and what data to render.

With Flux, hopefully we could move those dependencies into action and store so view only knows what data to render. This also means flow of data becomes explicit and easy to understand thus increasing the locality of bugs (imagine you've three components depend on client/lib/two-step-authorization and there's change on REST API that affects client/lib/two-step-authorization. Now you've to hunt down those three components).

Todos

Based on Flux approach in Plugins, this issue will serves as parent ticket of all PRs of 2FA Flux refactor. Ideally each todo item should have its own PR and should be marked as done when PR is accepted and merged.

• Create TwoStepActions in client/lib/two-step/actions.js. Actions are good starting point and will makes the rest easy to understand. Followings are defined action types based on 2FA functionalities:

  Action Type	Description
  UPDATE_2FA_SETTINGS	This action is created from view, i.e. when user clicks either "Verify via SMS" or "Verify via App". The payload for this action should includes: flow (which value is either "sms" or "scan") and phone settings (country code and phone number).
  RECEIVE_UPDATED_2FA_SETTINGS	This action is created by server — dispatched inside userSettings.saveSettings callback. The payload is error that's passed as callback argument.
  REQUEST_APP_AUTH_CODES	Request OTP Auth URI for app and time code. Under the hood the store calls twoStepAuthorization.getAppAuthCodes.
  RECEIVE_REQUESTED_APP_AUTH_CODES	This action is created from server — dispatched inside twoStepAuthorization.getAppAuthCodes callback. The payload includes error and data that's passed as callback arguments.
  REQUEST_SMS_CODE	Request to send SMS code. Store will handle this by calling twoStepAuthorization.sendSMSCode.
  RECEIVE_REQUESTED_SMS_CODE	This action is created from server — dispatched inside twoStepAuthorization.sendSMSCode callback. The payload is error that's passed as callback argument.
  VERIFY_CODE	This action is created from view, i.e. when user clicks the button to verify inputted code. The payload for this action should includes action (currently it's either "enable-2fa" or "disable-2fa". Under the hood the store calls twoStepAuthorization.validateCode.
  RECEIVE_VERIFIED_CODE	This action is created from server — dispatched inside twoStepAuthorization.validateCode callback. The payload includes error and data that's passed as callback arguments.
  NEW_BACKUP_CODES	Request to generate backup codes. Store will handle this by calling twoStepAuthorization.backupCodes.
  RECEIVE_NEW_BACKUP_CODES	This action is created from server — dispatched inside twoStepAuthorization.backupCodes callback. The payload includes error and data that's passed as callback arguments.
  VERIFY_BACKUP_CODE	This action is created from view, i.e. when user clicks "Verify" button to verify inputted backup code. Store will handle this by calling twoStepAuthorization.validateBackupCode and passing inputted backup code.
  RECEIVE_VERIFIED_BACKUP_CODE	This action is created from server — dispatched inside twoStepAuthorization.validateBackupCode callback. The payload includes error and data that's passed as callback arguments.
  CREATE_APPLICATION_PASSWORD	This action is created from view, i.e. when user clicks "Generate Password" for inputted application name. Store will handle this by calling appPasswordData.create (from client/lib/application-passwords-data).
  RECEIVE_CREATED_APPLICATION_PASSWORD	This action is created from server — dispatched inside appPasswordData.create callback. The payload is error that's passed as callback argument.
  REMOVE_APPLICATION_PASSWORD	This action is created from view, i.e. when user clicks remove icon to remove application password. Store will handle this by calling appPasswordData.revoke (from client/lib/application-passwords-data).
  RECEIVE_REMOVED_APPLICATION_PASSWORD	This action is created from server — dispatched inside appPasswordData.revoke callback. The payload is error that's passed as callback argument.

  PR: Closed

• Create TwoStepStore in client/lib/two-step/store.js. This store should provides public method that can be used to set initial state of View-Controller (TwoStep component).

  PR: Closed

• The TwoStep component, in client/me/two-step/index.jsx should acts as View-Controller in which it listens change event from TwoStepStore to update its state and passes that state to children views via props.

  PR: Closed

While all PRs still WIP, I just want to put notes that:

• Branch add/two-step-actions is based off of master branch — actions, constants, and utils do not have dependency to store and components.
• Branch add/two-step-store is based off of add/two-step-actions because store depends on utils and constants.
• Branch update/two-step-view-controller-v2 is based off of add/two-step-store because the component that acts as View-Controller depends on store and actions.
• Code-review doesn't need to be in sequential order, however merging should be done in sequential order — update/two-step-view-controller-v2 ➡️ add/two-step-store ➡️ add/two-step-actions ➡️ master.

---

Create TwoStepStore in client/lib/two-step/store.js. This store should provides public method that can be used to set initial state of View-Controller (TwoStep component).

It is just setting the initial state, or will the store drive the state of the TwoStep component throughout its lifecycle?

Store will drive the state of TwoStep component. Store provides public getter method for TwoStep component which is passed into getInitialState. Child views that's get rendered from TwoStep component will be passed down appropriate props from TwoStep state.

(One of the oddities about how the existing code is written is we needed to ignore userSettings object changes during the setup flow since two-step actually becomes enabled part way through the setup flow (after they verify a code and before they print backup codes) - we didn't want the view component to completely reset.)

If the TwoStepStore is the sole source of state for TwoStep, how will we avoid that unwanted transition?

Can you elaborate more by giving example of unwanted transition? Is there any part that triggers userSettings change without user interaction?

I bind userSettings' change which in turns invoke TwoStepActions.receiveUserSettings which then dispatch that to Store.

Based on some of the other flux examples I've seen, I'm also a little confused on whether or not the TwoStepStore should hold view state items like whether or not they've dismissed the Getting Started message or whether or not they just verified a code and need to see and print their backup codes. Maybe a deeper flux expert can weigh in.

Purely driving the state from a single store isn't necessary. I'd recommend we not, for example, store which step the user is on in TwoStepStore (or whether they are in the QR code or time code mode for example). In a quick slack chat, we concurred that we could retain that kind of state in the TwoStep component (or child components) itself or at least in a separate store. That way we get separation of concerns / maintainability and the TwoStep store will be potentially more useful to other components.

I think we need to define how many store will be and what responsibilities of each store before write it into code. Also, decide what should be kept in view-controller, TwoStep, and its child views.

Pages: fix placeholder gray bar in date header

When you open the pages page, the clock icon/gray placeholder bar appears whilst the list of pages is loading, which is inconsistent with how other areas in calypso display.

Suggested fix is to not show this icon until loaded.

Themes: Visual bug with Filter button in non-English languages

For example, in Spanish locale:

It seems happening just with certain words... and not others... probably at a specific length:

Site Picker: All Sites: Improve Icon Composite

The current icon-composite used to represent all-sites could be improved.

Current:

Proposed by @mtias

Site Settings: analytics page doesn't handle jetpack

We're showing a plan upgrade message on the analytics settings page for jetpack sites, and I don't believe that's an option for them.

it is possible to get into the state in my screenshot above by navigating to the analytics page for a wpcom site, and then switching to a jetpack site. I think we just need a custom message saying analytics can only be added to wpcom-hosted sites. We have the reverse issue for the jetpack security page (possible to get to the jetpack security page with a wpcom site), and this is how they handle it:

Menus: Allow post-formats to be added as items

For feature parity with wp-admin:

As a user, I want to be add post-format items, so I don't have to go to wp-admin.

The problem is that the WP.com REST API endpoint for post formats doesn't give us the data we need. It currently returns different posts formats is because it returns all the default post formats, which do not have term_ids — whereas nav-menus.php only returns post formats with term_ids — which are necessary to save the item correctly.

Code reference: https://github.com/Automattic/jetpack/blob/master/json-endpoints/class.wpcom-json-api-get-site-endpoint.php#L435

To fix this we'd have to either patch the existing /site/blah/post-formats endpoint to return any term_ids it can, or create a new endpoint.

https://gist.github.com/lancewillett/43970499eef7236d48ab is a modification of /site/blah/post-formats to only return post formats with term_ids — this works, but will probably break stuff that relies on that endpoint.

Sample result: {"formats":{"46911994":"Aside","46912880":"Gallery","50518530":"Image"}}

Original report and code changes suggested by @ehg (I updated the patch to reference Jetpack and new endpoint location).

Posts: My VideoPress video doesn't show in the posts listing

No preview at all of the video, or a video player. There is supposed to be a VideoPress loaded video here:

The same is true for YouTube videos.

Flash of wrong dropdown value

On https://wordpress.com/settings/general the language option for a site may accidentally be set to the wrong value:

1. Cold browser cache
2. User lands on page (dropdown shows default, maybe the top, value)
3. User immediately changes dropdown to some value which isn't the current
4. User scrolls quickly to the bottom of the page to hit the Save button
5. Some loading event completes and the dropdown resets to whatever it's supposed to be set to (user doesn't notice, because they've already scrolled down to hit the save button)
6. User hits the save button (with the dropdown not in the state they intended it to be in)

Screenflow: https://cloudup.com/ix8mwhVWcEe

Menus: tighten up keyboard navigation for better accessibility

Elements that need to accept tab focus that currently don't:

• menu title
• edit/add buttons
• 'add' button in empty menu
• option tabs in item edit
• delete confirmation ('Delete item'/'Back') buttons
• menu delete 'undo' notice
• error/warning notices
• 'move here' button
• add/move item above/below/to children buttons

TODO:

• Tab focus for items that need it (see list)
• focus should go to title box when item edit component opens
• focus should go to delete confirmation buttons after hitting 'trash' on an item
• should be able to arrow up/down when dealing with add/move operations

Marking as a bug because accessibility is a core value of the UI and not an add-on enhancement.

Posts: we aren't showing post-counts for Jetpack sites

We turned the post-counts filtering feature (i.e., show the post-counts in the status selector and don't show statuses with a zero post-count) off for jetpack sites because our current implementation only supports post-counts on public posts (because that's all that gets synced right now).

So we somehow need to enable this for jetpack sites as well. This could be done by implementing the post-counts endpoint in the jetpack plugin itself (versus the post_process_jetpack_response we are currently using). It's already implemented to some point, but isn't up-to-date or working correctly.

I noticed that the post-counts endpoint code in the jetpack plugin wasn't updated with the latest changes. So I started a branch to make the relevant changes here.

https://github.com/Automattic/jetpack/compare/update/reshape-post-count-response

Notice that I also removed the force: true, which effectively forces the public-api.wordpress.com to run the code against our shadow blog (which only contains public posts), versus forwarding on the request to the jetpack site's API. I also changed the shape of the post-counts response because for some reason cast_and_filter was not happy with the double-nesting of arrays. These jetpack changes also need to be coordinated with corresponding updates in wpcom, which I have set up in a phabricator instance here: D181-code

With these two changes together, I can get the correct data for post-counts for a jetpack site when I query the post-counts endpoint directly. Yay!

However, we don't query the post-counts endpoint directly, we do it via meta-expansion from the post-lists endpoint. And if I am obtaining post-counts data via meta expansion from the post-lists endpoint (i.e., /v1.1/sites/:site/posts?meta=counts), the meta query is run against the shadow blog, so we still only get partial data (i.e., only counts for published posts). I think this may be a limitation of how meta expanded queries are processed. I haven't figured that out yet.

So we either need to get the meta expanded query to hit the jetpack site directly, or we need to separate our API queries for posts and post-counts (at least for jetpack sites).

And of course all of this will need to be coordinated with corresponding changes to wpcom.js and jetpack.

Pages: searching for pages with zero results shows "No posts match your search for...

When using the search box in the pages section, if you search for a page that doesn't exist (hello), the current message shows:

"No posts match your search for hello."

It should read:

"No pages match your search for hello."

Framework: add a specific selected-site store

Right now sites-list is handling too many responsibilities. We need to start breaking it further down into actions, utilities, and separate stores where necessary. One very specific use case is the sites.getSelectedSite() and related functions. It's a very contained responsibility that most sections rely on, and shouldn't be part of site-list.

Sites: add a way to update the site icon in Calypso without going to wp-admin

The site icon is prominently featured in the Reader. We need a way to update the site icon from My Sites.

Currently, you must go to WP Admin > Settings > General to add/change/remove a site icon

Dependent on being able to upload blavatar via API. We need an endpoint in the API to handle this, as well as a cropping tool in the UI to set it.

Ideas for placement were:

• Inline within <Site>
• In general site settings.

calypso-gaps

Me/Security: Verification buttons are disabled in two step verification

To reproduce this bug

• Click Get started in two step
• Enter a valid number and click Cancel or click either Verfiy via SMS or Verify via App go to the next screen and Click Cancel
• Start again with Get started
• See the two verification buttons are disabled now

Menus: Omit "Private:" and "Protected:" prefixes from posts and pages

For feature parity with wp-admin — don't include the "Private:" and "Protected:" prefixes when adding posts and pages as menu items.

Bug report (live chat user on WordPress.com):

When a private post is created in Calypso, and then added to a menu, "Private:" gets added to the menu text. When the post is then published publicly, "Private:" is still in the menu text.

The REST API post listing endpoint includes "Private:" and "Protected:" prefixes in the title field for private and protected posts and pages. This is a result of core's get_the_title formatting the title to include the prefix.

In wp-admin, private and protected pages aren't made visible by default in the menus configuration screen, but can be revealed by using the Search option. When adding a private or protected page in wp-admin, the prefix is not included.

Calypso should seek to mirror this behavior, as currently, if a user adds a private page, then makes the page un-private, the prefix will still be included as the label is not updated automatically.

Site picker / Sites / Site Badge: Add title attribute to long site names and domains

If a site name or domain is very long, this shows as truncated on site picker/sites/site badge.

It would be nice to show a title attribute with the longer name.

Pages: change message when there aren't any draft or trashed pages

Visiting the 'Drafts' page or 'Trash' page when there are no draft pages or trashed pages, shows the following message (even when there are published pages):

"You haven't published any pages yet. Would you like to publish your first page?"

This is quite confusing when the user does have published pages. Can we reword these messages on these screens?

Menus: add ability to bulk add menu items with "Select All"

A common request is adding support for bulk adding menu items.

I couldn’t figure out how to bulk-add pages to the menu, which is really a nice option, especially when creating the menu from scratch.

Was also a bit frustrated to have no multi-select options for creating a longer new menu. Tedious to add items one at a time.

For reference, here's a video showing how bulk adding items currently works in WP Admin > Menus: 1m41s — the UI simply includes a "Select All" form element that easily adds all the selected items to the current menu.

Me/Security: Current 2FA flow lets users to file unverified phone number

To reproduce

• Click two step Get started
• Enter a valid phone number that you don’t have access to
• Click Verify via App

This flow will let users to have unverified phone number in file. We should either

• Verfiy phone number before allow to use the app
• Don’t require phone number for users who use the app

Default to Open

The quality of our code and our product depend on the amount of feedback we get and on the amount of people who use them. If we’re developing behind closed doors, we are putting artificial limits to both.

We have done our best work in the open, let’s continue working this way.

Site Settings: Viewers list missing when site is private

The Site Visibility setting for a private site in Calypso does not display the viewers list like we do in WP Admin. Viewers are preserved when toggling a site from private to public and back to private again so it is important to have this information available so site admins understand who can view their site. With People Management launching soon this could be as easy as adding a link to the Viewers tab in People Management below the setting for now.

Here's what it looks like in WP Admin:

And here's Calypso:

It should link to /people/viewers, but we need to think about the language we use to make it clear that there are already viewers on a site when that's the case and display a count. I think we can take a look at the 'Delete Site' interface in /settings for inspiration here.

Site Settings: in General Settings, tagline text disappears when I unfocus the tagline field

• URL: https://wordpress.com/settings/general/multilingualwp.wordpress.com
• Goal: I am trying to enter a tagline for the new site
• What I expect: I type the tagline, then maybe fiddle with some features, and ultimately hit "Save" and the tagline is changed
• What happens: I enter the tagline, change focus from the tagline field, and the tagline disappears

GIF of the action!

This is likely the same problem as #40 and #42

A few notes:

In some of my tests, it takes quite a bit longer, but I can consistently reproduce this
I don't have to change focus to lose the text
All text fields will "update" back to what they were when I loaded the page
It resets when automatically reloading a network resource
This happens periodically (see green dots in timeline), so to duplicate it you may need to wait
The fields reset when this loads:
https://public-api.wordpress.com/rest/v1.1/notifications/?http_envelope=1&fields=id%2Cnote_hash&number=10

Initiated by:
https://s0.wp.com/_static/??/wp-includes/js/jquery/jquery.js,/wp-content/js/postmessage.js?m=1377267974j

Site Settings: new mixin for Jetpack sites

The form-base component is a mixin to handle functionality needed for all settings pages. Currently, it contains some methods that are only specific to Jetpack sites on the Security settings tab.

It would make sense to move that Jetpack specific functionality to it's own mixin.

Me/Security: Entering mobile number in two step looks bad in mobile

Sites: Gap/space missing between sites for every 3rd site

When viewing wordpress.com/sites on a mobile device (or a narrow screen size), the gap/space between every third site is missing.

Expect to see the same space/gap between every site.

Settings: site settings data is refreshed upon polling even if no changes

The site title reverts if you stay too long on the edit page without committing your change

Steps to reproduce:

1. Create a new WordPress.com site.
2. Click on Settings in Calypso to set a new site title and site description.
3. After setting a new title, it is automatically set back to the original title.

https://cloudup.com/c80Qh7xYZpP

You can change the title. You just need to save it to persist the change. The problem is that we are polling sites data on a periodic basis, and we refresh this page whenever polled request resolves. So if you have changed the title in the page here, it will revert back when the polling request resolves. I think the best solution here is to avoid refreshing settings data here unless it has actually changed.