Skip to content

Social Previews: Add sidebar UI #16633

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
Merged
marekhrabe merged 6 commits into from
Aug 5, 2020
Merged

Social Previews: Add sidebar UI #16633

marekhrabe merged 6 commits into from
Aug 5, 2020

Conversation

@marekhrabe
Copy link
Contributor

@marekhrabe marekhrabe commented Jul 29, 2020 •
edited
Loading

Fixes #16195

Changes proposed in this Pull Request:

  • adds a new panel into the Jetpack sidebar, see (5P) Social Previews: Add Jetpack sidebar panel #16195 for task definition
  • refactors icons from the publicize feature into a shared file with icons so they can be shared (and adds google icon)
  • differences from the original design:
    • icons are single color, as we are reusing @automattic/social-icons and those don't have multi-colored variants
    • we only show three services (WP will be added later)
    • the preview button is slightly misaligned from icons - not sure what to do here. buttons come with their padding and if we remove if, the hover/focus would look wrong. Equally wrong is when we artificially just move the button to the left and hover/focus will then reveal the outline of the button to be super close to the edge of the sidebar

Screenshot 2020-08-03 at 15 08 19

Jetpack product discussion

Does this pull request change what data or activity we track or use?

no

Testing instructions:

Proposed changelog entry for your changes:

none yet

@marekhrabe marekhrabe self-assigned this Jul 29, 2020
@matticbot
Copy link
Contributor

matticbot commented Jul 29, 2020

Caution: This PR has changes that must be merged to WordPress.com
Hello marekhrabe! These changes need to be synced to WordPress.com - If you 're an a11n, please commandeer and confirm D47184-code works as expected before merging this PR. Once this PR is merged, please commit the changes to WP.com. Thank you!
This revision will be updated with each commit to this PR

Base automatically changed from add/social-previews-scaffolding to master August 3, 2020 09:15
@marekhrabe marekhrabe force-pushed the add/social-preview-sidebar branch from d9193d2 to 6b46edb Compare August 3, 2020 09:43
@jetpackbot
Copy link
Collaborator

jetpackbot commented Aug 3, 2020 •
edited
Loading

Thank you for the great PR description!

When this PR is ready for review, please apply the [Status] Needs Review label. If you are an a11n, please have someone from your team review the code if possible. The Jetpack team will also review this PR and merge it to be included in the next Jetpack release.

E2E results is available here (for debugging purposes): https://jetpack-e2e-dashboard.herokuapp.com/pr-16633

Scheduled Jetpack release: September 1, 2020.
Scheduled code freeze: August 25, 2020

Generated by 🚫 dangerJS against 7bb608c

@marekhrabe marekhrabe added [Status] Needs Review This PR is ready for review. [Status] Needs Team Review Obsolete. Use Needs Review instead. labels Aug 3, 2020
@marekhrabe marekhrabe added this to the 8.9 milestone Aug 3, 2020
@cpapazoglou cpapazoglou self-requested a review August 4, 2020 08:47
@getdave getdave requested a review from a user August 4, 2020 09:25
@getdave
Copy link
Contributor

getdave commented Aug 4, 2020

the preview button is slightly misaligned from icons - not sure what to do here. buttons come with their padding and if we remove if, the hover/focus would look wrong. Equally wrong is when we artificially just move the button to the left and hover/focus will then reveal the outline of the button to be super close to the edge of the sidebar

Looks like we might need some input from @sfougnier on this one. TBH the button as it is currently shown is pretty easy to miss. Moreover, it doesn't look like a button until you interact with it.

getdave
getdave requested changes Aug 4, 2020
View reviewed changes
Copy link
Contributor

@getdave getdave left a comment

Choose a reason for hiding this comment

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

Nice work on this.

I tested this on a local JP install and I saw the behaviour as per the testing description.

Screen Capture on 2020-08-04 at 10-23-25

