daily notes

Creating a block block.json { "$schema": "https://schemas.wp.org/trunk/block.json", "apiVersion": 3, "name": "create-block/copyright-date-block", "version": "0.1.0", "title": "Copyright Date Block", "category": "widgets", "description": "Display your site's copyright date.", "example": {}, "supports": { "color": { "background": false, "text": true }, "html": false, "typography": { "fontSize": true } }, "textdomain": "copyright-date-block", "editorScript": "file:./index.js", "render": "file:./render.php" } Similar to the useBlockProps() function in the Editor, get_block_wrapper_attributes() outputs all the necessary CSS classes and styles in the block’s wrapper. Only the content needs to be updated. <?php ... ?> <p <?php echo get_block_wrapper_attributes(); ?>>© <?php echo date( "Y" ); ?></p> adding block attributes "example": {}, "attributes": { "showStartingYear": { "type": "boolean" }, "startingYear": { "type": "string" } }, You can create your own custom panels using the InspectorControls component. The InspectorControls belongs to the @wordpress/block-editor package. ...

April 3, 2026 · 3 min · Ashish Verma

daily notes

Gutenberg replaced the “Classic Editor” (which was essentially a digital typewriter) with a modular system. Every element—a paragraph, an image, or a button—is a standalone object (a block). The “Core” Categories: Common Blocks: The essentials (Paragraph, Heading, Image). Formatting: Tools for structured data like Table, Code snippets, or Pullquotes. Layout Elements: These are “container” blocks. Columns, Groups, and Rows allow you to create complex grid structures without writing HTML/CSS from scratch. ...

April 2, 2026 · 7 min · Ashish Verma

daily notes

Notices In the WordPress Block Editor, Notices are UI messages used to inform users about events, errors, warnings, or successful operations. They are typically displayed at the top of the editor or inside specific UI components. WordPress provides a Notices API through the @wordpress/notices package, which integrates with the WordPress data store system. Common use cases: Showing validation errors Confirming successful actions Displaying warnings or info messages Communicating background processes to the user Types of Notices The main types of notices include: ...

April 1, 2026 · 4 min · Ashish Verma

daily notes

Widgets Block Editor Overview The Widgets Block Editor replaces the traditional Widgets screen in WordPress with a block-based interface similar to the post/page editor introduced with the Gutenberg. Instead of dragging classic widgets into widget areas, users can now insert blocks into sidebars and widget areas. Block-based editing experience Consistent UI with the post/page editor Access to all available blocks in widget areas Ability to mix blocks and legacy widgets ...

March 31, 2026 · 3 min · Ashish Verma

daily notes

Session Fixation is a security vulnerability where an attacker “fixes” a user’s session ID before the user even logs in. If the application doesn’t change the session ID upon authentication, the attacker can use that pre-set ID to hijack the user’s account. Attacker visits target website and obtains valid session ID. Attacker traps victim to login with that session ID. http://example.com/?PHPSESSID=123. Because the server did not issue a new session ID after login, the old ID (123) is now associated with the victim’s authenticated account. Modern WordPress (version 4.0 and later) has moved away from standard PHP native sessions (PHPSESSID) and implemented a much more robust system that specifically defends against fixation. WordPress uses a custom session manager. When a user logs in, WordPress generates a brand-new, random Session Token. Even if an attacker managed to plant a cookie on a user’s browser beforehand, that cookie is ignored or overwritten during the wp_signon() process. Session token stored in wp_usermeta table for that user. WordPress then sends that token to your browser wrapped inside a cookie (typically named wordpress_logged_in_[hash]). Primitive Capabilities: These are “hard” permissions stored in the database for a specific role (e.g., edit_posts, manage_options). They are a simple “Yes” or “No.” Meta Capabilities: These are “contextual” permissions that depend on a specific object, usually a Post ID (e.g., edit_post, delete_post).**** When you call current_user_can('edit_post', 123), WordPress runs map_meta_cap. If Post 123 belongs to the current user, it maps the request to the primitive edit_posts. If Post 123 belongs to someone else, it maps it to edit_others_posts. /** * Custom Permission Logic: * Allow users to edit a post if they are the "Project Lead" * via a custom meta field. */ add_filter( 'map_meta_cap', 'my_custom_project_permissions', 10, 4 ); function my_custom_project_permissions( $caps, $cap, $user_id, $args ) { // 1. Target the specific meta capability if ( 'edit_post' === $cap || 'delete_post' === $cap ) { $post_id = $args[0]; // The ID of the post being checked $post_type = get_post_type( $post_id ); // 2. Only apply logic to our 'project' post type if ( 'project' === $post_type ) { // Fetch the assigned "Lead" from post meta $project_lead_id = get_post_meta( $post_id, '_project_lead_id', true ); // 3. If the current user is the Lead, give them the 'exist' capability // 'exist' is a primitive cap everyone has, effectively granting permission. if ( (int) $project_lead_id === (int) $user_id ) { return array( 'exist' ); } } } // Return the original capabilities for all other cases return $caps; } Never return an empty array if you want to deny access. If you return an empty array, WordPress assumes no primitive capabilities are required, and the check will pass! To deny access, you should return a capability that you know the user doesn’t have, such as 'do_not_allow'. ...

