No video

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

  Рет қаралды 3,729

LearnWebCode

LearnWebCode

Күн бұрын

Check out my full WordPress course here learnwebcode.t...
My Interactivity API Tutorial • WordPress Interactivit...
Follow me for updates on new videos or projects:
Instagram: / javaschiff
Twitter: / learnwebcode
Facebook: / brad-schiff-1542576316...
Twitch: / learnwebcode

Пікірлер: 45
@robt2151
@robt2151 3 ай бұрын
I prefer to use the Classic Editor in text mode. I am still referring to your theme development tutorials from ten years ago so thank you for keeping them available online.
@LearnWebCode
@LearnWebCode 3 ай бұрын
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
@robt2151
@robt2151 3 ай бұрын
@@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.
@fightbutterfly
@fightbutterfly 2 ай бұрын
Hello, my block is not appearing in my Post add block
@adbutt
@adbutt 2 ай бұрын
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
@pietrodeferrari
@pietrodeferrari 2 ай бұрын
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
@araimarodriguez6325
@araimarodriguez6325 2 ай бұрын
I was looking for this comment. I've been experiencing the same for days, I tried everything different environments, node versions etc.
@isheevaa
@isheevaa 2 ай бұрын
Hi I have the same problem 🤔 I tried everything but the block is not shown in the editor.
@pietrodeferrari
@pietrodeferrari 2 ай бұрын
@@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
@abdullaalfaiyaz1890
@abdullaalfaiyaz1890 3 ай бұрын
Hi Brad. Thank you for this informative video. Currently I am doing your laravel course. It is really good. But i think It would be more awseome if you add a dedicated section for database where you would show advance topics such as indexing with examples and a section covering small API building project using laravel. I think every entry level laravel job asks for these requirements. Then i think this course will be more fulfilled.
@LearnWebCode
@LearnWebCode 3 ай бұрын
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.
@cholo2605
@cholo2605 3 ай бұрын
Thanks for sharing Brad!!!
@iambhavinpatel
@iambhavinpatel 3 ай бұрын
Hi Brad, I like this video approach. You tuned on camera and we can see you at the bottom right corner. Superb!!
@LearnWebCode
@LearnWebCode 3 ай бұрын
Thank you so much! 🙏
@visualmodo
@visualmodo 2 ай бұрын
Truly good work!!!
@matteonicoli
@matteonicoli 3 ай бұрын
Wow, big fan. Did your course Become a wp dev (not yet spend enough hours/10 hours). I would love it if you could go into how to go into creating interactive forms, maybe with a custom db table attached to it. Or if someone wants to buy a simple product, that involves a single page checkout (without registration but with the possibility to login later based on one’s e-mail and create a profile later). In any case many thanks for your channel!
@LearnWebCode
@LearnWebCode 3 ай бұрын
Thank you so much! I like the interactive forms idea; I've added that to my list!
@Whatreally123
@Whatreally123 12 күн бұрын
Hi Brad, I am a non-developer. I have a need where I want to slightly modify the core "Post Title" block and create my own custom block. I have used ChatGPT to create the required function and append the main php file. However, I have downloaded the files for the core Post Block from the Gutenberg github. The files are differently named than what the wordpress/create-block created. As I am no developer, no clue how to go about duplicating the core Post-Title block with the modifications I want. Can you guide me how to go about doing this? Thanks.
@fluffy249
@fluffy249 2 ай бұрын
Hi Brad, I am following your course on Udemy but I am not sure it isn’t reading my JSX. On the admin screen it says ‘This block has encountered an error and cannot be previewed.’ And when I use JSX in the save function, the editor screen goes blank. I have also asked this in the Q/A section on Udemy. Could you please check and guide me?
@Vrtel__
@Vrtel__ 3 ай бұрын
I think the problem with static (JS blocks) will be fixed with 6.6 and introduction of partially synched pattern. So you will be able to update the pattern in one place and the change will be reflected on all posts. I think the idea for static block si that they are saved and served as static HTML so there is less work on server. Although I doubt there is a big performance difference between the PHP and JS block with the same structure.
@LearnWebCode
@LearnWebCode 3 ай бұрын
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).
@thebilalafsar
@thebilalafsar 3 ай бұрын
Still waiting for your WordPress Speed Optimization & Core Web Vitals tutorial😠😭
@LearnWebCode
@LearnWebCode 3 ай бұрын
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.
@thebilalafsar
@thebilalafsar 3 ай бұрын
@@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!
@mehrshadpiano
@mehrshadpiano 3 ай бұрын
Thank you Brad! hmmm....would you say this package is a substitute for your, github "brads-boilerplate-block-plugin"?. I mean does this let us code with React?
@LearnWebCode
@LearnWebCode 3 ай бұрын
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.
@mehrshadpiano
@mehrshadpiano 2 ай бұрын
@@LearnWebCode , that would be a great video. That's something I havne't seen on youTube yet. :) Thanks Brad
@Black1991Star
@Black1991Star 3 ай бұрын
Thanks for video. Can you explain how to create multiple blocks on a page that should store different information? For example, you have several quiz blocks on a page ... how to make their keys unique depending on how many blocks will be added to the page. *I don't know how many quiz blocks the user will create in the admin, but I need to somehow save the information that the user will send. How to do it?
@LearnWebCode
@LearnWebCode 3 ай бұрын
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...
@Black1991Star
@Black1991Star 3 ай бұрын
@@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?
@LearnWebCode
@LearnWebCode 3 ай бұрын
@@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 kzfaq.info/get/bejne/ap-Pi8-Cr7_epHU.html
@iambhavinpatel
@iambhavinpatel 3 ай бұрын
Brad, Is the Next.js course in your list? Please reply...
@LearnWebCode
@LearnWebCode 3 ай бұрын
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.
@iambhavinpatel
@iambhavinpatel 3 ай бұрын
@@LearnWebCode thank you so much 🙏
@AvionicsDev
@AvionicsDev 2 ай бұрын
put the camera on top of monitor, would be much better.
@LearnWebCode
@LearnWebCode 2 ай бұрын
Thanks, I'm trying that for the next one I film.
@thebilalafsar
@thebilalafsar 3 ай бұрын
First🤩
@cholo2605
@cholo2605 3 ай бұрын
@ahmadsaeid
@ahmadsaeid 3 ай бұрын
white background?!!! unsubscribing
@LearnWebCode
@LearnWebCode 3 ай бұрын
🤣 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
@ahmadsaeid
@ahmadsaeid 3 ай бұрын
@@LearnWebCode 😅
Multiple WordPress Blocks In One Plugin (@wordpress/create-block)
7:50
10 Reasons To Try WordPress Development (JavaScript and PHP)
31:37
Bony Just Wants To Take A Shower #animation
00:10
GREEN MAX
Рет қаралды 7 МЛН
My Cheetos🍕PIZZA #cooking #shorts
00:43
BANKII
Рет қаралды 27 МЛН
Алексей Щербаков разнес ВДВшников
00:47
Pool Bed Prank By My Grandpa 😂 #funny
00:47
SKITS
Рет қаралды 20 МЛН
The App YOU or I Could Have Built... ShipFast
6:52
Travis Media
Рет қаралды 131 М.
How to Become a WordPress Developer
11:02
zengig career advice
Рет қаралды 6 М.
What If Figma Was Better For Developers? (Penpot)
21:22
LearnWebCode
Рет қаралды 5 М.
STOP Using Classes In JavaScript | Prime Reacts
14:02
ThePrimeTime
Рет қаралды 233 М.
How to Build Dynamic (PHP) Blocks in WordPress
30:57
Brian Coords - WordPress Dev
Рет қаралды 9 М.
WordPress Full Site Editing But For Developers
19:22
LearnWebCode
Рет қаралды 24 М.
Free AI in VS Code (Better Than GitHub Copilot)
19:28
LearnWebCode
Рет қаралды 10 М.
Easy custom blocks using InnerBlocks in Gutenberg
19:09
Brian Coords - WordPress Dev
Рет қаралды 2,8 М.
How to OVER Engineer a Website // What is a Tech Stack?
11:20
Fireship
Рет қаралды 2,4 МЛН
Bony Just Wants To Take A Shower #animation
00:10
GREEN MAX
Рет қаралды 7 МЛН