@@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.
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.
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!
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!
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.
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!
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
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.
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.
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/
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.
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.
This is really cool, thanks for sharing as always!
Thanks!
This looks super useful Brian, thanks for sharing and I will certainly try this out.
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.
@@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.
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.
@@BrianCoords I always use PHP to register fields and groups in ACF anyway so no change for me
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
Good to know that many of us are in the same place trying to figure out the same workflow issues.
Amazing. I need this. Just for adding classes to blocks for styling, that's all I need.
Yep, that's how I feel.
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!
Yes it's public! Share your thoughts and ideas, please.
Thanks you very useful for custom field in blocks, I also love to use CMB2, maybe a tutorial will be great.
Thanks! Yeah maybe I can do a CMB2 vs ACF explainer.
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!
100% would use this. Thanks for the great content.
Thats awesome. Well done and much needed. Could definitely come in handy.
Would be nice if something like this existed as a library (not plugin) that could be included in any WordPress block theme or plugin.
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.
Been waiting on a update lol
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.
Great tutorial -- thanks for the share! =]
For sure way to go, but acf has something like this with posibility of building fields via ui or via php code.
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.
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!
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
@@BrianCoords thank you!
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.
Saw your issue and responded. Definitely an opportunity for better naming there.
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.
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/
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.
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.