# Gutenberg Blocks
[[Wordpress]] [[PHP]]
[[VIDEO - Udemy - Gutenberg Blocks for Wordpress and React Developers]]
## Overview
Github: [GitHub - WordPress/gutenberg: The Block Editor project for WordPress and beyond. Plugin is available from the official repository.](https://github.com/WordPress/gutenberg)
Gutenberg blocks are dynamic blocks used in the wordpress editor. It uses a combination of PHP backend code and react components to allow for a dynamic editing workflow. Each block has a set of attributes, and instances of the block in pages will save those attributes to the database.
The JS side exposes a couple of react components for editing a block, saving a block to rendered HTML, and additional widgets that can be used to configure the block itself.
The PHP side is responsible for registering the block and its [attributes](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/) (as well as their types).
## Notes about developing with Gutenberg blocks
### Registering a block PHP side
A block is registered within a Wordpress plugin, using the register_block_type function, either by passing a full array, or by using a block.json file. This process is described in the [Block Editor Handbook](https://developer.wordpress.org/block-editor/getting-started/create-block/wp-plugin/).
We have a helper class `AbstractBlock.php` that provides an easy way to register a block.
### Registered a block JS side
The javascript for the block is built and exported by webpack using a custom `entry`:
```json
entry: {
'hero-slide-editor': path.resolve(__dirname, 'hero-slide/editor.js'),
'hero-button-editor': path.resolve(__dirname, 'hero-slide/button.js'),
},
```
### Adding CSS
Adding CSS is not that easy. There are a bunch of recommendations here: [Use styles and stylesheets | Block Editor Handbook | WordPress Developer Resources](https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/applying-styles-with-stylesheets/) (Which I should probably have looked at first).
I tried to import SCSS files into the javascript of the blocks,
and adding proper rules to webpack.config.js . This did lead to the scss getting compiled, but it was included in the JS, not as a separate file.
```js
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: ['babel-loader'],
},
{
test: /\.s[ac]ss$/i,
use: [
'style-loader', // creates style nodes from JS strings
{
loader: 'css-loader', // translates CSS into CommonJS
options: {
importLoaders: 1,
},
},
'postcss-loader', // post process the compiled CSS
// Compiles Sass to CSS 'sass-loader',
],
},
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
],
}
```
I tried reverting to a wp-scripts setup that uses a block.json. This does properly compile CSS into a target file, but it seems to be oriented towards single block development. A test branch is [hack/2022-05-27/try-to-use-wp-scripts-for-heroes-blocks](https://github.com/wesen/ttc/tree/hack/2022-05-27/try-to-use-wp-scripts-for-heroes-blocks). This led me to investigate if you can compile multiple blocks at once using wp-scripts, since for example gutenberg itself seems to be doing that.
- [Possible to use @wordpress/create-block with multiple blocks? - WordPress Development Stack Exchange](https://wordpress.stackexchange.com/questions/390282/possible-to-use-wordpress-create-block-with-multiple-blocks)
The raw version would be of course to enqueue the CSS files by hand, as shown in [Enqueueing Scripts and Styles for Gutenberg Blocks - Jason Yingling](https://jasonyingling.me/enqueueing-scripts-and-styles-for-gutenberg-blocks/) .
We could also of course try styled components, but that's probably even worse when considering how blocks get saved by PHP.
I try to load my own css with the following code, to see how far I get:
```php
$filename = plugin_dir_path(TTC_PLUGIN_FILE)."/blocks/css/$name-editor.css";
if (file_exists($filename)) {
error_log("register editor style $name");
wp_register_style(
"$name-editor-style",
plugins_url("blocks/$name-editor.css", TTC_PLUGIN_FILE),
[],
(string)filemtime($filename)
);
}
$filename = plugin_dir_path(TTC_PLUGIN_FILE)."/blocks/css/$name.css";
if (file_exists($filename)) {
wp_register_style( "$name-style",
plugins_url("blocks/$name.css", TTC_PLUGIN_FILE),
[],
(string)filemtime($filename)
);
}
register_block_type("ttc/$name", [
'editor_script' => "$name-script",
'editor_style' => "$name-editor-style",
'style' => "$name-style",
'attributes' => $this->attributes,
'render_callback' => static::class.'::RenderContent',
]);
```
Overall, inline styles are probably the best because we are using them cross plugin anyway. The problem is that we can't do inline media queries with inline styles. Let's ignore that for now and see if we get things working.
### Building multiple blocks at once
This is not well supported by `create-guten-block` or the standard wp-scripts / block.json workflow.
## Links
- PR for a component that uses [[emotion styled-components]]: [Components: Add Card Component by ItsJonQ · Pull Request #17963 · WordPress/gutenberg · GitHub](https://github.com/WordPress/gutenberg/pull/17963)