How to Create New Blocks In WordPress (@wordpress/create-block) 

Same... NPM 10.7.0 , node v22.2.0, WP-6.5.3 running twenty twenty-four - block creates and scaffolds, plugin is activated, no sign of block in the editor

Same for me. WP 6.5.3 + 2024 theme NPM 10.7.0 Node 20.14.0 Re-started from scratch many times but blocks don't show up inside the editor

I was looking for this comment. I've been experiencing the same for days, I tried everything different environments, node versions etc.

Hi I have the same problem 🤔 I tried everything but the block is not shown in the editor.

@@isheevaa - edit your package.json and set devedepencies "@wordpress/scripts" to "^27.9.0" instead of "^28.0.0" - run npm install - npm start - refresh and edit a page

I still vastly prefer (personally) the classic text editor. I only learn / teach / use the block approaches because that's the direction WordPress is going and I feel responsible to help people learn the new approaches. If I could create a new dream CMS I'd probably have the classic traditional WP editor but instead of short-codes, you'd be able to insert "special blocks" here and there (only for very specialized bespoke features where there'd be no other way to achieve it), but the majority of your content is still just paragraphs and headings etc... I don't know why, but even just h1 - h6 and paragraphs and lists feel clunky to work with in the block editor. Nothing about it feels fast, simple, intuitive, efficient or performant. Even after using the block editor for 5 years it still isn't a part of my muscle memory; it never feels like 2nd nature. ~Brad

@@LearnWebCode Thank you for your prompt, and encouraging, reply. I would like to be able to change some of the preset buttons in the text editor - I use regularly - so that's something I need to research. I wish you success with your courses.

Thanks for the great feedback. I really like your ideas of a DB specific chapter, as well as a decoupled API chapter. I've added those to my todo list for the Laravel course. Other items on that list are v11 updates, Livewire, basics and testing basics. I've been trying to get my WP course updated but Laravel is my next focus to invest heavily into again.

Thank you so much! 🙏

Thank you so much! I like the interactive forms idea; I've added that to my list!

I added it to my todo list when I saw your last comment; thanks for the good idea. I need to finish some speed tests so I make sure I'm not just passing on my own anecdotal experiences and that I've actually "measured" what is fastest. Should be a fun video, but probably won't be out for a while.

@@LearnWebCode Awesome! If possible, could you tackle a complex WooCommerce site in your video? Simple sites often speed up easier. It would be awesome if you could cover everything from the ground up, including caching, advanced image lazy loading, rewriting headers and footers with hardcoded CSS, server configuration, and removing unused CSS. Looking forward to it, and thanks for diving deep into this!

Good call; I'm very excited to see exactly how partial synced patterns work. Being able to update the pattern "template" in one place and have all the unique instances of it use those changes and be updated automatically without having to edit posts/pages would be great. I guess for me, if we're already needing to use PHP to query the database for the statically saved HTML string, how many more milliseconds, if any, does it take to use PHP to generate a dyanmic HTML string on the fly. It feels like throwing away one of the main benefits of SSR, and seeing how far out of the way people went to get that in the React / Next.js world, it feels weird for WordPress to essentially volunteer to get rid of something that other tech stacks are fighting to get. That's why I'm so excited for the Interactivity API, it's essentially WordPress admitting that developers want and need SSR (dynamic blocks).

Great question, and one that I forgot to consider. You just gave me an idea for a video; assuming we use the "npx @wordpress/create-block --variant dynamic" command, what's the easiest way to actually use React on the public front-end? We'd still need to output the block's attributes into the DOM in JSON format for React to be able to use, but I have a feeling that would be easy to do in the render.php file that the boilerplate file gives us. I'll make a video about this! Having said all of that, I'd lean towards using the Interactivity API instead, because it gives us initial real HTML via SSR (like Next.js) which is great for SEO and accessibility.

@@LearnWebCode , that would be a great video. That's something I havne't seen on youTube yet. :) Thanks Brad

You're welcome! I think what you're describing would be achieved with state instead of context on the public front-end Interactivity API. And on the admin / Gutenberg side I'd use the strategy I use in the "Featured Professor" block plugin chapter of my big WP course. That would let you see all instances of a block type on a page/post, keep count, have some global data etc...

@@LearnWebCode The question is that there are several of these blocks on the page. How can the answers be separated? Suppose the user creates a questionnaire on the page with two dynamic blocks: 'Name your favorite animal' and 'Name your favorite movie'. These are the same Gutenberg elements. How can the keys that will be written to the metadata be separated?

@@Black1991Star Each "Quiz" block type instance will have a "question" attribute. You could have as many "quiz" block type instances on the page as you want. Depending on what you're trying to create / achieve maybe you need all of the data to be in one instance of a block type, in which case you could have an array of strings saved in one attribute. Like we do for the "answers." You can check my code here github.com/LearnWebCode/interactivity-api-tutorial for this video ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-49_XlQJYztA.html

Thanks, I'm trying that for the next one I film.

It is indeed next in my list for new courses, but I do still have a few WordPress, Laravel, and JavaScript course updates to make before I finish / launch Next.js.

@@LearnWebCode thank you so much 🙏

🤣 I think I had that to try and match an old recording from 8 years ago for a course lesson, and forgot to switch it back after recording. While I was editing this video my retina's were damaged by that background scheme haha

@@LearnWebCode 😅