diff --git a/config/webpack.config.common.js b/config/webpack.config.common.js index 099a508..964436a 100644 --- a/config/webpack.config.common.js +++ b/config/webpack.config.common.js @@ -88,7 +88,10 @@ module.exports = { // Styles. { test: /\.css$/, - include: path.resolve(process.cwd(), settings.paths.src.css), + include: [ + path.resolve(process.cwd(), settings.paths.src.base), + path.resolve(process.cwd(), settings.paths.src.blocks), + ], use: [ { loader: MiniCssExtractPlugin.loader, diff --git a/config/webpack.settings.js b/config/webpack.settings.js index d72f5e7..51dd0e7 100644 --- a/config/webpack.settings.js +++ b/config/webpack.settings.js @@ -15,7 +15,7 @@ module.exports = { 'styleguide-style': './assets/css/styleguide/styleguide.css', // Blocks - 'example-block': './includes/blocks/example-block/register.js', + 'example-block': './includes/blocks/example-block/', }, filename: { js: 'js/[name].js', @@ -24,6 +24,7 @@ module.exports = { paths: { src: { base: './assets/', + blocks: './includes/blocks/', css: './assets/css/', js: './assets/js/', }, diff --git a/includes/blocks.php b/includes/blocks.php index e352dc2..73f10db 100644 --- a/includes/blocks.php +++ b/includes/blocks.php @@ -26,16 +26,23 @@ function setup() { // Require custom blocks. require_once TENUP_SCAFFOLD_BLOCK_DIR . '/example-block/register.php'; - // Filter the plugins URL to allow us to have blocks in themes with linked assets. i.e editorScripts - add_filter( 'plugins_url', $n( 'filter_plugins_url' ), 10, 2 ); + add_filter( 'init', $n( 'register' ) ); - // Call block register functions. - Example\register(); +} +/** + * Register Blocks. + */ +function register() { + // Filter the plugins URL to allow us to have blocks in themes with linked assets. i.e editorScripts + add_filter( 'plugins_url', __NAMESPACE__ . '\filter_plugins_url', 10, 2 ); + // Register Blocks + Example\register(); + // <---- Add blocks here... // Remove the filter after we register the blocks - remove_filter( 'plugins_url', $n( 'filter_plugins_url' ), 10, 2 ); - + remove_filter( 'plugins_url', __NAMESPACE__ . '\filter_plugins_url', 10 ); } + /** * Filter the plugins_url to allow us to use assets from theme. * @@ -46,8 +53,7 @@ function setup() { */ function filter_plugins_url( $url, $path ) { $file = preg_replace( '/\.\.\//', '', $path ); - $url = trailingslashit( get_stylesheet_directory_uri() ) . $file; - return $url; + return trailingslashit( get_stylesheet_directory_uri() ) . $file; } /** diff --git a/includes/blocks/example-block/block.json b/includes/blocks/example-block/block.json index 3bbebf2..ad1ce40 100644 --- a/includes/blocks/example-block/block.json +++ b/includes/blocks/example-block/block.json @@ -9,5 +9,6 @@ "type" : "string" } }, - "editorScript": "file:../../../dist/js/example-block.js" -} \ No newline at end of file + "editorScript": "file:../../../dist/js/example-block.js", + "editorStyle": "file:../../../dist/css/example-block.css" +} diff --git a/includes/blocks/example-block/edit.js b/includes/blocks/example-block/edit.js index 7df8302..bdcac13 100644 --- a/includes/blocks/example-block/edit.js +++ b/includes/blocks/example-block/edit.js @@ -16,26 +16,23 @@ import { editPropsShape } from './props-shape'; * @param {Object} props The block props * @return {Function} Render the edit screen */ -const ExampleBockEdit = (props) => { - const { - attributes: { customTitle }, - className, - setAttributes, - } = props; - +const ExampleBockEdit = ({ + attributes: { customTitle: currentTitle }, + className, + setAttributes, +}) => { return ( -