Block Themes: How to load and use Style.CSS in the WordPress Full Site Editor (FSE)

Greetings, WordPressers!
I wanted to share this quick tip for Block Themes in WordPress that I wish I knew when I first started creating Block Themes. It's a small issue that caught me off guard, and it revolves around the usage of style.css which it doesn't work right off the bat in Block Themes.
The reason is that instead of placing your theme CSS directly in the style.css file, the recommended method for Block Themes is to use the theme.json file for your CSS.
For those of us transitioning to block theming, this might come as a bit of a shocker. And I personally prefer organising my CSS neatly in a dedicated CSS file rather than within a theme.json file. However, theme.js is the new approach as it's the way forward - theme.json tutorial coming soon!
But in this tutorial, I'll guide you on how to use a good old fashioned style.css and ensure they show up on the front end as well as in the Full Site Editor (FSE).
Ciao!
Jakson
jakson.co/
#wordpress #blockthemes #pagebuilder #wordpressdevelopment

[@dp4433]

I don't know much about this. I've spent half a day searching, and God knows how many pages I've scrolled through to find a code that works to enqueue child `style.css`. Either they are from before Christ or there's some story where nothing concrete exists. Thank you very much. Liked & subscribed.👍🍻

[@wpjakson]

Thanks DP!

[@Ilkestonwebdesign]

I haven't watched this yet but just commenting to say I've bookmarked this and I'm glad that it seems it's possible to wrestle back some of the functionality from classic themes. The way Additional CSS works right now is terrible. Most of my designing takes place by way of the element inspector, as that's where the testing takes place to make sure the right HTML containers are being targeted to wrote the CSS.

[@wpjakson]

Thanks for sharing Daren!

[@visualmodo]

Truly good video!

[@wpjakson]

Thanks @visualmodo, glad you liked it!

[@neilmhart]

Keep the videos coming, Jakson. Maybe I'll ditch my classic theme workflow... one day!

[@wpjakson]

haha! We'll get you BlockPressing soon enough Neil!

[@capitanchorizzo]

Cool, very insightful, specially the child-theme creation part does come in handy just now. Did you explicitly differentiate «jskn_front» and «jksn_add» code?

[@wpjakson]

hey @capitanchorizzo , thanks! Can you explain more re "explicitly differentiate «jskn_front» and «jksn_add» code" - not sure I understand?

[@capitanchorizzo]

@@wpjakson Sorry for the delay: it's the spelling in the php-functions-code example that you work on. Around 4'50" these spellings are used. I am not PHP-savy so that's why I asked ;-)

[@kacper.ludwiczak]

Hello Jakson, it's me again with more questions... ;) 1. Can theme.json completely replace the need to use style.css, or do each of these files have their own purpose in Block Themes? When creating my first Block Theme, I added in the theme.json file configuration for elements such as site-wide styles or pre-set heading styles. At the same time, I added in the style.css file effects such as smooth scroll and scroll snap. Can all of this be done in one of these files? 2. Does adding the style.css file to functions.php mean that the style.css takes precedence over theme.json? 3. The above questions prompted the following: Is using style.css important to learn for a beginner who starts learning Wordpress after the Block Themes revolution, or should I focus solely on mastering theme.json?

[@wpjakson]

No worries Kacper :) 1: At this point theme.json cannot replace “all” custom CSS entirely - though you can add your custom CSS to the “additional css” in the editor and it will be exported and and included in theme.json if you use the “Create Block Theme” plugin. At this point all custom stuff that is not directly related to actual Gutenberg Blocks themselves should go in a custom style sheet. 2: Yes and No - it depends on the specificity of you CSS. 3: Remember this video tutorial is aimed at helping those that “want” to use style.css, why style.css doesn’t work, and how you can overcome that in block themes. 100% you should defo be using them.json as much as possible and I’ve got some of vids upcoming on that - stay tuned! Cheers!

[@sb_1389]

Between using style.css and going into Styles > Additional CSS in the Block Editor, which is the preferred way to load custom styles? And if it's the "Additional Styles" tab, then is there a way to access that in the file structure directly, rather than a tiny sidebar?

[@WebMatros]

I don't think so, as that CSS is saved in the database, not as a file.

[@sb_1389]

@@WebMatros 😭😔

[@wpjakson]

Hey S B, yeah, my pref is using style.css - you can add CSS to the theme.json file but its a bit fiddly so (for now) I always use a style.css file on all my client builds

[@sb_1389]

@@wpjakson thanks for the response! Is there a difference in how those two areas are handled or loaded?

[@attorneyengineer]

Thank you for your lecture. Does your function 'jskn_add_editor_style()' work for only the page editor? In my case, it does not work to the editor in the menu Appearance. It only works in the page editor(the menu Page ->'clicking title' -> and page displayed with editor [css applied]).

[@wpjakson]

Hey Hong Sup Lee, not sure I understand completely - what parent theme are you using?

[@attorneyengineer]

@@wpjakson I am using Twenty Twenty-Four theme.

[@JimKernix]

BTW, it's not recommended to do custom styles in styless.css, you should create a new file in the /assets folder.

[@wpjakson]

Yes, for sure, you can put your styles under assets if you like and is defo the place to organise any separate custom block style CSS. For a super basic child theme, as in this vid, my pref is to use the existing style.css to keep things simple.

[@Ilkestonwebdesign]

@@wpjakson I'm a little bit confused @wpjakson. Are you saying what you've showed us in the video is incorrect?

[@kudakwashezvaita1017]

This will stop very soon. AI will take over soon enough.

[@wpjakson]

Yes Zed, Ai is already huge in WP - watch out for some content on that here real soon!

[@puddles5501]

sure, if you want an incestuously decrepit photocopy of a photocopy, you can automate it. i use AI everyday. AI isn't coming for my job, i'm coming for yours.