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.

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

Shopping: Support drag & drop from library #11913

Merged
merged 16 commits into from
Jul 25, 2022

Conversation

timarney
Copy link
Contributor

@timarney timarney commented Jul 14, 2022

Context

Add support for dragging products from the library to the canvas.

Summary

Adds draggable product image

Relevant Technical Choices

To-do

Handle dragging product that already exists on the canvas

User-facing changes

Testing Instructions

  • This is a non-user-facing change and requires no QA

This PR can be tested by following these steps:

  1. Visit shopping tab
  2. Drag product image from shopping panel to the canvas
  3. The image upon drop should insert the product that was selected
  4. Products without images or that are already on the page should not be draggable (in other words: if the "Plus" icon button is disabled, so should be dragging)

Reviews

Does this PR have a security-related impact?

No

Does this PR change what data or activity we track or use?

No

Does this PR have a legal-related impact?

No

Checklist

  • This PR addresses an existing issue and I have linked this PR to it in ZenHub
  • I have tested this code to the best of my abilities
  • I have verified accessibility to the best of my abilities (docs)
  • I have verified i18n and l10n (translation, right-to-left layout) to the best of my abilities
  • This code is covered by automated tests (unit, integration, and/or e2e) to verify it works as intended (docs)
  • I have added documentation where necessary
  • I have added a matching Type: XYZ label to the PR

Fixes #11708

@timarney timarney changed the title Fix/11708 drag drop shopping image Shopping: Support drag & drop from library Jul 14, 2022
@timarney timarney added Group: Library Pod: WP Group: Shopping Shop-able products in stories Type: Enhancement New feature or improvement of an existing feature labels Jul 14, 2022
@timarney timarney self-assigned this Jul 15, 2022
@timarney timarney force-pushed the fix/11708-drag-drop-shopping-image branch from 8712a47 to da30509 Compare July 15, 2022 10:50
@timarney timarney marked this pull request as ready for review July 15, 2022 11:03
@swissspidy swissspidy requested a review from miina July 15, 2022 12:41
@github-actions
Copy link
Contributor

github-actions bot commented Jul 15, 2022

Size Change: +149 B (0%)

Total Size: 2.66 MB