March 30, 2026 · 13 min · Ashish Verma

daily notes

Dynamic Blocks (Gutenberg) Dynamic blocks render content at runtime instead of saving full HTML in the database. Rendering: Server-side (PHP) — most common Client-side (JavaScript) save() must return null When to Use Data-driven content (posts, APIs) Frequently changing content Centralized rendering logic Basic Dynamic Block (JS) import { registerBlockType } from '@wordpress/blocks'; registerBlockType('my-plugin/dynamic-block', { title: 'Dynamic Block', category: 'widgets', attributes: { message: { type: 'string', default: 'Hello' } }, edit: ({ attributes, setAttributes }) => ( <input value={attributes.message} onChange={(e) => setAttributes({ message: e.target.value })} /> ), save: () => null }); Server-side Rendering (PHP) function render_dynamic_block($attributes) { $message = $attributes['message'] ?? ''; return '<div>' . esc_html($message) . '</div>'; } add_action('init', function () { register_block_type(__DIR__ . '/build', [ 'render_callback' => 'render_dynamic_block', ]); }); No static markup stored ...

March 27, 2026 · 2 min · Ashish Verma

daily notes

Block Editor The WordPress Block Editor (Gutenberg) is a modern editing experience that allows content to be created using modular components called blocks. Each block represents a piece of content such as text, images, lists, or custom UI elements. Creating custom blocks allows developers to extend the editor with tailored functionality suited to specific websites or applications. The process of learning block development typically begins with a simple example and progressively adds functionality such as attributes, controls, styling, and dynamic rendering. ...

March 26, 2026 · 5 min · Ashish Verma

daily notes

Hooks in React Hooks are functions that let you use state and lifecycle features in functional components. Introduced in React 16.8, they eliminate the need for class components in most cases. Common Hooks useState Manages local component state. Key Points Returns current state and a setter function State updates trigger re-render State is preserved across renders Code Example import { useState } from "react"; function Counter() { const [count, setCount] = useState(0); return ( <div> <p>Count: {count}</p> <button onClick={() => setCount(count + 1)}>Increment</button> </div> ); } export default Counter; useEffect Handles side effects such as API calls, subscriptions, or DOM updates. ...

March 25, 2026 · 3 min · Ashish Verma

daily notes

React Functional Components Functional components are JavaScript functions that return JSX and are the modern standard for building React applications. They are simpler, easier to read, and support hooks for state and lifecycle management. Defined as plain JavaScript functions. Use React Hooks (e.g., useState, useEffect) for state and side effects. No need for this keyword. Preferred over class components in modern React. Easier to test and reuse. import React, { useState, useEffect } from 'react'; function FunctionalComponent() { const [count, setCount] = useState(0); useEffect(() => { console.log('Component mounted or updated'); }, [count]); return ( <div> <p>Count: {count}</p> <button onClick={() => setCount(count + 1)}> Increment </button> </div> ); } export default FunctionalComponent; React Class Components Class components are ES6 classes that extend `React.Component` and include lifecycle methods and internal state. They were widely used before hooks were introduced. Must extend React.Component. ...

March 24, 2026 · 2 min · Ashish Verma

daily notes

By default, WordPress provides several built-in sections you can hook into or build upon: Site Identity: Site title, tagline, and logo/favicon. Colors: Background colors, header colors. Header Media: Header images or videos. Background Image: Site-wide background image settings. Menus: Menu creation and location assignment. Widgets: Managing widget areas directly from the front end. Homepage Settings: Choosing between a static page or latest posts. Additional CSS: A built-in code editor for custom styles. ...

March 23, 2026 · 10 min · Ashish Verma