example-implementations.md

Example implementations

The PHP server-side comes with some example implementations so you can better understand how things work.

All the example implementations contain a client-side (TypeScript) implementation, too:

{% page-ref page="../typescript-development/example-implementations.md" %}

Menu page

When opening your WordPress wp-admin and activate the plugin, you will notice a new page on the left sidebar with the name of your plugin. This example is located in src/inc/view/menu/Page.php and initialized through Core.

Additionally it enqueues the following scripts in Assets:

$handle = WPRJSS_SLUG . '-admin';
$this->enqueueScript($handle, 'admin.js', $scriptDeps);
$this->enqueueStyle($handle, 'admin.css');

Following, the TypeScript entrypoint from src/public/ts/admin.tsx is executed when visiting that page. Opening that menu page, some notices and a todo list is visible (under the scenes it uses a MobX store). Additionally the Hello World REST endpoint (src/inc/rest/HelloWorld.php) can be requested through a link. See also this.

Widget

In WordPress widgets section you should also notice a new widget "React Demo Widget". If a page contains the widget, the TypeScript coding from src/public/ts/widget.tsx is executed. It simply shows a "Hello World" ReactJS component.

The widget is initialized through Core#widgets_init and enqueued in Assets. See also this.

REST endpoint

All your REST API endpoints should be put into src/inc/rest. A Hello World endpoint is implemented in src/inc/rest/HelloWorld.php. It follows the standard WP REST API specification defined here.

So, if you request a GET (simply open in web browser) of localhost:{your-port}/wp-json/your-plugin/hello-world you will get a response. See also this.

{% hint style="warning" %} The API endpoints does not automatically ensure a logged-in user because it relies not on the current logged in user. It is handled through the so-called _wpnonce. Read more about it here. {% endhint %}