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

Подписаться 25 тыс.

Просмотров 1,3 тыс.

50% 1

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

Опубликовано:

21 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 22

@dp4433 3 месяца назад

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 2 месяца назад

Thanks DP!

@Ilkestonwebdesign 27 дней назад

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 23 дня назад

Thanks for sharing Daren!

@neilmhart 6 месяцев назад

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

@wpjakson 6 месяцев назад

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 ;-)

@visualmodo 6 месяцев назад

Truly good video!

@wpjakson 6 месяцев назад

Thanks @visualmodo, glad you liked it!

@kacper.ludwiczak 5 месяцев назад

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 5 месяцев назад

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!

@JimKernix 5 месяцев назад

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

@wpjakson 5 месяцев назад

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 26 дней назад

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

@attorneyengineer 5 месяцев назад

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 4 месяца назад

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

@attorneyengineer 4 месяца назад

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

@kudakwashezvaita1017 6 месяцев назад

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

@wpjakson 6 месяцев назад

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

@puddles5501 6 месяцев назад

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.