WordPress Full Site Editing But For Developers

Поділитися
Вставка
  • Опубліковано 3 жов 2024

КОМЕНТАРІ • 79

  • @LearnWebCode
    @LearnWebCode  Рік тому +10

    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!

  • @clickadelic7681
    @clickadelic7681 Рік тому +4

    This is the most useful WordPress-Tutorial I've seen for years.

  • @hujth6
    @hujth6 Рік тому +9

    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

  • @daniedmola7465
    @daniedmola7465 Рік тому +2

    The importance of this video and what @LearnWebCode has done can not be overemphasized. Thanks so much for this gem.

  • @johnyharris
    @johnyharris Рік тому

    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.

  • @AdeotiNurudeen
    @AdeotiNurudeen Рік тому +6

    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 ❣️

  • @Habib_HBB_17
    @Habib_HBB_17 Рік тому +6

    The best teacher ❤️

  • @briangelhaus8267
    @briangelhaus8267 Рік тому +3

    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

  • @oh-digital
    @oh-digital 10 місяців тому

    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.

  • @outpost31737
    @outpost31737 Рік тому +1

    Hey Brad! Good to see you back dude! I love WordPress but it's an absolute beast and we'll never know everything.

  • @SoumyaRanjan-p4c
    @SoumyaRanjan-p4c 6 місяців тому

    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

  • @rogersegu1053
    @rogersegu1053 Рік тому +1

    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!

  • @RyuBateson218
    @RyuBateson218 Рік тому +1

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

  • @socialkruption
    @socialkruption Рік тому +4

    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.

    • @LearnWebCode
      @LearnWebCode  Рік тому +2

      Thanks for the support. Your comment is literally why I do what I do; I'm so glad the videos have been helpful!

  • @technocats5473
    @technocats5473 4 місяці тому

    This is what I need
    Thank you brother

  • @dancielos
    @dancielos 12 днів тому

    I've been using themes to "develop" Wordpress sites for small businesses, but I believe this is a much better approach for my agency. The only problem for me is if I were to create such theme, and if the business chooses to move to another agency / developer, they'll likely break the website. I mean, technically it won't be my problem, but I still want my clients to have the option to hire someone else if they want to.
    Yes, I still code a lot of PHP customizations, but not a full development hence the quotes lol

  • @WebDevMastery
    @WebDevMastery Рік тому

    Excellent ❤ Thank you Brad 😊.
    Please make more and more videos on WordPress covering advance Topics

  • @LeonnardoNascimento
    @LeonnardoNascimento 7 годин тому

    You are great brad

  • @ivanbarta2821
    @ivanbarta2821 Рік тому +1

    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.

    • @LearnWebCode
      @LearnWebCode  Рік тому +1

      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.

  • @Banna3Sixty
    @Banna3Sixty 2 місяці тому

    I agree 100% with you.

  • @Tony.Nguyen137
    @Tony.Nguyen137 Рік тому

    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 😂

  • @ooogabooga5111
    @ooogabooga5111 Рік тому +2

    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.

  • @thecodemon
    @thecodemon Рік тому +4

    Kindly make a complete tutorial on how to create a Wordpress Website with React JS. Please it is a humble request. Thanks

  • @zensukai
    @zensukai Рік тому

    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.

  • @nxone9903
    @nxone9903 3 місяці тому

    You're amazing

  • @paxiepan1535
    @paxiepan1535 Рік тому

    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.

  • @alansebastian-hn4bg
    @alansebastian-hn4bg 2 місяці тому +1

    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 ?

  • @paulinopaulodiversone3386
    @paulinopaulodiversone3386 Рік тому

    Clear explanation.

  • @TKNDevCorner
    @TKNDevCorner 10 місяців тому

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

  • @visualmodo
    @visualmodo Рік тому

    Excellent video! =D

  • @nicolastovar792
    @nicolastovar792 Рік тому +2

    What do you think about the first glance of Interactivity API?

    • @LearnWebCode
      @LearnWebCode  Рік тому +5

      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.

  • @aogunnaike
    @aogunnaike Рік тому

    Thanks for this 🙏

  • @MIrffan10
    @MIrffan10 Рік тому

    Cool instructor ❤

  • @gary6212
    @gary6212 Рік тому

    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 .

  • @anasouardini
    @anasouardini 8 місяців тому

    A mini page builder tailored for a client?
    And eventually a large distributed page builder in you local environment?

  • @abdullaalfaiyaz1890
    @abdullaalfaiyaz1890 10 місяців тому

    Hey brad, great video as always. Is there any new course you are working on ?

  • @alEx-isca
    @alEx-isca 11 місяців тому

    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?

  • @jamesauble8091
    @jamesauble8091 Рік тому

    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?

  • @iftakharulislam9068
    @iftakharulislam9068 Рік тому

    can you make a video how to make compatible and fix woocommerce HPOS issues

  • @healthadvice3091
    @healthadvice3091 3 місяці тому

    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

    • @LearnWebCode
      @LearnWebCode  3 місяці тому

      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

  • @knightofrohan
    @knightofrohan Рік тому +1

    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.

    • @LearnWebCode
      @LearnWebCode  Рік тому +2

      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.

  • @pahtashow
    @pahtashow 5 місяців тому

    hi, I have request for new GeneratePress / GenerateBlocks with CPT and ACF simple services project tutorial

  • @ooogabooga5111
    @ooogabooga5111 Рік тому

    isn't this the new block sync coming in wordpress 6.3?

  • @caesarforever
    @caesarforever 11 місяців тому

    I am interested in your Udemy course. Do you provide a git repo with the code for the website you are building?

  • @iambhavinpatel
    @iambhavinpatel Рік тому

    Hey Brad,
    On which new video course are you working? ❤

    • @LearnWebCode
      @LearnWebCode  Рік тому

      Hi! I'm working on a confidence building course right now! I'm hoping to launch it later this year.

  • @juniordev4190
    @juniordev4190 Рік тому

    If i am building a custom theme, do i have to write the styles for every block the block editor offers?

  • @madanmalhotra
    @madanmalhotra Рік тому

    sir plz make full website tutorial on wordpress with nextjs 13 all latest.

  • @andryzirka3940
    @andryzirka3940 Рік тому

    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?

    • @LearnWebCode
      @LearnWebCode  Рік тому

      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.

  • @ddrci88
    @ddrci88 Рік тому

    is this new theme FSE hybrid also includes React and Tailwind?

    • @ddrci88
      @ddrci88 Рік тому

      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!

    • @LearnWebCode
      @LearnWebCode  Рік тому

      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.

  • @afflictionmarketing5303
    @afflictionmarketing5303 Рік тому

    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?

  • @alaayassen5940
    @alaayassen5940 Рік тому

    my situation is very bad , pls help me !!

  • @neozes
    @neozes Рік тому

    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.

  • @DjAbhiphop
    @DjAbhiphop 6 місяців тому

    Make this into a plugin with classes dev can use to make addon

  • @putinninovacuna8976
    @putinninovacuna8976 8 місяців тому +3

    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…

    • @LearnWebCode
      @LearnWebCode  8 місяців тому +7

      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.

  • @josephlivengood4508
    @josephlivengood4508 Рік тому

    Im surprised you didnt use the short hand for the php echo. This is just

    • @LearnWebCode
      @LearnWebCode  Рік тому

      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.

    • @petruciucur
      @petruciucur Рік тому

      Maybe arrays too ? [ ] vs array()

  • @jadhajali2804
    @jadhajali2804 Рік тому

    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.

  • @gE0013
    @gE0013 7 місяців тому +1

    Beautiful, but this heavily customized approach is not going to age well, I'm afraid.

    • @LearnWebCode
      @LearnWebCode  7 місяців тому +1

      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.

  • @jrmc732
    @jrmc732 Рік тому

    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.

    • @LearnWebCode
      @LearnWebCode  Рік тому +5

      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.

    • @PaulMcCannWebBuilder
      @PaulMcCannWebBuilder 9 місяців тому

      @@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.

    • @imraan_alam
      @imraan_alam 2 місяці тому

      ​@@LearnWebCode wp recently added patterns and global styles also we can do all the styling using theme.json and can also restrict what editor features will be visible to normal users

  • @lapidations
    @lapidations Рік тому

    I'm shadowbanned on youtube, but in the rare event you see my coment, his course on Udemy (link in description) is great.

  • @alaayassen5940
    @alaayassen5940 Рік тому

    i need a help guys i dont laugh or lie i am serious ?

  • @Photo-Ninja
    @Photo-Ninja Рік тому

    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! 🤌

  • @emailjough
    @emailjough Рік тому

    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.