Custom HTML CSS code being stripped
-
I just found this recently, but can anyone confirm if certain tags are now behind the “Business” plan paywall. For example, I was previously using this
It has been working for the longest time but until recently, the images aren’t working anymore, and I found out that the linear-gradient property was causing the issue. As mentioned, it has been working previously and now it doesn’t. The WordPress support I was talking to pointed me to the custom HTML block help page:
https://wordpress.com/support/wordpress-editor/blocks/custom-html-block/
And noticed at the bottom that some tags are restricted to plugin-enabled sites (i.e. business plans), including style.
Would anyone from the team be able to confirm this? Thank you
The blog I need help with is: (visible only to logged in users)
-
Okay, for some reason the tag didn’t appear on the post, here it is:
li style=”background-image:url(‘https://mechacatalogue.files.wordpress.com/2022/01/catalogue-4001_thumb4k001.jpg’);
-
Can you link us to a post or page where it would be implemented and what you expect to see? Once we have that information, we’ll be better able to advise.
Thanks!
-
Hello, here’s the test page I made for comparison: https://mechacatalogue.com/css-test/
It contains a div table with two cells where the left cell has the code that previously worked and the
li style=”background-image:linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.75)), url(‘image.jpg’)”
The cell background should have a top-to-bottom gradient from transparent to 75% black overlaid on the background image.
Upon saving, it strips everything from the
-
I recently faced a very similar issue and just posted a new support topic https://wordpress.com/forums/topic/code-editor-removes-display-properties-from-html-code/. I have looked at wordpress.com news and found no change in its policy.
The HTML code looks fine when I put it into an editor control. But the content of the published page is corrupted in “Preview” window and after “Update”. If I do “Update” and then open the code editor again, I see the modified HTML code with the “display” properties removed.
Yesterday morning everything was fine, the problem appeared later in the evening.
-
Some of the code you’re sharing here seems to be getting stripped, too.
This suggests it could be due to a recent update.
Yesterday morning everything was fine, the problem appeared later in the evening.
sjohnruCould you each:
– share a link to an affected post
– share a “pastebin” or something similar for sharing the code
Thanks in advance! -
The code added earlier in the thread is messing with the display here, sorry folks. I missed that you already sent a link.
I’ve found a bug report and added your reports to it. Thanks! -
Thank you, please let us know if this was indeed a bug from a recent update and whether these have been addressed. While I already made changes to my pages to compensate for this, I’d much prefer how the pages looked with the original code. Thanks!
-
Hi there, just wanted to let you know our engineers have fixed this issue. You should be able to add inline styles as before. If you continue to see any issues can you please let us know? Thanks!
-
Hi, I tested if the fix works on this page — https://mechacatalogue.com/css-test/ — and unfortunately, it still doesn’t. Of the two cells in this test page the one on the left should have the inline CSS, which is still getting stripped.
The code in question should be this: li style=”background-image:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.75)), url(‘image.jpg’);”
-
Hmm, I used some really bright gradients to see if I could get it to work on my test site. This is the syntax I used:
-
<li style="display: block;background: rgb(2,0,36);background: linear-gradient(90deg, rgba(2,0,36,1) 12%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);padding: 1em;color: white;border-radius: .5em;font-size: 2em;margin-bottom: 1em">Hello world!
<li style="display: block;background: linear-gradient(242deg, rgba(2,0,36,1) 0%, rgb(202 36 133) 35%, rgb(75 13 103) 100%);padding: 1em;color: white;border-radius: .5em;font-size: 2em">OK!
Can you see whether that works on your test page?
-
Hello, I tried your code, and it does work. Would you be able to do the gradient overlay on top of an image file instead of a solid color, like the one I posted in a couple of replies above? The previous code that stopped working has an image as background, with a subtle gradient on top so that the text would be more legible.
-
EDIT: The issue for some reason is that the linear-gradient attribute now doesn’t work within the background-image property like it used to.
-
Hello there,
I can see the linear gradient working on the first image, with the second image the linear image is 0%, whereas the first is 12%.
Looking through this thread, out of curiosity – how come this inline CSS being used in the content in this manner? The reason why I ask is because the block editor should help to reduce the use of code in content.
Happy to offer more insights if I can.
-
Hello there,
I can see the linear gradient working on the first image, with the second image the linear image is 0%, whereas the first is 12%.
Looking through this thread, out of curiosity – how come this inline CSS being used in the content in this manner? The reason why I ask is because the block editor should help to reduce the use of code in content.
Happy to offer more insights if I can.
-
I’m mainly using linear gradient to make the link text more visible on top of whatever background image that’s behind. The effect is subtle but when removed, the link text is much harder to read. Hence, I’m currently using a text-background property as replacement ever since it stopped working.
-
Hi! I was playing around with the CSS – it seems like if the gradient was working inside
background-imagepreviously that might actually have been buggy behaviour; it seems like it should ideally go intobackgroundonly?
https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradientAs it is, I was wondering if it’s not worth simply using a cover block to insert your background image – and use the overlay to achieve the gradient (while still being able to place text on it):
https://en.support.wordpress.com/wordpress-editor/blocks/cover-block/ -
Hi! The cover block does sort of does the same thing, though I’m not sure if you could make the cover blocks function like DIV tables like in my current HTML code.
-
You can technically insert them into columns, and set a minimum height on them, so they match too. I took the liberty of setting up a draft page on your site, called “test-with-covers”, which has a similar layout to your catalogue and uses a background gradient on the group containing the text for ease of reading. The only thing that the cover block lacks at the moment is the ability to make the entire image into a link; but it does look like your existing catalogue also doesn’t treat the images as links. Feel free to look the draft page over in case it could be useful!
- The topic ‘Custom HTML CSS code being stripped’ is closed to new replies.
WordPress.com Forums 