TailPress - Gutenberg Blocks with Laravel Mix

README.md

An example of creating custom blocks from a TailPress theme using Laravel Mix.

Webpack file

Example of a block in your webpack.mix.js file:

mix.js('/resources/blocks/example/block.js', '/blocks/example/block.build.js').react();

Dev-dependencies

• @babel/preset-react
• @wordpress/babel-preset-default

Tailwind

When using Tailwind, make sure the blocks folder is added to the content section of your tailwind.config.js file.

...
    content: [
        './resources/blocks/**/*.js'
    ],
...

Example of registering a block

add_action('init', function() {
  wp_register_script('theme-example-block', get_template_directory_uri() . '/blocks/example/block.build.js', array('wp-editor'));

  register_block_type('theme/example-block', [
    'editor_script' => 'theme-example-block',
  ]);
});

Example block:

const { registerBlockType } = wp.blocks;

const { __ } = wp.i18n;

registerBlockType(
    'theme/example-block',
    {
        title: __('Theme - Example Block'),
        icon: 'universal-access-alt',
        category: 'common',

        edit({ className }) {
            return (
                <p className={className}>Lorem ipsum</p>
            );
        },

        save() {
            return (
                <h1>Lorem ipsum</h1>
            );
        },
    }
);