Make WordPress Core

Opened 17 months ago

Last modified 17 months ago

#56813 new defect (bug)

Heading Block Margin Issue

Reported by: piyushpatel123's profile piyushpatel123 Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 6.0.2
Component: Editor Keywords:
Focuses: Cc:

Description

I have checked the heading block WordPress latest version with the Twenty Twenty-Two theme. But the heading block left & right margins are not working.

Screenshot of the issue: https://prnt.sc/WLET9Xj4Adjc

Change History (5)

#1 @piyushpatel123
17 months ago

Also heading margin issue with the Twenty Twenty theme.
See this screenshot: https://prnt.sc/OYFGKrxX_tsJ

#2 @poena
17 months ago

Hi!
Thank you for the report and the screenshots.

Can you include any more details on how to reproduce this in Twenty Twenty, and what the expected result is?
Twenty Twenty does not have editor controls for margins on the heading block, did you disable all plugins?

I apologize if this is too technical, or not technical enough:

In block themes the left and right margin of the block in the block editor is limited by the post content block. Everything we add in the block editor when a block theme is active, is placed inside the post content block, we just don't see it in the editor.
The left and right margins are set to auto to make sure that the block is positioned correctly both when there are no alignments, and when the block is set to wide or full width.

-There is a work around, and that is to wrap the heading inside a group block, and toggle off the layout setting "Inner blocks use content width".

For me the main question is how we can update the interface to help users understand why the option only works sometimes.

#3 @ironprogrammer
17 months ago

  • Keywords reporter-feedback added

Adding reporter-feedback per @poena's question, comment:2.

#4 @piyushpatel123
17 months ago

Hello,

# Twenty Twenty-Two Theme:

  • For that theme margins left & right is not working.

#5 @ironprogrammer
17 months ago

  • Component changed from General to Editor
  • Focuses ui removed
  • Keywords reporter-feedback removed

Here are some screenshots that show the workaround described by @poena in comment:2.

https://cldup.com/UV2xf64BRh.png
Figure 1: Editor - Heading with 70px left margin, nested within a Group block with "Inner blocks use content width" disabled.

https://cldup.com/kwOMOwm3N6.png
Figure 2: Frontend - Nested Heading's 70px left margin is observed.

As stated earlier, this isn't a bug, but does leave room for improvement in how the editor can convey the end result of applied margins. At this time it's pretty subtle, temporarily displaying a blue margin gap, as shown here:

https://cldup.com/YDEwyY5HsF.gif
Figure 3: Editor - Interface feedback when margin is adjusted.

I'll remove reporter-feedback for now, and suggest this be closed with follow-up over in Gutenberg Issues as an enhancement to improve the UI feedback. What do you think, @poena?

Note: See TracTickets for help on using tickets.