Description:
When duplicating components in “Inner Blocks” the id’s and classes do not get updated and styles overwrite each other.
Step by Step reproduction
Create a simple component with a div and place an “Inner Blocks” block inside. Set the height of the div to 100px and the width to 100%, so we can see something and add a solid border in black:
Now create a second componnent with the same apporach and settings. Additionaly link the background property of the div to a component property and set the default color to white:
Now add a TestInnerComponent to the “Inner Blocks” of the TestComponent:
The div shows up correctly with the default white background color:
Now Duplicate(!) the TestInnerComponent and set the Background Color in the Component Settings to something else:
As you can see the color from the second TestInnerComponent gets set on the first too:
This goes on the more you duplicate and always the last color “wins”:
Here is the generated CSS:
All of this works if you add the component newly from the Components panel and don’t suplicate it.
Environment info
- WordPress version: 6.3
- Cwicly Plugin version: 1.3.0.2