Row block justification settings ignored in the iframed editor with classic themes

[nidhidhandhukiya]

Steps to reproduce the issue :-

1. Activate Twenty Twenty one theme.
2. Choose Row block.
3. Add some text into that.
4. Now choose justify center or right.

You can able to see a difference in front side but editor side it remains same.
I have attached video for better understanding.
Video URL :- ​https://share.cleanshot.com/hNt5nZsXBztn6Z36XqMy

[darshitrajyaguru97]

Test report for https://core.trac.wordpress.org/attachment/ticket/60080/60080.patch

Environment:
===========
WordPress: 6.4.2
PHP: 8.1.9
Web Server: Nginx
Browser: Chrome
OS: Windows 10

Testing Video:
============
Before Patch:
Video URL: ​https://www.awesomescreenshot.com/video/23322936?key=899c0bf1334e2319b60c1d244def1e62

After Patch:
Video URL: ​https://www.awesomescreenshot.com/video/23323064?key=cc46fdc14b84891e828cdda9bfb78e2d

Patch is working properly.

[sabernhardt]

The problem can happen with any classic theme in the iframed post editor, including all the bundled themes from Twenty Ten to Twenty Twenty-One.

The editor's classic.css margins override the zero margin for flex items.

/* classic.css */
.editor-styles-wrapper .wp-block {
  margin-left: auto;
  margin-right: auto;
}
/* flex styles printed inline */
body .is-layout-flex > * {
  margin: 0;
}

It happens in WordPress 6.4.2 without Gutenberg, plus it can occur with Gutenberg 16.9.0 (and possibly an earlier plugin version) with WP 6.3.

This discussion should continue on the ​Gutenberg repository, and these are related:

• ​the flex issue was mentioned in a review
• ​proposal to change specificity

[sabernhardt]

iframe editor ignores justification settings in WordPress 6.4.2

[sabernhardt]

justification settings can work in WordPress 6.4.2 when the Custom Fields panel is activated (blocks are not in iframe)

[sabernhardt]

the justification had worked within an iframe with WordPress 6.3.2