WordPress Full Site Editing But For Developers
ฝัง
- เผยแพร่เมื่อ 11 ก.ค. 2024
- This is my developer-friendly approach to Full Site Editing in WordPress. Join my full WordPress course learnwebcode.teachable.com/p/...
GitHub Repo: github.com/LearnWebCode/brads...
0:00 Intro
2:52 JSXBlock
8:49 PlaceholderBlock
10:15 PublicClientSideBlock
12:17 Empty Page Template / Landing Page
16:58 When to NOT use this approach
Follow me for updates on new videos or projects:
Instagram: / javaschiff
Twitter: / learnwebcode
Facebook: / brad-schiff-1542576316...
Twitch: / learnwebcode
![คุณอาเรียโต๊ะข้างๆ พูดรัสเซียหวานใส่ซะหัวใจจะวาย ตอนที่ 2 [ซับไทย] 【Ani-One Thailand】](http://i.ytimg.com/vi/kbbfYakMY8k/mqdefault.jpg)
While it's covered in PHP comments in the functions.php file, I realized I forgot to mention it in the video. When you use JSXBlock or PublicClientSideBlock you'll need to manually point towards your new block's JS file from within your package.json file. You can read about the details of how to do this in the comments / documentation inline within the theme's functions.php file. The GitHub repo's README also has info on how to use "npm install" and "npm start" to begin processing your files. Enjoy!
This is the most useful WordPress-Tutorial I've seen for years.
OMG this is amazing! Just what I have been trying to figure out ever since I started using blocks and Gutenberg.
It’s like water to my dev thirst 🤩
And as always you teach with such Grace that make me enjoy your videos to the max
Thanks mate, this is brilliant! I’ve learnt a lot with your Udemy course and I’m glad you keep updating it and making it all so comprehensive despite all the WP continuous changes. The biggest value ever!
This is great! I plan on adding this to my theme soon. Thanks a lot man. We’ve been looking for a good way to add blocks and this looks promising
Hey Brad! Good to see you back dude! I love WordPress but it's an absolute beast and we'll never know everything.
The importance of this video and what @LearnWebCode has done can not be overemphasized. Thanks so much for this gem.
This is genius. I'd almost given up entirely on WP but this is exactly what is needed for developing WP themes for clients. Thank you for sharing your creative efforts and contribution to WP developer community. Well done.
Amazing video man, ive been creating themes for clients for 13 years now since v3.8 and cannot get my head wrapped around the new direction WP is going in, until now. This is such a great way to fuse classic and block themes for the purpose you mention, creating sites for clients where they WON'T be changing themes and DON'T want to make design decisions.
Your teaching style has built another great spirit in my body system. I recently completed your WordPress dev course on Udemy (Become a WordPress Developer: Unlocking Power With Code), and I must confess that you've highly added to my market value as a dev.
I now have the required confidence as a WP Dev. I owe you a lot Sir Brad ❣️
Hey Brad. I just wanted to let you know I study software development and I got the full 53 points for web development yesterday. My Laravel journey started with your Udemy course so I want I thank you for giving me the start I needed :)
The best teacher ❤️
I am a web developer, and exactly such kind of videos I wanted for 1 years
Thank for it
If I haven't got this kind of videos I may be leave the WP development.
As we said in video, we are developers we need full control
Excellent ❤ Thank you Brad 😊.
Please make more and more videos on WordPress covering advance Topics
Hi Brad, your Udemy courses have helped me a lot. Your style of explanation is very helpful for clear and simple understanding.
I tried using wordress/scripts for several Wordpress sites. But in the end, I prefer Vite more than Webpack.
Thanks so much! Glad the courses are helpful. I prefer Vite too! A couple weeks ago I was trying to integrate Vite with WordPress, but I needed to learn how to alias imports, so that when a public front-end block imports 'react' it actually just uses "window.wp-element" - I think if I spend a bit more time optimizing that I'd probably start recommending a Vite boilerplate for WP.
Kindly make a complete tutorial on how to create a Wordpress Website with React JS. Please it is a humble request. Thanks
Been in the field since '99 and your udemy wordpress course was the first one I actually paid for. Some of the REST API and full site stuff was worth the price for that alone to me since I neve bothered with Wordpress's API.
Thanks for the support. Your comment is literally why I do what I do; I'm so glad the videos have been helpful!
This is what I need
Thank you brother
Cool instructor ❤
Clear explanation.
Thanks for this 🙏
Excellent video! =D
Awesome work as usual Brad thanks! I took the course where we built this maybe a year ago and in some ways saw the allure. I havn't yet moved away from my classic editor + ACF sections workflow, but I'm checking back in regularly to see if things are getting better. One of my biggest issues at that time was having to look at the god awful way that HTML comments were being used for rendering markup. Are those more or totally avoided using this new FSE theme? Also curious as to why you prefer to use useEffect + fetch instead of just using setAttributes({ imgUrl: "blah" }) within your event listener?
Looks great Brad, thank you for this.
One question, have you thought about maybe organizing the file structure a bit and using folders to organize the relative files? JUst a thought.
Hi Brad,
I am converting the professor callout block into new method of block using block.json, index.js, edit.js, render.php.
I want to define some php functions in a separate file for that block. My folder structure is like:
my-block
|--block.json
|--edit.js
|--render.php
|--my-block-functions.php
when i do npm run build, only render.php is getting created in build folder, my-block-functions.php is not. so getting errors due to missing functions.What to do ?
Hey brad, great video as always. Is there any new course you are working on ?
You're amazing
That's great! I was just looking for a beginner's course with block themes.
Which one of the courses to begin with, to be able to make a nice landing pages? Later I'll have time to take the more experience course.
Is the course valid for any block editors?
Bradd, I just got an internship in a software company and they use Wordpress, Typo3, twig and bootstrap and other tools like phpStorm etc. So far I put all my focus, tears and blood on vs-code, JS, bootstrap, css/sass and all the popular vscode tools & plugins such as PostCss/Parcel for css/js development. Now I have to master WP, Typo3, Twig and all their tools they’re using. And I feel sooooooo overwhelmed with WordPress😭 and php. Is your Wp course up to date 2023 and does it offer everything I need to know to impress my colleagues 😂
Curious what you think about ACF Flexible Content fields and using that in conjunction with custom coded templates to display the content on the page? I am relatively new to WP development but I saw that method via my workplace and thought it was pretty nifty and provides a fairly intuitive experience for the user, IMO. If you have any experience with it, I would be curious to know your thoughts especially the pros and cons compared to doing it this way.
Flexible Content fields are amazing! I used them on several client projects a few years ago. It's literally my vision for how WP should be. The reason I don't officially cover them in videos is because they're not included in the free version of ACF. I think the current direction of WordPress is great for people creating their own sites, but I think it would be cool if developers who use WP as a CMS for their client projects forked WP and called it something like CMSPress and implemented something very similar to Flexible Content Fields into the core of the project. CraftCMS is pretty ideal (its Matrix field is similar to ACF Flexible Content) but it's not free.
If i am building a custom theme, do i have to write the styles for every block the block editor offers?
I feel like I should have watch this video earlier in my life so that I can know a little bit better about Wordpress using as a web developer.
I have the exact same philosophy as you do with regard to proper separation of concerns. I want clients merely entering text into text boxes and not concerned with any presentational aspect of the site. Imagine having to explain to your non-techical client why you can't implement a certain change (or that implementing that change would be a massively time-consuming and error-prone manual exersice) becuase they modified (and as a consequence created independent copies) of the code that needs to be modified 500 (or x number of) times .
What do you think about the first glance of Interactivity API?
About a month ago I finally got around to reading the official blog post about it (make.wordpress.org/core/2023/03/30/proposal-the-interactivity-api-a-better-developer-experience-in-building-interactive-blocks/). I think it will solve at least 90% of what I'm trying to fix with my boilerplate theme. From what I read in that blog post it's still early days, and I'm not counting on it being out of the experimental "tons of things are still changing rapidly and not solid ground feeling" phase for quite a while still. But I'm super excited for it; it's what I feel has been missing since blocks were first introduced years and yeas ago. To me, for the last 5 years it's felt like blocks weren't ready for production yet because there is just this giant unbridgeable gap between the admin editor experience and how developers want to output things (in a dynamic way) on the actual front-end. It's felt like we need a custom VPS host where we can install the Node V8 engine module in PHP and get super creative with some wacky configuration so that we can bridge the gap between JSX and PHP SSR. I'm super excited because the Interactivity API will solve all of this. I'm just not sure when it will be "ready" and solid ground.
Hi. How do you solve the problem that you upload the React library to the frontend client, and it doesn't matter if client use Gutenberg blocks on the current page or not? Your client should always download a React library?
Good question. The nice thing about our setup using the official @wordpress/scripts package, is that they've already configured their webpack so that it aliases the import of "react" to instead pull in the official WordPress enqueued copy of React. Your front-end will only load the WP copy of React if your block/plugin lists "wp-element" as a dependency. It works nicely, and is why in our build folder, the "quiz-frontend.js" file is only 10kb, it's not actually importing/bundling React.
Hi, does your Wordpress developer ("unlock power with code") course teach about OOP PHP? I mean, I have experience in OOP but not in PHP, so I hope I could pick it up quickly through your course while learning Wordpress ::)
what is the use of FSE when you don't get to see the website exactly the way you were editing in the cms. All these blocks seems pointless to me for most websites. I guess the interactive website would be a much experiance with tailored reusable blocks for clients but I wonder how many clients would actually benifit from it. Also isnt this same as the Flexible Content type provided by ACF. To me its not the editor that has change first, its the flexibility provided by many plugins that are under paywall that needs to be in the core of wordpress.
I will say, having interactive elements in between texts in websites that are produced by content writers and not the designers of the blog would be a fresh amaizing way to experiance website all together. I hope blocks can makes its way to there.
Hey brad what about the headings? Businesses care to much in seo so the h1, h2 has been thought to be important in wevsite in seo so you can switch from small medium large to h1, h2, h3, p
Good question. Check out the source code link here; I do use either an h1, h2, or h3 depending on the small/medium/large choice. If you wanted you could also use h1, h2, h3 instead of small, medium, large for the labels that users click on. github.com/LearnWebCode/brads-boilerplate-wordpress/blob/main/brads-fse-hybrid-theme/src/genericheading/index.js
A mini page builder tailored for a client?
And eventually a large distributed page builder in you local environment?
I am interested in your Udemy course. Do you provide a git repo with the code for the website you are building?
Hey Brad,
On which new video course are you working? ❤
Hi! I'm working on a confidence building course right now! I'm hoping to launch it later this year.
is this new theme FSE hybrid also includes React and Tailwind?
one more question, you can make a FSE hybrid Developer course so we can buy and study recent changes what we can implement to our working routine!
Good question; it includes React but not Tailwind. But in that same GitHub repo there are theme and plugin examples that do have Tailwind implemented. This theme uses the same "@wordpress/scripts" package as the bundle tool, so you should be able to borrow the Tailwind example code from one of those.
can you make a video how to make compatible and fix woocommerce HPOS issues
isn't this the new block sync coming in wordpress 6.3?
sir plz make full website tutorial on wordpress with nextjs 13 all latest.
hi, I have request for new GeneratePress / GenerateBlocks with CPT and ACF simple services project tutorial
Make this into a plugin with classes dev can use to make addon
Oooooh, that's a good idea!
Im surprised you didnt use the short hand for the php echo. This is just
Good to see you here Joseph. I definitely need to start using the short echo tag. It could clean up our themes and plugins a good bit.
Maybe arrays too ? [ ] vs array()
my situation is very bad , pls help me !!
I think this issue is a bit more philosophical and real than that :/
This is the mentality of "everyone can do everything" type of thing, this takes away the importance of many different jobs and many different people doing these jobs
And to make it even worse, AI is also in this equation.
To bring it to web design, not only can anyone now design and develop their own website, they can also use AI to create content, manage their social media and create marketing plans etc.
So essentially, what would have been a cool 4-5 people startup, is now a 1 person startup + AI. Taking away the work from at least 3 people.
I'm not a fan of this whole philosophy of "everyone can do everything". It's one thing if they can do very basic and minimum adjustments in said field, but it's a completely different thing if they can actually make it in its entirety.
It's fine and should be the case that everyone can change a lightbulb in their house, but not everyone can or should be a specialized electrician.
You are not even close to understanding clients or being a developer if you think FSA + Block Editor is some kind of danger to devs, lol. I as a Node/React developer can tell you 100% that the Block Editor is amazing and it is nothing devs should worried about just learn React and make money, the Block Editor is like a big App Store you are now able to publish you App to. If it clicks for you you will make money.
I think you're misinterpreting this video. A lot of people used WordPress as a CMS for their clients. It's difficult to be the developer "responsible" for a large highly branded & stylized site with hundreds or thousands of pages/posts/CPTs if every page is a static custom design put together by a client with zero separation between content and style / layout. It's not scalable / maintainable / uniform. Obviously, for small projects where people create their own sites the new direction of WordPress is amazing. My course teaches developers how to use React to create custom block type plugins for people. I felt like the first 2 minutes of this video made it clear I was referring to developers who use WordPress as the CMS tool for their clients.
@@LearnWebCode Exactly! Small-business freelance devs might be endangered by FSE (and more by AI builder tools now built into many web hosting setups) but that's a separate issue. Allowing clients to edit their sites with all the FSE controls, patterns, templates and style settings, not only will cause the scalability issues you mention but they WILL screw up their sites. As someone who maintains a theme for private clients, with dozens of custom components, still in PHP and ACF, I've struggled with deciding how to rebuild the whole thing for the future.
I've got some learning to do, but luckily I signed up for your course years ago and this hybrid theme is exactly the approach I'm looking for.
I know this is not relevant to this video.
I want to know can you please demonstrate how track driver live location with Google API and show it to end users on WordPress?
But why are developers always in denial about new changes and prefer to do everything in code? ‘I’m a full-stack developer, how could I use no-code?’… The idea of Gutenberg is that you don’t have to write your HTML, SCSS, and PHP/JS code line by line. If you’re going to use WordPress to be pure code, then it doesn’t make sense, it’s better to use Angular, Spring Boot or some stack. The reason why one uses WordPress is for speed and not having to write all the code. If you were to use pure code in WordPress, then don’t use WordPress, use some full stack MEAN and delay your production…
I agree with that sentiment 100% if we're talking about end-users creating their own sites or developers creating their own sites, but I think I'm describing a different use-case entirely. The way I and many others have always used WordPress is more like CraftCMS. A content authoring interface would replace WordPress in this case not Angular. I'm not the ones creating the pages, posts, and content on the site; my non-dev client site-owners are. However, they pay me to create (code) a site that looks pixel perfect to their brand guidelines and need custom post types and meta relationships and custom searches / filters / JS interactivity etc... and you're never going to get that level of uniformity and customizability without a dev micro-managing and keeping the content-inputters on somewhat of an "on rails" experience. They just input paragraphs, h1-h6 and add my own custom blocks to create relationships / uniform features etc...
Having said that; the new WP approach is amazing for simple sites that don't have custom post types or relationships or need pixel perfect uniformity across hundreds or thousands of URLs. Maybe that was never WordPress's intended use from the beginning; but tons and tons and tons of devs and agencies have used it that way over the years.
I'm shadowbanned on youtube, but in the rare event you see my coment, his course on Udemy (link in description) is great.
I really did not see the value in this clip. It was supposed to be for developers, yet you have only shown some block code and how you use these blocks with the new block templates. Technically, you can all this a suggestion for developers, and that's really it.
i need a help guys i dont laugh or lie i am serious ?
Beautiful, but this heavily customized approach is not going to age well, I'm afraid.
I unfortunately agree. Since posting this I've changed my mind a bit. Until the upcoming official WP Interactivity API launches into WP core... I think I'll draw a line in the sand. If a client is paying a dev to create their site, use a traditional theme + ACF and disable 95% of blocks. On the other hand, if a client just wants help getting a WP site up and they aren't paying for any bespoke dev / design work, and they want to use "page builder tools" themselves, then and only then, use a block theme + FSE. I do hope that in the future when the interactivity API launches we can bridge the gap and use block themes + FSE in more scenarios.
I thought the Block Editor was supposed to be WYSIWYG. When creating a post or page, the content in the editor looks nothing like how it ends up looking on the front end. How many years have they been working on this? Gutenberg is a pathetic joke, a toy. I can't take it seriously.
What? 6:00 - impossible without your theme? Old name "reusable blocks" new"Synced Patterns". Bullshit. Theme.json file allows developers to choice the font sizes and limit them as they wish. Tailwind and FSE patterns? EASY. Content locking and options locking: EASY. The rest is very nice. Sorry for that little hate, but I love people who's checking the facts.
No worries; a dialogue is great. I've been meaning to learn more about Synced Patterns; maybe I misunderstood them, but yes it would allow you to have a shared single instance of a block that's used on 500 pages and you can update it in one place. But what if you have 500 pages and each one uses a certain block/pattern but has its own unique values / data? Like 500 different instances of the same block/component. If you "detach" a synced pattern and then later want to update the HTML for all 500 different "instances" is that feasible / possible?
And I love people who can make a point in a nice/polite way... You don't need to say "bullshit" to be heard... Be better than that!
@farazk9729 You're right and YES - I'm sorry to @LearnWebCode. BUT at the same time I think he understands that people like me + SM is full of people with different language than EN. It just means that we are good in code and reading doc, but sometimes have a problem with expression - it's not our native lang. Sorry. In Polish language I could express the same in about 1500 words, so it was a shortcut. I hope @LearnWebCode knows it, as His smart person and that's the reason I subscribe - not because He's nice or tell me to click the bell.
All the best to you two gentlemen,
From Poland with love,
- Paul
@@PaweBystrzan Hi Paul,
Thanks for your beautiful honest reply; it's nice when people are nice online, and yes, I didn't take the language thing into account.. sorry! But I think Brad probably did. You're right; there's so much misunderstanding because of that. Anyways, Poland.. beautiful country. As a matter of fact, I think it was a couple of days ago I heard about the recent elections in Poland. Wishing you and your country all the best.
Thanks again,
From Sydney with love, haha :-D,
Faraz
@@farazk9729 I wish myself and all the world peace and love. And YES. Sometimes we're making mistakes and it's totally worth what we both did: 1. say it wan not nice from You 2. Say honest sorry from me.
Hope the Love will wins always.
Best,
Paul
Hi Brad, thanks for this awesome content. Is there any chance you can add to the WordPress course an bilingual site approach? How to write the code, so plugins like WPML or Polylang can read it easily? I've created bilingual website without plugins which was my main goal but would be nice to have some ideas how you would approach those bilingual sites as you probably did it many times.
Thanks so much for all your hard work! As always every single second with you is precious! 🤌