Introduction — what this tutorial covers This tutorial explains, in full detail, how to filter WordPress block editor blocks by user role using PHP. It covers the two main filters you may encounter, practical examples you can drop into a theme or plugin, advanced dynamic techniques (including how to query registered blocks), and best practices […]
Overview This tutorial shows, in complete detail, how to create a Gutenberg block that lets editors upload files to the WordPress Media Library using JavaScript. It covers two common approaches: using the built-in MediaUpload component (media modal and uploader), and programmatically uploading files via the data store using wp.data.dispatch(core).uploadMedia. It also explains how to register […]
Overview This article is a complete, detailed tutorial for adding a custom toolbar to a Gutenberg block in WordPress using JavaScript. It covers creating your own block with a toolbar, adding toolbar controls to existing core blocks via a wrapper (filter HOC), the block.json-based workflow, enqueuing and building the editor script, accessibility considerations, keyboard handling, […]
Introduction This tutorial explains, step by step, how to create a global settings panel for a WordPress plugin using the JavaScript Data API (@wordpress/data). The goal is a modern, reactive settings panel: data is fetched via a REST endpoint, kept in a client-side store, editable via a React-style component, and saved back to the server. […]
Introduction This article explains in detail how to register WordPress block styles for both the editor (Gutenberg) and the frontend. It covers the PHP APIs, the JavaScript APIs, the block.json workflow, how to enqueue CSS for editor and front-end, how to conditionally load styles only when blocks are present, name and class conventions, unregistering styles, […]
Introduction This article is a complete, practical tutorial for creating a Gutenberg parent block that uses InnerBlocks and includes custom controls built in JavaScript. It covers every step: project setup, block metadata, editor and save code, InspectorControls, attributes, styling (editor and front-end), advanced patterns (programmatically changing inner blocks), PHP registration for plugin/theme, build scripts, and […]
Overview: Server-rendered blocks with render_callback in WordPress This article is a comprehensive, step-by-step guide to creating a Gutenberg block that is rendered on the server using a PHP render_callback. It covers block metadata, editor JavaScript, registering the block in PHP, secure output, passing attributes, rendering inner blocks, caching strategies, and best practices for performance and […]
Overview This article shows in exhaustive detail how to listen to editor events and validate content in WordPress using JavaScript. It covers the modern Block Editor (Gutenberg) and the Classic Editor (TinyMCE), explains the relevant APIs, demonstrates practical examples (including blocking post saves and adding user notices), and gives best practices and troubleshooting tips. All […]
Overview — what SlotFill is and why use it SlotFill is the UI composition pattern used throughout the WordPress block editor (Gutenberg) to let independent pieces of code insert UI into named places (slots) in the editor shell. It is the pattern behind many editor extension points such as sidebars, toolbar buttons, post status info […]
Introduction This tutorial explains, in exhaustive detail, how to consume wp.datas select and dispatch APIs inside WordPress blocks using modern patterns (React hooks: useSelect, useDispatch), classic programmatic access (wp.data.select / wp.data.dispatch), and HOCs (withSelect, withDispatch). It covers common store names, frequently used selectors and actions, best practices, performance tips, examples for reading/writing post data and […]
