thanks man, I was debating if FSE is ready for pixel perfect mockups in an agency setting and while I don't think its quite there yet, its great for simple small sites. Thanks for the tutorial it answered alot of my questions on FSE!

Can I sask what is your common stack? I want to get into theme creation, I know PHP, CSS and HTML + JS

Thanks Martin, I appreciate it! I will defiantly continue making WordPress videos. I will come up with a plan today and start working on it.

Great suggestion! I'll have to think about it and plan something...

What's a CBT?

@@everyday_history it's a drugs!😂 Not it's a code block theme

C*ck and ball torture?@@everyday_history

I found that using a single template for all pages worked fine for this particular design. However, if I were to make the front page completely unique I would defiantly used the Frontpage template

Welcome 😊

Hey, i am glad that you like the tutorials. The images are all from unsplash . com. If I find the specific links I will put them in the description

Glad you liked it! When you select the Query Loop, on the right side under the Block tab there should be a Setting - Inherit query from template. Untick that and you will see the options there

@@RaddyDev Thank you so much!! I really appreciate you taking the time to reply to my comment.

Like creating a classic theme?

@@RaddyDev yes

Yes, absolutely. I've seen a few new FSE themes on Themeforest. I am not sure how strict their publishing guidelines are and how much they take of each sale now. It's good to explore and if you are not happy with it, you can sell themes on your own website and market them yourself

@@RaddyDev tks so much!!!!

Hello! If you are looking to create more complex sections, you can do that by making your own custom block. The "Block Editor Handbook" has a handy tutorial to get you started. You can use ReactJs to do that and in terms of libraries and styling you can do pretty much whatever you want. Everything integrates well with the block editor, which ultimately will make it easy to update and change settings. Regarding the effort involved, it depends on the context. If you are making a custom theme to sell it's defiantly worthwhile as it makes it super easy for the end-user to customize their theme. For example if you had a Slider, you can have an option of how many slides to show

​@@RaddyDevthanks for the answer! Making blocks with React really looks like a way to go for creating a reusable theme or plugin. On the other hand, it looks like an overhead if you only need to create layout for a single website. I was thinking of Acf blocks instead, anyways you end up using Acf on larger and heavily customized projects. I am quite concerned with keeping styles consistent on frontend and admin dashboard though, it might be harder than it looks

It might be wroth sticking with using a classic theme. Check out this article about the state of WordPress: dbushell.com/2024/05/07/modern-wordpress-themes-yikes/. Maybe Classic is the way to go when it comes to custom development

@@RaddyDev thanks for the article, that's exactly the point. If you look at classic theme files, you can see the logic behind it. But with block themes, the structure and code looks so messy that I have no idea where to begin and how to scale the project. Plus there is no good guide or starter template for custom development. I am still planning to try out Acf blocks on a pet project though 😅

Thanks for the sub!

That sounds like a strange bug. I haven't experienced that, I will have to check out to see if I can replicate it. It could be worth reporting if it's something that keeps happening

That's true, I will add everything I have shortly. The Figma file does contain most of the stuff, but I guess you have to export which is time consuming

@@RaddyDev much appreciated

Looks like you've added that now, but to me that archive is invalid/corrupted..@@RaddyDev

@@etzbetz thanks for letting me know I have re-uploaded the file

Thank you. I've added the file in the Google Drive link

I did a full WooCommerce video using the FSE last year. Woo have been adding a lot of FSE/Gutenberg functionalities. You can literally drag and drop WooCommerce sections and change settings from the editor. You can skim through the video here. kzfaq.info/get/bejne/d7KJq7Nyz7rImp8.html No need to watch it all, it's the same concept :-)

@@RaddyDev awesome, but I was looking more for styling WooCommerce itself, like displaying short description text on the product preview, before it was possible by adding a snippet with functions.php, but with this new blocks theme I can't find functions.php, and I don't like to edit WooCommerce core code. Also, almost all the WooCommerce blocks are blocked, so they cannot be edited at all. At least now the purple is gone easily haha

I haven't had the chance to look into that yet. I've only done multilingual WP websites using the classic approach and ACF

