Tell us what you are trying to do?
I am styling View Output of a Single Field in the block editor for a content template. The styles show up correctly in the block editor but they do not show on the live site. The fields have none of the styles (typography, border, color, etc) and just show up as regular text.
What is the link to your site?
hidden link
Hi there,
Would you please kindly follow the steps below to provide the debug information?
- Go to "WordPress Dashboard > WPML > Support > Debug Information (Link)".
- Copy the Debug Information from there.
- Get back to this chat screen and scroll down.
- Find the "Additional Data" section below. (Check the screenshot below)
- Click on the "Debug Info" item to expand it.
- Paste the debug information into the text area.
- Click the "Send Debug Info" button.
Screenshot:
https://wpml.org/wp-content/uploads/tmp/debug_info_20.png
Also please make sure you use the latest version of Toolset and Toolset addons:
- IMPORTANT STEP! Create a backup of your website.
- Go to "WordPress Dashboard > Plugins > Add new > Commercial (tab)".
- Update Toolset and its addons there.
Finally, please check for a possible theme/plugin conflict:
- IMPORTANT STEP! Create a backup of your website.
- Switch to the default theme such as "TwentyTwenty" by going to "WordPress Dashboard > Appearance > themes".
- Go to "WordPress Dashboard > Plugins" and deactivate all plugins except Toolset and its add-ons.
- Check if you can still recreate the issue.
- If not, re-activate your plugins one by one and check the issue each time to find out the plugin that causes the problem.
Thank you.
I attached debug info. The Toolset plugins are all the latest versions.
I have not switched themes or disabled other plugins. Since the issue is related to stylesheets, switching themes would confuse things.
Let me know if you have ideas on what the problem could be.
Hi there,
Thank you. I checked the debug info and the setup seems to be ok.
The whole point of testing the Theme/plugin conflict is to know if for example, your theme overrides the styles or not.
Usually, when there is a difference between the admin block editor and the front end, it is the fact that the theme in the front end overrides the changes done in the admin.
That is why I asked you to test that.
If the style works ok in a default theme you will know that the theme you use is overriding the styles and you need to check your theme stylesheet code.
The same thing might happen with plugins for that specific front-end page.
Thanks.
Changing the theme will remove shortcodes that I've built into the child theme for my site and that will cause errors on the page we are trying to troubleshoot. It will also take time for me to set up a Staging site for this.
I was hoping you could offer some suggestions on what to test or try within the block editor for the content template where I am seeing the problem.
Here's a little more technical detail on what I've observed.
It appears that the toolset blocks field ID (a 32 character hex value) in the block editor is not the same one that shows up on the published page. As a result, the styles that are set in the block editor are not applied on the published page. I've noticed you are using Encoded styles for these and I have verified that the encoded style string is present in the published page.
I have been able to work around the problem by using Chrome's Dev Tools / Inspect feature. In the block editor for the content template, I can inspect the styles applied to certain elements. I copy those styles into the CSS editor section of the Content Template (rightside panel). For example,
.tb-field[data-toolset-blocks-field="33b4f6a3c2c7a827e8cfc004285cc64c"] {
font-size: 20px;
font-weight: normal;
text-align: center;
background-color: rgba( 244, 245, 247, 1 );
border-radius: 0;
padding: 10px;
margin-bottom: 10px;
border: 1px solid rgba( 204, 204, 204, 1 );
}
What I've noticed is that the field ID ("33b4f6a3c2c7a827e8cfc004285cc64c") is different in the block editor than on the published page. So I have to Inspect the field on the published page and use that field id in the CSS editor style declaration.
This workaround is okay for one-off field styles, but in cases where I am using more than just Toolset Field blocks it is too convoluted and complex to use this workaround (e.g. if I am using grids, columns, etc).
Let me know if this detail gives you any insights to the problem.
Hi there,
There is nothing that I can think of unfortunately. Maybe something related to cache? Try to deactivate the view cache from the View settings at the sidebar:
https://toolset.com/wp-content/uploads/2021/01/1920755-Screen_Shot_2021_01_27_at_10.50.58_AM.png
See if it changes anything? If not, try to add a new page and try there and see if the same thing happens there or it is only happening on that specific page.
Anyway, to be able to troubleshoot this we do need to have a staging website and we will need the theme conflict test and see the result regardless of the fact that you use other codes there or not.
I hope you understand that without staging website it is impossible for us to be able to help.
Thank you for your understanding.
I have not yet been able to create a staging site to disable my theme.
However, as I have continued to work on other pages, I am seeing the same effect. If I use a Toolset Single Field block and use the block settings to edit the style, this style is not reflected on the published page. It appears as though something is going wrong with the DIV ID when the page is published. That is, the ID of the elements on the published page does not match the ID used in the encoded styles.
I will let you know when I am able to create a staging copy, but for now, I thought perhaps this additional information would help you diagnose the problem.
Hi there,
Thank you for the information.
I checked our reports and I could not find any similar situation with the wrong ID that is why I have no reference to be able to help.
We will need to have a way to replicate the issue, if it is ok with you we can give you the means to copy your website to our server.
Please confirm and we will follow up.
Here is what I searched regarding the reports:
https://toolset.com/known-issues/
The only similar issue is:
https://toolset.com/errata/displaying-a-copy-of-a-view-block-misses-settings-styles/
But it is related to a third party plugin so it is not applicable for your instance.
Thanks.
I have set up a staging site that shows the problem. How can I provide you with Admin access?
You will see that styles applied to View blocks in the block editor of a Content Template are not being reflected in the published page. So perhaps we can go from there.
If I simply switch the theme to a default (like Twenty Twenty Three), the page breaks because I have several custom shortcodes, functions and other theme customizations in a child theme I created. So you can't troubleshoot the issue that way. I would have to replicate these one at a time in a child theme of the 2023 theme to troubleshoot and then it may be difficult to differentiate between issues with those changes and the issue at hand.
Hi there,
Thank you for the staging website. You can click the private checkbox when you reply.
Please consider that we do not know what you have done on the child theme, what we will test is a normal View. We will create a test view with the normal process and see if the same thing (wrong ID) happens there or not.
If yes, we will investigate, if no then we will know this is something happening because of the way you set up the child theme and you need to double-check your code to see what might be the problem cause.
Thanks.
Hi there,
I checked the website by changing the theme to the default theme and indeed it works ok.
I changed the link color in the content template and it works correctly on the front end of the website.
So this clearly shows that there is no issue with Toolset and it is the theme of the website that has conflict.
I checked and it is not the Chid theme. The main Neve theme also has the issue. So you need to contact the Neve theme and ask for help and see why the changes do not show on their theme.
The issue is not your child theme.
Thanks.
