Gutenberg Dynamic Timestamp Block | React to PHP Data Flow Explained
In this video, I build a custom Gutenberg Dynamic Timestamp Block completely from scratch.
The core architectural decision in this build is why I used a dynamic PHP render.php callback instead of a static JavaScript save() function. If a timestamp is saved via JavaScript, the date freezes in the database as static HTML. By routing the output through a PHP render callback, the date('Y') or get_the_modified_date() functions run server-side on every page load, ensuring the data is always perfectly accurate without requiring manual post updates.
Architectural concepts covered in this build:
• block.json structure and attribute registration
• Bridging React state to PHP via attributes
• Using InspectorControls and SelectControl for sidebar UI
• Avoiding global variable collisions in render.php
• Output escaping and WordPress coding standards
My Tech Stack & Tools:
• React / ES6+
• PHP 7.4+
• WordPress @wordpress/scripts (Webpack/Babel)
• XAMPP