Filename Size Change
assets/js/wp-story-editor.js 327 kB +149 B (0%)
ℹ️ View Unchanged
Filename Size
assets/css/carousel-view-rtl.css 702 B
assets/css/carousel-view.css 701 B
assets/css/web-stories-block-rtl.css 4.52 kB
assets/css/web-stories-block.css 4.56 kB
assets/css/web-stories-embed-rtl.css 318 B
assets/css/web-stories-embed.css 317 B
assets/css/web-stories-list-styles-rtl.css 2.36 kB
assets/css/web-stories-list-styles.css 2.39 kB
assets/css/web-stories-theme-style-twentyeleven-rtl.css 102 B
assets/css/web-stories-theme-style-twentyeleven.css 102 B
assets/css/web-stories-theme-style-twentyfifteen-rtl.css 251 B
assets/css/web-stories-theme-style-twentyfifteen.css 251 B
assets/css/web-stories-theme-style-twentyfourteen-rtl.css 287 B
assets/css/web-stories-theme-style-twentyfourteen.css 287 B
assets/css/web-stories-theme-style-twentyseventeen-rtl.css 288 B
assets/css/web-stories-theme-style-twentyseventeen.css 288 B
assets/css/web-stories-theme-style-twentysixteen-rtl.css 224 B
assets/css/web-stories-theme-style-twentysixteen.css 224 B
assets/css/web-stories-theme-style-twentyten-rtl.css 143 B
assets/css/web-stories-theme-style-twentyten.css 143 B
assets/css/web-stories-theme-style-twentytwelve-rtl.css 256 B
assets/css/web-stories-theme-style-twentytwelve.css 256 B
assets/css/web-stories-theme-style-twentytwenty-rtl.css 86 B
assets/css/web-stories-theme-style-twentytwenty.css 86 B
assets/css/web-stories-theme-style-twentytwentyone-rtl.css 326 B
assets/css/web-stories-theme-style-twentytwentyone.css 326 B
assets/css/web-stories-widget-rtl.css 482 B
assets/css/web-stories-widget.css 482 B
assets/css/wp-dashboard-rtl.css 657 B
assets/css/wp-dashboard.css 659 B
assets/css/wp-story-editor-rtl.css 737 B
assets/css/wp-story-editor.css 738 B
assets/js/1590.js 1.14 MB
assets/js/1814.js 7.46 kB
assets/js/2505.js 34.9 kB
assets/js/3617.js 224 kB
assets/js/4422.js 49.3 kB
assets/js/5980.js 5.48 kB
assets/js/carousel-view.js 3.41 kB
assets/js/chunk-colorthief.js 2.64 kB
assets/js/chunk-ffmpeg.js 5.64 kB
assets/js/chunk-focus-visible.js 1.01 kB
assets/js/chunk-getStoryMarkup.js 5.86 kB
assets/js/chunk-html-to-image.js 4.6 kB
assets/js/chunk-opentype.js 96 B
assets/js/chunk-react-calendar.js 12.4 kB
assets/js/chunk-react-color.js 44.3 kB
assets/js/chunk-resize-observer-polyfill.js 2.57 kB
assets/js/chunk-web-animations-js.js 14.6 kB
assets/js/chunk-web-stories-template-0-metaData.js 546 B
assets/js/chunk-web-stories-template-0.js 10.6 kB
assets/js/chunk-web-stories-template-1-metaData.js 540 B
assets/js/chunk-web-stories-template-1.js 9.01 kB
assets/js/chunk-web-stories-template-10-metaData.js 533 B
assets/js/chunk-web-stories-template-10.js 6.91 kB
assets/js/chunk-web-stories-template-11-metaData.js 540 B
assets/js/chunk-web-stories-template-11.js 8.51 kB
assets/js/chunk-web-stories-template-12-metaData.js 496 B
assets/js/chunk-web-stories-template-12.js 9.48 kB
assets/js/chunk-web-stories-template-13-metaData.js 525 B
assets/js/chunk-web-stories-template-13.js 7.3 kB
assets/js/chunk-web-stories-template-14-metaData.js 582 B
assets/js/chunk-web-stories-template-14.js 7.58 kB
assets/js/chunk-web-stories-template-15-metaData.js 544 B
assets/js/chunk-web-stories-template-15.js 8.21 kB
assets/js/chunk-web-stories-template-16-metaData.js 588 B
assets/js/chunk-web-stories-template-16.js 10.3 kB
assets/js/chunk-web-stories-template-17-metaData.js 539 B
assets/js/chunk-web-stories-template-17.js 8.52 kB
assets/js/chunk-web-stories-template-18-metaData.js 585 B
assets/js/chunk-web-stories-template-18.js 9.05 kB
assets/js/chunk-web-stories-template-19-metaData.js 501 B
assets/js/chunk-web-stories-template-19.js 9.99 kB
assets/js/chunk-web-stories-template-2-metaData.js 586 B
assets/js/chunk-web-stories-template-2.js 9.16 kB
assets/js/chunk-web-stories-template-20-metaData.js 548 B
assets/js/chunk-web-stories-template-20.js 8.59 kB
assets/js/chunk-web-stories-template-21-metaData.js 534 B
assets/js/chunk-web-stories-template-21.js 9.16 kB
assets/js/chunk-web-stories-template-22-metaData.js 525 B
assets/js/chunk-web-stories-template-22.js 7.37 kB
assets/js/chunk-web-stories-template-23-metaData.js 605 B
assets/js/chunk-web-stories-template-23.js 6.99 kB
assets/js/chunk-web-stories-template-24-metaData.js 518 B
assets/js/chunk-web-stories-template-24.js 10.8 kB
assets/js/chunk-web-stories-template-25-metaData.js 544 B
assets/js/chunk-web-stories-template-25.js 7.07 kB
assets/js/chunk-web-stories-template-26-metaData.js 601 B
assets/js/chunk-web-stories-template-26.js 6.85 kB
assets/js/chunk-web-stories-template-27-metaData.js 543 B
assets/js/chunk-web-stories-template-27.js 7.36 kB
assets/js/chunk-web-stories-template-28-metaData.js 532 B
assets/js/chunk-web-stories-template-28.js 8.49 kB
assets/js/chunk-web-stories-template-29-metaData.js 561 B
assets/js/chunk-web-stories-template-29.js 8.49 kB
assets/js/chunk-web-stories-template-3-metaData.js 540 B
assets/js/chunk-web-stories-template-3.js 8.22 kB
assets/js/chunk-web-stories-template-30-metaData.js 576 B
assets/js/chunk-web-stories-template-30.js 7.67 kB
assets/js/chunk-web-stories-template-31-metaData.js 503 B
assets/js/chunk-web-stories-template-31.js 9.61 kB
assets/js/chunk-web-stories-template-32-metaData.js 551 B
assets/js/chunk-web-stories-template-32.js 12.2 kB
assets/js/chunk-web-stories-template-33-metaData.js 492 B
assets/js/chunk-web-stories-template-33.js 8.86 kB
assets/js/chunk-web-stories-template-34-metaData.js 571 B
assets/js/chunk-web-stories-template-34.js 7.57 kB
assets/js/chunk-web-stories-template-35-metaData.js 565 B
assets/js/chunk-web-stories-template-35.js 8.81 kB
assets/js/chunk-web-stories-template-36-metaData.js 576 B
assets/js/chunk-web-stories-template-36.js 11.6 kB
assets/js/chunk-web-stories-template-37-metaData.js 528 B
assets/js/chunk-web-stories-template-37.js 6.47 kB
assets/js/chunk-web-stories-template-38-metaData.js 572 B
assets/js/chunk-web-stories-template-38.js 7.96 kB
assets/js/chunk-web-stories-template-39-metaData.js 589 B
assets/js/chunk-web-stories-template-39.js 7.67 kB
assets/js/chunk-web-stories-template-4-metaData.js 565 B
assets/js/chunk-web-stories-template-4.js 11.5 kB
assets/js/chunk-web-stories-template-40-metaData.js 556 B
assets/js/chunk-web-stories-template-40.js 9.13 kB
assets/js/chunk-web-stories-template-41-metaData.js 572 B
assets/js/chunk-web-stories-template-41.js 7.75 kB
assets/js/chunk-web-stories-template-42-metaData.js 522 B
assets/js/chunk-web-stories-template-42.js 7 kB
assets/js/chunk-web-stories-template-43-metaData.js 558 B
assets/js/chunk-web-stories-template-43.js 8.37 kB
assets/js/chunk-web-stories-template-44-metaData.js 582 B
assets/js/chunk-web-stories-template-44.js 10.1 kB
assets/js/chunk-web-stories-template-45-metaData.js 564 B
assets/js/chunk-web-stories-template-45.js 7.12 kB
assets/js/chunk-web-stories-template-46-metaData.js 531 B
assets/js/chunk-web-stories-template-46.js 5.01 kB
assets/js/chunk-web-stories-template-47-metaData.js 592 B
assets/js/chunk-web-stories-template-47.js 8.46 kB
assets/js/chunk-web-stories-template-48-metaData.js 556 B
assets/js/chunk-web-stories-template-48.js 8.31 kB
assets/js/chunk-web-stories-template-49-metaData.js 518 B
assets/js/chunk-web-stories-template-49.js 9.7 kB
assets/js/chunk-web-stories-template-5-metaData.js 555 B
assets/js/chunk-web-stories-template-5.js 9.38 kB
assets/js/chunk-web-stories-template-50-metaData.js 504 B
assets/js/chunk-web-stories-template-50.js 8.26 kB
assets/js/chunk-web-stories-template-51-metaData.js 527 B
assets/js/chunk-web-stories-template-51.js 9.89 kB
assets/js/chunk-web-stories-template-52-metaData.js 602 B
assets/js/chunk-web-stories-template-52.js 10.1 kB
assets/js/chunk-web-stories-template-53-metaData.js 553 B
assets/js/chunk-web-stories-template-53.js 5.79 kB
assets/js/chunk-web-stories-template-54-metaData.js 547 B
assets/js/chunk-web-stories-template-54.js 7.52 kB
assets/js/chunk-web-stories-template-55-metaData.js 574 B
assets/js/chunk-web-stories-template-55.js 6.56 kB
assets/js/chunk-web-stories-template-56-metaData.js 543 B
assets/js/chunk-web-stories-template-56.js 9.5 kB
assets/js/chunk-web-stories-template-57-metaData.js 528 B
assets/js/chunk-web-stories-template-57.js 14.1 kB
assets/js/chunk-web-stories-template-58-metaData.js 556 B
assets/js/chunk-web-stories-template-58.js 5.61 kB
assets/js/chunk-web-stories-template-59-metaData.js 588 B
assets/js/chunk-web-stories-template-59.js 8.52 kB
assets/js/chunk-web-stories-template-6-metaData.js 569 B
assets/js/chunk-web-stories-template-6.js 7.04 kB
assets/js/chunk-web-stories-template-60-metaData.js 509 B
assets/js/chunk-web-stories-template-60.js 8.89 kB
assets/js/chunk-web-stories-template-7-metaData.js 569 B
assets/js/chunk-web-stories-template-7.js 7.21 kB
assets/js/chunk-web-stories-template-8-metaData.js 569 B
assets/js/chunk-web-stories-template-8.js 8.4 kB
assets/js/chunk-web-stories-template-9-metaData.js 581 B
assets/js/chunk-web-stories-template-9.js 8.49 kB
assets/js/chunk-web-stories-templates.js 443 B
assets/js/chunk-web-stories-textset-0.js 5.08 kB
assets/js/chunk-web-stories-textset-1.js 6.64 kB
assets/js/chunk-web-stories-textset-2.js 7.67 kB
assets/js/chunk-web-stories-textset-3.js 15.1 kB
assets/js/chunk-web-stories-textset-4.js 4.16 kB
assets/js/chunk-web-stories-textset-5.js 5.49 kB
assets/js/chunk-web-stories-textset-6.js 5.3 kB
assets/js/chunk-web-stories-textset-7.js 10.2 kB
assets/js/generateBlurhash.worker.worker.js 1.1 kB
assets/js/imgareaselect.js 3.77 kB
assets/js/lightbox.js 550 B
assets/js/tinymce-button.js 2.84 kB
assets/js/web-stories-activation-notice.js 26.9 kB
assets/js/web-stories-block.js 22.7 kB
assets/js/web-stories-embed.js 20 B
assets/js/web-stories-widget.js 587 B
assets/js/wp-dashboard.js 72.6 kB

