Inline style removed by WordPress

  • supernovia · Staff ·

    I’m not sure on the ins and outs of the decision to strip inline styles.

    Since I was the one who recommended a plan, I want to clarify, there isn’t a plan that will fix inline styles being stripped.

    However, you could write your CSS into classes then add classes instead of inline CSS if you wanted to. The Premium Plan lets you to add a stylesheet to the site.

    So instead of <div style="...">test</div> you would set up something like

    .specialstyle {
    ...
    }

    and then set a class for your elements, either through HTML or by using the Class option in the block’s advanced settings. Your HTML would end up looking like this:

    <div class="specialstyle">test</div>

    and it would get all of the CSS settings you put in the stylesheet for your site. One nice advantage: if you’re using the same inline styles over and over again on your site, this puts them in one tidy place, so if you decide to update it, you only have to update in one place. Anyway, you could say using CSS classes instead of inline styles is a bit advanced, but probably no more advanced than writing inline styles. Let us know your thoughts.

  • moraghughson · Member ·

    So what do I need to buy to add CSS styles? And are we certain that the stripped inlone styles are not stripped from the style sheets? Or do I just host the style sheet somewhere else and then WordPress can’t edit it?

  • staff-95percentghost · Staff ·

    The Premium plan is what lets you add CSS via Appearance > Customize > Additional CSS. That’s where the custom stylesheet is located.

    As supernovia mentioned, you could set up specific classes there, which contain the styling that you’d want. Then you can apply that styling to (for example) specific paragraph or heading blocks, by assigning the custom CSS class in the “advanced” section:
    https://wordpress.com/support/wordpress-editor/adding-additional-css-classes-to-blocks/

    Those should normally not be stripped out, as long as they conform to the code specifications:
    https://wordpress.com/support/code/

    Hosting the stylesheet somewhere else would likely not work; this is because you’d need to link it within the header of your site using the <style> tag which is one of the ones that won’t work per the code guide above.

    We do have some further information regarding working with CSS under Additional CSS here:
    https://wordpress.com/support/editing-css/

  • moraghughson · Member ·

    I don’t have the budget for the whole premium plan – besides it contains a bazillion things I don’t need or want. Is it possible to just buy CSS editing and not all the rest? I feel like there was something recently about small upgrades to your WordPress plan, or did I dream that?

    P.S. did my comment about new feature vs defect get missed on the turn of the page?

  • supernovia · Staff ·

    P.S. did my comment about new feature vs defect get missed on the turn of the page?

    I saw the comment, and mentioned I don’t have a lot of information on the decision to strip inline styles. It could be fixing some other problem, like possibly conflicting with the code for blocks, for example. My recommendation, where possible, would be to get the styles into a stylesheet instead of using inline styles for complex effects.

  • supernovia · Staff ·

    I don’t have the budget for the whole premium plan – besides it contains a bazillion things I don’t need or want. Is it possible to just buy CSS editing and not all the rest? I feel like there was something recently about small upgrades to your WordPress plan, or did I dream that?

    We don’t currently sell that as a separate add-on, so I’ll pass along feedback on that.

    Like any upgraded plan, Premium gets rid of ads and allows you to add your own domain or custom subdomain, so if you’re interested in that we could help you set it up. But the primary differences between Personal and Premium are the advanced style options, including stylesheets and premium themes, as well as extra monetization features. And like all paid upgrades, it helps us support the free sites here, too.

  • moraghughson · Member ·

    I’m posting an update here for two reasons. Firstly to see if there is any progress, and secondly to add another style that is being removed – one that there cannot be any legitimate reason to consider problematic from your end.

    The style that is being removed is

    <pre style="white-space: pre-wrap;">...</pre>

    Without this style in place you get commands that extend off the left of the screen and WordPress puts a horizontal scroll bar in place. In order to allow the text tow remain copy and pastable without newlines in the middle, e.g. when providing commands or code for people to copy, and yet also to see it all on the screen, one would use the above inline style. But now WordPress removes it.

  • supernovia · Staff ·

    Hey there @moraghughson , good to hear from you.

    I can confirm there’s a safe-style function in WordPress Core that is rather aggressively removing some inline styles. It’s apparently less about CSS being some sort of security threat and more about it getting along with blocks.

    There’s a ticket open in WordPress core requesting an expansion of the allowed inline CSS. I don’t have any ETA for that, but it is known and requested.

  • moraghughson · Member ·

    thanks for the update. I guess you can add this additional style to the list.

    Cheers!

  • aisajib · Staff ·

    Hi there!

    I just wanted to let you know that we have a Custom CSS add-on available for purchase that lets you add custom CSS code without upgrading to the WordPress.com Premium plan. You can check it out at this link.

    Regards

  • moraghughson · Member ·

    Hi @aisajib

    Thank you for that. Very happy to see this as an option without needing to buy the whole plan.

    I was just providing an additional inline style to be added to the list of ones that shouldn’t be removed since this is an ongoing problem whether you have CSS or not. CSS might help you work around it, but that doesn’t remove the fact that this defect exists.

    Cheers,
    Morag

  • soundeagle · Member ·

    To @moraghughson, WordPress staff, and whomever it may concern,

    Quoting moraghughson:

    I was just providing an additional inline style to be added to the list of ones that shouldn’t be removed since this is an ongoing problem whether you have CSS or not. CSS might help you work around it, but that doesn’t remove the fact that this defect exists.

    This is indeed a notable and serious issue with many ramifications. Apart from those that have already been mentioned, the text-shadow property is another inline style being stripped. As a consequence, the various benefits of formatting, legibility and visual impact as well as the implementation of hierarchical prominence of information have been severely compromised or curtailed.

  • staff-95percentghost · Staff ·

    This is indeed a notable and serious issue with many ramifications. Apart from those that have already been mentioned, the text-shadow property is another inline style being stripped. As a consequence, the various benefits of formatting, legibility and visual impact as well as the implementation of hierarchical prominence of information have been severely compromised or curtailed.

    Thanks for the feedback, we’ve passed on the message that text-shadow is another property that would be good to have.

  • moraghughson · Member ·

    Here’s another one – can’t believe I didn’t notice this one last month!

    white-space:nowrap;

    A very very typical inline style to put in a span when you have a layout problem, turning a corner etc. Even with CSS I would normally use this one inline.

    Is there any feedback on this issue btw? Gone rather quiet?

  • aisajib · Staff ·

    Hi,

    Thanks for that! I’ve noted that for the developers looking into it. Unfortunately, we don’t have any update on this to share with y’all; that’s why there hasn’t been any update from our end. We’ll be sure to reply here as soon as we have something to share.

    Thanks again, and I appreciate your patience!

1 2
  • The topic ‘Inline style removed by WordPress’ is closed to new replies.