From 3ab97be7404769c4154d4113024c7d3962d4756e Mon Sep 17 00:00:00 2001 From: Jared Rethman Date: Fri, 6 Nov 2020 09:04:48 -0600 Subject: [PATCH 1/6] Cleaned for prettier. Added blocks path to css test --- config/webpack.config.common.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) 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, From 9482468f005ddfb32c32718493a62add5b870d7f Mon Sep 17 00:00:00 2001 From: Jared Rethman Date: Fri, 6 Nov 2020 09:06:19 -0600 Subject: [PATCH 2/6] Renamed register.js to index.js. Destructed name from block.json --- config/webpack.settings.js | 3 ++- includes/blocks/example-block/index.js | 28 ++++++++++++++++++++++++++ 2 files changed, 30 insertions(+), 1 deletion(-) create mode 100644 includes/blocks/example-block/index.js 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/example-block/index.js b/includes/blocks/example-block/index.js new file mode 100644 index 0000000..d13067d --- /dev/null +++ b/includes/blocks/example-block/index.js @@ -0,0 +1,28 @@ +/** + * Example-block + * Custom title block -- feel free to delete + */ + +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { registerBlockType } from '@wordpress/blocks'; + +/** + * Internal dependencies + */ +import edit from './edit'; +import save from './save'; +import { name } from './block.json'; +import './index.css'; + +/** + * Register block + */ +registerBlockType(name, { + title: __('Example Block'), + description: __('An Example Block'), + edit, + save, +}); From 63aa0613e717a26bce3dcfceb5efb4b4b42241cb Mon Sep 17 00:00:00 2001 From: Jared Rethman Date: Fri, 6 Nov 2020 09:07:49 -0600 Subject: [PATCH 3/6] Added index.css for component completeness --- includes/blocks/example-block/block.json | 5 +++-- includes/blocks/example-block/index.css | 7 +++++++ 2 files changed, 10 insertions(+), 2 deletions(-) create mode 100644 includes/blocks/example-block/index.css 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/index.css b/includes/blocks/example-block/index.css new file mode 100644 index 0000000..d19369a --- /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: 0 1em; +} From c6cfe10c0d59a5e251d849678f4b8c097c592f41 Mon Sep 17 00:00:00 2001 From: Jared Rethman Date: Fri, 6 Nov 2020 09:14:33 -0600 Subject: [PATCH 4/6] Moved registration to init hook to fix enqueue _doing_it_wrong --- includes/blocks.php | 22 ++++++++++++++-------- 1 file changed, 14 insertions(+), 8 deletions(-) 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; } /** From 564a0dd6b97f314bb14ac95230aaeee89fec9e86 Mon Sep 17 00:00:00 2001 From: Jared Rethman Date: Fri, 6 Nov 2020 09:24:37 -0600 Subject: [PATCH 5/6] Destruct props vs const. Update markup to sync between block & markup. Using 5.5 new partial args --- includes/blocks/example-block/edit.js | 23 ++++++++++------------ includes/blocks/example-block/markup.php | 21 +++++++++++++++++--- includes/blocks/example-block/register.php | 12 ++++++++++- 3 files changed, 39 insertions(+), 17 deletions(-) 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/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(); } From 859c927bac0f99a8aeed7624306d5d5f8245db58 Mon Sep 17 00:00:00 2001 From: Jared Rethman Date: Fri, 6 Nov 2020 09:25:11 -0600 Subject: [PATCH 6/6] Cleanup --- includes/blocks/example-block/index.css | 2 +- includes/blocks/example-block/register.js | 29 ----------------------- includes/blocks/example-block/save.js | 4 +--- 3 files changed, 2 insertions(+), 33 deletions(-) delete mode 100644 includes/blocks/example-block/register.js diff --git a/includes/blocks/example-block/index.css b/includes/blocks/example-block/index.css index d19369a..8ac5fa2 100644 --- a/includes/blocks/example-block/index.css +++ b/includes/blocks/example-block/index.css @@ -3,5 +3,5 @@ */ .wp-block-example-block__title { border: 3px dashed #ccc; - padding: 0 1em; + padding: 1em; } diff --git a/includes/blocks/example-block/register.js b/includes/blocks/example-block/register.js deleted file mode 100644 index 60ef70f..0000000 --- a/includes/blocks/example-block/register.js +++ /dev/null @@ -1,29 +0,0 @@ -/** - * Example-block - * Custom title block -- feel free to delete - */ - -/** - * WordPress dependencies - */ -import { __ } from '@wordpress/i18n'; -import { registerBlockType } from '@wordpress/blocks'; - -/** - * Internal dependencies - */ -import edit from './edit'; -import save from './save'; -import json from './block.json'; - -const { name } = json; - -/** - * Register block - */ -export default registerBlockType(name, { - title: __('Example Block'), - description: __('An Example Block'), - edit, - save, -}); 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;