- 34
- 84 444
Brian Coords - WP Dev
United States
เข้าร่วมเมื่อ 26 ก.พ. 2011
I'm a WordPress developer educator and co-host of the viewSource podcast.
Full Site Editing and Ollie with Mike McAlister
Mike tells me about his extensive journey in the WordPress ecosystem, from a designer to a product builder with OllieWP. We cover the importance of design in WordPress themes, the shift towards full site editing, the value of patterns and pattern libraries, responsive design controls, and more.
Chapters
00:00 Introduction to Mike McAlister and His Journey in WordPress
02:51 The Evolution of WordPress Themes and Design Philosophy
06:09 Full Site Editing and Its Impact on Theme Development
09:00 Understanding the Diverse User Base of WordPress
11:54 The Importance of Patterns in WordPress and Future Directions
15:13 Designing with Figma: The Process Behind Creating Patterns
18:03 The Future of Pattern Libraries and User Contributions
20:56 WordPress 2024: Priorities and Expectations
24:14 Responsive Design Controls and User Needs
27:04 Version Control and Workflow in Pattern Development
29:51 Upcoming Features and Enhancements for Oli WP
37:58 New Chapter
Chapters
00:00 Introduction to Mike McAlister and His Journey in WordPress
02:51 The Evolution of WordPress Themes and Design Philosophy
06:09 Full Site Editing and Its Impact on Theme Development
09:00 Understanding the Diverse User Base of WordPress
11:54 The Importance of Patterns in WordPress and Future Directions
15:13 Designing with Figma: The Process Behind Creating Patterns
18:03 The Future of Pattern Libraries and User Contributions
20:56 WordPress 2024: Priorities and Expectations
24:14 Responsive Design Controls and User Needs
27:04 Version Control and Workflow in Pattern Development
29:51 Upcoming Features and Enhancements for Oli WP
37:58 New Chapter
มุมมอง: 1 060
วีดีโอ
Add custom CSS and JavaScript to any WordPress block in Gutenberg
มุมมอง 1.4Kหลายเดือนก่อน
We're adding custom CSS and JavaScript files to WordPress core blocks. Modify any block.json with simple PHP to load your own custom CSS and JavaScript in Gutenberg. 🚨 Free Series: www.briancoords.com/7tools 👉 Full Code: github.com/bacoords/example-block-assets 00:00:00 Introduction 00:01:28 Registering custom JavaScript for a block 00:02:50 How to filter Block.json 00:06:44 Registering custom ...
Local WordPress with Herd, DBngin, and WP-CLI
มุมมอง 1.4Kหลายเดือนก่อน
Local WordPress development made easy with Laravel Herd and DBngin. We'll use wp-cli to download, install, and manage a local WordPress environment in just a few minutes. 🚨 Free Series: www.briancoords.com/7tools 👉 herd.laravel.com/ 👉 dbngin.com/ 👉 developer.wordpress.org/cli/commands/
Build a Custom AI Block in WordPress with OpenAI Integration
มุมมอง 6782 หลายเดือนก่อน
Let's create a custom WordPress Gutenberg block that connects to OpenAI’s API. Our block will feed the post content to OpenAI in order to generate social media posts. Along the way, we'll focus on challenges like integrating API calls, getting post data inside the editor, and securing API keys. 💻 Code: github.com/bacoords/example-ai-block 🚨 Free Series: www.briancoords.com/7-tools-for-modern-wo...
WordPress 6.6 is changing the game for Custom Fields
มุมมอง 10K5 หลายเดือนก่อน
WordPress is bringing Custom Fields to blocks. The Block Bindings API is going to change the way we code for postmeta, and WordPress 6.6 is our first glimpse. 👉 All the code: github.com/bacoords/example-block-variation/tree/6.6-bindings 🚨 Free Video Series: 7 Tools for Modern WordPress Development 🚨 👉 briancoords.com/7tools 00:00:00 Intro to Block Bindings 00:00:53 Custom Fields and CPTs in 6.6...
Registering Block Settings in PHP? Build in Public Ep 6
มุมมอง 1.2K5 หลายเดือนก่อน
Thoughts on adding custom fields to Gutenberg blocks- using PHP, no JavaScript or React. Should WordPress let us register custom fields on blocks? 👉 10ups Gutenberg Best Practices - gutenberg.10up.com/ 👉 CMB2 - wordpress.org/plugins/cmb2/ 👉 Block Settings Repo - github.com/bacoords/block-settings 🚨 Free Video Series: 7 Tools for Modern WordPress Development 🚨 👉 briancoords.com/7tools 00:00:00 I...
WordPress Playground Blueprints and 6.6 Beta
มุมมอง 6065 หลายเดือนก่อน
Let's dig into WordPress Playground and see how you can use it to do anything with WordPress, including beta test the next major release. 🚨 Free Video Series: 7 Tools for Modern WordPress Development 🚨 👉 briancoords.com/7tools 👉 Playground: playground.wordpress.net/ 👉 Playground Docs: wordpress.github.io/wordpress-playground/ 👉 Blueprints Gallery: github.com/WordPress/blueprints/blob/trunk/GALL...
Query Monitor - 7 Important Tools for Modern WordPress Development #1
มุมมอง 1.8K5 หลายเดือนก่อน
Get the full series: www.briancoords.com/7tools 00:00:00 Introduction 00:00:57 What is Query Monitor 00:02:48 Debugging PHP Errors 00:03:18 Dumping Variables 00:04:58 Timing and HTTP 00:06:19 Next Steps
Bricks vs Block Themes: My Followup to Bridge Builders
มุมมอง 3.1K6 หลายเดือนก่อน
Followup to the Bridge Builders livestream, going over the custom block theme and my (minimal) set up, and thoughts on the page builder TH-camr community's obsession with "dynamic data". 🚨 Free Video Series: 7 Tools for Modern WordPress Development 🚨 👉 briancoords.com/7tools 👉 Bridge Builders Episode: th-cam.com/video/al23k0Kv3H4/w-d-xo.html 👉 Example Site: fiji-of-herrings.wp.build/ 👉 Block St...
WordPress Studio Review
มุมมอง 3.7K7 หลายเดือนก่อน
WordPress.com released their new local development tool- and there's been a lot of misconceptions lets clear those up, talk about some of the underlying technology, and compare it to the elephant in the room: LocalWP. 🚨 Free Video Series: 7 Tools for Modern WordPress Development 🚨 👉 briancoords.com/7tools 👉 Subscribe for WordPress tips: www.briancoords.com 👉 Studio: developer.wordpress.com/stud...
Using Block Variations with the Block Bindings API
มุมมอง 2.2K8 หลายเดือนก่อน
Using Block Variations with the Block Bindings API
How the block editor handles CSS (Building in Public - Block Styles Manager Ep 5)
มุมมอง 5199 หลายเดือนก่อน
How the block editor handles CSS (Building in Public - Block Styles Manager Ep 5)
Using Core Data and Sharing Context across WordPress Blocks
มุมมอง 1.6K9 หลายเดือนก่อน
Using Core Data and Sharing Context across WordPress Blocks
Thoughts on Editor UI (Block Styles Manager - Build in Public Part 4)
มุมมอง 3829 หลายเดือนก่อน
Thoughts on Editor UI (Block Styles Manager - Build in Public Part 4)
Building a Block Styles Manager - Episode 3
มุมมอง 4619 หลายเดือนก่อน
Building a Block Styles Manager - Episode 3
WP REST API and Postman - Using Application Passwords in WordPress
มุมมอง 2.1K9 หลายเดือนก่อน
WP REST API and Postman - Using Application Passwords in WordPress
Block Styles Manager for WordPress - Ep 2 (Build in Public)
มุมมอง 50610 หลายเดือนก่อน
Block Styles Manager for WordPress - Ep 2 (Build in Public)
Building a Block Styles Manager - Ep 1 (Build in Public)
มุมมอง 1.1K10 หลายเดือนก่อน
Building a Block Styles Manager - Ep 1 (Build in Public)
How to Build Dynamic (PHP) Blocks in WordPress
มุมมอง 11K10 หลายเดือนก่อน
How to Build Dynamic (PHP) Blocks in WordPress
Building an example layout in Gutenberg (response video)
มุมมอง 4.3K10 หลายเดือนก่อน
Building an example layout in Gutenberg (response video)
Adding Custom Fields (attributes) to Core Gutenberg Blocks | WordPress
มุมมอง 6Kปีที่แล้ว
Adding Custom Fields (attributes) to Core Gutenberg Blocks | WordPress
Easy custom blocks using InnerBlocks in Gutenberg
มุมมอง 3.4Kปีที่แล้ว
Easy custom blocks using InnerBlocks in Gutenberg
Redesign Lists in WordPress with Register Block Style
มุมมอง 1.4Kปีที่แล้ว
Redesign Lists in WordPress with Register Block Style
Custom Responsive Settings in Gutenberg Blocks
มุมมอง 8Kปีที่แล้ว
Custom Responsive Settings in Gutenberg Blocks
Managing Images in your Custom Gutenberg Block
มุมมอง 1.9Kปีที่แล้ว
Managing Images in your Custom Gutenberg Block
This past week I was comparing PODS and ACF (SCF) for creating our own directory (instead of a directory plugin). I had decided to go with PODS until I came across this. I'm wondering how Create Content Model will compare?
I'm pretty sure Automattic is not going to actively develop CCM any further. PODS is a fantastic choice
Blessings to you! These are excellent tools. 💖
Great conversation about WordPress and making sites. Now I’m all excited to build more sites. Thanks guys! Looking forward to the next one.
Really enjoyed listening to this!
Great conversation. Appreciate Mike's approach a lot.
What a refreshing conversation about the future of WordPress, thanks
I went in the wrong direction at some point deciding to make mega-themes with tons of functionality. Now I'm struggling with the updates and support since everything breaks all the time :)
Great first video on where WP is heading.... Huge fan of Ollie! Moved all my sites from Astra Pro to Ollie, And signed up for Ollie Pro too. Ollie just works. And it looks great. Looking forward to the next collection.
Thanks for watching, Peter! You're a true Ollie PRO user!
I'm a fan of FSE. Looking forward to have commercial theme.
Great video! I am a huge fan of FSE and Ollie!
Me too! Thanks for watching
OMG, Query Monitor probably just saved me hours of debugging, tail chasing and a chunk of my sanity. Thanks for explaining and promoting this great plugin!
Yes! That's great to hear.
how do you still handle the database required for testing, and database for content with both feature1 and feature 2 ? Name the tools and the know-how 😁
I'm a fan of using WP-CLI to quickly pull databases down from production, very easy to use WP-CLI to import, jump between multiple databases, etc
Awesome! Thanks! )
how do I add my css to a block theme for the entire site?
The same way you would with a classic theme - wp_enqueue_style will load the css file across the entire site. I still use this for some global stuff, like the header/footer, where I know it'll be used across the entire site.
Oh this is handy! Thanks Brian! Also - Been liking the new focus zooms in your videos - what are you using for screen recording now?
That's from screen.studio/. - it has a lot of cool features (like the zoom) but I'm not really enjoying the editing experience so you'll probably see more experimentation happening.
Nice! I've been thinking about this alot recently, you mind if I use your example in my next YT video?
Go ahead!
Awesome
Great video, and looking great 👍
Thanks I've been hitting the gym, eliminating carbs... oh wait you mean the camera/lighting updates.
@@BrianCoords what lights?
Looking crisp 🔥🔥🔥🔥
Trying to get that lighting/camera just a little better each time. Tired of people asking me why I'm not as good as Mark J Szymanski.
This is a great tip! Thanks, Brian!
Wow, I didn't know about the logging feature. I've only been using it for years to check for errors and slow queries
Same here- I was using it for years before I actually learned about logging. Now I use it all the time.
love the new camera, looks better quality
Thanks for noticing. I have some lighting tweaks in the works and will hopefully test those on the next video.
Great video, what benifits we get if we skip tools like Local or Xamp etc
Copying my reply above: Less bloat, more performant, more actively developed, easier to switch between WP and non-WP projects, and I guess a chance to level up your developer skills.
Thans for sharing!. I'm using Laragon which is superfast, all-in-one tool and you have a https site in WordPress up and running in a few clicks.
What are the benefits of this over Flywheel Local or the similar tool from WordPress?
Less bloat, more performant, more actively developed, easier to switch between WP and non-WP projects, and I guess a chance to level up your developer skills.
Get off the stage, Brian!
Hey it's my biggest fan!
Thanks Brian. I'm on Windows and I'm stuck on 3:53 because I'm not sure where 'wp' is. :( Crap. I have to install wp-cli. Lol. Thank you for mentioning that. >:( UPDATE: Was able to set up wp-cli. Manually set up a path. However, DBngin did not create a path to mysql as 'wp db create' does not recognize mysql. I tried to manually find mysql.exe and set a path to it. wp-cli still cannot find it. I GIVE UP. LOL.
Yeah one issue I had is that I have a lot of these tools already running and I don't fully remember how I set some of them up.... When I run wp --info I see that it's calling the MySQL binary that I guess I installed at some point with Homebrew. Interesting.
Have you tried DDEV? You don't get that nice GUI but I think you can get up and running faster and you end up with a really flexible dev environment
No but I've heard a lot of good things about it! Honestly each project ends up needing it's own environment depending on the tools, where it's hosted, etc.
No Linux support for this apps :(
You can use, various version of Valet, is similar but no UI, i recommend Valet++
😬
Yes, I was excited than found no Linux support.
@@khandakershahi for now DDEV is working fine on linux, has phpmyadmin, wp-cli, local ssl and domain, ...
Brian, what makes Herd better than a tool like LocalWP?
I like that it's just leaner and faster. It's more actively developed. It's also great if you're doing more than just WordPress development, you don't have to switch environments. But there'll be a few WP hosting-specific features in LocalWP that you might miss.
This is awesome! Thank you for sharing Brian - subscribed!
Hey Brian - just wondering if it's easy to export a site using something like WPVivid from this local environment?
Herd is great! Using the Windows version since it was released on a daily basis and as a replacement for Local by Flywheel. Adding DBngin and TablePlus makes it an awesome development toolkit!
They have windows support. I use it everyday.
Thanks for pointing that out!
Thanks for sharing! It’s great to see that Herd could be used for both Laravel and WordPress development.
PHP FTW
Interesting, I haven’t used Herd, but I do use Valet, which, as you probably know, is more command-line driven. The only difference is that you have an app with a UI with Herd, I guess. It would be interesting to see if Valet is actually being used under the hood. I also use WP-CLI and a generic script to fire all commands with prompts for database names, usernames, emails, and passwords, etc. Nice video and insight-always interesting to see other devs’ workflows. 👍
Thank you for the instructions. A very good method for me as a beginner to learn how to use the command line.
Oops. Not on windows. Okay. Thanks for the video though. You're doing great
They do have a Windows version. Just click the "Looking for Windows?" button
@@elvisblancogonzalez Ah! Yes! That's true. Thanks!
Thanks for correcting this!
Thank you for this content. I will be studying all of your videos!
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
Yep I agree - easily bundling extra CSS/styles with patterns would be huge.
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!
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.
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
Yes! These are all great notes! 100%
This is actually a very nice and followable tutorial on gutenberg block development. Thx!
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.
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.
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!
Yep - CPTs will require some code or a plugin for the foreseeable future.
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!
Can you build a tabs block/pattern with core?
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.
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."
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.
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.
Well shoot I had chapters in Descript and totally forgot to paste them in. Thanks!