Feat: global block styles

[kaeizen]

No description provided.

[github-actions]

🤖 Pull request artifacts

file	commit
pr3541-stackable-3541-merge.zip	abd7730

[github-actions]

Try this Pull Request in the WordPress playground: https://playground.wordpress.net/?mode=seamless#{"landingPage":"/wp-admin/post-new.php?post_type=page","preferredVersions":{"php":"latest","wp":"latest"},"steps":[{"step":"login","username":"admin","password":"password"},{"step":"installPlugin","pluginZipFile":{"resource":"url","url":"https://raw.githubusercontent.com/gambitph/Stackable/artifacts/pr3541-stackable-3541-merge.zip"}}]}

[DAnn2012]

Hello @mxkae

Could you include in this PR of yours these changes of mine to this file (#3473 ) from over 3 months ago?

Thanks.

[DAnn2012]

Hello @mxkae

Could you please include in this PR these changes I made to file src/components/variation-picker/index.js (#3321 ) about 9 months ago?

Thanks.

[bfintal]

Bug encountered:

• Add Card 3 design from the design library, then pick the first inner column, then create a new block style. The block would disappear and then the other columns would grow taller:

Screen.Recording.2025-07-16.at.11.06.47.AM.mov

Changes:

1. For the free, simplify the things present in the UI:

What we have now:

Change to:

• Remove "(Modified)"
• Remove reset button

2. I added a button (using blocksy with some blocksy styles), then updated to the PR. My style says "Default (Modified)" with a reset button even though nothing was modified in the block (clicking on the reset button does nothing):

3. Change it so that if it's in "Default" block style, it shouldn't ever say "(Modified)" and there shouldn't be any reset button.
4. When clicking the plus button, the name field should be auto-focused so you can type right away.
5. Match the normal style of the normal select drop down. Right now it looks different from the normal drop down. Any reason for this?

What we have:

What we normally use:

6. Change the alignment of the elements like this. If no reset button, occupy the entire width:

if there is a reset button, just add margin right to the select drop down:

7. The update button feels weird but I can't put my finger on it. it's like it's too wide or has too much gaps

[bfintal]

A few more changes:

• When you open the block style popover by clicking on the button, you should be able to press the up and down arrows to switch between the different block styles (focus moves on the buttons), then when you press enter, the block style selected will be selected.
• Add a focus on the "save" and "update" buttons when tabbing through them.
• Clicking on the default block style when the default block style is currently selected should not apply it. Currently, if you add the design "Call to action 1" from the design library, then select the heading block, you can click on the "default" block style and the text would turn black. Expected behavior is it will not do anything.
• When you open the block styles popover, the save style takes a few moments to show up, it should not do this and should just be there right away

Screen.Recording.2025-07-30.at.10.03.30.AM.mov