Please remove width from inline style

  • Hi there, thank you for the great plugin. Please consider changing the method of setting the icon width from having it in the inline style to an external style block. You could for example set the width defined in the block settings as a CSS property and have a global style with width: --icon-width or something like that. The reason is that currently if someone wants to override the style via external CSS, they have to use !important . All other plugins I’m using define their styles via style blocks in order to allow easy overriding.

    My current workaround is to do precisely as above: in my CSS instead of width I define a prop for the width and I set .icon-container { width: var(--icon-width) !important; }

    • This topic was modified 2 months, 1 week ago by aaylasecura.
    • This topic was modified 2 months, 1 week ago by aaylasecura. Reason: minor formatting fix
Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Nick Diego

    (@ndiego)

    Hi @aaylasecura,

    Thanks for reaching out. The width is set inline so it can be easily controlled by the user in the Editor user interface. Therefore, I have no plans to remove it and your solution, while frustrating I know, is what I’d suggest if you need to modify width using CSS.

    That said, you are welcome to open a pull request in the?official GitHub repository or fork the plugin and modify it for your own needs, especially if you don’t need the width control in the UI.

    Best,
    Nick

    Thread Starter aaylasecura

    (@aaylasecura)

    Hey there, thanks for replying ??

    The solution I was suggesting will preserve the functionality of setting the width via the block settings while still allowing easy CSS overriding, and is in line with what other similar plugins do. Therefore, I think it’s perfectly viable to be implemented at some point and if you don’t mind I’ll reopen this thread.

    The solution is to define the width in an external style with a not-very-specific selection (inline styles are most specific).

    Option 1: have a global CSS that’s inserted once on the page that goes something like .icon-container {width: --ib-icon-width} and then each block element sets an inline style="--ib-icon-width: 48px".

    Option 2: generate a random class name and insert a style element for each block like .icon-container-87fas7a9f {width: 48px}. This is what Greenshift does for example.

    I’ve seen both approaches in other plugins and either would allow users to override the width property itself with a more specific selector like .some-cls .icon-container {width: 24px}

    I’d love to see this implemented. At the moment I don’t have time to implement this in the code and create a pull request unfortunately.

Viewing 2 replies - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.