User sees content snapshot on Product Page in Admin Panel

[tkacheva]

Story

As a Marketer I want to see Page Builder content inside Product page in Admin panel so that Page Builder content editing is unified across Admin Panel and on Product and Category pages looks and works the same as in the CMS space

Business Value

unified content editing experience across the areas controlled by Page Builder

Preconditions

• User is logged into Admin Panel
• User is on Product page

Acceptance Criteria

• User scrolls to the attributes that controlled by Page Builder and sees stage with the content.
• User doesn't see Page Builder navigational elements
• User sees option to edit/add content
• User can initiate the editing mode with the keyboard
• User can't interact with the stage (like scroll the carousel)
• User enables editing content and sees page builder opens in full screen mode and content adjusts to the new viewport size
• USer sees navigation panel and other controls that allow to edit content
• User makes the changes to the content, exits full screen mode and sees Page Builder stage in context of Product Admin Page without any editing controls
• USer sees content adjusts to the new viewport size and includes all the changes they've done
• User saves the page and see changes on the storefront
• If user creates a staging update for the product, they have the same experience (all the AC above applicable) as when they update the content directly

Mockups

https://xd.adobe.com/view/90655572-7e53-44c2-43cf-98a27403af09-e654/

[m2-assistant[bot]]

Hi @tkacheva. Thank you for your report. To help us process this issue please make sure that you provided sufficient information.

Please, add a comment to assign the issue: @magento I am working on this

---

• Join Magento Community Engineering Slack and ask your questions in #github channel.

[omiroshnichenko]

Sub-tasks:

• [x] 1. Add a stage to the Product Edit page. @artKozinets AC:
  • User scrolls to the attributes that controlled by Page Builder and sees stage with the content.
  • User sees option to edit/add content
  • User sees navigation panel and other controls that allow to edit content
  • User makes the changes to the content, exits full screen mode and sees Page Builder stage in context of Product Admin Page without any editing controls
  • User sees content adjusts to the new viewport size and includes all the changes they've done
  • User saves the page and see changes on the storefront
• [x] 2. Change form "Description" label position. — @bluemwhitew
  • Check Page Builder product attribute aligned with the Description field
• [x] 3. Add clickable overlay with "Edit in full-screen mode" button. — @bluemwhitew AC:
  • User enables editing content and sees page builder opens in full screen mode and content adjusts to the new viewport size
    • User sees navigation panel and other controls that allow to edit content
    • User makes the changes to the content, exits full screen mode and sees Page Builder stage in context of Product Admin Page without any editing controls
  • User sees content adjusts to the new viewport size and includes all the changes they've done
  • User saves the page and see changes on the storefront
• [x] 4. Remove navigation items. @lbvaimo
  • remove content-types
  • template buttons
  • do not trigger option panels on each content-type AC:
    • User doesn't see Page Builder navigational elements
• [x] 5. Add accessibility support for stage overlay @artKozinets
  • support tabulation over "Edit with Page Builder" -> snapshot overlay -> next field
  • do not tab over the elements in the snapshot AC:
  • User can initiate the editing mode with the keyboard
  • User can't interact with the stage (like scroll the carousel)
• [x] 6. Make sure the Staging update form aligned with the main form. @lbvaimo
  AC:
  • If user creates a staging update for the page, they have the same experience (all the AC above applicable) as when they update the content directly
• [x] 7. Fix broken tests. @lbvaimo
• [x] 8. New MFTF test. @hannahnida