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 ( -
+
setAttributes({ customTitle: title })} + value={currentTitle} + onChange={(customTitle) => setAttributes({ customTitle })} />
); }; // Set the propTypes -ExampleBockEdit.propTypes = { - ...editPropsShape, -}; +ExampleBockEdit.propTypes = editPropsShape; export default ExampleBockEdit; diff --git a/includes/blocks/example-block/index.css b/includes/blocks/example-block/index.css new file mode 100644 index 0000000..8ac5fa2 --- /dev/null +++ b/includes/blocks/example-block/index.css @@ -0,0 +1,7 @@ +/** + * Example Block + */ +.wp-block-example-block__title { + border: 3px dashed #ccc; + padding: 1em; +} diff --git a/includes/blocks/example-block/register.js b/includes/blocks/example-block/index.js similarity index 80% rename from includes/blocks/example-block/register.js rename to includes/blocks/example-block/index.js index 60ef70f..d13067d 100644 --- a/includes/blocks/example-block/register.js +++ b/includes/blocks/example-block/index.js @@ -14,14 +14,13 @@ import { registerBlockType } from '@wordpress/blocks'; */ import edit from './edit'; import save from './save'; -import json from './block.json'; - -const { name } = json; +import { name } from './block.json'; +import './index.css'; /** * Register block */ -export default registerBlockType(name, { +registerBlockType(name, { title: __('Example Block'), description: __('An Example Block'), edit, diff --git a/includes/blocks/example-block/markup.php b/includes/blocks/example-block/markup.php index db78939..5388bf8 100644 --- a/includes/blocks/example-block/markup.php +++ b/includes/blocks/example-block/markup.php @@ -3,9 +3,24 @@ * Example block markup * * @package TenUpScaffold\Blocks\Example + * + * @var $args */ +// Set defaults. +$args = wp_parse_args( + $args, + [ + 'attributes' => [ + 'customTitle' => __( 'Custom title default', 'tenup' ), + ], + 'class_name' => 'wp-block-tenup-example', + ] +); + ?> -

- -

+
+

+ +

+
diff --git a/includes/blocks/example-block/register.php b/includes/blocks/example-block/register.php index e45afee..8419c33 100644 --- a/includes/blocks/example-block/register.php +++ b/includes/blocks/example-block/register.php @@ -34,6 +34,16 @@ function register() { */ function render_block_callback( $attributes, $content, $block ) { ob_start(); - require TENUP_SCAFFOLD_BLOCK_DIR . 'example-block/markup.php'; + get_template_part( + 'includes/blocks/example-block/markup', + null, + [ + 'class_name' => 'wp-block-tenup-example', + 'attributes' => $attributes, + 'content' => $content, + 'block' => $block, + ] + ); + return ob_get_clean(); } diff --git a/includes/blocks/example-block/save.js b/includes/blocks/example-block/save.js index e603679..739dc6d 100644 --- a/includes/blocks/example-block/save.js +++ b/includes/blocks/example-block/save.js @@ -3,8 +3,6 @@ * * @return {null} Dynamic blocks do not save the HTML. */ -const ExampleBlockSave = () => { - return null; -}; +const ExampleBlockSave = () => null; export default ExampleBlockSave;