The easiest way to develop and release Gutenberg blocks (components) for WordPress
src/category/component/edit.js
Nest components inside the source folder for better organization. When WordPress adds custom category registration, I'll make it auto categorize blocks.
Remove babel polyfill by default https://github.com/crossfield/gutenblock/commit/0198244318d2f0113322d78a7414b054e3371fa0
install @babel/polyfill
and import in index.js in your plugin folder if you need it.
Rename Input
to InspectorInput
since it must be a direct child of Inspector
to work.
Add in <Repeat/>
component for easily adding unlimited items into your components:
import { Inspector, Repeat, RepeatInput } from 'gutenblock-controls';
export default () => (
<Inspector>
<Repeat title="Tabs" addNew="Add Tab" attribute="tabs">
<RepeatInput name="title" />
<Repeat title="Notes" addNew="Add Note" attribute="notes" max={3}>
<RepeatInput name="heading" />
</Repeat>
</Repeat>
</Inspector>
);
Render this inside your <Edit />
component and see what it does. Log props.attributes inside edit to see the state.
Make sure block.js
has:
tabs: {
type: 'array',
default: [],
},
Add a gutenblock.config.js
file in your blocks folder. It looks like this:
const path = require('path');
module.exports = {
resolve: {
alias: {
shared: path.resolve(__dirname, '../src/shared'),
},
},
module: {
rules: [
{
test: /\.css$/,
use: [require.resolve('style-loader'), require.resolve('css-loader')],
},
],
},
};
The configuration is the exact same as webpack with one extra piece: pass babelOptions
with plugins and presets like a babelrc has to customize the babel loader.
gutenblock watch docker
will now spin up wordpress for you, (Install gutenberg, enable plugin, boom) so you can just worry about development! If you have your environment already set, guteblock watch
works like normal.
first release