Gutenberg & React Interview Questions

Answer:

• Static Blocks: The HTML is generated in JavaScript (the `save` function) and saved directly into the `post_content` in the database. If you change the HTML structure later, existing blocks may break (validation error).
• Dynamic Blocks: The `save` function returns `null`. The HTML is rendered on the server-side via PHP (`render_callback`). This is ideal for content that changes frequently (e.g., "Latest Posts") or complex logic.

Answer: Modern registration uses `block.json` metadata file.

1. Create `block.json` defining name, attributes, and scripts.
2. Register it in PHP:

function register_my_block() {
    register_block_type( __DIR__ . '/build' );
}
add_action( 'init', 'register_my_block' );

Answer: Attributes are the data model for a block. They are similar to React state, but they persist to the database.

• They are defined in `block.json`.
• They are passed as props to the `Edit` component.
• Updating them via `setAttributes` triggers a re-render of the editor UI.

"attributes": {
    "content": {
        "type": "string",
        "source": "html",
        "selector": "p"
    }
}

Answer: `wp.data` is a centralized data registry built on top of Redux. It manages the state of the editor.

• `useSelect`: Retrieves data (like `useSelector` in Redux). E.g., getting the current post title.
• `useDispatch`: Dispatches actions (like `useDispatch` in Redux). E.g., updating a post meta value.

const { title } = useSelect( ( select ) => {
    return {
        title: select( 'core/editor' ).getEditedPostAttribute( 'title' )
    };
} );

Answer: You use the `PluginSidebar` component from `@wordpress/edit-post`.

import { registerPlugin } from '@wordpress/plugins';
import { PluginSidebar } from '@wordpress/edit-post';

const MySidebar = () => (
    <PluginSidebar name="my-sidebar" title="My Settings">
        <div>Sidebar Content Here</div>
    </PluginSidebar>
);

registerPlugin( 'my-sidebar-plugin', {
    render: MySidebar,
} );

Answer:

• Block Patterns: Pre-defined layouts of blocks that users can insert. Once inserted, the blocks are independent; changing the pattern definition does not update existing instances. They are best for starting points.
• Reusable Blocks (Synced Patterns): A saved group of blocks where changes sync across all instances on the site. They are best for global content like a Call-to-Action.

Answer: Block Context allows a parent block to pass values down to its inner blocks (descendants) without passing them explicitly through every level of the hierarchy (prop drilling).

Example: A "Query Loop" block provides the `postId` context. An inner "Post Title" block consumes that context to know which title to display.

// Parent block.json
"providesContext": {
    "myPlugin/recordId": "recordId"
}

// Child block.json
"usesContext": [ "myPlugin/recordId" ]

Answer: Block Variations allow you to create different versions of a single block type. They share the same implementation but have different initial attributes or inner blocks.

Example: The core "Embed" block has variations for YouTube, Twitter, Vimeo, etc. They are all the same block, just pre-configured differently.

Answer: When you change the HTML structure of a block's `save` function, existing blocks in the database will break (validation error). To fix this, you define a `deprecated` array in the block registration.

This array contains the old `save` function and attributes. Gutenberg checks this list to see if the invalid content matches an old version. If it does, it successfully migrates it to the new version.

Answer: It is a React component that fetches the PHP-rendered HTML of a block and displays it in the editor. It is useful for dynamic blocks where replicating the rendering logic in JavaScript is too complex or impossible.

import ServerSideRender from '@wordpress/server-side-render';

export default function Edit( props ) {
    return (
        <ServerSideRender
            block="my-plugin/latest-posts"
            attributes={ props.attributes }
        />
    );
}