User edits CMS page content in full-screen mode only

[tkacheva]

Story

As a Marketer I want to edit content in full screen mode only so that I have optimized experience with more space available and stage preview be closer to storefront view

Business Value

unified content editing experience across the areas controlled by Page Builder

Preconditions

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

Acceptance Criteria

• User doesn't see Page Builder navigational elements in Content section
• User sees only content on stage.
• User sees option to edit 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 the CMS 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 changes and sees them on the storefront
• 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

Mockups

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

[m2-assistant]

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:

• 1. Add a button to the CMS Edit page. @lbvaimo
  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
• 2. Change form "Edit with Page Builder" button position. @artKozinets
  • Check Page Builder page Content area
• 3. Add clickable overlay with "Edit in full-screen mode" button. @artKozinets
  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
• 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
• 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)
• 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
• 7. Fix broken tests. (ask @dhaecker how to fix tests) @omiroshnichenko
• 8. New MFTF test. @hannahnida