How can I achieve this UI? child group block width: fit-content

[kohheepeace]

Problem

I would like to achieve the following "Expected" design. However, I could not find a good method. Any advice would be appreciated.

Problem	Expected

What I tried

• Add border to paragraph block
  => There is no border options for paragraph block (Tracking: Border Design Tools Consistency #43247)

• Wrap paragraph with group block
  => there is no option "width: fit-content"

[t-hamano]

Hi @kohheepeace,

Is it possible to achieve the same thing by changing the row layout's "Justification" to "Justify items center" ?

How about changing the Group block to the Stack layout and changing "Justification" to "Justify items center" ?

[kohheepeace]

@t-hamano Thanks for your reply.

Unfortunately, it does not work.

I tried at https://playground.wordpress.net/

Actual	Expected

[t-hamano]

Are you applying the green background color to the Stack block itself? If you select "Justify items center" for the Stack block, the width of the Stack block itself will not change. The width of the Stack block's child blocks should change depending on the length of its content. It would be easier to understand if you apply a background color to the paragraph block inside the Stack block.

[kohheepeace]

My goal is to add border. But it is not possible to add border when using paragraph block.

So, I used group block to wrap paragraph.

Then, another problem is happened. => group block doesn't support width: fit-content.

I apologize for my poor explanation. 😢

The following theme.json did not add border support to the paragraph block.

  "settings": {
    "appearanceTools": true,
    "border": {
      "color": true,
      "radius": true,
      "style": true,
      "width": true
    },        
    "blocks": {
      "core/paragraph": {
        "border": {
          "radius": true,
          "width": true
        }
      }
    }
  },

[t-hamano]

How about wrapping the paragraph block inside the Stack block with a Group block and apply a background color and border to that Group block?

[kohheepeace]

You are a genius! It worked!!! Thanks !!!!