I have tried Webflow once, and I don't know if there is a proper way of migrating to WordPress. I guess you just have to re-create the entire website as they work different. I will look it up, but no promises :-)

@@RaddyDev there is an option with a paid plan to export the code. Which will generate an index.html, asset folder, css folder and js folder. I would think then the process would be similar to how to create a theme with html templates may be?

Hi, glad to hear that you like the tut. That happens to me as well and the trick is to export it from the FSE editor. Click Edit Site and select any of your templates to edit. Click on the page so you go in "Edit" mode, where you can change stuff on the page / add blocks. From there on the top right corner you should see 3 dots. Click on them and you will see a section called Tools -> Export. That method should work

@@RaddyDev Hello. Thanks for the super useful and clear tutorial! Perhaps you can suggest a solution to my problem. When I export a theme from the FSE editor, it is downloaded. But when I try to unzip it, it shows an error "The archive is corrupt". Thank you!

@@OlenaIaroshynska Hello! Don't export it from the Create Block Plugin, but instead use the FSE export option. The instructions are the same as on the comment above. Also, just to mention, now there is an option for the Create Block Theme to be saved straight into the JSON file, meaning that you might not need to export, if that option is enabled. I haven't had the chance to test it, but it's worth trying on a test website

@@RaddyDev Hello Raddy! Thanks for the answer. I use the FSE export option and the archive is still broken. How to enable the option for the Create Block Theme to be saved straight into the JSON file?

@@OlenaIaroshynska Update the Create Block Theme plugin, and then on the back-end of your website. Navigate to Appearance -> Create Block Theme. From there you should be able to see the new options they have. The option that I was talking about is called "Overwrite [Theme Name] (new)". Give it a go and I hope that it works for you. Let us know how it goes :)

Got it... not even sure how. There's a GH thread about this, as well, as apparently it was a known issue for some time.

Already made one: kzfaq.info/get/bejne/Y7Cng62YxpvXgWQ.html There are a few new options that where added after the video, but it should give you a clear understanding on how everything works.

@@RaddyDev thanks so much :)

Are you talking about the responsive headings where I used the CSS clamp property? Or you are unable to change font sizes in general? With the headings all you need is something like this: "fontSize": "clamp(3.05rem, 2.73vw + 2.37rem, 5rem)" and then just make sure that your page isn't cached. Try incognito mode if you have to

@@RaddyDev I'm unable to unable to change font sizes in general like in paragraphs

​@@daeljessabelcaramol4974 The options don't show? Could you check something for me please. In your Theme, open the file theme.json and look for "typography". Do you have different options for like this for example: { "fluid": { "max": "0.89rem", "min": "0.8rem" }, "name": "Small", "slug": "sm-r", "size": "0.89rem" }, This is an example for a "Small" size font. I wounder if yours where not added for some reason. If that is the case, you can easily copy my settings from the Repo in the description and change them to suit your needs.

@@RaddyDev I really appreciate your help on this. I copied your settings & still no sizes showing. Im using WP 6.3 is it probably because of the version?

​@@daeljessabelcaramol4974 I am also on 6.3.2 so it should be fine.Can you please try two more things: 1) Can you activate another FSE theme like Twenty Twenty-Three and see if it works there. That could tell us if it's the theme or there is something wrong with your WordPress setup. 2) Can you enable WordPress debug inside wp-config.php (root wp folder) by changing define('WP_DEBUG', false); to true. So this: define('WP_DEBUG', true); Do you get any errors when you refresh the website after the debug is switched on?

Yep, everything I used in this tutorial is free

Can you give an example of something dynamic? Maybe I can incorporate it in the next video

@@RaddyDev menu from dashboard, site name from dashboard, grid posts, ...

I just tested on wp 6.4.3 and it seems to work for me. Do you get any errors? Maybe try to force a style with important on just to see if it makes a difference. Example: .wp-block-heading { color: red!important; }

@@RaddyDev thanks. i restarted the whole process, now it works. i don't know what the problem was 😅 thanks again❤

It could be a caching. Try Ctrl + Shift + R on the page. The code looks okay to me

@@RaddyDev That worked for me 😃 (not deleting cache on the website itself)