Wp-calypso: BALASANA Buttons Are Created and Behave Differently from Button Blocks

[scosgro]

Steps to reproduce

1. This seems to vary theme to theme, but the Balsana template's buttons seem to function differently, and appear differently in the code editor, from a standard Button Block.
2. Discovered on Appetite, so start by activating Appetite theme.
3. Create a new Page, and use the Balsana Template. Publish it and check out the alignment of the buttons.
4. View the Code Editor, highlight and copy the columns section for those buttons in Balsana, then create a new page, paste that code into the code editor.
5. Switch to Visual, and manually add columns with a Heading, text, and a Button Block. Group them, make them wide width in the group. Align them each to Center, publish the page, and note the difference between the Balasana columns and manually created columns.
6. They seem to function differently across different themes, but why would the template's buttons be created differently/specially compared to a standard button block?

What I expected

The template to follow the same rules as if someone were manually creating it.

What happened instead

The template is created in a way that doesn't seem to be possible to recreate manually using blocks, and it functions differently as a result.

Browser / OS version

All.

Screenshot / Video

The top is a manual recreation and the bottom is the Balasana Template:

Here is how the buttons look when manually created in the Code Editor:

And here's how they look when using the Balasana template in the Code Editor:

And the differences behave differently. The template version is not able to be manually recreated, but it's used in our template, and has interesting behaviors across different themes.

Context / Source

reallife #painpoint #user-report

[simison]

Assuming "Appetite" and "Balsana" are either pattern, page template or theme names? 🙃

[scosgro]

Assuming "Appetite" and "Balsana" are either pattern, page template or theme names? 🙃

Appetite is a theme: https://wordpress.com/theme/appetite

Balasana is both a theme: https://wordpress.com/theme/balasana

And a template (layout?):

[simison]

I see. The difference seems to be that you have buttons (container of many buttons) and a button (a single button) blocks. Latter doesn't center-align.

@kjellr :wave: Have there been issues with button alignments in themes, specifically in _Appetite_ theme?

[kjellr]

It's very possible that there's an issue in Appetite. This should be filed over in the Premium Themes Trac.

[scosgro]

It's very possible that there's an issue in Appetite. This should be filed over in the Premium Themes Trac.

Is there a reason the Balasana template is using something different from a Button Block as it's added? If it used the actual button block (container?), it should work across all themes.

The issue is that the template can be used regardless of the active theme, since users are prompted to add a template (layout?) to a page whenever a new page is created. Themes seem to know how to handle the Button Block, but however it's added to Balasana (an individual button - not a block?), other themes don't seem to be prepared to know how to handle that.

[simison]

Is there a reason the Balasana template is using something different from a Button Block as it's added? If it used the actual button block (container?), it should work across all themes.

@ianstewart question for ya :-)

[ianstewart]

The Balasana defaults appear to work as expected in other Varia-themes. Coutoire, for example.

[ianstewart]

And can appear broken in non-Varia-themes. Twenty Twenty, for example.

So the issues with the display may extend beyond that one theme to all or many non-Varia themes.

[ianstewart]

(Looking at the issue with re-creating the layout in the WP.com Editor with @iamtakashi.)

[ianstewart]

I also can't get re-build the Balasana Layout from scratch in Balasana because I can't add a single Button Block on it's own and the Single Buttons, center-aligned in columns, aren't center-aligning.

[ianstewart]

Another example, with the Editor View (which also doesn't display center-alignment) in Balasana and different text that better shows off the misalignment.

[ianstewart]

The difference seems to be that you have buttons (container of many buttons) and a button (a single button) blocks. Latter doesn't center-align.

however it's added to Balasana (an individual button - not a block?)

I think there's a few issues here.

1. Single Buttons in the Buttons Block are not center-aligning in non-Varia themes..
2. Single Buttons in the Buttons Block are not aligning in any themes including Varia themes.
3. How did we get a single button outside the buttons block in the Balasana homepage layout? Users can't recreate that currently without manual editing in the editor code view.

We can update the layout (to resolve the issue with item 3) but I think we'll still need to fix the theme issues.

[simison]

How did we get a single button outside the buttons block in the Balasana homepage layout?

It might've been possible in older editor versions but has since been deprecated.

[kjellr]

Hmm, if this is happening in _all_ themes (and I think it is, based on my testing), I think this is probably a regression that should be fixed on Gutenberg's side. I'll do a little digging in later today.

[kjellr]

Yeah, this does indeed seem like a regression in Gutenberg. Gutenberg provides front-end styles to ensure that buttons are center aligned in the _Buttons_ block, but it does not do so for the old _Button_ block. I've filed an issue here: https://github.com/WordPress/gutenberg/issues/23291

[yansern]

Looks like this is fixed in https://github.com/WordPress/gutenberg/pull/23381.