gutenblock
gutenblock copied to clipboard
zackify
How to add css or scss?
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.
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 import './style.css' after you npm install style-loader and css-loader in your blocks directory.
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:
<div class="css-11gqdeq">Emotion test</div>
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?
we actually query the Wordpress database direct and pull out the block attributes to generate our page,
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:
<html content from WP>
{ "my-components/foo": { attributes } }
<html content from WP>
and then render in-place with:
<html content from WP>
require("my-components/foo")(attributes)
<html content from WP>
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:
- Edit React components visually, in-place (the other issue we talked about wrt editing nested fields in repeating components – I'm currently solving this with a generator function, but it's ugly)
- Save structured data
- Re-render components via React on frontend
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.
Here's the repeating function I'm using https://gist.github.com/braco/5c48ad162dcd27f072debc3967aee0b0
PS it looks like someone is working on a WP plugin for structured output: https://github.com/WordPress/gutenberg/issues/4763#issuecomment-382514026