# Contact Card Block

> Registers a "Contact Card" block, rendered on the server, where you type a name, role, phone, email and address in the sidebar and get a tidy card with tap-to-call and email links.

- Type: PHP
- Runs: Run everywhere
- Category: [Block Editor](https://wpide.com/library/category/gutenberg/)
- Tags: blocks, contact, dynamic-block
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/block-contact-card/

## Code

```php
add_action( 'init', function () {
    wp_register_script( 'wpide-block-contact-card', false, array( 'wp-blocks', 'wp-element', 'wp-block-editor', 'wp-components', 'wp-server-side-render' ), '1.0', true );
    wp_add_inline_script( 'wpide-block-contact-card', <<<'JS'
( function ( wp ) {
    var el = wp.element.createElement;
    var fields = [ [ 'name', 'Name' ], [ 'role', 'Role or title' ], [ 'phone', 'Phone' ], [ 'email', 'Email' ], [ 'address', 'Address' ] ];
    var attributes = {};
    fields.forEach( function ( f ) { attributes[ f[0] ] = { type: 'string', default: '' }; } );

    wp.blocks.registerBlockType( 'wpide/contact-card', {
        apiVersion: 3,
        title: 'Contact Card',
        icon: 'id',
        category: 'widgets',
        attributes: attributes,
        edit: function ( props ) {
            return el( 'div', wp.blockEditor.useBlockProps(),
                el( wp.blockEditor.InspectorControls, null,
                    el( wp.components.PanelBody, { title: 'Contact details' },
                        fields.map( function ( f ) {
                            var Control = f[0] === 'address' ? wp.components.TextareaControl : wp.components.TextControl;
                            return el( Control, { key: f[0], label: f[1], value: props.attributes[ f[0] ], onChange: function ( v ) { var a = {}; a[ f[0] ] = v; props.setAttributes( a ); } } );
                        } )
                    )
                ),
                props.attributes.name ? el( wp.serverSideRender, { block: 'wpide/contact-card', attributes: props.attributes } ) : el( 'p', null, 'Fill in the contact details in the block settings.' )
            );
        },
        save: function () { return null; }
    } );
} )( window.wp );
JS
    );

    $fields = array( 'name', 'role', 'phone', 'email', 'address' );

    register_block_type( 'wpide/contact-card', array(
        'api_version'           => 3,
        'title'                 => 'Contact Card',
        'category'              => 'widgets',
        'editor_script_handles' => array( 'wpide-block-contact-card' ),
        'attributes'            => array_fill_keys( $fields, array( 'type' => 'string', 'default' => '' ) ),
        'render_callback'       => function ( $a ) {
            if ( empty( $a['name'] ) ) {
                return '';
            }
            $html  = '<div ' . get_block_wrapper_attributes( array( 'class' => 'wpide-contact-card h-card', 'style' => 'padding:1.25em;border:1px solid currentColor;border-radius:8px' ) ) . '>';
            $html .= '<p class="p-name" style="margin:0;font-weight:700;font-size:1.15em">' . esc_html( $a['name'] ) . '</p>';
            if ( '' !== $a['role'] ) {
                $html .= '<p class="p-job-title" style="margin:.2em 0 .8em;opacity:.8">' . esc_html( $a['role'] ) . '</p>';
            }
            if ( '' !== $a['phone'] ) {
                $html .= '<p style="margin:.3em 0"><a class="p-tel" href="tel:' . esc_attr( preg_replace( '/[^0-9+]/', '', $a['phone'] ) ) . '">' . esc_html( $a['phone'] ) . '</a></p>';
            }
            if ( is_email( $a['email'] ) ) {
                $html .= '<p style="margin:.3em 0"><a class="u-email" href="mailto:' . esc_attr( antispambot( $a['email'] ) ) . '">' . esc_html( antispambot( $a['email'] ) ) . '</a></p>';
            }
            if ( '' !== $a['address'] ) {
                $html .= '<p class="p-adr" style="margin:.3em 0">' . nl2br( esc_html( $a['address'] ) ) . '</p>';
            }
            return $html . '</div>';
        },
    ) );
} );
```

## Notes

Uses semantic h-card markup; style it with the .wpide-contact-card class.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Contact Card Block" in its snippet library and add it in one click; or create a new PHP snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/