Component number property value CSS Variables are not added if top level block class is not present

Bugs
1

Description:

This is an urgent issue. @Louis, when you have a moment, will really appreciate it for you to take a look.

We have created a site with many components.

One feature we’ve added is the ability to set the image width using a number property.

We have connected this to the width property of the target block and it works perfectly when there is a single component used on the page.

As soon as you add an additional component it stops working.

If multiple different components are used and they have the same property type (e.g. number), it appears they are also conflicting with one another.

Step-by-step reproduction instructions:

  1. Open the Post Editor/Site Editor
  2. Create a component containing a block that responds to width changes
  3. Add a number property to the component
  4. Connect it to the width property of the block
  5. Notice that with a single instance this works correctly
  6. Add a second instance of the component
  7. Notice that it only uses the width value from the first component

Note: as mentioned above - it appears that the first property of the same type of the first component of any type is overriding the values of subsequent components.

Screenshots, screen recording, code snippet

Screenshot 2024-09-12 at 13.12.51

Environment info

  • WordPress version: 6.6.2
  • Cwicly Plugin version: 1.4.2
2

Created a minimal test case on a site with 1.4.2 and the property values don’t appear on the front end - the CSS variables do not get added and therefore the blocks that reference them do not display correctly.

3

Created a second minimal test case on a different demo site. Verified the issue with 1.4.2. Number property values are not added to the variables on the front end.

4

Hello @StrangeTech,

Sorry to hear about the issue.

Can you confirm you’re using a Number property with a unit?

Thanks in advance.

5

I can’t seem to recreate the issue, or am I missing something?

https://sociable-snake-1e7f9f.instawp.xyz/hello-world/

Backend: https://app.instawp.io/wordpress-auto-login?site=$2y$10$o6kPB.WQiMq6ek97KihsJuwexwpCofanNANEzIRaLEKW67KypuEEq

6

Yes, with a unit :+1:

7

Hi @Louis,

I sent you two different sites reproducing this, you should have admin access to the first one. I will also attempt to recreate on the instawp site you provided.

8

@Louis,

Here is the issue replicated on your test site:

https://sociable-snake-1e7f9f.instawp.xyz/strange-tech-test-page/

Please let me know if you need any more information.

9

Hello @StrangeTech,

Thanks for that.
Will see what’s going wrong and issue a fix as soon as possible.

10

Hello @StrangeTech,

In the meantime, can you force the class on the top element of your component, that should temporarily fix the issue.

1 Like
11

Hi @Louis,

Thank you for the workaround. That resolves the issue I shared in the minimal test case in Cwicly 1.4.2.

Unfortunately it didn’t immediately resolve the issue where multiple components of different types were overriding each other.

Then I remembered that we had had this issue:

And surmised that the reason we were getting overlap between our components is because when the team member that created them had copied the blocks with “Copy Linked” on unknowingly, which caused the class names to be shared between components, so essentially it was sharing the CSS styles between the components but without the actual component data.

Randomising the class names immediately fixed this issue and everything worked perfectly again!

This was a classic case of one issue affecting another. Always satisfying to get these sorted, no matter how annoying they may have been previously. Especially when you have a release pending. :smile:

1 Like