Web-stories-wp: Reorganize video settings in design panel

[choumx]

Bug Description

IMO, the current structure of video settings in design panel doesn't make sense.

• Video settings
  
  
  
  • Loop / play once
  
  
• Captions
  
  
  
  • Upload captions
  
  
• Accessibility
  
  
  
  • Poster image selector
  
  
  • Title (text field)
  
  
  • Alt (text field)
  
  
  • "Text for visually impaired users." (label)
  
  

Issues:

• Captions is an A11Y feature
• Poster image and title are not A11Y features
• The sections should probably be merged

Proposed Behavior

• Video
  
  
  
  • Playback
  
  
  • Loop / play once
  
  
  • Performance
  
  
  • "Poster:" (label)
  
  
  • Poster image selector
  
  
  • "Burned-in text:" (title and alt label)
  
  
  • "Enter burned-in text in the video (if any)"
  
  
  • Accessibility
  
  
  • "Captions:" (label)
  
  
  • Upload captions button
  
  

Not sure if there's precedence for double-nesting in these sections -- could also divide into "Video playback", "Video performance", "Video accessibility".

References:

• https://blog.amp.dev/2020/02/12/seo-for-amp-stories/

Steps to Reproduce

N/A

Screenshots

Additional Context

• Plugin Version:
• Operating System:
• Browser:

---

_Do not alter or remove anything below. The following sections will be managed by moderators only._

Acceptance Criteria

Implementation Brief

[zidianlyu]

Here are the screenshots that I have in local, please feel free to comment:

[choumx]

Sorry for the churn, let's actually do this:

• Playback
  
  
  
  • Loop / play once
  
  
• Poster
  
  
  
  • [Poster selector]
  
  
  • "For improved loading experience on slower connections."
  
  
• Description
  
  
  
  • [Text field]
  
  
  • "For indexability and accessibility. Include any burned-in text inside the video."
  
  
• Captions
  
  
  
  • [Captions selector]
  
  

[zidianlyu]

Here is the update of the UI:

[csossi]

Verified in QA