CKEditor 5 "break text" media is center aligned in the editor

Problem/Motivation

Media embedded with CKEditor 5 defaults to the "break text" alignment option which should follow the default left alignment. But inside the editor, these items are centered horizontally, whereas when saved and viewed outside the editor, the embedded media item is left aligned as expected.

Steps to reproduce

1. Using Drupal version 9.5.5 install and enable CKEditor 5 and the Embed Media plugin.
2. Go to /admin/config/content/formats/manage/basic_html and configure the WYSIWYG editor to use the CKEditor 5 and the media embed plugin. See Embedding media with CKEditor documentation.
3. Create/edit a node and embed media within CKEditor by clicking the "Insert Media" button in the CKEditor toolbar. This will open the media library, where you can select the media file you want to embed.
4. Note that inside the editor, the embedded media item is horizontally centered.

5. Save the node and now note that the embedded media item is left aligned.

Proposed resolution

Inside the editor, embedded media is wrapped inside of a <figure> element whose CSS (from drupalmedia.css) is set to

display: table;
margin: 0.9em auto;

which results in a center-aligned media item. But when viewed outside of the editor, the media item is not wrapped in a <figure> element and therefore falls back to the default left alignment.

The CSS applied to editor-specific HTML elements should not introduce additional CSS formatting that will not be applied outside of the editor because it results in a discrepancy between the element's appearance inside and outside the editor.

Remaining tasks

User interface changes

After patch

API changes

Data model changes

Release notes snippet