Utilizing headless WordPress and React for an innovative web development approach, incorporating styles seamlessly in both the

I am looking to create a headless WordPress + React website. So far, I have successfully set up the "non-gutenberg" elements like the header and footer. Everything seems to be working fine on that front.

However, I am facing an issue with the styling of the posts content. I am able to retrieve the HTML styling from the JSON and apply it in React, which displays correctly on the frontend.

My dilemma lies in where to place the CSS for gutenberg. I want it to work seamlessly in the Gutenberg editor on the backend as well as on the frontend.

Here is an example of the JSON:

"content": {
"rendered": "\n<p class=\"has-text-color has-accent-color\">Some Random lorem ipsum in a paragraph</p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img src=\"http://bw.dev.local/wp-content/uploads/2020/05/Toronto.jpg\" alt=\"\" class=\"wp-image-13\" srcset=\"http://bw.dev.local/wp-content/uploads/2020/05/Toronto-1024x288.jpg 1024w, http://bw.dev.local/wp-content/uploads/2020/05/Toronto-300x84.jpg 300w, http://bw.dev.local/wp-content/uploads/2020/05/Toronto-768x216.jpg 768w, http://bw.dev.local/wp-content/uploads/2020/05/Toronto-1536x432.jpg 1536w, http://bw.dev.local/wp-content/uploads/2020/05/Toronto-1200x338.jpg 1200w, http://bw.dev.local/wp-content/uploads/2020/05/Toronto.jpg 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" /></figure>\n",
"protected": false
},

While I am sending the classes like has-text-color, has-accent-color, etc with the JSON data, I would prefer not to duplicate the CSS styling for both the frontend and backend.

Is there a solution where one set of CSS rules can cater to both aspects?

cssreactjswordpresswordpress-gutenberg

Answer №1

