Resetting block controls to their default state is often unintuitive and is sometimes impossible

[cbirdsong]

There are a number of blocks in the editor where using a control changes the block markup/metadata, and resetting to a default untouched state is either unintuitive or impossible. This is problematic when trying to design default styles while respecting changes the user has made since the user does not think they've made an explicit choice.

Examples

Gallery Columns

The gallery block's columns control changes markup in a way that can't be undone. Here's the markup/serialized block data for a gallery where the columns value has not been edited:

<!-- wp:gallery {"linkTo":"none"} -->
<figure class="wp-block-gallery has-nested-images columns-default is-cropped"><!-- wp:image {"id":56,"aspectRatio":"1","scale":"cover","sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="http://stock.local/wp-content/uploads/2022/01/761eb638-10a7-3784-957b-51c63c28c58c-1024x683.jpg" alt="" class="wp-image-56" style="aspect-ratio:1;object-fit:cover"/></figure>
<!-- /wp:image -->

<!-- wp:image {"id":56,"aspectRatio":"1","scale":"cover","sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="http://stock.local/wp-content/uploads/2022/01/761eb638-10a7-3784-957b-51c63c28c58c-1024x683.jpg" alt="" class="wp-image-56" style="aspect-ratio:1;object-fit:cover"/></figure>
<!-- /wp:image --></figure>
<!-- /wp:gallery -->

Note the columns-default class and the lack of a columns key. If I change this gallery to 1 column and then set it back to 2 then this is the resulting markup:

<!-- wp:gallery {"columns":2,"linkTo":"none"} -->
<figure class="wp-block-gallery has-nested-images columns-2 is-cropped"><!-- wp:image {"id":56,"aspectRatio":"1","scale":"cover","sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="http://stock.local/wp-content/uploads/2022/01/761eb638-10a7-3784-957b-51c63c28c58c-1024x683.jpg" alt="" class="wp-image-56" style="aspect-ratio:1;object-fit:cover"/></figure>
<!-- /wp:image -->

<!-- wp:image {"id":56,"aspectRatio":"1","scale":"cover","sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="http://stock.local/wp-content/uploads/2022/01/761eb638-10a7-3784-957b-51c63c28c58c-1024x683.jpg" alt="" class="wp-image-56" style="aspect-ratio:1;object-fit:cover"/></figure>
<!-- /wp:image --></figure>
<!-- /wp:gallery -->

There is now a columns-2 class and a "2" key even though the block appears exactly the same to the user.

Column Width

When you add a set of columns that are equal width (50/50 or 33/33/33) the width value is empty, and adding another column resizes all the existing ones so they stay equal width. If a user tries out custom width and decides to go back to equal width they will likely type an explicit 50%, which then means that two column blocks that look identical to the user will have different markup and inline styles:

<!-- wp:columns -->
<div class="wp-block-columns">
<!-- wp:column -->
<div class="wp-block-column">
<!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column">
<!-- wp:paragraph -->
<p>Ergo id est convenienter naturae vivere, a natura discedere.</p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:column -->
</div>
<!-- /wp:columns -->

<!-- wp:columns -->
<div class="wp-block-columns">
<!-- wp:column {"width":"50%"} -->
<div class="wp-block-column" style="flex-basis:50%">
<!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:column -->

<!-- wp:column {"width":"50%"} -->
<div class="wp-block-column" style="flex-basis:50%">
<!-- wp:paragraph -->
<p>Ergo id est convenienter naturae vivere, a natura discedere.</p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:column -->
</div>
<!-- /wp:columns -->

Additionally, adding another column to a block with defined widths leads to a column that's a single pixel wide. This is a little odd on its own, but it's extra confusing when it unexpectedly occurs in a block with two columns that have explicit 50% widths, as to the user that block will look identical to a block with two columns that have no explicit width.

Text Alignment and Column Vertical Alignment

Blocks that support text alignment generally also inherit the alignment from parent elements. However, the fact that you can also select the default or inherited state is confusing. A user that changes a heading to "center" and decides they don't like that will probably just select "left" since there is no "none" option, as there is for the block's layout alignment.

CleanShot.2023-02-10.at.11.16.32.mp4

This means that blocks will have a text align class applied unnecessarily and will not react as expected when placed in a container that modifies text alignment.

(Much of this also applies to the column block's vertical alignment control.)

Row/Stack Alignment

These blocks include default alignment values and then the supporting styles are always included, even if the user didn't change them away from the default. This makes it impossible to take the user's choices into consideration when creating a block style or theme default styles.

Solution

It would be ideal if there was a consistent way to "unset" every control, like Webflow's "reset" function. You can sometimes use the reset function in the three dots menu, but that doesn't apply to many different controls.

---

Related issues:

• Similar UI controls have very inconsistent behavior around defaults #47976
• Adopt a classes-first approach to CSS #54033

[cbirdsong]

Found another example in this weird pill group control:

The starting state shows "fit" as selected, but that doesn't actually make a change to the block in code:

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity" />
<!-- /wp:separator -->

However, if you select something else and then select "fit" again, it does change the block's state in code:

CleanShot.2024-03-27.at.10.33.43.mp4

<!-- wp:separator {"style":{"layout":{"selfStretch":"fit","flexSize":null}}} -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->