Layout Rest Api actions

In Advanced Views, every Layout is a smart entity, natively supporting the WordPress Rest Api.

It enables you to create components that can send data and/or update themselves in the background without refreshing the page.

Server side:

To use this feature, we override the get_rest_api_response() method inside the Layout Controller instance. The return value should be an array, which will be passed as JSON to the client.

Within the callback, you can use any WordPress functions. Furthermore, you can employ PHP-DI to get direct access to your theme classes.

Client side:

On the client side, as usual, we send requests to the /wp-json endpoint.

1. Rest Api vs. Ajax

Not sure about the difference between WordPress Ajax and REST API?

In most cases, we recommend using the REST API. It is much faster compared to the traditional admin-ajax.php requests, as it skips loading unnecessary WordPress parts - while still making all necessary WordPress functions available - as it is called during the WordPress init action.

If you need to work with authorized users, Ajax may be the simpler option, as it respects the auth cookie within requests; therefore, it doesn't require Request Authentication parts.

2. Layout Rest Api example

JavaScript code

Incorporate the following function into your Post Selection's JavaScript code:

async function makeRequest(postId, value) {
// 1. we use '/wp-json/advanced_views/v1/layout/' for Layout, 
// and put the Layout ID at the end (copy it from the shortcode)

    await fetch('/wp-json/advanced_views/v1/layout/{6630e2da1953e}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
        // todo your arguments here
           'postId': postId,
            'value': 'value,
        }),
    }).then(response => response.json())
        .then((response) => {
            // todo process response, the variable already contains the parsed object 
            console.log('Request complete', response);
        })
        .catch(error => () => {
            console.error('Request error:', error)
        });
}

Layout Controller code

Incorporate the following function into your Layout Controller:

<?php

declare( strict_types=1 );

use Org\Wplake\Advanced_Views\Bridge\Controllers\Layout\Layout_Controller_Base;

return new class extends Layout_Controller_Base {
// ..other methods go here
	/**
	 * @return array<string,mixed>
	 */
	public function get_rest_api_response( WP_REST_Request $request ): array {
		$request_arguments = $request->get_json_params();
		// todo process the request, based on the query arguments available inside the array

		// todo you can use the container if you need to access your theme classes
		// $this->get_container();

		return [
			'my_message'  => 'everything is fine',
			'my_variable' => 'my value',
		];
	}
};

3. Request Authentication

The REST API is available to both authorized users and guests; however:

For security reasons, by default the REST API ignores the WordPress auth cookie and treats any request as if it comes from an unauthorized user.

It means wp_get_current_user()->exists() method inside the request will return false.

If you need to keep the user authorized inside the request, you must create a wp_rest nonce and pass it in the X-WP-Nonce header, as it described in the official WordPress Developer Documentation. In this case, WordPress will respect the user's auth cookie.

Below, we provide the auth example adopted for use inside the Advanced Views:

3.1) Layout Controller: create and pass nonce to the template

// ...
/**
 * @return array<string,mixed>
 */
public function get_variables(): array {
  return [
    "my_block_nonce" => wp_create_nonce( 'wp_rest' ),
  ];
}
// ...

3.2) Layout template: define nonce as a JavaScript variable

<!-- ... -->
<script>
window.my_block_nonce = "{{ my_block_nonce }}";
</script>
<!-- ... -->

3.3) Layout JavaScript: use nonce in the request headers

// ...
await fetch('/wp-json/advanced_views/v1/{view|card}/{6630e2da1953e}', {
 method: 'POST',
 headers: {
  'Content-Type': 'application/json',
  'X-WP-Nonce': window.my_block_nonce,
},
// ...