ravewebdev

<?php
/**
 * Customize the preview button in the WordPress admin to point to the headless frontend.
 *
 * @param  string  $link WordPress preview link.
 * @param  WP_Post $post Current post object.
 * @return string        The headless WordPress preview link.
 */
function set_headless_preview_link( string $link, \WP_Post $post ) {
	$frontend_url = 'https://my-headless-frontend.test';

ravewebdev

<?php
/**
 * Register custom settings with WordPress.
 */
function register_settings() {
	register_setting(
		'custom_settings_group',
		'custom_settings',
		[
			'description'       => esc_html__( 'Custom Settings', 'ravewebdev' ),

ravewebdev

ravewebdev

const FrontendTracker = ( props ) => {
    // Add the following in place of the `return` statement from Part 1, step 2.1.
    
    const saveUpdates = async () => {
        setLoading( true );
        setNotice( null );

        const response = await apiFetch( {
            path: `${initTracker.route}/${ dataAttributes.post_id }`,
            method: 'POST',

ravewebdev

const FrontendTracker = ( props ) => {
    // Add the following before the `return()` block from Part 1, step 2.1.

    const [ isLoading, setLoading ] = useState( false );
    const [ notice, setNotice ] = useState( null );

    useEffect( () => {
        if ( null === notice ) {
            return;
        }

ravewebdev

<?php
function localize_route() {    
    wp_localize_script( 'initiative-tracker-frontend-script', 'initTracker', [
        'route' => 'rave-initiative/v1/initiative',
    ] );
}
add_action( 'wp_enqueue_scripts', 'localize_route' );

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

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

ravewebdev

const trackerClass = '.wp-block-rave-initiative-tracker',
    trackers = document.querySelectorAll( trackerClass );

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

ravewebdev

const FrontendTracker = ( props ) => {
    const {
        dataAttributes,
    } = props;
    
    const [ attributes, setAttributes ] = useState( {
        block_id: 0,
    } );

    useEffect( () => {

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

function render_block( array $attributes ) : string {
    $id    = $attributes['id'];