feat: new approach with scss

.github/workflows/build.yml

@@ -0,0 +1,30 @@
+name: Generate a build and push to another branch
+
+on:
+  push:
+    branches:
+      - master
+      - divi-child-new-approach
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    name: Build and Push
+    steps:
+      - name: git-checkout
+        uses: actions/checkout@v3
+
+      - name: Install all dependencies
+        run: npm install
+
+      - name: Build
+        run: npm run build # The build command of your project
+
+      - name: Push
+        uses: s0/git-publish-subdir-action@develop
+        env:
+          REPO: self
+          BRANCH: build # The branch name where you want to push the assets
+          FOLDER: build # The directory where your assets are generated
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} # GitHub will automatically add this - you don't need to bother getting a token
+          MESSAGE: "Build: ({sha}) {msg}" # The commit message

.gitignore

@@ -0,0 +1,3 @@
+node_modules/
+vendor/
+.idea/

assets/js/script.js

@@ -0,0 +1,3 @@
+/**
+ * Place your custom JS here
+ */

app/fs-divi-setup.php → class-fs-divi-setup.php

@@ -2,9 +2,20 @@
 
 class FS_Divi_Setup {
 
+	/**
+	 *
+	 * Maybe follow Understrap's directory structure and move /inc/ up out of /app/
+	 * Consider simplifying and including everything in /inc/ and using file prefixes to organize the hooks, eg: /inc/hooks-pressable.php - and then it makes sense for things that aren't exactly hooks to live in that folder
+	 * Maybe add a custom.php in /inc/ for custom functions instead of appending to functions.php
+	 * Use /assets/css/ and /assets/js/ to organize JS and CSS
+	 * Consider a SCSS style sheet that uses variables, and minifies on build process
+	 * Make sure all functions are snake_case not camelCase
+	 * Use PHPCS to validate against WordPress coding standards
+	 */
+
 	public function __construct() {
-		add_action( 'admin_enqueue_scripts', [ $this, 'enqueueAdminScripts' ] );
-		add_action( 'wp_enqueue_scripts', [ $this, 'enqueueFrontendScripts' ] );
+		add_action( 'admin_enqueue_scripts', array( $this, 'enqueueAdminScripts' ) );
+		add_action( 'wp_enqueue_scripts', array( $this, 'enqueueFrontendScripts' ) );
 
 		$this->registerHooks();
 	}
@@ -16,7 +27,7 @@ public function __construct() {
 	 * @return void
 	 */
 	public function registerHooks() {
-		$path = get_stylesheet_directory_uri() . '/app/inc/hooks/*.php';
+		$path = get_stylesheet_directory_uri() . '/inc/*.php';
 		foreach ( glob( $path ) as $file ) {
 			require_once $file;
 		}
@@ -28,9 +39,9 @@ public function enqueueAdminScripts() {
 		// get the version number of the current child theme
 		$child_version = $current_theme->get( 'Version' );
 		// we check file date of WP backend stylesheet, so we can append to version number string (for cache busting)
-		$style_cache_buster = date( "YmdHis", filemtime( get_stylesheet_directory() . '/wp-admin.css' ) );
+		$style_cache_buster = date( 'YmdHis', filemtime( get_stylesheet_directory() . '/wp-admin.css' ) );
 		// Begin enqueue for CSS file that loads in WP backend
-		wp_enqueue_style( 'fs-child-style-admin', get_stylesheet_directory_uri() . '/wp-admin.css', [], $child_version . '-' . $style_cache_buster );
+		wp_enqueue_style( 'fs-child-style-admin', get_stylesheet_directory_uri() . '/wp-admin.css', array(), $child_version . '-' . $style_cache_buster );
 	}
 
 	public function enqueueFrontendScripts() {
@@ -43,15 +54,19 @@ public function enqueueFrontendScripts() {
 		// get the version number of the current child theme
 		$child_version = $current_theme->get( 'Version' );
 		// we check file date of child stylesheet and script, so we can append to version number string (for cache busting)
-		$style_cache_buster  = date( "YmdHis", filemtime( get_stylesheet_directory() . '/style.css' ) );
-		$script_cache_buster = date( "YmdHis", filemtime( get_stylesheet_directory() . '/script.js' ) );
+		$style_cache_buster  = date( 'YmdHis', filemtime( get_stylesheet_directory() . '/style.css' ) );
+		$script_cache_buster = date( 'YmdHis', filemtime( get_stylesheet_directory() . '/script.js' ) );
 		// first we pull in the parent theme styles that it needs
-		wp_enqueue_style( $parent_handle, get_template_directory_uri() . '/style.css', [], $parent_version );
+		wp_enqueue_style( $parent_handle, get_template_directory_uri() . '/style.css', array(), $parent_version );
 		// then we get the child theme style.css file, which is dependent on the parent theme style, then append string of child version and file date
-		wp_enqueue_style( 'fs-child-style', get_stylesheet_uri(), [ $parent_handle ], $child_version . '-' . $style_cache_buster );
+		wp_enqueue_style( 'fs-child-style', get_stylesheet_uri(), array( $parent_handle ), $child_version . '-' . $style_cache_buster );
 		// will grab the script file from the child theme directory, and is reliant on jquery and the divi-custom-script (so it comes after that one)
-		wp_enqueue_script( 'fs-child-script', get_stylesheet_directory_uri() . '/script.js', [ 'jquery', 'divi-custom-script' ],
-			$child_version . '-' . $script_cache_buster, true );
+		wp_enqueue_script(
+			'fs-child-script',
+			get_stylesheet_directory_uri() . '/script.js',
+			array( 'jquery', 'divi-custom-script' ),
+			$child_version . '-' . $script_cache_buster,
+			true
+		);
 	}
-
-}
+}

composer.json

@@ -0,0 +1,18 @@
+{
+    "name": "freshysites/fs-divi-stencil",
+    "autoload": {
+    },
+    "config": {
+        "allow-plugins": {
+            "dealerdirect/phpcodesniffer-composer-installer": true
+        }
+    },
+    "require-dev": {
+        "wp-coding-standards/wpcs": "^3.0",
+        "squizlabs/php_codesniffer": "^3.7"
+    },
+    "scripts": {
+        "phpcs": "phpcs --standard=WordPress --extensions=php --ignore=vendor/*,node_modules/*,tests/* .",
+        "phpcbf": "phpcbf --standard=WordPress --extensions=php --ignore=vendor/*,node_modules/*,tests/* ."
+    }
+}