How to add css or scss? #13
Comments
|
You can use css-in-js libraries like emotion or styled-components without any extra work. If you want to import normal CSS files, you can create a gutenblock.config.js inside your blocks folder like this: const path = require('path');
module.exports = webpack => ({
module: {
rules: [
{
test: /\.css$/,
use: [require.resolve('style-loader'), require.resolve('css-loader')],
},
],
},
});Now you can Gutenblock handles everything for you and its meant to load all code through it, instead of registering wordpress hooks :) Hope that makes sense! |
|
@zackify - how does emotion et al work for you? Emotion works in editor, but WP saves the generated css className and spits out HTML without the actual CSS itself:
|
|
So I haven’t thought about this issue, because I was referring to using css inside of the editor itself. In our projects, we actually query the Wordpress database direct and pull out the block attributes to generate our page, so we aren’t using the save method. I’d be open to figuring out a better way. Maybe some sort of css loader that injects the styles from emotion inline or something? |
You're running SQL and rebuilding React from the attributes? |
|
Yes, we have a node server that pulls out the blocks and returns it to our react front end. |
|
That's interesting – I'm using Gatsby, which is querying WP's API and pulling in the HTML via the "rendered" API field. Re-rendering the React components for the front end would be ideal. Is anything you're doing composable enough to share or is it all too custom? The way I was thinking it might be done is to put all of the components in a yarn/npm module and then save the module location as a key, as in: and then render in-place with: There are WP hooks for inserting content into the API, so I'm assuming the pre-rendered content could be inserted there. |
|
Easier way is to grab the blocks as json, i made a parser myself but oh man is the code a little crazy. I could share it. It's a node script that takes the html from wordpress and turns it into a json array of blocks. Then I have a react component that maps over the array, and renders the component that matches the name of the block. I could probably release the parser script even though I think it's really ugly. I have tests in place testing many scenarios, so even though I hate the code, it does work and is fully tested. |
|
I'm sure the community would appreciate it, even if it were just to see an example. The eventual ideal would be:
This would also get around the god awful "external source has changed" errors in Gutenberg when it detects minor component-driven HTML changes |
|
This weekend I'll make a new repo with that node script and explain how we dont use the save method and have a block renderer example as well, that pulls from the node api with the json. |
|
@zackify you're the man!!! |
|
Here's the repeating function I'm using PS it looks like someone is working on a WP plugin for structured output: |
Hi Zack,
Looking at the examples in this repo I couldn't find any blocks with styles.
I would like to enqueue some structure styles to my block both on the editor and front-end, how is that be done?
Thanks in advance.
The text was updated successfully, but these errors were encountered: