Contact Card Block

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>';
        },
    ) );
} );