styling gutenberg block quote

i am styling the the quote block of gutenberg to make the border-left color match my theme and give it some padding etc but its not applying to it. looking at its css in the browser devtool the class coming from wordpress called .wp-block-quote is overriding my styles and its coming from a file theme.min.css?ver=5.5 which i didn’t enqueued. looking deeper i realised the .wp-block-quote styles were coming from the theme support i.e add_theme_support(‘wp-block-styles’); which i added. so am i not suppose to style gutenberg blocks? and i should make a custom quote block of my own if i want to style it? or should i remove the add_theme_support(‘wp-block-styles’); and style the blocks the way i want to but i want my theme to be 100% compatible with gutenberg so what should i do whats the right way?

You only need to declare: add_theme_support( 'align-wide' );

Whether you add theme support for ‘wp-block-styles’ or simply ‘align-wide’ WP loads it’s own core Gutenberg Block CSS. You can override this with your own CSS. For example you could copy/paste the WP core CSS into your own style sheet and edit.

Most blocks can be styled however the user wants in the editor (borders, background, font color, size etc.) and you must support these custom styling choices no matter what. For example you can give the block quote a border color and font color, but you must allow the user to change those colors in the editor and have them reflected in the front-end.


1 Like

thank you for the help appreciate it. in gutenberg the pullquote block has the option to change colors of its border and content but the simple quote block doesn’t have any options for the border color to get changed instead all the time the default black color gets applied so i only override the block quote border left color property with dynamic styling which is theme accent color coming from the customizer applied as the value of border-left-property to the .wp-block-quote class. so ig thats alright?

Yes, that sounds right. Don’t forget to match back-end and front-end styling (if you are developing a Gutenberg optimized theme)

1 Like

just one last question i am generating the dynamic stylings through the wp_add_inline_style( ) function so will that function work with the the stylesheet thats being enqueued for gutenberg only? as i need those dynamic styles to produce a gutenberg optimized theme

Check out these articles:

1 Like

Thanks for the help, appreciate it