Merge pull request #229 from 10up/feature/339-filename-based-entrypoi…

…nt-for-block-specific-CSS

Add logic for block style entry points

mu-plugins/10up-plugin/package.json

@@ -15,7 +15,7 @@
     "node": ">=18.0.0"
   },
   "devDependencies": {
-    "10up-toolkit": "^6.2.0"
+    "10up-toolkit": "^6.3.0"
   },
   "dependencies": {
     "prop-types": "^15.7.2"
@@ -26,9 +26,9 @@
       "frontend": "./assets/js/frontend/frontend.js",
       "shared": "./assets/js/shared/shared.js"
     },
-	"paths": {
-		"globalStylesDir": "../../themes/10up-theme/assets/css/globals/",
-		"globalMixinsDir": "../../themes/10up-theme/assets/css/globals/mixins/"
-	}
+    "paths": {
+      "globalStylesDir": "../../themes/10up-theme/assets/css/globals/",
+      "globalMixinsDir": "../../themes/10up-theme/assets/css/globals/mixins/"
+    }
   }
 }

themes/10up-theme/assets/css/blocks/core/group.css

@@ -0,0 +1,3 @@
+.wp-block-group {
+
+}

themes/10up-theme/assets/css/blocks/readme.md

@@ -0,0 +1,7 @@
+# Block Specific Styles
+
+This directory contains block-specific styles. And file you create in this directory will be automatically included in the editor and on the front end when the block is used. The file should be named after the blocks name and be placed in a directory named after the blocks namespace.
+
+So if you have some styles you want to only load when the `core/paragraph` block is used, you would create a file at `wp-content/themes/10up-theme/assets/css/blocks/core/paragraph.css`.
+
+Similarly if you work with a block from a plugin that has a namespace of `acme`, you would create a file at `wp-content/themes/10up-theme/assets/css/blocks/acme/block-name.css`.

themes/10up-theme/assets/css/frontend/style.css

@@ -31,7 +31,3 @@
 /* Components */
 
 @import url("components/index.css");
-
-/* Gutenberg blocks */
-
-/* @import url("../blocks/index.css"); */

themes/10up-theme/includes/blocks.php

@@ -20,6 +20,7 @@ function setup() {
 	};
 
 	add_action( 'enqueue_block_editor_assets', $n( 'blocks_editor_styles' ) );
+	add_action( 'init', $n( 'enqueue_block_specific_styles' ) );
 	add_action( 'init', $n( 'register_theme_blocks' ) );
 	add_action( 'init', $n( 'register_block_pattern_categories' ) );
 }
@@ -86,6 +87,58 @@ function blocks_editor_styles() {
 	}
 }
 
+
+/**
+ * Enqueue block specific styles.
+ *
+ * This function is used to enqueue styles that are specific to a block. It
+ * first gets all the CSS files in the 'blocks/autoenqueue' directory. Then
+ * for each stylesheet, it determines the block type by removing the directory
+ * path and '.css' from the stylesheet path. It then tries to get the asset
+ * file for the block type. If the asset file doesn't exist, it creates a new
+ * one with the version set to the file modification time of the stylesheet
+ * and no dependencies. Finally, it enqueues the block style using the block
+ * type, the URL to the stylesheet, the path to the stylesheet, the version
+ * from the asset file, and the dependencies from the asset file.
+ *
+ * @return void
+ */
+function enqueue_block_specific_styles() {
+	$stylesheets = glob( TENUP_THEME_DIST_PATH . 'blocks/autoenqueue/**/*.css' );
+
+	foreach ( $stylesheets as $stylesheet_path ) {
+		$block_type = str_replace( TENUP_THEME_DIST_PATH . 'blocks/autoenqueue/', '', $stylesheet_path );
+		$block_type = str_replace( '.css', '', $block_type );
+		$asset_file = TENUP_THEME_DIST_PATH . 'blocks/autoenqueue/' . $block_type . '.asset.php';
+
+		if ( ! file_exists( $asset_file ) ) {
+			$asset_file = require $asset_file;
+		} else {
+			$asset_file = [
+				'version'      => filemtime( $stylesheet_path ),
+				'dependencies' => [],
+			];
+		}
+
+		[$block_namespace, $block_name] = explode( '/', $block_type );
+
+		wp_register_style(
+			"tenup-theme-{$block_namespace}-{$block_name}",
+			TENUP_THEME_DIST_URL . 'blocks/autoenqueue/' . $block_type . '.css',
+			$asset_file['version'],
+			$asset_file['dependencies'],
+		);
+
+		wp_enqueue_block_style(
+			$block_type,
+			[
+				'handle' => "tenup-theme-{$block_namespace}-{$block_name}",
+				'path'   => $stylesheet_path,
+			]
+		);
+	}
+}
+
 /**
  * Register block pattern categories
  *

themes/10up-theme/package.json

@@ -16,13 +16,14 @@
     "node": ">=18.0.0"
   },
   "devDependencies": {
-    "10up-toolkit": "^6.2.0"
+    "10up-toolkit": "^6.3.0"
   },
   "dependencies": {
     "modern-normalize": "^2.0.0"
   },
   "10up-toolkit": {
     "useBlockAssets": true,
+    "loadBlockSpecificStyles": true,
     "entry": {
       "admin": "./assets/js/admin/admin.js",
       "editor-style-overrides": "./assets/js/admin/editor-style-overrides.js",