Block Themes: How to load and use Style.CSS in the WordPress Full Site Editor (FSE)
HTML-код
- Опубликовано: 26 фев 2024
- 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 
Хобби
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.👍🍻
Thanks DP!
Truly good video!
Thanks @visualmodo, glad you liked it!
Keep the videos coming, Jakson. Maybe I'll ditch my classic theme workflow... one day!
haha! We'll get you BlockPressing soon enough Neil!
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?
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!
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]).
Hey Hong Sup Lee, not sure I understand completely - what parent theme are you using?
@@wpjakson I am using Twenty Twenty-Four theme.
BTW, it's not recommended to do custom styles in styless.css, you should create a new file in the /assets folder.
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.
This will stop very soon. AI will take over soon enough.
Yes Zed, Ai is already huge in WP - watch out for some content on that here real soon!
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.