Using Core Data and Sharing Context across WordPress Blocks

Рет қаралды 1,249

Күн бұрын

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-202...
Chapters
00:00:00 Intro
00:01:01 Our Block's UI Needs
00:03:07 Our Block Scaffold
00:03:57 The BlockControls Component
00:06:23 InsertBlock and useDispatch
00:12:58 Filtering a Core Block's Attributes
00:14:40 Understanding Context
00:17:05 AddFilter in JavaScript
00:21:11 Modifying a core block's Edit.js
00:24:52 Adding UI a core block's toolbar
00:27:44 Using useSelect to get Block Data
00:34:28 Next Steps

Пікірлер: 20

@elpuas 18 күн бұрын

Great Video, Thanks for sharing!

@Rbog17 5 ай бұрын

My man Brian out here doing God's work. Thank you so much for taking the time to dive into some of this complex development practices and teaching those willing to embrace blocks.

@bluetheredpanda 4 ай бұрын

Okay so this is probably going to sound like flattery, but I just wanted to say I'm very appreciative and grateful of you not only for sharing this knowledge in a way that makes me feel like learning (for context I'm initially a designer by trade, not a developer, so HTML and CSS = within my reach, JS = sort-of-if-I-really-apply-myself-and-dedicate-time, but React + PHP = 🤯🤯), but also for your overall stance regarding WordPress. I just saw a few tweets of yours regarding FSE and the need for a better UX, and was like “Yes! thank you!” Super subjective of course, but I get the feeling you're one of the too rare developers who have both an advanced level of technical knowledge *as well as* a sense of what the experience can resemble for a normal user (and how difficult it currently is). So having someone in this rather unique position create those videos feels like a godsend. I really need to find a way to carve the time to watch your other videos on the topic and learn more. Thank you, thank you, thank you.

@BrianCoords 4 ай бұрын

To be fair, I've been talking to a lot of other people and those tweets are also based on those conversations. It's a communal feeling that FSE is important, but has lost sight of what it feels like to be a real user managing a real website. Hopefully we'll be able to give constructive feedback and they can get that user experience nailed down before we all get too frustrated with it! Thanks for watching and being part of the conversation!

@sili5208 5 ай бұрын

You are really good at explaining things in a compact way. Even if I already know the topics you're talking about, I still watch the video because I'm curious to see how you explain it. I relay like your Videos. For the slider, I would be interested to see how you would approach it if the slider is also to be displayed as a slider in the editor. I think that could be tricky.

@BrianCoords 4 ай бұрын

That's a great idea - I've had a few ideas to expand on it (custom settings to control the carousel) but I think that's a critical one - display it as a slider in the editor.

@PhilaUAdam 5 ай бұрын

Awesome! I was just looking into using "context" for inner blocks.

@BrianCoords 5 ай бұрын

The usage is little weird to wrap your head around but super powerful.

@seiuwatches 5 ай бұрын

Thanks for the tutorial! Although I'm currently avoiding static blocks like the plague, I'm not a fan on how block deprecaton is handled.

@BrianCoords 5 ай бұрын

Yeah you're not wrong. I only really use static blocks in this specific instance, where the block is 100% innerblocks inside.

@markokrstic7787 5 ай бұрын

Nice one

@mamunurislam6373 5 ай бұрын

thanks

@mahmodissa4169 4 ай бұрын

Hey such a great work! I've seen nothing explained as you explain on those videos! Can you send me the link doing this Slider? Thanks

@BrianCoords 4 ай бұрын

Yep. All the code is available right here: github.com/bacoords/wcphx-2024/tree/add-context-example

@BK-qx3qf 5 ай бұрын

Serious question: Why would anyone ever build Gutenberg Block in react, unless they are developing their own blocks such as Stackable or Kadance or similar?

@BrianCoords 4 ай бұрын

In WordPress you often have the choice between making someone else's solution conform to your specs OR just writing it yourself. It's a trade off and a choice every time.

@BK-qx3qf 4 ай бұрын

@@BrianCoords You are correct, but from website development, which 95% of Wordpress development is, there is no worth in creating your own custom gutenberg block, no matter the circumstances. If you are creating library or block that will be usable by many (such as block libraries), that is another story. But developing your own block, because you cannot use already existing solution, is never go-to. I am afraid you are showing this to future dev kids, that will waste months to learn this, just to realize its imposible to utilize it in practice. Just my honest 2 cents.

@BrianCoords 4 ай бұрын

My hope is that the need for custom blocks grows less and less but if there’s anything that I’ve learned about WordPress it’s that the use cases are extremely varied and no one of us really has a complete picture of how it’s being used across the internet.

@BK-qx3qf 4 ай бұрын

@@BrianCoords You are completely right, but at this point, I believe just narrative that developers should "learn to build their own blocks, learn react, learn complex WP / React / PHP infrastructure, learn WP React (its not same as just react) in order to build custom carousel that has optional kitty svg showing in corner" is wrong approach. That's all I am refering to :) But regardless, great content, I also learn something new, I just believe developers without experience are watching this for wrong reason, and therefor will hit their head in wall soon enough.

@BrianCoords 4 ай бұрын

I agree with that. I've been thinking of doing some 'you don't need a custom block for this' type videos showing how often you can actually accomplish stuff with core if you know how.