WordPress 6.6 is changing the game for Custom Fields
Vložit
- čas přidán 24. 07. 2024
- 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-b...
🚨 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 - Zábava
That's cool - being able to add the template blocks in the cpt.
Thanks, Brian, this is great. I got super excited about the Block Bindings API in 6.5 as there is finally a logical link to using meta in templates. This is one step closer to what many developers have been wanting to see in block editor development. It's going to be interesting to see how the roadmap develops, especially for more complex data such as conditional statements and loops. I'm not sure how feasible that will be in 6.6, I probably need to revisit it to see how possible it is for things like repeating fields but it's definitely going in the right direction 👏
Agreed - it's also great when combined with query loops- developers can lean into custom post types, custom taxonomies, and custom fields and then use that to create repeater-like experiences all with core functionality.
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.
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.
Honestly, there also needs to be a way to store data for CPTs in their own respective tables. The way that WP stores data is not very scaleable.
Great demo! Very thankful that you share these.
Thanks!
Great video - thanks for sharing. I can see lots of use cases for this.
Agreed- and I bet ACF's going to support this as soon as possible, too. They've been working on Block Bindings as well.
This is some great new features -- thanks for the explanation, excited about trying this out, as I am a huge fan of CPTs.
Nice! Some powerful stuff on the way
@@BrianCoords Sweet, thanks Brain -- looking forward to it. =]
Hi,
it would be nice to make video about how to build that all code and what is possible examples to use it
Thank for the high quality content you provide ! ...
...
KEEP GOING !! love ya
You're on a roll! Good one. 6.6 has so much!
Yep. I'm hoping to record some thoughts on some of the new features for block styles this week as well.
Very good content!!!
Great stuff thanks! Would you have the code that sets a synched pattern as the default book block?
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
Thanks, Brian, I need a code
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?
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.
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 ?
Yes! You need to extend your webpack.config file. Here's an example from one of my repositories where I've added additional entrypoints into the build process: github.com/bacoords/block-pattern-plugin/blob/main/webpack.config.js
@@BrianCoords it works :) Thanks alot
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
All block CSS is combined, but if a block is not present on that page, the block's CSS isn't loaded. But for blocks that are used pretty regularly or might show up on every page (group, navigation, columns, button) you'll can often expect that CSS to be loaded globally,
@@BrianCoords thanks again for reply in this as well. Is this inline a new trend in web development. Previously, adding inline is treated as a bad practice and can cause unexpectedly styling behaviors and make it more difficult to debug or modify styles.
Also and if we need to change some behavior then we need to explicitly add '!important ;' to override the default styling..
What your take onto this? or is there a way to bundle atleast all our custom block styles and Js into one main file ?
Thanks
I don't mind the inline style tags, but when they put style attributes directly on an element it's annoying. That said, it should only ever be done when you've added that style to a block in the editor, in which case it sort of makes sense.
There is a filter to turn that off and get your CSS/JS as one file. The downside is that the inline styles are actually helpful for page speed scores because it can render the top of the page without waiting for everything to load.
How did you get the Vs code primary sidebar to the top left?
I think you can right click it and change the "Activity Bar Position" to "top"
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?
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.
Creating plugin admin page use react can it be done?
Yes! Here's a demo repo, I just haven't gotten around to making the video yet: github.com/bacoords/example-wp-settings
@@BrianCoords Thanks will check it out.
I don’t know if it’s just me, but I see the subtitles from the previous video
Me too; the transcript as well shows from previous
Thanks for the heads up! This is fixed.
Lawd there’s 100 things WP has needed to level up for yearssss SERIOUSLY why are improvements so few and far between
I don't like the fields in the sidebar. It's too small. Would like to see an experience that has more real estate.
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.
@@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.
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.