Button Bug: Styling with global class

Cwicly Version: 1.3.3 & 1.3.4
WordPress: 6.4.1

Hi! I encountered some issues with the button block. I noticed a few unusual behaviours:
When I styled it with a global class, I was unable to style it properly.

  1. When I styled the button with a global class, the first button did not display the icon, which is strange.
  2. When I deselected the icon position on the non-global class and selected the icon position on the global class, the icon position on the default class reverted to “before” when I refreshed the page.
  3. When I applied a border, setting the left, right, and top to 0 and the bottom to 2px, it still showed a border on all four sides at first, until I refreshed the page.
  4. When I styled the button with a global class, the “icon position” didn’t seem to work correctly. It appears to work better with the default class.

Screencast:

I look forward to hearing from you.
Thank you!

Hi @jornes,

Thank you for bringing this to our attention!
And thank you for the screencast.

Unfortunately, I haven’t been able to reproduce this on my end.

Could you possibly provide a clear reproduction process, so I may try to reproduce it on my end?
Thank you.

Currently, this is a bug as the position property shouldn’t be available for global classes, but only for block classes.
We’ll be sure to rectify this as soon as possible.

To globally apply a position to the button icon, set the direction to row and reverse.

I have also been unable to reproduce this on my end.

To investigate further, please login to this demo instance and see the Button test page.
Feel free to modify anything.

I believe this repeats the 2nd point, or am I missing something?

Thank you.

I think again and understand why you couldn’t reproduce it.
It’s normal that you couldn’t reproduce this because the icon’s position will be returned as “before” for all after I refresh the editor. So, even if I deselect the icon’s

Thank you!

I just tested, and the icon did not show if I chose the global class (I think this due to the “style button with global class is not working” so the size from the global class didn’t apply to the icon). Anyway, I tested by deselecting the icon’s position on the block classes.

Here is the screencast:

It only works well when it’s on block classes. Styling with block classes, I can style it as usual including changing position (without reversing the direction as you suggested).

Yes. It is happening occasionally, but not often.

Anyway, I have feedback on the border width setting.

For example, when I want the button to have a border at the bottom only, I give the border-bottom a value of 2px. Then the rest of the fields are blank. The front end should show the border-bottom only. But it is not the case on the front end if I leave them blank. It shows a border for all sides (refer to the 3 buttons below) even if I give 2px to 1 side only.
image

So, for now, I have to set them 0px for all the sides on which I don’t want the border.
image

Yes! This repeated. Just to show the button is not working well when styling with global class.

Let me know if you still insist on the temp access link.

Thank you!

Hi @jornes, just highlighting the following thread for a similar issue with icon lists:

1 Like

Hey @jornes.

Please check the following thread to understand the border property logic:

1 Like

Thank you @Marius

Checked the article and understood now.

Thank you! @StrangeTech
Yes! Araminta has confirmed this as bug.

1 Like

Hi @jornes,

This should no longer be an issue in 1.3.4, as we have disabled the position property for global classes:

Kindly let me know if this is the case on your end.

Thank you in advance.

Hi @Araminta
Sorry for I didn’t get back to you about this soon.

Okay! Now I noticed something is still not working.

Please refer to the screencast:

The space value worked on the block, but it did not work on the global class.

I look forward to hearing from you.
Thank you!

1 Like

Hi @Araminta
I think you have overlooked this?

Sorry for the lack of reactivity on this, @jornes.

With 1.3.4.6, spacing applied through a global class should now apply as expected:

Kindly let me know if this is the case on your end.

Thank you in advance.

1 Like