[Columns Block] Make it clearer how to return to original width option after insertion

[annezazu]

What problem does this address?

Currently, if you try to insert a column into the Site Editor, you're able to set two different width options: Wide or Full. However, you're not able to return to the initial state a column block was in. This makes for a confusing experience if you just wanted to try out Wide & Full but decided to return to the initial setup. Here's a video to explain:

column.width.settings.mov

Initial width:

Wide width:

Full width:

Because you only have two options (wide & full), you're not able to get back to the original state unless you use the undo button or delete & readd.

What is your proposed solution?

Allow for an option to return to the initial width setting.

[Mamaduka]

You can go back to the original width by click the currently selected width. But I also find this UX a little confusing.

[annezazu]

@Mamaduka can you clarify perhaps with a video or screenshot of how you might get back to the original width? I'm not able to find a way back.

[Mamaduka]

@annezazu Sure thing.

Here's a screencast:

columns-go-back.mp4

[javierarce]

Interesting discovery, @Mamaduka!

I did a little research and I noticed that the column block doesn't support the center alignment property. The funny thing is that if I add it, I'm able to select the "Align center" option… but just for themes that aren't FSE ready (!)

For themes that support the FSE, this doesn't seem to work consistently. For instance, I can add the left and right properties, but then it's only available for some themes and not for others 😅

That said, I agree with your solution @annezazu, and would also expect to have an "Align center" property to return to the initial state the block was in.

[annezazu]

Wow! Mind blowing. That's definitely not intuitive 😆 so I'm going to leave this open but edit the title to make it a bit clearer that it's less about allowing the option and more about making it clearer.

[Mamaduka]

Maybe we can add the "Remove Alignment" menu item at the bottom of the list.

Example from the CoBlocks animations menu.

[Mamaduka]

I just noticed "None" and "No alignment" options in mockups for "Dimensions Panel."

What do you think about adding this option?

[annezazu]

Great thinking - I really like this :)