Title: Disable block inline CSS?
Last modified: November 4, 2022

---

# Disable block inline CSS?

 *  Resolved [rinh](https://wordpress.org/support/users/rinh/)
 * (@rinh)
 * [3 years, 7 months ago](https://wordpress.org/support/topic/disable-block-inline-css/)
 * Hi
    I wonder if there’s any way to entirely disable, or prevent, blocks from 
   doing inline CSS? The inline CSS makes it difficult to add custom CSS and doesn’t
   work at all without !important on everything.
 * Thank you in advance

Viewing 5 replies - 1 through 5 (of 5 total)

 *  [thelmachido a11n](https://wordpress.org/support/users/thelmachido/)
 * (@thelmachido)
 * [3 years, 6 months ago](https://wordpress.org/support/topic/disable-block-inline-css/#post-16195683)
 * Hi [@rinh](https://wordpress.org/support/users/rinh/)
 * It sounds like you want to remove all of Gutenberg’s Block Library CSS?
 * This will remove the CSS you have for all blocks and it will affect how content
   is represented on your site. If you are planning on changing all of the CSS that
   comes with the block you can disble the default by following the steps on [this article](https://smartwp.com/remove-gutenberg-css/).
 * Alternatively, are you able to provide information about the CSS you want to 
   change on your site? You can share more information and a link to the page.
 *  Thread Starter [rinh](https://wordpress.org/support/users/rinh/)
 * (@rinh)
 * [3 years, 6 months ago](https://wordpress.org/support/topic/disable-block-inline-css/#post-16196473)
 * Hi and thank you for your reply.
 * I don’t think I’d like to remove all of the CSS, but I should’ve provided some
   examples earlier to me more clear so I’ll do it now.
 * In this example I’d create two columns, that stack on smaller devices. In the
   left column I have a cover image with a min-height of 100 vh. If I set the height
   in the editor it’ll write it out with inline CSS like so:
 * `<div class="wp-block-cover is-light" style="min-height:100vh">`
 * Then if I would for example like the height of the cover to be only 50vh instead
   of 100vh when the columns stack I can’t override it with custom CSS without also
   adding !important, because inline CSS have the highest priority. This applies
   to lots of block settings in the editor, like paddings, margins and so on.
 * I admit I got a little frustrated when I first noticed, but it’s not a major 
   issue after all. My solution to it is to not use the block settings in the editor
   at all for blocks I know I’ll also add custom CSS for other devices.
 * I still think it would have been good if there was an option to prevent the editor
   to write inline CSS, so that custom CSS have higher priority.
 * I found a way around it as mentioned above so feel free to mark this as solved
   though.
 *  [thelmachido a11n](https://wordpress.org/support/users/thelmachido/)
 * (@thelmachido)
 * [3 years, 6 months ago](https://wordpress.org/support/topic/disable-block-inline-css/#post-16203304)
 * Hi [@rinh](https://wordpress.org/support/users/rinh/)
 * Thank you for providing more information about your experience, I wasn’t able
   to access the examples you added because the text doesn’t have links. Not to 
   worry too much about that because from your explanation I understand what you
   mean from the additional information you provided.
 * Having the option to disable inline CSS might come in handy, I would suggest 
   creating a feature request for this on GitHub. At the moment there is a request
   for folks t[o be able to opt-out of ! important CSS rules generated by the theme](https://github.com/WordPress/gutenberg/issues/37590)
   you can add a request that’s [specific to your needs here.](https://github.com/WordPress/gutenberg/issues)
 * Additionally, as I mentioned before there are some functions that folks play 
   around with [to disable Inline CSS](https://fullsiteediting.com/lessons/how-to-remove-default-block-styles/).
   This is quite hacky though, I am glad you managed to work around this.
 *  [Alvaro Gómez](https://wordpress.org/support/users/mrfoxtalbot/)
 * (@mrfoxtalbot)
 * [3 years, 4 months ago](https://wordpress.org/support/topic/disable-block-inline-css/#post-16376849)
 * I found a GH issue discussing ways to have more control over what settings different
   users are able to modify:
 * [https://github.com/WordPress/gutenberg/issues/41547](https://github.com/WordPress/gutenberg/issues/41547)
 * I am going to mark this support thread as resolved but please feel free to join
   the conversation above, [@rinh](https://wordpress.org/support/users/rinh/).
    -  This reply was modified 3 years, 4 months ago by [Alvaro Gómez](https://wordpress.org/support/users/mrfoxtalbot/).
 *  [Alvaro Gómez](https://wordpress.org/support/users/mrfoxtalbot/)
 * (@mrfoxtalbot)
 * [3 years, 4 months ago](https://wordpress.org/support/topic/disable-block-inline-css/#post-16377605)
 * To give further context, [@rinh](https://wordpress.org/support/users/rinh/), 
   while there’s no single setting to limit everything to only the theme-defined
   presets, you can do this on a setting-by-setting case.
 * For limited font sizes, you can set customFontSize: [https://developer.wordpress.org/block-editor/reference-guides/theme-json-reference/theme-json-living/#typography](https://developer.wordpress.org/block-editor/reference-guides/theme-json-reference/theme-json-living/#typography)
 * Here’s an example:
 *     ```wp-block-code
       {
       	"settings": {
       		"typography":
       			"customFontSize": false
       		}
       	}
       }
       ```
   
 * For colors, there are several options: [https://developer.wordpress.org/block-editor/reference-guides/theme-json-reference/theme-json-living/#color](https://developer.wordpress.org/block-editor/reference-guides/theme-json-reference/theme-json-living/#color)
 * You might want to disable all of these settings:
    - `customDuotone`
    - `customGradient`
    - `defaultDuotone`
    - `defaultGradients`
    - `defaultPalette`
 * Restricting these settings will reduce the amount of inline CSS styles significantly.
 * I hope that helps!

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Disable block inline CSS?’ is closed to new replies.

 * ![](https://ps.w.org/gutenberg/assets/icon-256x256.jpg?rev=1776042)
 * [Gutenberg](https://wordpress.org/plugins/gutenberg/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/gutenberg/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/gutenberg/)
 * [Active Topics](https://wordpress.org/support/plugin/gutenberg/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/gutenberg/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/gutenberg/reviews/)

## Tags

 * [css](https://wordpress.org/support/topic-tag/css/)

 * 5 replies
 * 3 participants
 * Last reply from: [Alvaro Gómez](https://wordpress.org/support/users/mrfoxtalbot/)
 * Last activity: [3 years, 4 months ago](https://wordpress.org/support/topic/disable-block-inline-css/#post-16377605)
 * Status: resolved