Merge pull request #1023 from Kit/refactor-frontend-scss

Refactor Frontend SCSS

Author: n7studios

DEVELOPMENT.md

@@ -60,11 +60,17 @@ Typically, packages listed in this section would be internal development tools f
 - PHPStan
 - Codeception
 
+### Build
+
+Run `npm run build` to compile frontend CSS and JS in one step.
+
 ### CSS
 
 Run `npm run watch:css` to compile frontend CSS to `resources/frontend/css/frontend.css` when working on SCSS in the `resources/frontend/scss` folder.
 
-`resources/frontend/css/frontend.css` is excluded from the repo by `.gitignore`; it is built before tests and deployment automatically using GitHub actions.
+### JS
+
+Run `npm run watch:js` to compile frontend JS to `resources/frontend/js/dist/frontend-min.js` when working on JS in the `resources/frontend/js` folder.
 
 ## Committing Work
 

SETUP.md

@@ -94,7 +94,8 @@ In the Plugin's directory, at the command line, run `npm install`.
 This sets up:
 - JS linting / coding standards using WordPress recommended configurations (https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/#lint-js)
 - SCSS and CSS linting / coding standards using WordPress recommended configurations (https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/#lint-style)
-- SASS compilation
+- JS compilation and minification
+- SASS compilation and minification
 
 ### Configure wp-config.php
 

TESTING.md

@@ -32,10 +32,23 @@ The following Composer commands can be used:
 | `composer watch-css` | `composer watch-css` | Builds the frontend CSS file when changes are made to SCSS files |
 | `composer js-coding-standards` | `composer lint-js` | Runs WordPress JS Coding Standards on JS files |
 | `composer fix-js-coding-standards` | `composer fix-js` | Fixes JS files to meet WordPress JS Coding Standards |
+| `composer build-js` | `composer build-js` | Builds the frontend JS file |
+| `composer watch-js` | `composer watch-js` | Builds the frontend JS file when changes are made to frontend JS files |
+| `composer build` | `composer build` | Builds frontend CSS and JS |
 | `composer static-analysis` | `composer phpstan` | Runs PHPStan static analysis with increased memory limit |
 | `composer test` | `composer test` | Builds and runs end-to-end tests with `fail-fast` enabled |
 | `composer test-integration` | `composer test-integration` | Builds and runs integration tests with `fail-fast` enabled |
 
+The following npm commands can be used, if preferred:
+
+| Command | Description |
+|---------|-------------|
+| `npm run build:css` | Builds the frontend CSS file |
+| `npm run watch:css` | Builds the frontend CSS file when changes are made to SCSS files |
+| `npm run build:js` | Builds the frontend JS file |
+| `npm run watch:js` | Builds the frontend JS file when changes are made to frontend JS files |
+| `npm run build` | Builds frontend CSS and JS |
+
 ## Write (or modify) a test
 
 If your work creates new functionality, write a test.

composer.json

@@ -31,8 +31,14 @@
         "watch-css": "npm run watch:css",
         "lint-css": "npm run lint:css",
         "fix-css": "npm run fix:css",
+        "build-js": "npm run build:js",
+        "watch-js": "npm run watch:js",
         "lint-js": "npm run lint:js",
         "fix-js": "npm run fix:js",
+        "build": [
+            "npm run build:css",
+            "npm run build:js"
+        ],
         "phpstan": "vendor/bin/phpstan analyse --memory-limit=1250M",
         "php-coding-standards": "vendor/bin/phpcs ./ -s -v",
         "fix-php-coding-standards": "vendor/bin/phpcbf ./ -s -v",

includes/blocks/class-convertkit-block-broadcasts.php

@@ -115,9 +115,12 @@ public function enqueue_scripts() {
 		// Get ConvertKit Settings.
 		$settings = new ConvertKit_Settings();
 
-		wp_enqueue_script( 'convertkit-' . $this->get_name(), CONVERTKIT_PLUGIN_URL . 'resources/frontend/js/broadcasts.js', array(), CONVERTKIT_PLUGIN_VERSION, true );
+		// Enqueue frontend JS.
+		convertkit_enqueue_frontend_js();
+
+		// Define variables.
 		wp_localize_script(
-			'convertkit-' . $this->get_name(),
+			'convertkit-js',
 			'convertkit_broadcasts',
 			array(
 				// REST API URL endpoint.
@@ -127,6 +130,7 @@ public function enqueue_scripts() {
 				'debug'    => $settings->debug_enabled(),
 			)
 		);
+
 	}
 
 	/**

includes/class-convertkit-output-restrict-content.php

@@ -1431,9 +1431,11 @@ private function get_call_to_action( $post_id ) { // phpcs:ignore Generic.CodeAn
 		// Only load scripts if the Disable Scripts option is off.
 		if ( ! $this->settings->scripts_disabled() ) {
 			// Enqueue scripts.
-			wp_enqueue_script( 'convertkit-restrict-content', CONVERTKIT_PLUGIN_URL . 'resources/frontend/js/restrict-content.js', array(), CONVERTKIT_PLUGIN_VERSION, true );
+			convertkit_enqueue_frontend_js();
+
+			// Define variables.
 			wp_localize_script(
-				'convertkit-restrict-content',
+				'convertkit-js',
 				'convertkit_restrict_content',
 				array(
 					'nonce'                         => wp_create_nonce( 'wp_rest' ),
@@ -1442,7 +1444,6 @@ private function get_call_to_action( $post_id ) { // phpcs:ignore Generic.CodeAn
 					'debug'                         => $this->settings->debug_enabled(),
 				)
 			);
-
 		}
 
 		// Output code form if this request is after the user entered their email address,

includes/class-convertkit-output.php

@@ -801,14 +801,10 @@ public function enqueue_scripts() {
 			return;
 		}
 
-		// Register scripts that we might use.
-		wp_register_script(
-			'convertkit-js',
-			CONVERTKIT_PLUGIN_URL . 'resources/frontend/js/convertkit.js',
-			array(),
-			CONVERTKIT_PLUGIN_VERSION,
-			true
-		);
+		// Enqueue frontend JS.
+		convertkit_enqueue_frontend_js();
+
+		// Define variables.
 		wp_localize_script(
 			'convertkit-js',
 			'convertkit',
@@ -820,9 +816,6 @@ public function enqueue_scripts() {
 			)
 		);
 
-		// Enqueue.
-		wp_enqueue_script( 'convertkit-js' );
-
 	}
 
 	/**

includes/functions.php

@@ -540,6 +540,23 @@ function convertkit_enqueue_frontend_css() {
 
 }
 
+/**
+ * Helper method to enqueue the frontend JS file.
+ *
+ * @since   3.2.0
+ */
+function convertkit_enqueue_frontend_js() {
+
+	wp_enqueue_script(
+		'convertkit-js',
+		CONVERTKIT_PLUGIN_URL . 'resources/frontend/js/dist/frontend.min.js',
+		array(),
+		CONVERTKIT_PLUGIN_VERSION,
+		true
+	);
+
+}
+
 /**
  * Helper method to enqueue Select2 scripts for use within the ConvertKit Plugin.
  *

package.json

@@ -5,9 +5,12 @@
     "build:css": "sass resources/frontend/scss/frontend.scss resources/frontend/css/frontend.css --no-source-map --style=compressed",
     "watch:css": "sass resources/frontend/scss/frontend.scss resources/frontend/css/frontend.css --watch --style=compressed",
     "lint:css": "wp-scripts lint-style 'resources/frontend/scss/**/*.scss' 'resources/backend/css/**/*.css' --max-warnings=0",
-    "fix:css": "wp-scripts lint-style 'resources/frontend/scss/**/*.scss' 'resources/backend/css/**/*.css' --fix",
-    "lint:js": "wp-scripts lint-js --max-warnings=0",
-    "fix:js": "wp-scripts lint-js --fix"
+    "fix:css": "prettier --write 'resources/frontend/scss/**/*.scss' && wp-scripts lint-style 'resources/frontend/scss/**/*.scss' 'resources/backend/css/**/*.css' --fix",
+    "build:js": "wp-scripts build resources/frontend/js/frontend.js --output-path=resources/frontend/js/dist --output-filename=frontend.min.js",
+    "watch:js": "wp-scripts start resources/frontend/js/frontend.js --output-path=resources/frontend/js/dist --output-filename=frontend.min.js",
+    "lint:js": "wp-scripts lint-js 'resources/frontend/js/*.js' --max-warnings=0",
+    "fix:js": "wp-scripts lint-js 'resources/frontend/js/*.js' --fix",
+    "build": "npm run build:css && npm run build:js"
   },
   "prettier": "@wordpress/prettier-config",
   "devDependencies": {