Twenty Twelve: Pullquote block alignment issue from incorrect margin in editor

[umesh84]

In Twenty Twelve Theme: when we add a Pullquote Block on the
Editor-side alignment is not proper.

[umesh84]

For better understanding I have attached a screenshot

[poena]

Hi, are you able to provide any more details?

I am not able to see from the screenshot which alignment that is selected in the block options, if it is set to left, wide, or perhaps none: and I do not know what result you expected.

Does it display correctly on the front?

[nithins53]

Even if alignment is set to None, the pullquote is a bit towards the left and not in the center. I think that is what is being referred to here.

[nithins53]

In other themes, if we insert a pullquote block in the editor side, the pullquote is placed in the middle but in Twenty twelve it moves to the left a bit. @umesh84 is this what you are referring to?

[adeltahri]

I reproduced this issue with WordPress version 6.2.0 too, the issue
on editor-blocks.css

this CSS code on editor-blocks.css should be removed.

.edit-post-visual-editor .wp-block-pullquote {
    margin: 0;
}

WordPress Core already has this one:

.editor-styles-wrapper .wp-block {
    margin-left: auto;
    margin-right: auto;
}

Patch refresh for: https://core.trac.wordpress.org/ticket/57472

[bgoewert]

Test Report

This report validates that the indicated patch addresses the issue.

Patch tested: ​https://github.com/WordPress/wordpress-develop/pull/3884

Environment

• OS: Pop!_OS 22.04
• Web Server: Docker Desktop & wordpress-develop
• PHP: 7.4.33
• WordPress: 6.2-alpha-54642-src
• Browser: Chrome 109, Firefox 108
• Theme: Twenty Twelve
• Active Plugins: none

Actual Results

• ✅ Issue resolved with patch.

Supplemental Artifacts

Before applying patch

After applying patch

[karmatosed]

Is this something able to still be reproduced? I am struggling finding the same problem today @bgoewert and curious if you are in Twenty Twelve which is the reported theme.

[sabernhardt]

Pullquote block with zero margin in WordPress 6.5.2, non-framed editor

[sabernhardt]

with patch, the Pullquote block has auto margins for the left and right sides plus the 1.75em bottom margin used on the front

[sabernhardt]

Pullquote in iframe editor with patch

[sabernhardt]

To experience the issue in WordPress 6.5, use the non-framed editor (show the Custom Fields panel or activate a plugin such as Yoast SEO).

The .edit-post-visual-editor class is outside the iframe, so the style that the patch removes would not apply when the editor canvas is framed.

I did not find an explanation on #45040 for why its patch(es) had set the margins to zero, though I think it might have been intended to remove browser styles on the figure element. GB10425 adjusted the plugin's left and right margins to zero one week before the theme's patch was uploaded, which suggests that the block style change was not noticed yet. I can remove the style from the theme's CSS without any difference when using WordPress 5.0.21 (in addition to 5.4.2 and 5.5).

WordPress 5.6 removed the <div data-type="core/pullquote"> container, and the block needed to retain auto margins for the left and right sides plus 1.75em for the bottom margin within the editor.

[karmatosed]

I can replicate this after those instructions thank you @sabernhardt. I'm going to now work on the patch and commit.

[karmatosed]

@sabernhardt in testing I can't actually get with the latest version pulled today the patch to work. Can you check again for me. I did remove cache and test specifically in Safari and Chrome but it doesn't resolve the problem for me. I'm curious if it does for you.

[sabernhardt]

I was able to apply ​3884.diff to SVN and have auto margins again in the non-framed editor.

I created a patch from SVN in case that might help, making exactly the same change.

[karmatosed]

Thank you @sabernhardt I can confirm that now works. I am going to commit this and get it patched in, thank you everyone.

[karmatosed]

Updated with patch

[karmatosed]

In 58104:

Twenty Twelve: Pullquote block alignment correction for margins.

The pullquote wasn't aligning correctly centrally. This fixes that issue by adding that in.

Props umesh84, poena, nithins53, adeltahri, bgoewert, sabernhardt.
Fixes #57472.