In my current thought process, I am considering the following workflow:

  1. Create blocks based on the official specification, which automatically generates a front-end stylesheet for the blocks
  2. Import that stylesheet into my React application*
  3. Within the React application, retrieve the WP content using the REST API (ensuring the Gutenberg blocks are exposed first, referenced here: https://gist.github.com/brisa-pedronetto/15aa9c7a855eccf78c717a2491372074)
  4. Translate the Gutenberg blocks into React Components (potentially leveraging an existing package for efficiency)
  5. Utilize the Gutenberg block names as classNames in React (as these names are originally used as classes in Gutenberg)

Therefore, a block could be stored as something similar to this:

<div class="wp-block-myblocks-foo">Foo</div>

And on the React side, it would resemble the following:

export default function Foo({ fooContent }) => (
  <div 
    className="wp-block-myblocks-foo"
    dangerouslySetInnerHTML={{__html: fooContent}}>
  </div>
)

The stylesheet structure would be like:

.wp-block-myblocks-foo {
  color: tomato;
}

* It could be beneficial to potentially upload the front-end stylesheet to a CDN during the generation process to further detach from WP?

Perhaps this approach is better suited for a server-side rendered (SSR) application as it involves pulling an external stylesheet.

In any case, I hope this concept can spark ideas for others tackling similar challenges!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Troubleshooting textarea resize events in Angular 6

In the development of my Angular 6 application, I have encountered an issue with a textarea element. When an error occurs, an asterisk should be displayed next to the textarea in the top-right corner. However, there is a gap between the textarea and the as ...

javascripthtmlcssangular6

Is it possible to configure mui v5 to display class names without the css-xxx prefix?

Working with mui has truly been a delightful experience. Each developer seems to have their own unique approach when it comes to styling and layout in react. The flexibility provided by mui must present quite the challenge for library developers. In custo ...

cssreactjsmaterial-ui

Attempting to assign a custom header value using the fetch function proves to be troublesome

I am facing an issue with sending API KEY in the headers of my request. I am using the fetch method within a Shopify module in React like this: fetch("https://shopify.mysite.fr/shopify/articles/1", { method: "GET", mode: "cors", headers: { "Cont ...

reactjsfetch

Trouble encountered with uploading files using Multer

I am facing an issue with uploading images on a website that is built using React. The problem seems to be related to the backend Node.js code. Code: const multer = require("multer"); // Check if the directory exists, if not, create it const di ...

reactjsnode.jstypescriptmulter

Compare and contrast the functions of scrollToIndex and manual scrolling in a React Native FlatList

Currently, my FlatList is set up to automatically scroll item by item based on a time series using the scrollToIndex function. However, I also want to allow users to manually scroll through the list and temporarily pause the automatic scrolling when this ...

javascriptreactjsreact-native

Iconic Navigation: Bootstrap 3 Navbar featuring Carousel

I'm currently in the process of developing a website using bootstrap3. Despite watching numerous tutorial videos, I am still facing challenges. One of my goals is to have the logo on the navbar aligning with the left side (which I've achieved ...

htmlcsstwitter-bootstrap-3

Clever method for enabling image uploads upon image selection without needing to click an upload button using JQuery

Is there a way to automatically upload the file without having to click the upload button? Detail : The code below shows an input field for uploading an image, where you have to select the file and then click the "Upload" button to actually upload it: & ...

javascriptphpjqueryhtmlcss

Issue with nested routes in React Router v6 - seeking assistance to resolve

I have set up the following routes in my index: <BrowserRouter> <Routes> <Route path="/" element={<App />} /> <Route path="admin" element={<AdminDashboard /> } /> ...

reactjsreact-router

Preserving the video's aspect ratio by limiting the width and height to a maximum of 100%

I am trying to integrate a YouTube video using their embed code in a "pop-up". However, I am facing an issue where the video does not resize to fit within the height of its parent. I want it to be constrained by the div#pop-up that contains the video. Curr ...

javascripthtmlcssvideo

What is the best way to align text on the right side of a mui AppBar/Toolbar component?

How can I modify the menu bar to include a log out button on the right side? Here is the current code: <main> <AppBar> <Toolbar> <Typography style={{ marginRight: 16 }} variant="h6" className=" ...

cssmaterial-uitailwind-css

REACT_APP environment variables not correctly loaded in .env file

Currently working on a React application and in need of fetching data from my API. I am looking to store the API url as an environment variable for security purposes. Despite having my .env file set up and dotenv installed, I am facing an issue where pro ...

reactjsundefined

Executing 'npx react-create-app my-app' resulted in an error and the app was not successfully created

While attempting to create a react app using npx, I encountered the following error. The command I used was: npx create-react-app my-app Below is the error message received: npm ERR! code ENOTFOUND <br> npm ERR! syscall getaddrinfo<br> npm ERR ...

reactjsnpmcreate-react-appnpx

Transferring numerous hefty JSON documents at once from React Native to Node.js

I am facing a challenge while attempting to upload multiple large JSON files from React-native to Node.js. The files are successfully uploaded, except for when the file size is large, causing it not to upload in one attempt. My suspicion is that: Due t ...

javascriptnode.jsreactjsreact-nativemulter

Struggling to align your image properly?

My attempt to center the image "Logo_Home.svg" on my page has failed, as it is currently positioned in the top left corner. Can anyone help me identify what I am doing wrong and guide me in the right direction? Thank you. EDIT 1 I realized that I forgot ...

htmlcsssvg

How to create a dynamic image list in Material-UI?

Is there a way to adjust the number of columns in imageList based on the screen width through a media query? I've been having trouble getting it to work correctly. For instance: <ImageList variant="masonry" cols={{ xl: 3, md: 2, sm: 1 }} ...

reactjsmaterial-uiresponsive

React component is experiencing compatibility issues with the MaterialUI component

Attempting to use MUI pre-made components in my React application, I have imported everything correctly. However, when running the app, only the elements appear in the browser without their styles. import React, { Component } from 'react'; impor ...

reactjsmui

Issue with webpack dev server not correctly generating output files to be included in index.html

Struggling to configure webpack and react with typescript without the complexity of CRA. The dev server isn't outputting files to index.html for viewing in the browser. I want to maintain a clean and simple structure, avoiding the multiple js scripts ...

reactjstypescriptwebpackwebpack-dev-server

Trouble with applying CSS class to checkboxlist

I am trying to display a border around each checkbox item in a checkboxlist. I believe that it can be achieved by setting the td cssclass as the checkboxlist saves items in td. However, the code I tried below is not working. Here is the ASPX code: < ...

c#cssasp.netcheckboxlist

Is it possible for me to create a hyperlink that directs to a javascript function?

Here is the code I am currently using: <input class="button" type="button" value="Mark" onClick="doCheck('mark');" \> However, I would like to replace the button with a hyperlink using the <a> tag. Is it possible to achieve ...

javascripthtmlcss

Having trouble getting React to run with npm start after adding react-router-dom?

After installing the 'react-router-dom' package, my project is failing to start and showing a warning message like this: https://i.sstatic.net/WfpUo.png Any suggestions on how I can troubleshoot and resolve this issue would be much appreciated. ...

reactjsnpm-start