ravewebdev

registerBlockType( 'rave/initiative-tracker', {
    title: __( 'Initiative Tracker', 'initiative-tracker' ),
    attributes: {
        id: {
            type: 'string',
            default: '',
        },
    },
} );

ravewebdev

registerBlockType( 'rave/initiative-tracker', {
    // Code from 1.1.1. and other block properties here...
    edit: ( props ) => {
        const {
            attributes: {
                id,
            },
            clientId,
            setAttributes,
        } = props;

ravewebdev

<?php
register_block_type( 'rave/initiative-tracker', array(
    'editor_script'   => 'initiative-tracker-editor-script',
    'editor_style'    => 'initiative-tracker-editor-style',
    'style'           => 'initiative-tracker-style',
    'render_callback' => __NAMESPACE__ . '\render_block',
) );

ravewebdev

<?php
function render_block( array $attributes ) : string {
    $id    = $attributes['id'];
    $class = 'wp-block-rave-initiative-tracker';

    ob_start();
    ?>

    <div
        class="<?php echo esc_attr( $class ); ?>"

ravewebdev

const FrontendTracker = ( props ) => {
    const {
        dataAttributes,
        className,
    } = props;
};

export default FrontendTracker;

ravewebdev

const FrontendTracker = ( props ) => {
    // Code from 2.1.1. here...
    const [ attributes, setAttributes ] = useState( {
        block_id: 0,
    } );

    useEffect( () => {
        setAttributes( {
            ...dataAttributes,
        } );

ravewebdev

const FrontendTracker = ( props ) => {
    // Code from 2.1.1.-2.1.2. here...
    return (
        <div className={ className }>
            <!-- Call components to display your block here... -->
        </div>
    );
};

ravewebdev

const trackerClass = 'wp-block-rave-initiative-tracker';
const trackers     = document.querySelectorAll( `.${trackerClass}` );

trackers.forEach( ( tracker ) => {
    const attributes = {
        block_id: tracker.dataset.id,
        post_id: parseInt( tracker.dataset.post_id, 10 ),
    };
} );

ravewebdev

trackers.forEach( ( tracker ) => {
    // Code from 2.2.1. here...
    render(
        <FrontendTracker
            dataAttributes={ attributes }
            className={ trackerClass }
        />,
        tracker
    );
} );

ravewebdev

<?php
register_rest_route( 'rave-initiative/v1', '/initiative/(?P<id>[\d]+)', [
    'methods'             => WP_REST_SERVER::EDITABLE,
    'callback'            => 'update_initiative',
    'permission_callback' => 'check_initiative_permissions',
] );