Frontend-Backend Interaction
The WordPress core is loaded through the frontend.
Rendering lifecyle
Server render the
dist > index.php
. That include<html>
language attributes, thewp_head()
/wp_footer()
functions, css in inline styles, the preloader HTML and the consent box HTML.main.min.js is loaded
The Cache API from Service Worker API is init by the Cache Concept (or not)
The Loader Concept and App Rendering are initialized.
App Rendering Rendering the app work in 2 steps behind and independently the Loader Concept. In other hand, just know that the preloader given by the Loader Concept don't finish as long the step 2 is not pass:
Step 1 For render the app, we need to make sure we have all data like routes, medias to download, etc. Pending the mounting, the app will render first a waiting component behind the preloader for wait your data. When the app have all your data, the app will replace the waiting component for all components required for the requested page.
By default, the app don't wait for data because we injecting this from server-side instead of fetching it, but if you need to fetch your data and wait it, you need to make sure in the code below that setLoaded(true)
will be called after your fetches. Put a look on src > front > js > App.jsx
, you'll find this code:
Step 2
We have all data, we can technically render our app, but before render it completely, we'll make sure the Scroller
component is ready. Then, the rest of the page inner scroller will be render.
At the same time with the step 2, a global variable window.gscroll
is associated to the ScrollSmoother.create()
instance. This global variable is require for pass the preloader animation.
Routes
Routes are assembly in a variable named ROUTES
from src > back > theme > functions.php
and they are mounted in src > front > js > App.jsx.
Routes for post
and page
post type are done by default.
Each route need an array argument with these parameters:
id string|int, required. Default is admin page id. You can have custom value.
routeName string, required. Default is admin page title. You can have custom value.
path string, required. Default admin page relative path without
/admin
. You can have custom value.type string, required. Default is post type. You can have custom value.
seo array, required. Default is ACF return or empty if the SEO module is not set. You can write your own array with these non-require parameters:
stop_indexing
title
description
og_title
og_description
og_image
pageTitle
og_type
componentName string, required. Default is ACF return or
DefaultPage
if the component name module is not set. You can use ACF hooks to auto-populate your component name module or if you don't have the module, you can force it like we do for single post routes:extraDatas array, optional. You can write what you want. If you put a look on the code above, we have added the published date, the modified date and the author URL for a post. At the same time, we have added an
og_type
parameter/valuearticle
attached to the seo that you can feel it like an extra data. This combination allowing us to populate anarticle:published
metadata and other metadatas for a specificog_type
insrc > front > js > components > Meta.jsx
Each Component composing your routes need to be mapped in the ecosystem. To map components, add them to the componentMap object in src > front > js > App.jsx
Share data from backend to frontend
In src > back > theme > functions.php
, use:
You can now use MY_VARIABLE
in your javascript files.
REST and Ajax Requests
Using
SYSTEM.restPath
will return the string/admin/wp-json/
.restRequests
function is ready insrc > back > theme > function.php
.Use
SYSTEM.ajaxPath
for call theadmin-ajax.php
of WordPress.ajaxRequests
function is ready insrc > back > theme > function.php
.
Last updated