One question: this PR will create and show this new panel but - as you've clearly noted in the PR description - the feature isn't "ready" yet (ie: the preview button doesn't do anything). How are we protecting against showing users an incomplete feature? I'm sure I'm missing something we have in place, but felt I needed to ask before green lighting this one.

@marekhrabe
Copy link
Contributor Author

marekhrabe commented Aug 4, 2020

How are we protecting against showing users an incomplete feature? I'm sure I'm missing something we have in place, but felt I needed to ask before green lighting this one.

That's a fair ask! We have marked this extension as beta and you need to opt into using it (those PHP constants). This was done in #16615 as a preparation for the developement. Once we are done, we'll be moving that to production and that will make it show up publicly.

@marekhrabe marekhrabe mentioned this pull request Aug 4, 2020
Closed
@marekhrabe
Copy link
Contributor Author

marekhrabe commented Aug 4, 2020

I have created a followup for design updates #16701 so we don't need to block this PR with it. Since none of this is live, I'd rather iterate on design separately if you are okay with it, @getdave?

jeherve
jeherve requested changes Aug 4, 2020
View reviewed changes
@jeherve jeherve added [Status] Needs Author Reply We need more details from you. This label will be auto-added until the PR meets all requirements. and removed [Status] Needs Review This PR is ready for review. labels Aug 4, 2020
@marekhrabe
Copy link
Contributor Author

marekhrabe commented Aug 4, 2020

Screenshot 2020-08-04 at 14 19 54

All feedback addressed I think. We'll still have to iterate on the design and colors of the icons but they should no longer be blocking with the file import as they were.

@jeherve jeherve mentioned this pull request Aug 4, 2020
Closed
jeherve
jeherve approved these changes Aug 4, 2020
View reviewed changes
Copy link
Member

@jeherve jeherve left a comment

Choose a reason for hiding this comment

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

This looks good to me. 🚢

@jeherve jeherve removed the [Status] Needs Author Reply We need more details from you. This label will be auto-added until the PR meets all requirements. label Aug 4, 2020
@jeherve jeherve added [Status] Ready to Merge Go ahead, you can push that green button! and removed [Status] Needs Team Review Obsolete. Use Needs Review instead. labels Aug 4, 2020
@marekhrabe marekhrabe requested a review from getdave August 4, 2020 15:29
@marekhrabe marekhrabe merged commit 6ee867e into master Aug 5, 2020
@marekhrabe marekhrabe deleted the add/social-preview-sidebar branch August 5, 2020 11:07
@matticbot matticbot added [Status] Needs Changelog and removed [Status] Ready to Merge Go ahead, you can push that green button! labels Aug 5, 2020
@getdave getdave mentioned this pull request Aug 5, 2020
Merged
@jeherve
Copy link
Member

jeherve commented Aug 5, 2020

r211659-wpcom

davidlonjon added a commit that referenced this pull request Aug 6, 2020
@davidlonjon
Merge branch 'add/jetpack-lazy-images-package' of github.com:Automatt…
cc0cf00 
…ic/jetpack into add/jetpack-lazy-images-package

* 'add/jetpack-lazy-images-package' of github.com:Automattic/jetpack: (40 commits)
  Lodash: Revert to previous version (#16735)
  New class to handle async XML-RPC requests (#16674)
  Social Previews: Sidebar design updates (#16725)
  Update E2E locator for classic connection flow (#16708)
  Woo Services: update to use existing Jetpack plugin install tools (#16672)
  Admin Page: avoid blank dashboard when notice is not a string (#16721)
  Admin Page: update string still using old i18n format (#16722)
  Social Previews: Add sidebar UI (#16633)
  Fix recurring payments block disconnecting (sometimes) when existing article is reopened in block editor. (#16640)
  Connection Register: Add current user email to connection register request (#16712)
  Update versions to start 8.9 Release cycle (#16706)
  Donations block: Make currency and amounts editable (#16593)
  Update dependency @automattic/calypso-color-schemes to v2
  Error Notice: removing HTML code, adjusting maximum width. (#16690)
  Update dependency swiper to v6 (#16587)
  Site Scan: Short-circuit update_threats_link() if Admin Bar is not present (#16677)
  Update vulnerable NPM packages (#16659)
  E2E Tests: Add Jetpack updater test (#16437)
  check for subdir site before rendering Ads.txt section (#16671)
  VideoPress Block: Retain alignment support (#16651)
  ...
pereirinha pushed a commit that referenced this pull request Sep 10, 2020
@marekhrabe
[not verified] Social Previews: Add sidebar UI (#16633)
e0bef1e 
* move social icons to shared file, add google icon

* add sidebar panel

* add aria label to button

* add text domain

* use exact same color vars as back in publicize

* remove extra colors import
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@jeherve jeherve jeherve approved these changes

@getdave getdave getdave approved these changes

@cpapazoglou cpapazoglou Awaiting requested review from cpapazoglou

Assignees

@marekhrabe marekhrabe

Labels

Touches WP.com Files

Projects

None yet

Milestone

8.9

Development

Successfully merging this pull request may close these issues.

(5P) Social Previews: Add Jetpack sidebar panel

6 participants

@marekhrabe @matticbot @jetpackbot @getdave @jeherve