Work ongoing in #19082 (see also mockups) has enabled previewing responsive changes to existing blocks. Specifically, it enables previewing content at three breakpoints, mobile, tablet and desktop. This opens up a number of questions and possibilities, one of which is: can we leverage this responsive preview feature, to enable responsive editing?

Examples of responsive editing:

• Showing a drop-cap in a paragraph, only on the desktop breakpoint.
• Showing 1 column on mobile, 2 on tablet, 4 on desktop.
• Showing a block only on mobile, hiding it on tablet or desktop.

This ticket shows some initial mockups exploring what that might look like. These mockups assume the following design constraints:

• Responsive editing is an advanced feature that will be used occasionally, and most users likely won't use it at all.
• Responsive editing should work with every existing block, and not require any additional code or opt-in.
• Any responsive change should be instantly previewed, be direct manipulation.

The above constraints make this ticket an alternative approach to #13363.

Mockups

• Preview button is replaced with a dropdown indicating the view you're currently seeing. This happens only when an editor registers an editor-style, indicating that the editor itself is a preview.

• Dropdown contains three breakpoints, defaulting to Desktop.
• "Preview in new window" has the same effect as the classic button.
• "Device specific editing" is toggled off by default.

• When "Device specific editing" is enabled, any change you make is saved only for the current view.
• A centered label at the bottom indicates that any change you are making is for that breakpoint only. Clicking "Done" untoggles the button again.

• In the Phone breakpoint, content is previewed in a phone sized canvas, including any breakpoint changes

• In this shot, the Image block was deleted.
• The blue dot indicates a change was made.

• The blue dot has a tooltip on hover, and on click you can port changes to other breakpoints, or undo changes.

• The blue dot also appears for any post or page that has had responsive edits made. Click it to open a dialog to view or change those edits.

Next steps

For the time being, the above flow shows how to:

• Enable responsive editing.
• Preview mobile, and delete an image just for that breakpoint.
• Surface which elements were changed, and how to port those to other breakpoints.

This flow on its own should be portable to making any other changes, such as column changes, or even alignment or sidebar changes. So now is a good point to stop and revisit the ideas presented:

• Enabling responsive editing happening in the same dropdown that you use to preview the changes.
• The blue dot to indicate something was changed (often used for "unsaved changes" or "notification").
• The blue dot can afford a tooltip and interface for enabling at other breakpoints.
• A hidden block becomes a placeholder.

Pending your feedback, subsequent discussion points include:

• What does the interface that lists all responsive changes look like?
• What does a sidebar option with a responsive change look like?
• How well does the blue dot scale to other responsive edits?
  • What would it look like for a drop-cap change?
  • An alignment change?
  • A column change?

Let's discuss.