Try: Fix display of the annotation.

[juanfra]

Description

Fixes #555

Changing the display so that it shows in context in the editor, and using a width to adjust to its content.

The alignment of the annotation will depend of its parent element (stack, for example).

Screenshots

Screen.Recording.2024-10-16.at.10.52.07.mov

Testing Instructions

1. Create a page.
2. Add a paragraph of "annotation" style.
3. Confirm that the paragraph is located in context and not on the left as it was before.

[github-actions]

Preview changes

You can preview these changes by following the link below:

• Preview changes for twentytwentyfive

I will update this comment with the latest preview links as you push more changes to this PR.
⚠️ Note: The preview sites are created using WordPress Playground. You can add content, edit settings, and test the themes as you would on a real site, but please note that changes are not saved between sessions.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: juanfra <[email protected]>
Co-authored-by: jasmussen <[email protected]>
Co-authored-by: beafialho <[email protected]>
Co-authored-by: mhkuu <[email protected]>
Co-authored-by: troychaplin <[email protected]>
Co-authored-by: hanneslsm <[email protected]>
Co-authored-by: carolinan <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[jasmussen]

Any reason to not include the !important? It makes the margin-inline still apply, which should not change, but in fact add to, the existing margins.

I'm happy to land this as a more solid alternative to the inline-flex that was applied before. I'd love a quick gut-check by @beafialho if she has time.

[beafialho]

Thanks for the ping! Testing the behaviour, it seems to work nicely. I'm able to align it wherever I want to (left, right, inside columns, etc), even though the default alignment is centered.

[juanfra]

Any reason to not include the !important? It makes the margin-inline still apply, which should not change, but in fact add to, the existing margins.

@jasmussen the reason is that adding the important was pretty much affecting some layouts we already have in place, as I shared here

Screen.Recording.2024-10-16.at.11.49.16.mov

Recording the screencast, I realized that if we're ok with inheriting the margin rules, then we could remove the margin-inline and it will still work as I shared initially.

[jasmussen]

Oh, gotcha. Then this PR is probably best to land as is! What do you think?

[juanfra]

Oh, gotcha. Then this PR is probably best to land as is! What do you think?

I believe we could also remove the margin-inline: max(0px, ((100% - var(--wp--style--global--content-size)) / 2)) as it's not having an effect. Not sure if I'm missing some scenario I didn't think?

[jasmussen]

Isn't that one what makes Bea's alignments here work? If not, and if it works without it, yes we can remove.

[juanfra]

I believe the alignment will be coming from parent elements as things are, and the margin wouldn't have an effect. I pushed a commit removing the margin-inline for Bea to try it out. If it's ok we move forward without it, if not I revert.

@beafialho can you please try it again with the most recent changes?

Thank you both 🙌

[mhkuu]

Hey there! 👋 Another test case is that with the current display: inline-flex, if you were to add any styling, that would look quite weird if your annotation spans multiple lines, as in the screenshot below:

With width: fit-content as proposed in this solution, the layout is restored. Maybe an annotation spanning multiple lines including styling is not an intended use case for annotations but it's nice that this PR would solve the display of that as well.

[juanfra]

Thanks for sharing Martijn. That's another good reason to get this one merged.

[jasmussen]

Indeed! I'd suggest merging, so we can get some experience with it. Thanks for the work.

[juanfra]

Perfect, merging then. Thank you all!

[carolinan]

The text alignment still is not working.
I want to ask again if it would be better to create a block variation..?

[carolinan]

The text alignment works if I enable width: "fit", but I am not sure users will understand how these work together.

[jasmussen]

The text alignment is visible if you a full paragraph. The fact that it's centered is a bit of a tradeoff, that I think is acceptable in keeping the style as it is. It allows patterns to work, it's ergonomic, and arguably centering the pill-shape can also be an aspect of how it works. I would recommend keeping as-is.

[carolinan]

The text alignment is visible if you a full paragraph.

I don't understand. I think a word is missing?

[jasmussen]

Ack, my apologies, chaotic morning. I meant to say: "The text alignment is visible if you write a full paragraph", by which I mean this:

I know that's not the intent of the text style. But it matters to me that on a technical level, the text alignment isn't actually broken, it's just not visible when the item is centered. It's similar to any paragraph you put inside a Row block:

Because of this, it still feels reasonable to offer this text style. You can try it out when you're authoring your docs, see if it fits. And it provides better ergonomics once you edit some of the TT5 patterns, which may be the more prevalent use case of the pill shape.

[carolinan]

OK, thank you.