-
Chinmay patil
Hi,
1. I am having an issue with using the separator block on my site. Whenever I use a default or wide line style for the separator, it gets invisible. Although, when I use the dots style, the 3 dots are clearly visible. Not sure what’s happening.
This is the link to the page you can refer : https://thatsinindia.com
Before the H2 named Blog, there are 3 separators: First one is dot style, second is wide-line & third is default style, all in black colour.2. I have created a pattern of a button named “button-orange”. On the same page you will see two of such buttons, 1 below the blog section & another in the footer. The problem is that if I change the styles of one button the style of 2nd button is also changing, even though I have disabled the sync settings for the pattern.
-
Alvind
Hi there,
1. Unfortunately we cannot assist with the issue that cause by WP core blocks as we have no control over their settings.
2. This is a common issue with patterns. If you use the same pattern in two different places on a page, it’s highly likely that the styling will be inherited by each other because they share the same unique ID. To fix this, select the button you want to have a different color, click the 3 dots option on the floating toolbar, and click Detach. After that, duplicate the button and delete the original one. This will regenerate the unique ID. Then you can style this button without clashing with the other button’s styling from the same pattern.
-
Chinmay patil
Hi Alvind,
1. Alright. Although, can you give me any kind of troubleshooting tips for that?
2. I have disabled the sync setting for the pattern, so I don’t even have the option to detach the button. Also, I just created a new button from scratch and added in after the button that is causing the problem.
-
David
Hi there,
1. the default or wide separator should display on the page.
Try disabling any cache optimizations on the site to see if that is causing an issue.
As a general rule I would recommend leaving caching/optimizations disabled whilst developing the site.2. edit the GP Element that you have for the footer.
Select the outer Container Block for the footer, and Duplicate the entire footer.
Then delete the original. That should reset the unique classes on those blocks. -
Chinmay patil
The buttons working properly now. Thanks David!
-
David
Good to hear that.
If you’re still having issues with the Separator – can you add one to the page that is just the default rule so I can see whats going on.Or my suggestion would be to add a border style to a Container Block to create separators.
Let me know
-
Chinmay patil
yes I’ll use container block border wherever possible.
Also, I have added a default style separator to the following page, just before the H2 heading “Blog”. https://thatsinindia.com
-
David
Its because the separator block is inside a Container with a Layout > Display Flex, and Flex Column.
Children of a flex column that have no specific width , such as the separator, will collapse to the width of their content. As the separator has no content that width is now0
To resolve that, add this CSS:
.wp-block-separator.is-style-default { width: 50%; } .wp-block-separator.is-style-wide { width: 100%; }
-
Chinmay patil
Oh, okay.
Much appreciated sir!
-
David
You’re welcome!
- You must be logged in to reply to this topic.