ravewebdev

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

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

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

export default FrontendTracker;

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

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

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

ravewebdev

<?php
function check_initiative_permissions( WP_REST_Request $request ) : bool {
    $post_id = $request->get_param( 'id' ) ?? 0;

    if ( ! is_user_logged_in() ) {
        return false;
    }

    if ( current_user_can( 'edit_published_posts' ) ) {
        return true;

ravewebdev

<?php
function localize_route() {
    $nonce = wp_create_nonce( 'wp_rest' );
}
add_action( 'wp_enqueue_scripts', 'localize_route' );