Brian Coords - WordPress Dev
Brian Coords - WordPress Dev
  • 26
  • 54 825
WordPress 6.6 is changing the game for Custom Fields
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
00:02:14 Post Title Block and Synced Data
00:03:09 Template Preview Mode
00:05:56 Code for Custom Fields
00:08:40 Showing Post Meta in the Block Editor
00:09:31 Next Steps
Переглядів: 5 612

Відео

Registering Block Settings in PHP? Build in Public Ep 6
Переглядів 852День тому
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
Переглядів 51921 день тому
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
Переглядів 95628 днів тому
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
Переглядів 2,4 тис.Місяць тому
Followup to the Bridge Builders livestream, going over the custom block theme and my (minimal) set up, and thoughts on the page builder UA-camr community's obsession with "dynamic data". 🚨 Free Video Series: 7 Tools for Modern WordPress Development 🚨 👉 briancoords.com/7tools 👉 Bridge Builders Episode: ua-cam.com/video/al23k0Kv3H4/v-deo.html 👉 Example Site: fiji-of-herrings.wp.build/ 👉 Block Sta...
WordPress Studio Review
Переглядів 2,6 тис.2 місяці тому
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
Переглядів 1,4 тис.3 місяці тому
Let's dig into the new Block Bindings API in WordPress 6.5 - with a focus on how to offer a "no-code" experience for your users with Block Variations. 👉 Learn More: www.briancoords.com/newsletter 👉 GitHub Repository: github.com/bacoords/example-block-variation
How the block editor handles CSS (Building in Public - Block Styles Manager Ep 5)
Переглядів 4684 місяці тому
Registering block styles, inline block styles, tree-shaking, the "Styles Engine" - how does the block editor actually load CSS and is this tool going to be good for performance? Plus a quick update on the Block Styles Manager user interface. 👉 Newsletter: www.briancoords.com/newsletter/
Using Core Data and Sharing Context across WordPress Blocks
Переглядів 1,2 тис.4 місяці тому
Extending WordPress blocks to talk to each other means using the WordPress Core Data packages, and hidden block features like "context". With tools like useSelect and useDispatch, we'll add a button to a core block that inserts new blocks into it's parent block. 👉 Link to repo: github.com/bacoords/wcphx-2024/tree/add-context-example Chapters 00:00:00 Intro 00:01:01 Our Block's UI Needs 00:03:07...
Thoughts on Editor UI (Block Styles Manager - Build in Public Part 4)
Переглядів 3464 місяці тому
In this update to the Block Styles Manager, we focus on some of the weird UI challenges that the block editor provides, why custom CSS isn't already an option, and what is a block editor "plugin". Chapters 00:00:00 Intro/Recap 00:00:40 Site Editor UI? 00:02:20 Moving things around 00:03:19 Where do Plugins go 00:04:26 Our UI Goals 00:05:15 Next Steps
Building a Block Styles Manager - Episode 3
Переглядів 4285 місяців тому
Custom data stores in WordPress / the block editor. Hard stuff (for me at least). In this status update on the Block Styles Manager, I talk about custom REST API endpoints, handling data, and saving CSS directly to your filesystem. 👉 Newsletter: www.briancoords.com/newsletter/ 👉 WordPress Data: developer.wordpress.org/block-editor/reference-guides/packages/packages-data/ Chapters 00:00:00 Intro...
WP REST API and Postman - Using Application Passwords in WordPress
Переглядів 1,1 тис.5 місяців тому
WP REST API and Postman - Using Application Passwords in WordPress
Block Styles Manager for WordPress - Ep 2 (Build in Public)
Переглядів 4725 місяців тому
Block Styles Manager for WordPress - Ep 2 (Build in Public)
Building a Block Styles Manager - Ep 1 (Build in Public)
Переглядів 9985 місяців тому
Building a Block Styles Manager - Ep 1 (Build in Public)
How to Build Dynamic (PHP) Blocks in WordPress
Переглядів 7 тис.5 місяців тому
How to Build Dynamic (PHP) Blocks in WordPress
Building an example layout in Gutenberg (response video)
Переглядів 3,7 тис.5 місяців тому
Building an example layout in Gutenberg (response video)
Adding Custom Fields (attributes) to Core Gutenberg Blocks | WordPress
Переглядів 4,4 тис.7 місяців тому
Adding Custom Fields (attributes) to Core Gutenberg Blocks | WordPress
Easy custom blocks using InnerBlocks in Gutenberg
Переглядів 2,5 тис.10 місяців тому
Easy custom blocks using InnerBlocks in Gutenberg
Redesign Lists in WordPress with Register Block Style
Переглядів 1,1 тис.Рік тому
Redesign Lists in WordPress with Register Block Style
Custom Responsive Settings in Gutenberg Blocks
Переглядів 6 тис.Рік тому
Custom Responsive Settings in Gutenberg Blocks
ACF Blocks Post Carousel Tutorial
Переглядів 3,7 тис.Рік тому
ACF Blocks Post Carousel Tutorial
Managing Images in your Custom Gutenberg Block
Переглядів 1,5 тис.Рік тому
Managing Images in your Custom Gutenberg Block

