Those are very good questions @kristenfisher427. In principle, you can add your CSS. These can be global CSS or per-block CSS.
You can also add CSS by using a plugin or enqueuing your own CSS stylesheet.
They main drawback of adding your own CSS is that, because the block editor is evolving quickly, you night need to keep an eye on changes that affect the selectors you are using (and their specificity).
If you want to learn more about CSS and block themes, you might want to check out this online session.
I hope that helps!
Hi @mrfoxtalbot ,
Thank you so much for your response and the links you provided! Your answer was really helpful! 🙂 I’ve always had trouble trying to understand if inline styling, internal styling (where the CSS is defined in <style> in <head>), or !important will prevent a website visitor from overriding the styles with their own custom stylesheet. Just to confirm I’m understanding correctly, a website visitor in theory should be able to override the styles with their own custom stylesheet so long as the web designer adds CSS via global styles, per-block CSS, and/or a style.css file, since the issue of styles not being able to be overridden only comes in when the Site Editor adds !important to the CSS? Also, making changes to theme.json in a child theme should not inhibit a website visitor’s custom stylesheet, correct?
Also, I understand the potential downside to adding CSS since the block editor is rapidly developing. However, do you think this would be an issue if I added CSS through per-block styles? What I found very interesting in a WordPress tutorial is that a CSS selector doesn’t have to be provided when adding per-block styles (if I understand correctly). For instance, if I want to change the paragraph color, I can add a per-block style specifically to the paragraph block and write:
color: red;
and it takes effect, even without me supplying a CSS selector in my code. Perhaps this might prevent a problem in the future with selectors and specificity as the block-editor continues to develop?
CSS selector doesn’t have to be provided when adding per-block styles (if I understand correctly)
That’s correct!
Perhaps this might prevent a problem in the future
I am not 100% sure but that’s my impression too: Adding per-block styles should create fewer issues in future updates.
Just to confirm I’m understanding correctly, a website visitor in theory should be able to override the styles with their own custom stylesheet?
This is always the case, as custom/local stylesheets take priority over those in the browser. I have never been too worried about visitors having the need to overwrite styles so I am curious as to what scenarios or issues you have in mind. Could you share a little bit more background?
Hi @mrfoxtalbot ,
Absolutely! So in certain cases, website visitors with visual impairments need a particular color combination or font-size to be able to read web content easily. In those cases, they’d use a custom style sheet to meet their personalized needs. 🙂
That’s a relief to hear! I’ve heard such differing opinions online – some say inline styling overrides website visitor’s custom style sheets, others say just !important declarations override it…it’s been hard to make heads or tails of the issue, so I appreciate you taking the time to clarify the matter for me. 🙂
I had a question about potential repercussions concerning how block themes and theme.json handle CSS.
So in certain cases, website visitors with visual impairments need a particular color combination or font-size to be able to read web content easily. In those cases, they’d use a custom style sheet to meet their personalized needs.
Hi @kristenfisher427 thank you for providing additional information, in simpler terms how the block themes work or how the files are structured shouldn’t affect the accessibility of your site. Additionally, there is an article on Block Theme accessibility:
https://developer.ww.wp.xz.cn/themes/block-themes/accessibility/
Also, themes you find on the WP.org theme repository go through an accessibility test so for default themes you should be all set. In the event that there is an issue, this can be reported for the developers to take a look.
Hi @thelmachido ,
Thank you for your response and the information and resources you provided! I really appreciate your time and assistance! 🙂
