📦 NEW: Canary testing

Author: ahmadawais

package.json

@@ -37,8 +37,9 @@
 		"beforepublish": "lerna bootstrap",
 		"publishScript": "bash tasks/publish.sh && echo 'Now update dependency packages.'",
 		"publishNPM": "bash tasks/publish.sh --npm-client=npm",
-		"publish-canary": "yarn && lerna bootstrap && lerna publish --independent --npm-client=npm --canary",
 		"lerna": "yarn && lerna updated && lerna bootstrap && lerna publish --independent --npm-client=npm",
-		"release": "yarn && lerna updated && lerna bootstrap && lerna publish --independent --npm-client=npm"
+		"publishCanary": "yarn && lerna bootstrap && lerna publish --independent --npm-client=npm --canary",
+		"release": "yarn && lerna updated && lerna bootstrap && lerna publish --independent --npm-client=npm",
+		"releaseCanary": "yarn && lerna updated && lerna bootstrap && lerna publish --independent --npm-client=npm --canary"
 	}
 }

packages/cgb-scripts/template/src/init.php

@@ -28,19 +28,15 @@
  * @since 1.0.0
  */
 function <% blockNamePHPLower %>_cgb_block_assets() { // phpcs:ignore
-	/**
-	 * Register block styles for both frontend + backend.
-	 */
+	// Register block styles for both frontend + backend.
 	wp_register_style(
 		'<% blockNamePHPLower %>-cgb-style-css', // Handle.
 		plugins_url( 'dist/blocks.style.build.css', dirname( __FILE__ ) ), // Block style CSS.
 		array( 'wp-editor' ), // Dependency to include the CSS after it.
 		null, // filemtime( plugin_dir_path( __DIR__ ) . 'dist/blocks.style.build.css' ) // Version: File modification time.
 	);
 
-	/**
-	 * Register block editor script for backend.
-	 */
+	// Register block editor script for backend.
 	wp_register_script(
 		'<% blockNamePHPLower %>-cgb-block-js', // Handle.
 		plugins_url( '/dist/blocks.build.js', dirname( __FILE__ ) ), // Block.build.js: We register the block here. Built with Webpack.
@@ -49,9 +45,7 @@ function <% blockNamePHPLower %>_cgb_block_assets() { // phpcs:ignore
 		true // Enqueue the script in the footer.
 	);
 
-	/**
-	 * Register block editor styles for backend.
-	 */
+	// Register block editor styles for backend.
 	wp_register_style(
 		'<% blockNamePHPLower %>-cgb-block-editor-css', // Handle.
 		plugins_url( 'dist/blocks.editor.build.css', dirname( __FILE__ ) ), // Block editor CSS.
@@ -67,12 +61,18 @@ function <% blockNamePHPLower %>_cgb_block_assets() { // phpcs:ignore
 	 * enqueued when the editor loads.
 	 *
 	 * @link https://wordpress.org/gutenberg/handbook/blocks/writing-your-first-block-type#enqueuing-block-scripts
+	 * @since 1.16.0
 	 */
-	register_block_type( 'cgb/block-<% blockName %>', array(
-		'style'         => '<% blockNamePHPLower %>-cgb-style-css', // Enqueue blocks.style.build.css on both frontend & backend.
-		'editor_script' => '<% blockNamePHPLower %>-cgb-block-js', // Enqueue blocks.build.js in the editor only.
-		'editor_style'  => '<% blockNamePHPLower %>-cgb-block-editor-css', // Enqueue blocks.editor.build.css in the editor only.
-	) );
+	register_block_type(
+		'cgb/block-<% blockName %>', array(
+			// Enqueue blocks.style.build.css on both frontend & backend.
+			'style'         => '<% blockNamePHPLower %>-cgb-style-css',
+			// Enqueue blocks.build.js in the editor only.
+			'editor_script' => '<% blockNamePHPLower %>-cgb-block-js',
+			// Enqueue blocks.editor.build.css in the editor only.
+			'editor_style'  => '<% blockNamePHPLower %>-cgb-block-editor-css',
+		)
+	);
 }
 
 // Hook: Block assets.

packages/create-guten-block/app/cli.js

@@ -29,14 +29,15 @@ module.exports = () => {
 			console.log( `\n    Only ${ chalk.green( '<block-name>' ) } is required.\n` );
 		} )
 		.option( '-d, --debug', 'Prints envinfo for debugging' )
+		.option( '-c, --canary', 'To use latest canary version for dev-testing' )
 		.description(
-			`CGB ${ chalk.dim(
-				'(create-guten-block)'
-			) } is a Zero-Config #OCJS for builing WordPress Gutenberg Blocks.`
+			`CGB ${ chalk.dim( '(create-guten-block)' ) } is a Zero-Config #OCJS for builing WordPress Gutenberg Blocks.`
 		)
 		.version( packageJson.version, '-v, --version' )
 		.parse( process.argv );
 
+	const isCanary = program.canary ? true : false;
+
 	// If no blockName.
 	if ( typeof blockName === 'undefined' ) {
 		// Maybe user asked for debug info.
@@ -60,5 +61,5 @@ module.exports = () => {
 		invalidBlockName();
 	}
 
-	return formatBlockName;
+	return { blockName: formatBlockName, isCanary: isCanary };
 };

packages/create-guten-block/app/npmInstallScripts.js

@@ -16,7 +16,7 @@ const fs = require( 'fs-extra' );
 const execa = require( 'execa' );
 const shell = require( 'shelljs' );
 
-module.exports = ( blockName, blockDir ) => {
+module.exports = ( blockName, blockDir, isCanary ) => {
 	shell.cd( blockDir );
 	shell.touch( 'package.json' );
 
@@ -33,20 +33,19 @@ module.exports = ( blockName, blockDir ) => {
 	};
 
 	// Write the package.json file.
-	fs.writeFileSync(
-		path.join( process.cwd(), 'package.json' ),
-		JSON.stringify( appPackage, null, 2 ) + '\n'
-	);
+	fs.writeFileSync( path.join( process.cwd(), 'package.json' ), JSON.stringify( appPackage, null, 2 ) + '\n' );
 
+	// Are we testing or not?
+	if ( isCanary ) {
+		// Install latest canary version of cgb-scripts for test in development of CGB.
+		return new Promise( async resolve => {
+			await execa( 'npm', [ 'install', 'cgb-scripts@canary', '--save', '--save-exact', '--silent' ] );
+			resolve( true );
+		} );
+	}
 	// Install latest exact version of cgb-scripts.
 	return new Promise( async resolve => {
-		await execa( 'npm', [
-			'install',
-			'cgb-scripts',
-			'--save',
-			'--save-exact',
-			'--silent',
-		] );
+		await execa( 'npm', [ 'install', 'cgb-scripts', '--save', '--save-exact', '--silent' ] );
 		resolve( true );
 	} );
 };

packages/create-guten-block/app/run.js

@@ -24,7 +24,7 @@ module.exports = async() => {
 	updateNotifier();
 
 	// 1. Set the CLI and get the blockName.
-	const blockName = cli();
+	const { blockName, isCanary } = cli();
 
 	// 2. Build the block directory path.
 	const blockDir = await getBlockDir( blockName );
@@ -36,17 +36,13 @@ module.exports = async() => {
 	// Init the spinner.
 	const spinner = ora( { text: '' } );
 
-	spinner.start(
-		`1. Creating the plugin directory called → ${ chalk.black.bgWhite(
-			` ${ blockName } `
-		) }`
-	);
+	spinner.start( `1. Creating the plugin directory called → ${ chalk.black.bgWhite( ` ${ blockName } ` ) }` );
 	await createPluginDir( blockName, blockDir );
 	spinner.succeed();
 
 	// 4. NPM install cgb-scripts.
 	spinner.start( '2. Installing npm packages...' );
-	await npmInstallScripts( blockName, blockDir );
+	await npmInstallScripts( blockName, blockDir, isCanary );
 	spinner.succeed();
 
 	// 5. Initialize the block.