## FILE MAP ``` custom-plugin/block.json → Block manifest (registration, attributes, supports) custom-plugin/includes/blocks/author-bio-profile/block.php → PHP registration + render callback custom-plugin/src/blocks/author-bio-profile/edit.js → Gutenberg editor component custom-plugin/src/blocks/author-bio-profile/save.js → Null save pattern (dynamic render) ``` --- ## BLOCK VALIDATION STATUS ``` PHASE 1 result: VALID API Version: 3 ACF Integration: NO — {ACF_FIELDS} not provided; standard attribute registration used Render Type: Dynamic ``` --- ## GENERATED FILES ### block.json ```json { "$schema": "https://schemas.wp.org/trunk/block.json", "apiVersion": 3, "name": "custom-plugin/author-bio-profile", "title": "Author Bio Profile", "category": "text", "icon": "admin-users", "description": "Displays an author bio profile with name, bio text, and optional avatar.", "keywords": ["author", "bio", "profile"], "textdomain": "custom-plugin", "attributes": { "authorName": { "type": "string", "default": "" }, "bioText": { "type": "string", "default": "" }, "showAvatar": { "type": "boolean", "default": true } }, "supports": { "align": true, "anchor": true, "html": false }, "editorScript": "file:../../build/blocks/author-bio-profile/index.js", "style": "file:../../build/blocks/author-bio-profile/style-index.css", "editorStyle": "file:../../build/blocks/author-bio-profile/index.css" } ``` --- ### custom-plugin/includes/blocks/author-bio-profile/block.php ```php <?php /** * Author Bio Profile Block — Registration & Render Callback * * @package CustomPlugin */ declare( strict_types=1 ); if ( ! defined( 'ABSPATH' ) ) { exit; } /** * Registers the Author Bio Profile block. * * Uses register_block_type() pointed at block.json. * Render type: Dynamic — PHP callback handles all front-end output. */ function custom_plugin_register_author_bio_profile_block(): void { register_block_type( __DIR__ . '/block.json', [ 'render_callback' => 'custom_plugin_render_author_bio_profile_block', ] ); } add_action( 'init', 'custom_plugin_register_author_bio_profile_block' ); /** * Render callback for the Author Bio Profile block. * * @param array $attributes Block attributes from the editor. * @param string $content Inner block content (unused — no InnerBlocks). * @return string Sanitized HTML output. */ function custom_plugin_render_author_bio_profile_block( array $attributes, string $content ): string { $author_name = isset( $attributes['authorName'] ) ? sanitize_text_field( $attributes['authorName'] ) : ''; $bio_text = isset( $attributes['bioText'] ) ? wp_kses_post( $attributes['bioText'] ) : ''; $show_avatar = isset( $attributes['showAvatar'] ) ? (bool) $attributes['showAvatar'] : true; /* * get_block_wrapper_attributes() forwards supports-generated classes and * inline styles (align, anchor, etc.) to the wrapper element automatically. */ $wrapper_attributes = get_block_wrapper_attributes( [ 'class' => 'wp-block-custom-plugin-author-bio-profile' ] ); ob_start(); ?> <div <?php echo $wrapper_attributes; // Already escaped by core. ?>> <?php if ( $show_avatar ) : ?> <div class="author-bio-profile__avatar"> <?php /* * Avatar output: replace the placeholder below with your * preferred avatar source (e.g., get_avatar(), ACF image field, * or a custom meta field). A hardcoded placeholder is intentional * here — this prompt contained no avatar source attribute. */ echo wp_kses_post( get_avatar( get_the_author_meta( 'user_email' ), 96, '', esc_attr( $author_name ) ) ); ?> </div> <?php endif; ?> <?php if ( $author_name ) : ?> <h3 class="author-bio-profile__name"> <?php echo esc_html( $author_name ); ?> </h3> <?php endif; ?> <?php if ( $bio_text ) : ?> <div class="author-bio-profile__bio"> <?php echo wp_kses_post( $bio_text ); ?> </div> <?php endif; ?> </div> <?php return ob_get_clean(); } ``` --- ### custom-plugin/src/blocks/author-bio-profile/edit.js ```js /** * Author Bio Profile — Edit Component * * @package CustomPlugin */ import { useBlockProps, RichText, InspectorControls, } from '@wordpress/block-editor'; import { PanelBody, ToggleControl, } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; /** * @param {Object} props Block props injected by the editor. * @param {Object} props.attributes Current attribute values. * @param {Function} props.setAttributes Attribute update dispatcher. * @return {JSX.Element} */ export default function Edit( { attributes, setAttributes } ) { const { authorName, bioText, showAvatar } = attributes; const blockProps = useBlockProps( { className: 'wp-block-custom-plugin-author-bio-profile', } ); return ( <> {/* ── Inspector Panel ─────────────────────────────────────── */} <InspectorControls> <PanelBody title={ __( 'Profile Settings', 'custom-plugin' ) } initialOpen={ true } > <ToggleControl label={ __( 'Show Avatar', 'custom-plugin' ) } help={ showAvatar ? __( 'Avatar is visible.', 'custom-plugin' ) : __( 'Avatar is hidden.', 'custom-plugin' ) } checked={ showAvatar } onChange={ ( value ) => setAttributes( { showAvatar: value } ) } /> </PanelBody> </InspectorControls> {/* ── Block Canvas ─────────────────────────────────────────── */} <div { ...blockProps }> { showAvatar && ( <div className="author-bio-profile__avatar"> {/* * Avatar preview in editor: * The PHP render callback calls get_avatar() at runtime. * This placeholder maintains layout parity in the editor. * Replace with a MediaUpload control if a custom image * attribute is added in a future iteration. */} <div className="author-bio-profile__avatar-placeholder" aria-hidden="true" style={ { width: 96, height: 96, borderRadius: '50%', background: '#e0e0e0', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 36, } } > 👤 </div> </div> ) } <RichText tagName="h3" className="author-bio-profile__name" placeholder={ __( 'Author Name…', 'custom-plugin' ) } value={ authorName } onChange={ ( value ) => setAttributes( { authorName: value } ) } allowedFormats={ [] } /* Plain name — no inline formatting */ /> <RichText tagName="div" className="author-bio-profile__bio" multiline="p" placeholder={ __( 'Write a short author bio…', 'custom-plugin' ) } value={ bioText } onChange={ ( value ) => setAttributes( { bioText: value } ) } allowedFormats={ [ 'core/bold', 'core/italic', 'core/link', ] } /> </div> </> ); } ``` --- ### custom-plugin/src/blocks/author-bio-profile/save.js ```js /** * Author Bio Profile — Save Component * * Render type: Dynamic. * The save function intentionally returns null. * * All front-end HTML is produced by the PHP render callback * (custom_plugin_render_author_bio_profile_block) registered in block.php. * WordPress stores only the block comment delimiter and serialized * attributes in post_content — no static HTML is saved to the database. * * Returning anything other than null here would cause block validation * errors on every page load for a dynamic block. */ export default function save() { return null; } ``` --- ## DEPRECATION FLAGS ``` NONE DETECTED — output follows current API. Confirmed clean on all Phase 6 checks: ✓ No wp.element.createElement usage ✓ register_block_type() points to block.json (WP 6.0+ pattern) ✓ save() returns null — correct for Dynamic render type ✓ useBlockProps present in edit component ✓ get_block_wrapper_attributes() used in PHP render callback ✓ apiVersion 3 throughout ``` --- ## INTEGRATION NOTES This scaffold assumes `@wordpress/scripts` (`wp-scripts`) as the build pipeline — your `package.json` entry point for this block should point to `src/blocks/author-bio-profile/index.js`, which should import and register the block via `registerBlockType` using the `block.json` metadata import pattern (`import metadata from './block.json'`). The `editorScript`, `style`, and `editorStyle` paths in `block.json` resolve relative to the compiled `build/` output directory, so confirm your `wp-scripts` output target matches that structure. The avatar display in the editor is a styled placeholder; the PHP callback resolves the actual avatar via `get_avatar()` at render time. If your use case requires a **user-selectable image** rather than the post author's Gravatar, add an `avatarId` attribute of type `number` and implement a `MediaUpload` control — this is flagged as a potential **`{CUSTOM_CONTROL_REQUIRED}`** item if that requirement surfaces. The `showAvatar` toggle will continue to gate visibility correctly regardless of which avatar source is used. --- ``` VERDICT: SCAFFOLD COMPLETE All phases passed. No deprecation flags. No ambiguous inputs. Output is production-ready pending your enqueue configuration and wp-scripts build setup. ```