How to Build Dynamic (PHP) Blocks in WordPress
Vložit
- čas přidán 30. 07. 2024
- Let's build a dynamic block for WordPress. Along the way we'll discuss the difference between static and dynamic blocks, when to use them, WP_Query, what ServerSideRender is and what the best approach for performance is.
🚨 Free Video Series: 7 Tools for Modern WordPress Development 🚨
👉 briancoords.com/7tools
👉 Code Repository: github.com/bacoords/example-d...
👉 Blog Post: www.briancoords.com/how-to-bu...
More Reading:
👉 Rest API Handbook: developer.wordpress.org/rest-...
👉 Static vs Dynamic Rendering: developer.wordpress.org/block...
👉 Static vs Dynamic Blocks: developer.wordpress.org/news/...
Chapters:
00:00:00 Dynamic vs Static Blocks
00:02:26 Scaffold with Create-Block
00:03:36 Block Plugin Structure and Build Process
00:04:07 Block.json
00:07:03 Index.js
00:08:01 Edit.js - Adding Inspector Controls
00:12:34 Render.php
00:16:26 Adding CSS in Style.scss
00:17:48 The ServerSideRender Component
00:22:10 Edit.js - Building the block with core-data
00:25:32 Data from WP REST API vs WP_Query - Věda a technologie
This was very educational (again!) Thank you!
Neat run through Brian, thanks for sharing 👍
I'm transitioning one of my plugins to the Block Editor and the ServerSideRender was super useful, thanks
Great lesson!
This was very good! Thank you, Brian.
Another amazing in depth tutorial! Thank you!
Very Very useful, thanks !
Thank you
Thanks a lot!
Muchas gracias por las expliocaciones! ayudan mucho y lo valoro mucho!!!
Really good content :)
Thanks!
Hi Brian, thanks for the tutorial. It was very helpful. I want to ask why you added InspectorControls inside tags? It can run outside of html output (using an empty fragment of course). I think it's more readable to use InspectorControl outside of block elements.
Yeah great point- that would've also solved the issue with the ServerSideRender component sort of sitting weirdly inside an extra div/ul element.
Hi Brian. I have a little concern. I just started getting my hands dirty on Block Development using the @wordpress scripts. I noticed the render.php file was not created? Is it a must for all blocks? I asked because the block I created without it works perfectly fine.
If the render.php file wasn't created, my guess would be that the --variant=dynamic flag wasn't passed properly during the initial scaffolding command.
But yeah there's a few different ways to build core blocks - dynamic blocks with PHP or static blocks with NO render.php, and both will work.
Thank you. I have been searching for hours for this type of video. I am new to Block Editing for Custom Theme Development. Is there any way I can ask you some questions one on one.
Yep, I'm around the Make WordPress Slack, Twitter, and some of the other WordPress dev slacks!
I really like the community at www.modernwpdev.co/slack/
Hi! I have a issue. When used @wordpress/create-block and activate the plugin - block did't show up in editor . Do you had similar problems?
There can be a few reasons - maybe the blocks full name is already used, maybe the register_block_type function is not pointing to the correct place, maybe the build script didn't fully compile. I would start with the build folder and work your way from there, making sure everything looks right.
Hi Brian thank you for your videos! I learn a lot from them.
I keep getting stuck with the same issue everywhere on my block development
The issue is - NPM just always break. Whatever I try I keep getting errors
And there isn’t tutorials that talk about ERRORS in NPM, that always say, oh, just type in this command and that’s it..
How can I use this tool? How to even start debug it?
Yeah the baseline for most of these videos is knowledge of node.js. If the errors are when you're trying to _install_ a brand new package, then my typical approach to debugging node is:
- Check your node version (`node -v`). It should be 16 or higher
- Delete your node_modules and package-lock.json
- Re-run npm install
I have installed nodejs in vps and trying to execute npm install @wordpress/scripts --save-dev and it triggered my vps nginx to stop and no further actions seems.Am I missing something?
Unfortunately I don't have a ton of experience running a node/dev environment on a VPS- so this one's a little outside my wheelhouse.
Is their any good tutorial on how a custom block can call external API to retrieve data and show on the front end?
On the frontend? You can use a dynamic block (like described in this video) and then use core functions wp_remote_post() to hit your API and process the data. You'll also want to use some of core's cache tools so that you're not doing it one every single page load.
@@BrianCoords Thanks Brian, that's what I decided to do, all in the render.php so far. For the caching the http API is recommending to use transients. Keep up the great content!
Hi Brian! Can you use PHP functions within the render.php file of a dynamic block?
Yep! Full access to any PHP functions in WordPress.
@@BrianCoords Thank you! I just tested a custom PHP function within the render file. Turns out it's not possible.
A video about Interactivity API would be great!
@@daniloparrajr.personal Sounds like I'm not really understanding what you're trying to accomplish, then because the render.php should have access to the same PHP as any other part of your WordPress theme/plugin. I do have some interactivity API stuff coming soon!
@@BrianCoords Sorry If I'm confusing 😅
What I'm trying to say is PHP functions defined within the render.php file and not functions that are already available on the global scope e.g. WP functions.
Turns out we cant define PHP functions within the render.php of a dynamic block.
What I have done is simply defining the PHP functions I need in the main plugin file.
@@daniloparrajr.personal Oh! Yes that makes more sense. Yeah, you'll need to define the function elsewhere but should be able to call it in.
FWIW You can also skip using the render.php file entirely and actually just use a PHP function _for_ generating the dynamic blocks render, using the `render_callback` parameter.
what is that editor font family?
I believe it's Roboto Mono from Google
@@BrianCoords Thanks :)
I don’t have a coding background and thus use no code tools like Elementor and Bricks.
What is the logic of custom coding blocks, when pagebuilders handle the heavy lifting!
I fail to understand why people like you still custom code and invest all this time into it and don’t use pagebuilders.
I am curious in all earnestness.
There is a (smaller, but more premium) side of the web development market where you really can't build sites using 3rd party page builders. These clients typically have a lot of content to manage and a lot of very custom needs (API integrations, personalization, etc), so they want to know the tools they're using will be around for a long time and will be well-supported. In those situations, sticking with core WordPress may be more work, but it's safer bet than trusting whatever page builder is currently popular.
And the editing experience is just better for a client who doesn't want to log into a page builder to make content update. Just different tools for different audiences. I go into more detail here: www.briancoords.com/the-block-editor-is-still-not-a-page-builder/
This is the case when a builder is not needed to solve the client's daily tasks. When writing articles, let's say you have a huge blog and you need a block that you will insert into the articles. It should be dynamic (in the background you get the current price and affiliate links) To put a builder for the sake of such a thing is overkill. The site is used by several authors and they need to do what they know how to do, write content. On the developer's side, you just have to give them a ready-made component that solves the business problem. There are a number of large clients who try to avoid addons and builders in favour of custom development to keep their site clean and free from future problems and incompatibilities.
Exactly - when you're building a website for someone else (typically a marketing department) to publish content with, you don't want to give them a ton of noise on the screen.
@@BrianCoords Thanks for the reply. I read the article that you shared and also read Miriam’s comment (Elementor rep), which I fully agree with that there are granular controls in the role editor.
15 Million Websites are built on Elementor, and Elementor is not going to go away any time soon in the foreseeable future of 5-10 years.
I still fail to see the logic of custom coding apart from the FUD logic (Fear, Uncertainty, Doubt) that developers would instill on their clients to dissuade them from using page builders and pay more for custom coding.
Anyway, thx again for sharing your thoughts.
It is just like the difference between a tailor fit vs. clothes off the rack. It is more expensive, but it "fits" better.
- Page Builders try to serve a broad and therefore a more "typical" or "average" client range. If you have special needs (every brand is different), sometimes you cannot avoid a more specific solution.
- Page Builders have to account for all possible different inputs an author can make. In one project you rarely touch all possible options. These untouched options and the complexity that comes with them usually make up the majority of the code base (far more than 50%). That bloats your code base and your page, which often results in worse performance (That directly affects the user).
- And the content authors are also affected, because the mentioned size and complexity results in a steep learning curve.
But yes, a custom solution is more expensive and needs time (page builders are already there). And if your developer doesn't know what he/she's doing or changes in the middle of the project you run into problems...
As always the answer is "it depends". If you have the resources and want a really clean or niche or unique project, hire developers. If you prefer a quicker and cheaper solution with a big eco system for support, use page builders.