User sees content snapshot on Category Page in Admin Panel

[tkacheva]

Story

As a Marketer I want to see Page Builder content inside Category 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 Category page

Acceptance Criteria

• User scrolls to the category description 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 Category 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 category, they have the same experience (all the AC above applicable) as when they update the content directly

Mockup

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 category page - @lbvaimo
• [x] 2. Change form "Description" label position. - @artKozinets
• [x] 3. Remove navigation items - @lbvaimo
  • remove content-types
  • template buttons
  • do not trigger option panels on each content-type
• [x] 4. Add clickable overlay with "Edit in full-screen mode" button. @hannahnida
• [x] 5. Add accessibility support for stage overlay @artKozinets (change approaches #511 subtask 6)
  • support tabulation over "Edit with Page Builder" -> snapshot overlay -> next field
  • do not tab over the elements in the snapshot
• [x] 6. Make sure Staging update form aligned with a main form. - @lbvaimo
• [x] 7. Create animation for enter/exit full screen mode - @hannahnida
• [x] 8. Fix broken tests - @lbvaimo
• [x] 9. New MFTF test. - @artKozinets

[tkacheva]

@omiroshnichenko and team! great job! story approved.

P.S. make sure that background video works with parallax

[nizarn]

Internal Issue link: https://jira.corp.magento.com/browse/PB-581