Make WordPress Core

Opened 19 months ago

Closed 3 months ago

#57472 closed defect (bug) (fixed)

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

Reported by: umesh84's profile umesh84 Owned by: karmatosed's profile karmatosed
Milestone: 6.6 Priority: normal
Severity: normal Version: 5.6
Component: Bundled Theme Keywords: has-screenshots has-patch needs-testing commit
Focuses: ui, css Cc:

Description

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

Attachments (7)

CleanShot 2023-01-16 at 18.48.34@2x.png (244.1 KB) - added by umesh84 19 months ago.
For better understanding I have attached a screenshot
default.jpg (110.4 KB) - added by nithins53 19 months ago.
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.
Pullquote-nonframed-editor-6.5.png (63.6 KB) - added by sabernhardt 3 months ago.
Pullquote block with zero margin in WordPress 6.5.2, non-framed editor
Pullquote-nonframed-editor-with-patch.png (39.0 KB) - added by sabernhardt 3 months ago.
with patch, the Pullquote block has auto margins for the left and right sides plus the 1.75em bottom margin used on the front
Pullquote-iframe-editor-with-patch.png (34.4 KB) - added by sabernhardt 3 months ago.
Pullquote in iframe editor with patch
57472.diff (504 bytes) - added by sabernhardt 3 months ago.
SCR-20240506-opiq.png (44.0 KB) - added by karmatosed 3 months ago.
Updated with patch

Download all attachments as: .zip

Change History (20)

@umesh84
19 months ago

For better understanding I have attached a screenshot

#1 @poena
19 months ago

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
19 months ago

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.

#2 @nithins53
19 months ago

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?

#3 @adeltahri
18 months ago

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;
}

This ticket was mentioned in PR #3884 on WordPress/wordpress-develop by AdelDima.


18 months ago
#4

  • Keywords has-patch added; needs-patch removed

#5 @bgoewert
18 months ago

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
https://i.imgur.com/JMPNO9P.png

After applying patch
https://i.imgur.com/wUYWjm8.png

#6 @karmatosed
4 months ago

  • Keywords needs-testing added

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
3 months ago

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

@sabernhardt
3 months ago

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
3 months ago

Pullquote in iframe editor with patch

#7 @sabernhardt
3 months ago

  • Keywords commit added; needs-testing removed
  • Milestone changed from Awaiting Review to 6.6
  • Summary changed from Twenty Twelve theme: Pullquote block alignment issue in backend site to Twenty Twelve: Pullquote block alignment issue from incorrect margin in editor
  • Version changed from 6.1.1 to 5.6

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.

#8 @karmatosed
3 months ago

  • Owner set to karmatosed
  • Status changed from new to assigned

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

#9 @karmatosed
3 months ago

  • Keywords needs-testing added; commit removed

@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.

#10 @karmatosed
3 months ago

  • Owner karmatosed deleted

@sabernhardt
3 months ago

#11 @sabernhardt
3 months ago

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.

#12 @karmatosed
3 months ago

  • Keywords commit added
  • Owner set to 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
3 months ago

Updated with patch

#13 @karmatosed
3 months ago

  • Resolution set to fixed
  • Status changed from assigned to closed

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.

Note: See TracTickets for help on using tickets.