If Page Title comes before Featured Image it is overlapped

[naomi060397]

Description

In the Site Editor using the Twenty Twenty Three theme, I moved the Post Title before the Featured Image and the design broke.

I also tested this in different group blocks and without any parent group block as well. This also occurs on the front-end.

Step-by-step reproduction instructions

1. Activate the Twenty Twenty Three theme.
2. Go to the Site Editor and edit a page. In my case I just opened the default Sample Page that comes with WordPress.
3. Move the Post Title block before the Featured Image block in the page hierarchy.

Screenshots, screen recording, code snippet

Environment info

• WordPress version 6.2
• Gutenberg version 15.8.0
• Google Chrome version 113.0.5672.92
• MacBook Air M1 Chip running macOS Ventura 13.2.1

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[ntsekouras]

There seems to be an issue with Post Featured Image and the margins applied. You can reproduce by moving any block above it. A related PR was this one by @aaronrobertshaw . In 2023 the Post Featured Image block even if it has a value(from somewhere), still shows the custom control with no value in it.

[aaronrobertshaw]

Thanks for the ping on this one 👍

I believe there are a few things going on here that lead to this awkward overlap.

1. The TwentyTwentyThree Page & Single templates apply a negative top margin via the Featured Image block's attributes.
2. The top margin value is set via a complex CSS string i.e. calc(-1 * var(—wp—preset-spacing—50)). As a result, the value does not match one of the theme's preset values and the custom input is shown. Then because the value isn't a simple value, e.g. 1em, it isn't displayed within the custom input field's UnitControl.
3. If you set the top margin value on the block to anything it behaves correctly and the overlap is resolved. After doing so, the only way back to the original layout would be to reset all the customizations on the template, manually re-add the calc(-1 * var(—wp—preset-spacing—50)) value via the code editor, or add a custom class and add custom CSS via Global Styles.
4. The linked PR (Spacing: Fix reset of spacing sizes control #50455) is unrelated to this issue

The following video illustrates most of the points above.

Screen.Recording.2023-05-19.at.10.40.22.am.mp4

There isn't currently official support for negative block margins in our UI, nor complex CSS strings in our custom inputs so I'm not sure if this is something that will be addressed for now. If anything, I'd lean towards closing this issue or classifying it as a theme issue.

[ntsekouras]

Thanks for the detailed answer @aaronrobertshaw! @naomi060397 I agree with Aaron, that we can close the issue, since you now know what is happening and can find a workaround with 2023 in these specific templates.

@ciampo @mirka I couldn't find an issue about supporting negative margins in these components, should we create one? I don't include the complex css value(var, etc..), because I know it's really convoluted and there is probably no way currently to support that.

[aaronrobertshaw]

There's a feature request issue for negative margins and a WIP PR that might be of interest.

[ciampo]

I couldn't find an issue about supporting negative margins in these components, should we create one?

I don't think that supporting this feature really depends on @wordpress/components — control components dealing with numbers should support negative values out of the box, as far as I know

I don't include the complex css value(var, etc..), because I know it's really convoluted and there is probably no way currently to support that.

Yeah, that would be a completely separate issue. Components like UnitControl are simply not meant to represent complex values, at that point we might as well just use a plain InputControl (although that would pose a different set of challenges, like custom validation)