Тёмный
Brian Coords - WP Dev
Brian Coords - WP Dev
Brian Coords - WP Dev
Подписаться
I'm a WordPress developer educator and co-host of the viewSource podcast.
WordPress Studio Review
12:00
4 месяца назад
Building a Block Styles Manager - Episode 3
7:58
7 месяцев назад
How to Build Dynamic (PHP) Blocks in WordPress
30:57
8 месяцев назад
ACF Blocks Post Carousel Tutorial
23:24
Год назад
Комментарии
@NikkiWinwood
@NikkiWinwood 2 дня назад
Thank you for this content. I will be studying all of your videos!
@PaweBystrzan
@PaweBystrzan 5 дней назад
After a year I think it would be nice to have option to make a pattern - just like you made a custom block, but pattern, save custom css inside pattern and one click option to convert pattern to block. Sometimes in the past I used CBB plugin (Content Blocks Builder) - it has some nice workflow to create blocks from blocks, patterns etc, but unfortunately not in core way. Hope WP core team will move in this area. As always - great video tutorial, Best, Paul
@TheBeeOBee
@TheBeeOBee 8 дней назад
Good demo. Learned a lot. But is promoting ai usage ethical? Washington Post just reported that a 100 word ai email uses a bottle of water to produce. Elon Musk operated illegal gas generators to power his ai plant. Microsoft is reopening the 3 mile island nuclear plant to power ai. People are just playing around with this burning up the planet. A bottle of water for a 100 word email!
@BrianCoords
@BrianCoords 5 дней назад
Definitely a consideration. I do think chip performance, specialized AIs, and renewable energy will continually improve but I agree we're in the smoggy industrial revolution phase of AI.
@PaweBystrzan
@PaweBystrzan 10 дней назад
Few things I would do different: 01. Sticky header - if you use css i recommend to calc() as the frontend admin bar. This variable below handles different heights for mobile and desktop: header.wp-block-template-part { position: sticky; top: calc(0px + var(--wp-admin--admin-bar--height, 0px)); z-index: 9; } 02. Header alignement: menu is not centered, but it's easy to fix.button and logo should be in group with same fixed width. 03. If first heading is H1 - it's better to make soft enter to prevent double H1 on page ( [shift] + [enter] ). For making inline color I would register inline color, but without adding PHP / JS with just CSS I would use bold or cursive inline style and style it by CSS in Site Editor Custom CSS section. As always - it was pleasure to watch. Best, Paul
@BrianCoords
@BrianCoords 5 дней назад
Yes! These are all great notes! 100%
@realVvD
@realVvD 12 дней назад
This is actually a very nice and followable tutorial on gutenberg block development. Thx!
@Xenio2007
@Xenio2007 12 дней назад
I'll love a tutorial how to develop a Synced Pattern Overrides in php to distribuite with a theme. Synced Pattern Overrides looks very powerful.
@BrianCoords
@BrianCoords 12 дней назад
At this point it’s not really possible to have synced patterns in a theme- they only live in the database. But hopefully it’s on the roadmap.
@AnnaMariaEriksson
@AnnaMariaEriksson 14 дней назад
I really hope native CPT's will come to core. I was hoping it would happen with WordPress 6.7, but I guess we're gonna have to wait longer for that to happen... Great video!
@BrianCoords
@BrianCoords 14 дней назад
Yep - CPTs will require some code or a plugin for the foreseeable future.
@chickenorshrimp533
@chickenorshrimp533 15 дней назад
I appreciate that you're going from start to finish with a practical example - explaining each step & the reasoning behind it. Please keep up the great work!
@chadreilly
@chadreilly 17 дней назад
Can you build a tabs block/pattern with core?
@BrianCoords
@BrianCoords 17 дней назад
Any thing that requires interactive JavaScript (like tabs) won't be in core - meaning you'd need to find a plugin or build a custom block.
@chadreilly
@chadreilly 17 дней назад
This is very helpful. In the speed builds, with all the switching back and forth between players, you can't see as well what's being done. I would have liked to see how you built that header, even if it went overtime. Maybe do a, "here's my build official" vs "here's me doing some extra interesting things I didn't have time for."
@BrianCoords
@BrianCoords 17 дней назад
I agree- I can never follow what anyone is doing, I just like hearing people explain and talk. I'm glad this was helpful and I definitely have it on my agenda to do some longer/fuller builds and show some more complicated layouts.
@CourtneyR_dev
@CourtneyR_dev 17 дней назад
00:04 Creating a custom block in Gutenberg for WordPress with OpenAI integration 01:55 Creating a custom AI block in WordPress using OpenAI 05:57 Building a custom AI block in WordPress 07:55 Creating a generate tweet function and importing button component 12:01 Create a custom REST API endpoint for security 14:04 Implementing permissions for API endpoint access 17:51 Generate a tweet using OpenAI API for social media management 19:33 Ensure response is clean and contains necessary information 23:03 Using WordPress function add_query_arg to pass parameters and generate tweet 25:02 Custom AI blocks in WordPress can return more data via API endpoints for testing and customization. 28:44 Integrate AI into custom block using PHP for secure server-level interactions 30:22 Integrate AI capabilities into WordPress with OpenAI Crafted by Merlin AI.
@BrianCoords
@BrianCoords 17 дней назад
Well shoot I had chapters in Descript and totally forgot to paste them in. Thanks!
@coding4tacos
@coding4tacos 17 дней назад
Super cool use case! This gave me several ideas for little projects I'd love to build
@cholo2605
@cholo2605 18 дней назад
Thanks a lot for all your contributions 🙏
@davouid69
@davouid69 18 дней назад
Thanks! Clear, nice and helpfull!
@Xenio2007
@Xenio2007 19 дней назад
Wow, amazing content, this is how you move Wordpress forward. Not yelling! Many people who use Visual Builder do not understand that it is essential to have version control of files/code. I often use Bricks Builder and love it, but I also happen to develop sites where is essential to have control over what happens in the theme/plugin.
@elliottrichmondwp
@elliottrichmondwp 19 дней назад
Very cool and exciting, thanks for the demo and backstory - much appreciated.
@BrianCoords
@BrianCoords 19 дней назад
Thanks for joining!
@TiagoSLoureiro
@TiagoSLoureiro 20 дней назад
I really like this. Definitely the right direction for the block editor. I have always liked gutenberg for editing content; I do believe it is a way better experience than just custom fields; I just don't want to see wordpress trying to become a wix competitor. Also, page builders need to start taking gutenberg seriously. Etch has the right idea for sure.
@BrianCoords
@BrianCoords 18 дней назад
Yep I feel the same way
@coderpavan
@coderpavan 22 дня назад
How to get custom post type in a acf block template
@BrianCoords
@BrianCoords 18 дней назад
Can you explain what you're trying to accomplish?
@coderpavan
@coderpavan 15 дней назад
@@BrianCoords Actually I need to retrieve custom post type and it's post pages acf custom fields value to a acf block template and it was unable to retrieve at that time because of I didn't pass get_the_id(); function in a acf get_field('field key name', get_the_id); in a query loop. But now it's resolved.
@jamiewp
@jamiewp 23 дня назад
Great work Brian 💪 If you do another one let me know and I'll ask lots of irritating questions in the live chat as you build.
@BrianCoords
@BrianCoords 23 дня назад
I'm planning on doing this again while in Portland. On a stage.
@ClarkTelecom
@ClarkTelecom 24 дня назад
Many thanks, very well explained!
@BrianCoords
@BrianCoords 23 дня назад
You are welcome!
@johndaniel21343
@johndaniel21343 24 дня назад
Can't wait to see core vanilla Wordpress custom field user friendly
@BrianCoords
@BrianCoords 23 дня назад
Then definitely stay tuned!
@Kyle-MustangMktg
@Kyle-MustangMktg 26 дней назад
The explanations are great, and if you were just streaming it would be fine. But if you want to practice for the speed build, I think you should just build. If you want to simulate Jamie asking questions maybe you could have an additional timer that goes off every 5-10 minutes and do an explanation, or field questions from chat. If you were just building, it is possible you would have more questions from those watching.
@BrianCoords
@BrianCoords 26 дней назад
Oh yeah that's a good idea! I'm not really practicing for how 'fast' I can go, but more 'can I think through this while I have the pressure of a live audience'.
@Kyle-MustangMktg
@Kyle-MustangMktg 26 дней назад
@@BrianCoords I think it is less about speed, and more about how many different sections you get a chance to tackle and learn how to best deal with them. But hey it is your build and your channel, so do what works for you! I'm just happy to watch a professional at work.
@veppa
@veppa 26 дней назад
4 second for External API Request is too much. Wordpress admin also has lot's of external requests (wp_http). To optimize wordpress admin for speed you may need to block some wp_http external requests.
@BrianCoords
@BrianCoords 26 дней назад
Yeah it's definitely not ideal, especially if it's happening when server response speed is critical, like adding items to a shopping cart.
@danparrajr
@danparrajr 28 дней назад
This looks amazing Brian! Is it possible to save fields to custom tables through the editor?
@BrianCoords
@BrianCoords 27 дней назад
You mean custom tables in the database, instead of using postmeta? If you use postmeta, there's a lot of work done for you already. If you want to use custom tables, you'll just need to write your own REST API endpoints to handle communicating between the block editor and your database tables.
@mohdom6
@mohdom6 Месяц назад
Can you make 101 theme building series for beginners? could be a good introduction to php
@BrianCoords
@BrianCoords Месяц назад
Making a more in-depth series is on my list of things to do when I have more time, which never seems to happen
@jmactravel
@jmactravel Месяц назад
Thank you. After doing a bootcamp, and applying to 1000's of jobs this past year...I'm going to pivot and start my own website dev company, making wordpress sites for clients and I'm trying to figure out where to set up my local development. Your video was super helpful. Do you think I should use wordpress/env? Would I also need Local?
@BrianCoords
@BrianCoords Месяц назад
I think Local is the best place to start for sure. It's very easy to install and get running, very easy to import/export sites. I would start there.
@derek-hanson
@derek-hanson Месяц назад
Nice! I love how Brian critiques the site as he’s building it. Legend!
@BrianCoords
@BrianCoords Месяц назад
Haha this is why I shouldn't livestream. I do better when I'm editing myself.
@derek-hanson
@derek-hanson Месяц назад
@@BrianCoords the stream of conscious approach is way better! I love to see how people are thinking when they work. Plus, I'm guilty of it as well 😜
@uweseemann8571
@uweseemann8571 Месяц назад
I learned a lot. Thanks!
@BrianCoords
@BrianCoords Месяц назад
Thanks for watching!
@michieltieleman9462
@michieltieleman9462 Месяц назад
May I ask how you made it so that the custom post type template has editable blocks in them? Currently for a template I usually have the header block at the top, post content block in the middle with some different block spacing and/or width setting, and the footer block. When I make a new custom post item, I manually copy over the blocks I need from another post, or use patterns or something like that. What I'm looking to get done is to have each new post of a certain post type be "preloaded" with a couple of "synched patterns" (so I don't have to do this manually all the time). Kinda like you have in your book custom post type above. I can't find the video you mention around 1:00 minutes. How did you achieve this or do you have a link to that video?
@BrianCoords
@BrianCoords Месяц назад
There is a "template" parameter that can be used when you register a post type developer.wordpress.org/block-editor/reference-guides/block-api/block-templates/#custom-post-types You can also offer the "Choose a Pattern" popup experience: www.briancoords.com/how-to-show-the-choose-a-pattern-modal-by-default-on-new-pages/
@Whatreally123
@Whatreally123 Месяц назад
Hi Brian, Off topic question. I am building a simple site using 2024 theme and core blocks. I am trying to find information on how to add Google AdSense code to websites built on Block themes. All the tutorials and videos are for Classic themes where they update the header file or body file. Not sure that's how to do it on sites built on Block themes. Can you shed some light on how can one add AdSense code to block websites? Thanks.
@BrianCoords
@BrianCoords Месяц назад
If you're comfortable with code, then you'd use a hook like wp_head to add it. Otherwise, I'd recommend using the Google Site Kit plugin: wordpress.org/plugins/google-site-kit/
@murfemersed
@murfemersed Месяц назад
I just tried it on PC. Tried to import an all-in-one wp migration file with proper search/replace and it failed. going back to local. this did seem much lighter but it also seemed slower as well like it's not allocating enough resources.
@BrianCoords
@BrianCoords Месяц назад
Yeah it's still in it's early days and has some compatibility work to do. It's quick with lighter sites, slower otherwise.
@maurobono5324
@maurobono5324 Месяц назад
Brian great tutorial. What if I want to create multiple block styles in a single plugin? Which is the best approach for loading CSS? is it possible to load a single CSS file that contains all my block styles?
@BrianCoords
@BrianCoords Месяц назад
You definitely can. You can just load one CSS file like you would normally, since block styles just add a class to an element. Just make sure you enqueue it for the frontend AND for the block editor.
@marcjaner9937
@marcjaner9937 Месяц назад
Hey, one question. Isn't a render.php needed when this is used in a production wordpres site? Thanks!
@BrianCoords
@BrianCoords Месяц назад
There are two types of blocks - dynamic blocks that use a PHP file to render the final block, and static blocks, which save the final markup in the content and don't need any additional PHP files to show up. This examples uses a static block.
@montyksycki4092
@montyksycki4092 Месяц назад
Thank You for sharing!!! :)
@Whatreally123
@Whatreally123 Месяц назад
Hi Brian, I am trying to modify an existing core block. I downloaded the src files from github. Using ChatGPT, i made minor changes to the main functions in the php file. However, I am unable to build this. I created the same folder structure in VS Code as on github but "npm start" issues errors. I tried learning from the create-block method but not sure how to map the same files available on github to the structure created by create-block. Is there any video or blog which details how I can build a custom plugin based on the src files of the core blocks downloaded from github? All I need to learn is how to build the plugin package. I have made the required code changes in the main php file. Thanks.
@BrianCoords
@BrianCoords Месяц назад
If you're getting errors running `npm start` then there's probably an issues with how it was installed. I would recommend trying from the Create-Block package, getting that running, and then slowly copying over functionality until you get it working. I don't recommend using ChatGPT or AI code unless you're very comfortable with the fundamentals of how the code works, how the build process works, etc.
@Whatreally123
@Whatreally123 Месяц назад
@@BrianCoords Hi Brian, after a lot of time spent going through multiple articles and videos, I was finally able to tweak one of the core blocks to do what I want. Thanks for your videos. 👍🏽
@Lukasz-online
@Lukasz-online Месяц назад
Instead of using CSS to fix the pointer events, I can see core is using disabled component <Disabled> <ServerSideRender block="wpdev/example-dynamic-block" attributes={attributes}/> </Disabled>
@kjroelke7236
@kjroelke7236 Месяц назад
I don’t know if this is covered in a different video, but the way you registered your sidebar is totally different from how I would’ve gone about it! I would love to see you talk through your code choices and where to learn more about it! I’ve never even the `registerPlugin` function before 😅
@BrianCoords
@BrianCoords Месяц назад
So I have some demo code for how I do it, but I guess I haven't made a video about it yet! I'll add it to my list. github.com/bacoords/example-post-settings-field
@creyff437
@creyff437 Месяц назад
Hi, I'm really new to this. One quick question: can Local WP provide Live Demo like Studio WP? Or is there a workaround to make it so in Local WP? Many thanks in advance 🙏🏻
@BrianCoords
@BrianCoords Месяц назад
LocalWP has a few options - one is called "Live Links" which lets you share your local site across the internet. But your computer has to be turned on and the feature has to be running for people to see it, so it's only good for short-term demos. LocalWP also has great integration with WP Engine, so you can also push a local site to a WP Engine staging environment and share it that way.
@creyff437
@creyff437 Месяц назад
@@BrianCoords thank you for your answer, I will delve into staging with WP Engine then... Any hints or clues I should be ready for?
@SteveBryant-x6d
@SteveBryant-x6d Месяц назад
Great info! I got lost at one point, trying to understand, you are suggesting a different json file for each section as a separate file inside the them folders I guess, and frowned upon having a separate css file(s) like that I think? and would love a basic from scratch, blank theme, add file here, add file there kind of tutorial. Also how to trigger the new section theming? Like choose a dropdown in the bock editor? or your just showing changing the base blocks, not adding new block patterns? Looking forward to building a theme with multiple block patterns / synced and non-synced and several style variations now. Just not sure some of the exact 'where to click this or that' to choose which block is getting the style or sync.
@BrianCoords
@BrianCoords Месяц назад
As these tools get more powerful, I'm hoping to do a full beginning-to-end tutorial. As for separate JSON files, these are all processed server-side and shouldn't have any effect on the end performance of your site. These "section styles" are really just styles for blocks, so they show up when you select an individual block. In this demo, I'm making all my styles for the "Group" Block but that's not a requirement. Putting Block Patterns into themes is still not a great experience, but I'm hoping we'll see some progress around that in the future.
@sb_1389
@sb_1389 2 месяца назад
This is super helpful; I'm trying to go through your walkthrough and implement for my use case. I really want to be able to add the custom field into the sidebar like you have, as they really get buried in the regular view and it's just not intuitive. My issue is that I want to use a text area, instead of a textbox. I've been trying to use the dev resources but it's not really working out (I'm not technically a developer). Any pointers you can offer?
@BrianCoords
@BrianCoords 2 месяца назад
You can check out the WordPress component storybook for examples of all the different types of input fields they offer. Here's one called TextareaControl which should work for you: wordpress.github.io/gutenberg/?path=/docs/components-textareacontrol--docs
@thewebstylist
@thewebstylist 2 месяца назад
Lawd there’s 100 things WP has needed to level up for yearssss SERIOUSLY why are improvements so few and far between
@BrianCoords
@BrianCoords 2 месяца назад
Every release has a ton of improvements, especially outside of GB in things like performance and security. But agree - I think we all would like to see some faster development/iteration.
@Lukasz-online
@Lukasz-online 2 месяца назад
Is their any good tutorial on how a custom block can call external API to retrieve data and show on the front end?
@BrianCoords
@BrianCoords 2 месяца назад
On the frontend? You can use a dynamic block (like described in this video) and then use core functions wp_remote_post() to hit your API and process the data. You'll also want to use some of core's cache tools so that you're not doing it one every single page load.
@Lukasz-online
@Lukasz-online 2 месяца назад
@@BrianCoords Thanks Brian, that's what I decided to do, all in the render.php so far. For the caching the http API is recommending to use transients. Keep up the great content!
@Lukasz-online
@Lukasz-online 2 месяца назад
That's cool - being able to add the template blocks in the cpt.
@BrianCoords
@BrianCoords 2 месяца назад
Yeah I'm hopeful it's a feature that will get more attention one day.
@spitsparrow
@spitsparrow 2 месяца назад
would you happen to know how to change the colour of the status bar on mobile devices. im using 2024 theme. Can't find anywhere where I can change the colour. Where the mobile displays battery, time, wifi signal etc. At the moment I have a a block called 'simple header with dark backgroun' - when I fill the background with blue the status bar is also coloured blue When I use other colours including black the status bar goes white.
@BrianCoords
@BrianCoords 2 месяца назад
Are you talking about changing the color on the mobile device outside of WordPress?
@spitsparrow
@spitsparrow 2 месяца назад
@@BrianCoords yes it appears that some pre built headers (patterns?)can do this but only with certain colours. Is it something to do with light or dark.? Just wonder where you can have more control over that part . I wanted the background image or cover to extend that far but not sure how. Does it only work with certain colour
@Kyle-MustangMktg
@Kyle-MustangMktg 2 месяца назад
At 20:53 you mention a plugin could opt-in to button styles, do you know if it is possible to do this from the theme? I added the Button class to the submit button in a contact form plugin, but WP didn't know to add the inline styles for buttons. Is there some way to tell WP to include them? (I added an empty Button block under my form, which is a hack, but did work to include the needed styles)
@BrianCoords
@BrianCoords 2 месяца назад
Depends on the theme developer including the styles, but theme.json has an option to add button styles and adds them to the class .wp-element-button, which should be loaded globally and is unrelated to the button block.
@Kyle-MustangMktg
@Kyle-MustangMktg 2 месяца назад
@@BrianCoords Thanks! I am using a child theme of Twenty Twenty Four. I'll give that a try.
@masterng56
@masterng56 2 месяца назад
Thanks, Brian, I need a code
@SkyTonnessen
@SkyTonnessen 2 месяца назад
Thanks for the great tutorial! Though, if I wanted to modify the attributes of 2 different blocks (with different attributes) would I have to create 2 separate plugins? or would there be a way to bundle both into the build of a single plugin?
@BrianCoords
@BrianCoords 2 месяца назад
You can definitely do it all in one plugin. It's all just JavaScript. I like keeping things separated in small files and doing things separately but that's just a personal preference.
@EricThomson
@EricThomson 2 месяца назад
This looks like it might help me, I am trying to add a custom field (ACF) as an option for ORDER BY. My field is a date field named 'when' and I want to add option: 'when new to old' instead of using the publish date. Can you offer any incite into what is different about that case from the 'read more' button example?
@BrianCoords
@BrianCoords 2 месяца назад
I'm not sure I'm following the question here, can you provide a little more context?
@EricThomson
@EricThomson 2 месяца назад
@@BrianCoordssorry I guess my case is different because I am trying to add an option to the existing control: ORDER BY.
@imraan_alam
@imraan_alam 2 месяца назад
Kevin gets commission from bricks builder
@BrianCoords
@BrianCoords 2 месяца назад
I don't think they do commissions/affiliates yet. He also sells products that work primarily with Bricks builder, so it makes sense that it's what he uses/recommends.