КОМЕНТАРІ

  • @aishanstha
    @aishanstha 30 хвилин тому

    I m following your video your previous videos and have setup multiple blocks. Is there a way to use the same package to bundle the index.js from src folder if it have No block.json file ?

  • @aishanstha
    @aishanstha 2 години тому

    Does version 6.6 of the latest WordPress block theme (Full Site Editing) compile all block CSS into one file? Concerned about potential impacts on load times and optimization if multiple inline CSS styles are used. Please share your thoughts. Thanks

  • @roseseto1358
    @roseseto1358 4 дні тому

    Great tutorial! thank you for sharing! Quick question. The core/group has different variations: group, row, stack, grid , so under the 'blockTypes' option, is there a way to target only 'group'? If 'row' , 'stack' or 'grid' is selected it will not show the custom block settings fields. thank you!

    • @BrianCoords
      @BrianCoords 21 годину тому

      That's definitely something you could do if you were building out your custom settings panel by hand in JavaScript/React. You can sort of see how they're figuring out which variation is active in this code here, though it's a big messy: github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/group/variations.js

    • @roseseto1358
      @roseseto1358 20 годин тому

      @@BrianCoords thank you!

  • @jameshofton
    @jameshofton 6 днів тому

    Thanks for sharing, this is so useful and exactly what i am wrestling with at the moment. I really appreciate all the effort your going to

    • @BrianCoords
      @BrianCoords 21 годину тому

      Good to know that many of us are in the same place trying to figure out the same workflow issues.

  • @BrendanOConnellWP
    @BrendanOConnellWP 6 днів тому

    You're on a roll! Good one. 6.6 has so much!

    • @BrianCoords
      @BrianCoords 5 днів тому

      Yep. I'm hoping to record some thoughts on some of the new features for block styles this week as well.

  • @visualmodo
    @visualmodo 6 днів тому

    Very good content!!!

  • @alexlove2012
    @alexlove2012 7 днів тому

    I dont like the idea of altering the html output. Every component you filter with it will execute that extra logic on every page reqest. For me i think it's a performance issue and aint a good approach.

    • @BrianCoords
      @BrianCoords 7 днів тому

      For sure performance is a legitimate concern, but these filters exist and are already executing on page load regardless. Core uses them pretty regularly, and that's not even considering the number of blocks that are dynamic, meaning built entirely from PHP, not stored statically inside the content. This is pretty normal in WordPress and the alternative (altering them before they're saved in the database) is much more likely to cause problems.

  • @FlorentClaude
    @FlorentClaude 9 днів тому

    Great stuff thanks! Would you have the code that sets a synched pattern as the default book block?

    • @BrianCoords
      @BrianCoords 7 днів тому

      So the 'template' argument on register_post_type takes an array of blocks. You can pass it a pattern block or a synced pattern block. I'll just note that I did have some issues with a synced pattern block working correctly like this (especially when combining it with blocks that had bindings) gist.github.com/bacoords/4711fc205898e701eaba36137d71d476

  • @jzajzz
    @jzajzz 10 днів тому

    We need WordPress to basically add ACF to Core..and also a quick way to bulk edit them. in other words they need to focus on the CMS.

    • @BrianCoords
      @BrianCoords 9 днів тому

      ACF might be overkill for core - it's good plugin territory. But a UI for managing CPTs and basic Custom Fields from inside core would be amazing.

  • @knightofrohan
    @knightofrohan 10 днів тому

    At the risk of repeating something you already mentioned, just so that I can be sure I am understanding correctly, in order to make the custom meta fields and display them in the template, you use PHP, but then to show them in the block editor sidebar, you have to re-define the fields in JS? There is no shortcut to just display the previously defined fields in the block editor?

    • @BrianCoords
      @BrianCoords 10 днів тому

      Nope, but that's the way WordPress core has always been. You can register a "metabox" but you've always had to write the actual HTML of it yourself. This is actually a step forward because in classic WordPress you had to write the logic to save the postmeta fields as well.

  • @SiteStudio
    @SiteStudio 10 днів тому

    I don't like the fields in the sidebar. It's too small. Would like to see an experience that has more real estate.

    • @BrianCoords
      @BrianCoords 10 днів тому

      Yeah agreed, but I also really don't like the old drawer at the bottom of the block editor. There's some new UI coming that'll be a separate screen for this type of stuff, but I would love to be able to swap out the main canvas the way you can for "Code Editor" mode - like a way to jump into "Data Editor" mode that just shows custom fields, title, etc.

    • @SiteStudio
      @SiteStudio 10 днів тому

      @@BrianCoords Yeah, definitely not at the bottom. I'm a fan of the ACF Blocks approach with the In-Page field editing experience where you can toggle between the view and the meta fields.

    • @BrianCoords
      @BrianCoords 7 днів тому

      Yep - I'd love that to be the case for the entire content area, ability to toggle between 'content' view and 'data' view where I could edit meta info, title, category, etc with much more space.

  • @Andy-vh3ns
    @Andy-vh3ns 10 днів тому

    This is some great new features -- thanks for the explanation, excited about trying this out, as I am a huge fan of CPTs.

    • @BrianCoords
      @BrianCoords 10 днів тому

      Nice! Some powerful stuff on the way

    • @Andy-vh3ns
      @Andy-vh3ns 10 днів тому

      @@BrianCoords Sweet, thanks Brain -- looking forward to it. =]

  • @elpuas
    @elpuas 10 днів тому

    Great Video, Thanks for sharing!

  • @wpmarkuk
    @wpmarkuk 10 днів тому

    Great video - thanks for sharing. I can see lots of use cases for this.

    • @BrianCoords
      @BrianCoords 10 днів тому

      Agreed- and I bet ACF's going to support this as soon as possible, too. They've been working on Block Bindings as well.

  • @TheBeeOBee
    @TheBeeOBee 10 днів тому

    Great demo! Very thankful that you share these.

  • @lovor01
    @lovor01 10 днів тому

    One remark: perhaps rename this to something other than block settings? Block settings is already a term for a block configuration object, in essence constructed from block.json in javascript.

    • @BrianCoords
      @BrianCoords 10 днів тому

      Saw your issue and responded. Definitely an opportunity for better naming there.

  • @lovor01
    @lovor01 10 днів тому

    Great idea! Although I am totally familiar with React and block editor, I know this will help a lot of people who aren't. If you opened this as a public project (I will check) I can contribute. Cheers!

    • @BrianCoords
      @BrianCoords 10 днів тому

      Yes it's public! Share your thoughts and ideas, please.

  • @thebilalafsar
    @thebilalafsar 10 днів тому

    Hello Brian! Could you please tell guide me, I have WooCommerce site built with Elementor page builder and Hello Elementor theme. I have almost 50 active plugins. I want to reduce the plugins drastically from our site btw 10-20. I also want to completely remove Elementor from the site. What method would you suggest? Should I go with custom code or any alternative solution?

    • @BrianCoords
      @BrianCoords 10 днів тому

      It's definitely hard to make a recommendation without knowing your specific site. A lot of Woo sites just need a lot of plugins. If you can, make a staging copy of your site and play around with using the TT4 theme and see how close you can get to Elementor.

  • @onelook1870
    @onelook1870 11 днів тому

    Creating plugin admin page use react can it be done?

    • @BrianCoords
      @BrianCoords 10 днів тому

      Yes! Here's a demo repo, I just haven't gotten around to making the video yet: github.com/bacoords/example-wp-settings

    • @onelook1870
      @onelook1870 10 днів тому

      @@BrianCoords Thanks will check it out.

  • @simonemaranzana400
    @simonemaranzana400 11 днів тому

    I don’t know if it’s just me, but I see the subtitles from the previous video

    • @brickslabel
      @brickslabel 10 днів тому

      Me too; the transcript as well shows from previous

    • @BrianCoords
      @BrianCoords 10 днів тому

      Thanks for the heads up! This is fixed.

  • @JM7Blocks
    @JM7Blocks 11 днів тому

    Amazing. I need this. Just for adding classes to blocks for styling, that's all I need.

  • @BrendanOConnellWP
    @BrendanOConnellWP 11 днів тому

    This is really cool, thanks for sharing as always!

  • @moon_kill_sun
    @moon_kill_sun 11 днів тому

    Thanks for the tutorial, but I'll still use Blockstudio for now (for me personally it's definitely better than ACF).

  • @SiteStudio
    @SiteStudio 11 днів тому

    Would be nice if something like this existed as a library (not plugin) that could be included in any WordPress block theme or plugin.

    • @BrianCoords
      @BrianCoords 11 днів тому

      Yeah I'm thinking I'll have instructions for that in the documentation, though I'm not sure I'll go so far as making a Composer package for it.

  • @Xenio2007
    @Xenio2007 11 днів тому

    Thanks you very useful for custom field in blocks, I also love to use CMB2, maybe a tutorial will be great.

    • @BrianCoords
      @BrianCoords 11 днів тому

      Thanks! Yeah maybe I can do a CMB2 vs ACF explainer.

  • @wpmarkuk
    @wpmarkuk 11 днів тому

    This looks super useful Brian, thanks for sharing and I will certainly try this out.

    • @BrianCoords
      @BrianCoords 11 днів тому

      Thanks Mark - I would love to discuss some use-cases for block custom fields with other developers testing the FSE waters if you have any.

    • @wpmarkuk
      @wpmarkuk 11 днів тому

      @@BrianCoords We currently have a build taking place and therefore I may well be able to contribute to this discussion on use cases. Having thought about this again though, it seems as though this could be functionality something like ACF should add to their plugin - add fields to any block.

    • @BrianCoords
      @BrianCoords 11 днів тому

      Yeah definitely. The one downside of ACF is that you're split between setting things up in their UI and then also writing code. I've been enjoying just sticking to code only.

    • @wpmarkuk
      @wpmarkuk 11 днів тому

      @@BrianCoords I always use PHP to register fields and groups in ACF anyway so no change for me

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

    Best idea I've seen for the Block Editor in a long while. Virtual high five because I'm pretty excited to try this out! As it stands now, it already has a lot of potential. I also liked all the ideas you mentioned, so it can only get better. Thank you for this!

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

    Thats awesome. Well done and much needed. Could definitely come in handy.

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

    Been waiting on a update lol

    • @BrianCoords
      @BrianCoords 11 днів тому

      Haha I know! I've been holding off since the new block styles features coming in 6.6 really cover much of the same territory and I'm trying to see where they're going with it.

  • @Andy-vh3ns
    @Andy-vh3ns 12 днів тому

    Great tutorial -- thanks for the share! =]

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

    100% would use this. Thanks for the great content.

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

    For sure way to go, but acf has something like this with posibility of building fields via ui or via php code.

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

      Yeah but the PHP code method in ACF is not my favorite. And they also don't offer adding custom fields to core blocks, just to ACF Blocks.

  • @amitjangra6454
    @amitjangra6454 14 днів тому

    I used Bricks builder last week and struggled to resize slider width for 2 hours. Grids are almost useless. At last gave up.

    • @BrianCoords
      @BrianCoords 13 днів тому

      Yeah it looks like most people don't just use Bricks, they also add these extra tools like Automatic.css on top of it. I'm sure we're all most efficient in whatever tool we use the most often.

    • @95beats46
      @95beats46 10 днів тому

      What makes you say that grids are useless? I've done a lot of client work with Bricks and css grid is super simple to use, it's basically same as if you were writing CSS in any other tool only a bit faster

    • @amitjangra6454
      @amitjangra6454 10 днів тому

      @@95beats46 Try dividing parent div to 9 factors and have 2 child with ratio 7:2. Please educate me if i am missing something here. And without a plugin or additional css.

    • @372Entertainment
      @372Entertainment 5 годин тому

      @@amitjangra6454 I'm assumming you mean 9fr (9 columns) with the first child spanning 7 columns and the second child spanning 2 columns? Hero you go: make the parent container a grid > Add any gap size you'd like > In "Grid template columns" add: repeat(9, minmax(0, 1fr)) > now select the child, assuming it's a block or a div then look for "grid item options", it should be at the very top when you select the child element, and put "span 7" in the "grid columns" field of the first child and "span 2" for the second child. You should have what you asked with that. No acss or any other plugins needed, just knowledge of grid structure

  • @josela
    @josela 15 днів тому

    Cool video Brian and thanks a lot for give us a closer vision on Query Monitor!

  • @wesonweb
    @wesonweb 18 днів тому

    Great video. I’ve used Query Monitor but it was great to learn some new uses from your vid!

    • @BrianCoords
      @BrianCoords 18 днів тому

      That's great! I only recently learned the whole 'logging' aspect and now I use it all the time.

  • @spadilha
    @spadilha 21 день тому

    This was really helpful. I could understand better how it works and I was able to fix a code that I spent hours trying to figure out. Thank you!

    • @BrianCoords
      @BrianCoords 20 днів тому

      That's great! So happy it helped.

  • @Andy-vh3ns
    @Andy-vh3ns 25 днів тому

    This is really cool, thanks for the share.

  • @getJackt
    @getJackt 27 днів тому

    Hey Brian great video, I know I’m going to love this series

  • @erichepperlewp
    @erichepperlewp 28 днів тому

    Signed up - Looking forward to the series!

    • @BrianCoords
      @BrianCoords 27 днів тому

      Thanks! Let me know what you think.

  • @kerapetsimajor
    @kerapetsimajor 28 днів тому

    This is super helpful video. Didn't know that Quary monitoring was this powerful

    • @BrianCoords
      @BrianCoords 27 днів тому

      Yep this really only scratches the surface. They have great documentation showing even more features: querymonitor.com/wordpress-debugging/how-to-use/

  • @thebuildreview
    @thebuildreview 28 днів тому

    Hi Brian, I would like to avoid using page builders and stick with Gutenberg. The only issue I find is Gutenberg is missing some good dynamic data (query) post archive blocks. What do you recommend as a good lightweight solution? Thanks.

    • @BrianCoords
      @BrianCoords 27 днів тому

      For queries, I recommend Ryan Welcher's Advanced Query Loop plugin - it just extends the core query loop with some extra controls. wordpress.org/plugins/advanced-query-loop/ For dynamic data like custom fields, there's still work in core getting everything ready there, but Advanced Custom Fields Pro is starting to support it: www.advancedcustomfields.com/blog/acf-chat-fridays-using-the-block-bindings-api/

  • @thebilalafsar
    @thebilalafsar 28 днів тому

    Hello Brian! I have a WooCommerce site built using Elementor and the Hello theme. It has nearly 50 active plugins for various small functionalities. We host over 16,000 products for each version of our site in Spanish, German, and UK through the Polylang plugin, with a database size of almost 1GB. I am planning to drastically improve our site speed and pass the Core Web Vitals. I wish to remove Elementor and significantly reduce the number of plugins. What theme or page builder would you recommend? Additionally, as I am considering rebuilding our site, should I hire a developer to create custom code using WordPress so we can minimize plugin use and build our own theme? Or do you recommend any super-fast themes and page builders? What would your final recommendation or suggestions be?