post_contentfield of the
wp_poststable in the database. Enough styling information is included in the HTML, in the form of classes or inline styles, to allow the page or post to be rendered in the browser accurately simulating the appearance as it was in the editor.
<Global />component. In most cases this should result in a fairly accurate rendering of the pages or posts in Frontity. However, the benefits of CSS in JS are lost with this approach and adding several style sheets to the project using the
<Global />component will potentially result in reduced performance of the site.
.cssfiles that the page builder uses, and also illustrate using a processor to dynamically process elements.
content.renderedproperty received from the REST API. We can therefore simply parse this HTML with the
html2reactcomponent to identify the elements we want to process.
webBrowserprocessor tests whether the element has the
has-browser-windowclass and if so executes the processor function which adds a top bar to the element to create the effect of being in a browser window:
<Topbar>component which renders the actual top-bar. It then adds it as the first element in the node's
childrenarray (using unshift). Adding it as the first element in the array ensures that it will appear above the remaining child elements, creating the browser window effect.
style.css. These files can be found in the
./wp-includes/css/dist/block-librarydirectory of your WordPress installation. Copy them across to a location in your Frontity theme, e.g. to a sub-directory called
index.jsfile of your Frontity theme and add them using the
frontend.min.CSSfile which is located in the
wp-content/uploads/elementor/css. In particular you will need
global.cssfrom this directory.
<Theme>component in your theme's
wp-content/uploads/elementor/cssdirectory. These will usually each be specific to a particular page or post.
<body>tag. However, you can add these same classes to the
<body>tag of your Frontity project using the
<Head>component into your theme's
index.jsfile and then use it in your main
<Theme>component passing it a
bodyAttributesprop containing an object with the classes that you want in your