compressed-size-action

@googleforcreators-bot
Copy link
Collaborator

googleforcreators-bot commented Jul 15, 2022

Plugin builds for 60206b8 are ready 🛎️!

@timarney timarney requested a review from swissspidy July 19, 2022 20:06
@spacedmonkey
Copy link
Contributor

Screenshot 2022-07-20 at 15 14 32

Seeing this error when I drag into canvas.

@swissspidy
Copy link
Collaborator

Same here

@timarney
Copy link
Contributor Author

Added a conditional to fix the style issue seems to only happen using local WP.

75ba201

Copy link
Contributor

@spacedmonkey spacedmonkey left a comment

Choose a reason for hiding this comment

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

Seems to work well.

Copy link
Collaborator

@swissspidy swissspidy left a comment

Choose a reason for hiding this comment

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

Products are still draggable even when the insertion button is disabled because the limit of 6 products has been reached

Screenshot 2022-07-21 at 13 13 43

@spacedmonkey
Copy link
Contributor

Should the tooltip appear on when hover over the image when you try and drag it when you are not allowed?
Screenshot 2022-07-21 at 12 56 19

@swissspidy
Copy link
Collaborator

We can keep the tooltip as-is, only on the button.

@swissspidy swissspidy requested a review from miina July 21, 2022 12:53
@miina
Copy link
Contributor

miina commented Jul 22, 2022

Would be nice to add a Karma test as well for it if possible.
(It'll need a slight delay for Moveable/clone to load, for example:)

@timarney
Copy link
Contributor Author

Test was added here : https://github.com/GoogleForCreators/web-stories-wp/pull/11913/files#diff-fcd139b38af8fc60a75b51efebd73d31b67f0d19e1c799c037432b70f80ebcc9R244

@swissspidy swissspidy merged commit d0701bd into main Jul 25, 2022
@swissspidy swissspidy deleted the fix/11708-drag-drop-shopping-image branch July 25, 2022 15:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Group: Library Group: Shopping Shop-able products in stories Type: Enhancement New feature or improvement of an existing feature
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Shopping: Support drag & drop from library
5 participants